/* ============================================================================
   ByteCraft POS — /static/dashboard/dash.css
   Owner-dashboard page glue ONLY. Everything load-bearing lives in
   /static/core/tokens.css + /static/core/ui.css — this file adds the few
   dashboard-specific bits the shared sheets don't cover.
   ============================================================================ */

/* Content blocks stack with --sp-6 gaps (§2.1) */
.blocks { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }

/* Text color utilities for statement/ledger figures. The table.data variants
   out-rank `table.data td { color: ... }`, which otherwise wins the cascade
   and strips the P&L statement's negative/positive coloring. */
.c-pos, table.data td.c-pos { color: var(--pos); }
.c-neg, table.data td.c-neg { color: var(--neg); }

/* Table cell helpers */
.tdwrap { display: inline-flex; align-items: center; gap: 8px; }
.tdprod { display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); }
.itemsum { display: inline-block; max-width: 320px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
table.data td.sharecol { width: 32%; min-width: 120px; }
.keypfx { font: 600 var(--fs-xs)/1.4 ui-monospace, monospace;
  color: var(--ink-2); }

/* Card-headed tables: give the header room above the sticky thead */
.tablecard .cardhead { padding-bottom: var(--sp-3); }

/* List-row extras: pills row under the sub line, healthy-state check */
.lrow .subpills { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.lrow.flag { box-shadow: inset 3px 0 0 var(--neg); padding-left: 10px; }
.lrow .okic { display: inline-flex; color: var(--pos); flex: none; }

/* Panel header leading icon */
.cardhead .headic, .ctitle .headic { display: inline-flex; color: var(--ink-3);
  margin-right: 2px; flex: none; }

/* Donut render size: 140px desktop / 120px mobile (§4.4) */
.donutsvg { width: 140px; height: 140px; flex: none; }
@media (max-width: 767px) { .donutsvg { width: 120px; height: 120px; } }
.legend .lshare { color: var(--ink-3); min-width: 44px; text-align: right; }

/* Sidebar pinned foot: the foot already pads, the inner .snav must not.
   The label flex applies ONLY at full sidebar width — at the 768-1023 icon
   rail, ui.css hides .snav .lbl and this rule must not resurrect it. */
.sidenav .foot .snav { padding: 0; }
@media (min-width: 1024px) {
  .sidenav .foot .lbl { display: inline-flex; align-items: center; gap: 8px; }
}

/* Dialog niceties: grab handle is a phone-sheet affordance only */
@media (min-width: 768px) { #dlg .grab { display: none; } }
.dlgnote { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.dlg-body label { display: block; }

/* Skeleton table recipe spacing */
.tablecard.skelpad { padding: 16px; }
.tablecard.skelpad .skel-bar { margin: 12px 0; }

/* Calendar day-range filter (Inventory / Purchases page actions) */
.calfilter { display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 4px 8px; }
.calfilter .calic { display: inline-flex; color: var(--ink-3); flex: none; }
.calfilter .calsep { color: var(--ink-3); }
.calinput { border: 0; padding: 4px 6px; font-size: var(--fs-sm);
  color: var(--ink); background: transparent; font-family: inherit;
  color-scheme: light; min-height: 32px; }
.calinput:focus { outline: 2px solid var(--navy); outline-offset: 1px;
  border-radius: var(--r-sm); }
.btn.btn-sm { min-height: 32px; padding: 0 10px; font-size: var(--fs-sm); }

/* Paginated table footer: count · rows-per-page · numbered pager */
.pgfoot { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line); }
.pginfo { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
.pgctrls { display: inline-flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.pgsize { display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--ink-3); }
.pgsize select { min-height: 34px; padding: 5px 8px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.pgpages { display: inline-flex; align-items: center; gap: 4px; }
.pgnum { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid transparent;
  border-radius: var(--r-md); background: transparent; color: var(--ink-2);
  font: 600 var(--fs-sm) var(--font-ui); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.pgnum:hover:not(:disabled) { background: var(--navy-50); color: var(--navy); }
.pgnum.active { background: var(--navy); color: #fff; }
.pgnum:disabled { opacity: .4; cursor: default; }
.pgnum.pgarrow { color: var(--ink-3); }
.pgell { color: var(--ink-4); padding: 0 2px; }

/* Category pie (Purchases by supplier) — sized & centered like the donut */
.piesvg { width: 168px; height: 168px; flex: none; }
.donutcard .piesvg { margin: 0 auto; }
@media (max-width: 767px) { .piesvg { width: 140px; height: 140px; } }

/* Single-day picker: ◀ [📅 date] ▶ + Today/Yesterday chips */
.daypick { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.daypick .btn-icon { min-height: 36px; width: 36px; }
.daypick .calfilter { padding: 3px 10px; }
.daypick .calinput { min-height: 30px; }
.daychips { display: inline-flex; align-items: center; gap: 6px; }
.chip { min-height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  font: 600 var(--fs-sm) var(--font-ui);
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.chip:hover { background: var(--navy-50); color: var(--navy); }
.chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Growth delta sub-line on Overview KPIs */
.kpi .sub .gdelta { font-weight: 600; }
.gdelta { font-weight: 600; white-space: nowrap; }
.gdelta.pos { color: var(--pos); }
.gdelta.neg { color: var(--neg); }
.gdelta.flat, .gdelta.new { color: var(--ink-3); }

/* Product daily-sales graph (Stock & Performance): dropdown in the chart head */
.prodsel { min-height: 34px; padding: 5px 10px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font: 600 var(--fs-sm) var(--font-ui); max-width: 220px; cursor: pointer; }
.prodplot { min-height: 200px; }
.plotskel { padding: 0; }

/* Overview revenue trend card — rich header with week stepper + compare */
.trendcard { display: flex; flex-direction: column; }
.trendhead { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.trendleft { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trendhero { font-size: var(--fs-xl); font-weight: 700; color: var(--ink); }
.trendright { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.trendcmp { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  justify-content: flex-end; }
.cmpprev { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
.trendnav { padding: 2px; }
.trendnav .btn-icon { min-height: 32px; width: 32px; }
.trendbody { flex: 1; }

/* Sortable table headers (Stock summary) */
table.data th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.data th.sortable:hover { color: var(--navy); }
table.data th .sortcaret { margin-left: 4px; font-size: 0.85em; color: var(--ink-4); }
table.data th.sorted { color: var(--navy); }
table.data th.sorted .sortcaret { color: var(--navy); }

/* Cleaner data tables: quiet header band, roomier rows, soft hover */
.tablecard table.data thead th { background: var(--surface-2);
  text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-xs);
  color: var(--ink-3); font-weight: 600; padding-top: 12px; padding-bottom: 12px; }
.tablecard table.data tbody td { padding-top: 13px; padding-bottom: 13px; }
.tablecard table.data tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { .tablecard table.data tbody tr { transition: background var(--dur-1); } }

/* 3-up KPI grid (Sales day summary) */
.kpis.cols3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Live badge on the Sales summary (today only) */
.livebadge { display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font: 600 var(--fs-sm) var(--font-ui);
  color: var(--pos); background: var(--pos-bg, rgba(31,169,122,.12)); }
.livedot { width: 8px; height: 8px; border-radius: 999px; background: var(--pos);
  box-shadow: 0 0 0 0 var(--pos); animation: livepulse 1.8s ease-out infinite; }
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(31,169,122,.5); }
  70% { box-shadow: 0 0 0 7px rgba(31,169,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,169,122,0); }
}
@media (prefers-reduced-motion: reduce) { .livedot { animation: none; } }

/* Small segmented toggle (Stock in/out filter) with a count chip */
.seg.seg-sm button { min-height: 30px; padding: 4px 10px; font-size: var(--fs-xs);
  display: inline-flex; align-items: center; gap: 6px; }
.seg.seg-sm .segcount { font-size: 11px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-3); font-weight: 600; }
.seg.seg-sm button.active .segcount { background: var(--navy-50); color: var(--navy); }
.tablecard .cardhead .ht { font-weight: 600; }

/* Overview "needs attention" alert card */
.alertcard { padding: 0; }
.alertrow { display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); }
.alertrow .alertic { display: inline-flex; flex: none; }
.alertrow .alertic.warn { color: var(--warn); }
.alertrow .alertic.ok { color: var(--pos); }
.alertrow .alerttxt { flex: 1; min-width: 0; }
.alertrow .at1 { font-weight: 600; color: var(--ink); }
.alertrow .at2 { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }