/* =============================================================================
   Data-Dense theme layer.

   Source: ui-ux-pro-max skill, styles.csv -> "Data-Dense Dashboard" (BI/Analytics),
   which is the entry that matches this product. Its published token set is:
     --grid-gap:8px  --card-padding:12px  --font-size-small:12px
     --table-row-height:36px  --sidebar-width:240px  --header-height:56px
   and its checklist: sortable tables, sticky headers, loading states, KPI cards,
   efficient grid, "dense but readable" type.

   Not applied from the skill, deliberately:
   - The `--design-system` reasoning engine resolved to "Exaggerated Minimalism"
     (oversized display type, "Best For: fashion, architecture, luxury") no matter
     how the query was phrased. That is a landing-page style; it would wreck an
     operations console. The direct --domain style search returns the correct
     Data-Dense entry, so this file is built from that.
   - Its Analytics palette (#1E40AF / #D97706) and Fira Code pairing are not used:
     lead + deal status colours must stay identical to kLeadStatuses / DEAL_STAGES
     in the Flutter app (see CLAUDE.md), and those were picked against #0073EA.

   Loaded after extra.css, before responsive.css.
   ============================================================================= */

:root{
  /* ---- primitives ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px;
  --space-4:16px; --space-5:24px; --space-6:32px;

  --fs-11:11px; --fs-12:12px; --fs-13:13px;
  --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-28:28px;

  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-pill:999px;

  --dur-fast:120ms; --dur:180ms; --ease:cubic-bezier(.2,.6,.2,1);

  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 2px 8px rgba(16,24,40,.08);
  --sh-3:0 12px 32px rgba(16,24,40,.14);

  /* ---- Data-Dense component tokens (verbatim from the skill entry) ---- */
  --grid-gap:8px;
  --card-padding:12px;
  --font-size-small:12px;
  /* Skill's Data-Dense spec is 36px; raised to 44 for readability on request.
     44 is also the touch-target minimum, so table rows are now tappable. */
  --table-row-height:44px;
  --sidebar-width:240px;
  --header-height:56px;

  /* ---- semantic ---- */
  --surface:#fff;
  --surface-sunken:var(--canvas);
  --surface-header:#fafbfc;
  --focus:var(--blue);
}

/* ── SHELL ──────────────────────────────────────────────────────────────── */
.app{grid-template-rows:var(--header-height) 1fr}
.top{height:var(--header-height);padding:0 var(--space-4)}
.top__brand{font-size:var(--fs-16)}

/* Active nav gets a left rail, not just a fill — "highlight active nav item"
   (skill, ux Navigation/Active State). */
.side{padding:var(--space-2) var(--space-2) var(--space-5)}
.side__item{
  position:relative;border-radius:var(--r-sm);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.side__item.is-active{font-weight:600}
.side__item.is-active::before{
  content:"";position:absolute;left:-2px;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--blue);
}
.side__item.is-active svg{color:var(--blue)}
.side__label{font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.6px}

/* ── BOARD CHROME ───────────────────────────────────────────────────────── */
.board,.dash{padding:var(--space-3) var(--space-5) var(--space-6)}

/* The board title is deliberately NOT sticky: it would occupy top:0 in the same
   scroll container as the sticky table headers and hide them. Column headers
   are the ones worth keeping on screen. */
.bh{padding-bottom:var(--space-2)}
.bh__title{font-size:var(--fs-20);letter-spacing:-.01em}
.bh__act{
  border-radius:var(--r-sm);font-size:var(--fs-13);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}

.tabs{gap:var(--space-1);margin-bottom:var(--space-3)}
.tab{font-size:var(--fs-13);padding:var(--space-2) var(--space-3) 10px}

.toolbar{gap:var(--space-2);margin:var(--space-2) 0 var(--space-3)}
.tbtn{
  border-radius:var(--r-sm);font-size:var(--fs-13);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.tb-search,.tb-filter{height:34px;border-radius:var(--r-sm)}
.tb-search:focus-within,.tb-filter:focus-within{
  border-color:var(--focus);box-shadow:0 0 0 3px rgba(0,115,234,.12);
}

/* ── TABLES ─────────────────────────────────────────────────────────────── */
/* .dt-card was overflow:hidden purely to clip its radius, which also made it a
   scroll container and killed sticky headers. Corners are done on the cells
   instead so the header can stick to the scrolling main pane. */
.dt-card{overflow:visible;border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.dt-group{margin-bottom:var(--space-5)}
.dt-group__head{font-size:var(--fs-13);margin:var(--space-4) 2px var(--space-2)}

.dt thead th{
  position:sticky;top:0;z-index:10;
  height:38px;padding:0 var(--space-4);
  background:var(--surface-header);
  font-size:var(--fs-11);
  box-shadow:inset 0 -1px 0 var(--line);
  border-bottom:none;
}
.dt thead th:first-child{border-top-left-radius:var(--r-lg)}
.dt thead th:last-child{border-top-right-radius:var(--r-lg)}
.dt tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r-lg)}
.dt tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-lg)}
.dt tbody tr:last-child td{border-bottom:none}

.dt td{
  height:var(--table-row-height);
  padding:0 var(--space-4);
  font-size:var(--fs-13);
  /* Arabic faces carry much taller default font metrics than the Latin UI face,
     so an Arabic customer name pushed its row to 64px while Latin rows stayed
     36. Pinning line-height keeps every row the same height whatever the
     script. Still needed after the Figtree → system-font change: mac.css sets
     the row height but leaves line-height to this rule. */
  line-height:1.35;
}
.dt th{line-height:1.35}
.dt tbody tr{transition:background var(--dur-fast) var(--ease)}
.dt tbody tr:hover{background:var(--hover)}

/* The trailing Actions cell holds two 26px icon buttons plus a 5px margin each
   — 62px — inside ACT_COL's 92px column with 16px padding a side. That is 94px
   of content in 92px, and .dt's text-overflow then painted a stray "…" after
   the edit button. The cell holds buttons, not text: stop it clipping and give
   it its own tighter padding so the pair fits with room to spare. */
.dt td.acts{
  overflow:visible;
  text-overflow:clip;
  padding-left:var(--space-2);
  padding-right:var(--space-3);
}
.dt td.acts .ibtn:first-child{margin-left:0}

/* Figures line up column-wise; this was only on .num before. */
.dt .num,.kpi-card .big,.card__big,.pill-date,.dt-group__count{font-variant-numeric:tabular-nums}

/* ── CARDS + KPIs ───────────────────────────────────────────────────────── */
.card{padding:var(--space-4);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card__head{font-size:var(--fs-14);margin-bottom:var(--space-3)}
.card__big{font-size:var(--fs-28);padding:var(--space-5) var(--space-1);letter-spacing:-.02em}

.kpi-card{
  padding:var(--space-4);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.kpi-card:hover{box-shadow:var(--sh-2)}
.kpi-card .lbl{font-size:var(--font-size-small);font-weight:600;color:var(--ink-soft)}
.kpi-card .big{font-size:var(--fs-28);margin-top:var(--space-2);letter-spacing:-.02em}
.kpi-card .sub{font-size:var(--fs-12);margin-top:var(--space-1)}

.dash__grid{gap:var(--space-3)}
.chartwrap{height:220px}

/* ── STATUS / PILLS (colours untouched — they mirror the Flutter app) ───── */
.tag{border-radius:var(--r-sm);font-size:var(--fs-12);transition:box-shadow var(--dur-fast) var(--ease)}
.pillv{border-radius:var(--r-pill);font-size:var(--fs-12)}
.kcard{
  border-radius:var(--r-md);box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.kcard:hover{box-shadow:var(--sh-2)}
.kanban__col{border-radius:var(--r-lg);padding:var(--space-3)}

/* ── EMPTY STATES ───────────────────────────────────────────────────────── */
/* Was flat grey text on white. Now a bounded, obviously-intentional block.
   The mark is drawn in CSS, not an emoji (skill checklist: no emoji as icons). */
.empty-state{
  display:grid;place-items:center;gap:var(--space-2);
  padding:var(--space-6) var(--space-4);
  font-size:var(--fs-13);color:var(--ink-mute);
  background:var(--surface-sunken);
  border:1px dashed var(--line);
  border-radius:var(--r-lg);
}
.empty-state::before{
  content:"";width:26px;height:26px;border-radius:var(--r-sm);
  border:2px solid var(--line);
  box-shadow:inset 0 6px 0 -4px var(--line);
}
/* Only the full-width "nothing here" row gets the roomy treatment. `.mut` is
   also used for ordinary muted cells (an em-dash for a missing value), and
   padding those blew every row containing one from 36px to 66px. */
.dt td.mut[colspan]{text-align:center;padding:var(--space-5) var(--space-4)}
.dt td.mut{color:var(--ink-mute)}

/* ── LOADING ────────────────────────────────────────────────────────────── */
/* Indeterminate bar under the header while loadAll() runs — one hook covers
   every board (skill checklist: "Loading states for data"). */
.app__top{position:relative}
.app.is-busy .app__top::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  background-size:40% 100%;background-repeat:no-repeat;
  animation:barSlide 1.1s infinite linear;z-index:20;
}
@keyframes barSlide{
  0%{background-position:-40% 0}
  100%{background-position:140% 0}
}

/* ── FOCUS + MOTION ─────────────────────────────────────────────────────── */
button,select,input,.side__item,.tag[data-act],.kcard{outline-offset:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
button,.side__item,.tbtn,.bh__act,.tab{cursor:pointer}