/* =====================================================================
   dashboard-clickable.css — clickable + modernised dashboard
   ---------------------------------------------------------------------
   Two jobs:
     1. Make every drill-down target LOOK clickable (pointer, hover lift,
        accent border, a small corner chevron) so it is obvious what can
        be opened.
     2. Bring the dashboard's surfaces in line with the Stock Center /
        warehouse language: surface cards, indigo accent, severity
        stripes, monospace tabular numbers.

   Scoped to dashboard ids/classes and the .dd-* drill-down modal only —
   it cannot affect other screens. Layout (grid columns, sizes) is left
   alone so Chart.js canvases keep their measured boxes.

   Loaded AFTER dashboard-modern.css. Reversible: delete file + <link>.
   ===================================================================== */

:root{
  --dd-accent:#6D5EF6; --dd-accent-ink:#4736C9; --dd-accent-soft:rgba(109,94,246,.10);
  --dd-good:#0F9F6E; --dd-warn:#E8940C; --dd-crit:#E23B4E;
  --dd-surface:#FFFFFF; --dd-surface2:#F1F2F9; --dd-border:#E4E6F1;
  --dd-text:#15172B; --dd-text2:#565A76; --dd-text3:#8A8DA8;
  --dd-mono:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",Consolas,monospace;
  --dd-shadow-hover:0 10px 26px -12px rgba(20,22,43,.30);
}
body.dark-theme{
  --dd-accent:#8B7CF9; --dd-accent-ink:#C7BEFF; --dd-accent-soft:rgba(139,124,249,.14);
  --dd-good:#26C08A; --dd-warn:#F1A73A; --dd-crit:#F16173;
  --dd-surface:#141724; --dd-surface2:#1B1F30; --dd-border:#262B41;
  --dd-text:#ECEEF9; --dd-text2:#A4A8C6; --dd-text3:#6E7391;
  --dd-shadow-hover:0 14px 32px -16px rgba(0,0,0,.65);
}

/* ---------------------------------------------------------------------
   1. Clickable affordance — shared by every drill-down target
   --------------------------------------------------------------------- */
#dashboardQuickStatsSection .stat-card,
.dashboard-insight-card,
#dashboardTrendCol .dashboard-chart-card,
#dashboardStatusCol .dashboard-chart-card,
#dashboardProfitCol .dashboard-chart-card,
#dashboardTopProductsCol .dashboard-chart-card,
#dashboardLowStockCol .dashboard-chart-card,
#dashboardFocusHubSection .card{
  cursor:pointer;
  position:relative;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#dashboardQuickStatsSection .stat-card:hover,
.dashboard-insight-card:hover,
#dashboardTrendCol .dashboard-chart-card:hover,
#dashboardStatusCol .dashboard-chart-card:hover,
#dashboardProfitCol .dashboard-chart-card:hover,
#dashboardTopProductsCol .dashboard-chart-card:hover,
#dashboardLowStockCol .dashboard-chart-card:hover,
#dashboardFocusHubSection .card:hover{
  transform:translateY(-3px);
  box-shadow:var(--dd-shadow-hover) !important;
  border-color:var(--dd-accent) !important;
}

/* Corner chevron: appears on hover so the cards stay clean at rest. */
#dashboardQuickStatsSection .stat-card::after,
.dashboard-insight-card::after,
#dashboardTrendCol .dashboard-chart-card::after,
#dashboardStatusCol .dashboard-chart-card::after,
#dashboardProfitCol .dashboard-chart-card::after,
#dashboardTopProductsCol .dashboard-chart-card::after,
#dashboardLowStockCol .dashboard-chart-card::after,
#dashboardFocusHubSection .card::after{
  content:"\F135"; /* bootstrap-icons arrow-up-right */
  font-family:"bootstrap-icons";
  position:absolute; top:.55rem; inset-inline-end:.7rem;
  font-size:.72rem; line-height:1; color:var(--dd-accent);
  opacity:0; transform:translate(-2px,2px); transition:opacity .16s ease, transform .16s ease;
  pointer-events:none; z-index:2;
}
#dashboardQuickStatsSection .stat-card:hover::after,
.dashboard-insight-card:hover::after,
#dashboardTrendCol .dashboard-chart-card:hover::after,
#dashboardStatusCol .dashboard-chart-card:hover::after,
#dashboardProfitCol .dashboard-chart-card:hover::after,
#dashboardTopProductsCol .dashboard-chart-card:hover::after,
#dashboardLowStockCol .dashboard-chart-card:hover::after,
#dashboardFocusHubSection .card:hover::after{ opacity:1; transform:translate(0,0); }

/* Keyboard/tap feedback */
#dashboardQuickStatsSection .stat-card:active,
.dashboard-insight-card:active,
#dashboardFocusHubSection .card:active{ transform:translateY(-1px); }

/* Controls inside a clickable card must not inherit the pointer. */
#dashboardTopProductsCol .dashboard-chart-card button,
.dashboard-section-actions button,
.dashboard-range-filter button{ cursor:pointer; }

/* ---------------------------------------------------------------------
   2. Surface modernisation (colour/shadow/typography only — no layout)
   --------------------------------------------------------------------- */
.dashboard-insight-card{
  background:var(--dd-surface); border:1px solid var(--dd-border); border-radius:14px;
  padding:.9rem 1rem;
}
.dashboard-insight-label{
  display:block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--dd-text3); margin-bottom:.3rem;
}
.dashboard-insight-value{
  display:block; font-family:var(--dd-mono); font-variant-numeric:tabular-nums;
  font-size:1.3rem; font-weight:700; color:var(--dd-text); line-height:1.2;
}
.dashboard-insight-note{ display:block; margin-top:.2rem; font-size:.73rem; color:var(--dd-text3); }

/* Quick stat cards: severity stripe on the inline-start edge (RTL aware). */
#dashboardQuickStatsSection .stat-card{ overflow:hidden; }
#dashboardQuickStatsSection .stat-card::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; z-index:1;
}
#dashboardQuickStatsSection .stat-primary::before{ background:var(--dd-accent); }
#dashboardQuickStatsSection .stat-success::before{ background:var(--dd-good); }
#dashboardQuickStatsSection .stat-warning::before{ background:var(--dd-warn); }
#dashboardQuickStatsSection .stat-info::before{ background:var(--dd-crit); }
#dashboardQuickStatsSection .stat-info h3,
#dashboardQuickStatsSection .stat-card h3{
  font-family:var(--dd-mono); font-variant-numeric:tabular-nums; font-weight:700;
}

/* Focus Hub tiles pick up the same card treatment. */
#dashboardFocusHubSection .card{
  border:1px solid var(--dd-border) !important; border-radius:14px;
}
#dashboardFocusHubSection .card h4{
  font-family:var(--dd-mono); font-variant-numeric:tabular-nums; font-weight:700;
}
#dashboardFocusHubSection .card small{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--dd-text3);
}

/* Quick action buttons — accent lift so they read as primary actions. */
.quick-actions-buttons-grid .quick-action-btn{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.quick-actions-buttons-grid .quick-action-btn:hover{
  transform:translateY(-3px);
  border-color:var(--dd-accent);
  box-shadow:var(--dd-shadow-hover);
}

/* ---------------------------------------------------------------------
   3. Drill-down modal
   --------------------------------------------------------------------- */
.dd-wrap{ color:var(--dd-text); }
.dd-sub{
  margin-bottom:.85rem; padding:.55rem .8rem; border-radius:10px;
  background:var(--dd-accent-soft); color:var(--dd-accent-ink);
  font-size:.85rem; font-weight:600;
}
.dd-tablewrap{
  border:1px solid var(--dd-border); border-radius:12px; overflow:auto; max-height:60vh;
}
.dd-table{ width:100%; border-collapse:collapse; font-size:.87rem; }
.dd-table thead th{
  position:sticky; top:0; z-index:1; background:var(--dd-surface2); color:var(--dd-text3);
  font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding:.6rem .75rem; text-align:start; white-space:nowrap; border-bottom:1px solid var(--dd-border);
}
.dd-table tbody td{
  padding:.55rem .75rem; border-bottom:1px solid var(--dd-border);
  color:var(--dd-text); vertical-align:middle;
}
.dd-table tbody tr:last-child td{ border-bottom:0; }
.dd-table .n{ text-align:end; font-family:var(--dd-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dd-table th.n{ text-align:end; }
.dd-table tbody tr.dd-clickable{ cursor:pointer; }
.dd-table tbody tr.dd-clickable:hover{ background:var(--dd-accent-soft); }
.dd-pos{ color:var(--dd-good); font-weight:700; }
.dd-neg{ color:var(--dd-crit); font-weight:700; }

.dd-pill{
  display:inline-block; padding:.15rem .5rem; border-radius:999px;
  font-size:.7rem; font-weight:700; white-space:nowrap;
}
.dd-pill.ok{ background:rgba(15,159,110,.12); color:var(--dd-good); }
.dd-pill.warn{ background:rgba(232,148,12,.14); color:var(--dd-warn); }
.dd-pill.crit{ background:rgba(226,59,78,.12); color:var(--dd-crit); }

.dd-empty{ text-align:center; padding:2.5rem 1rem; color:var(--dd-text3); }
.dd-empty i{ font-size:2rem; display:block; margin-bottom:.5rem; opacity:.6; }
.dd-empty p{ margin:0; font-size:.9rem; }

@media (max-width:768px){
  .dd-table{ font-size:.8rem; }
  .dd-tablewrap{ max-height:55vh; }
}

/* ---------------------------------------------------------------------
   4. Recent-activity daily strip (invoices / receive / out)
   Shows one cell per calendar day with how many records were created.
   Days with none render as 0 rather than being skipped.
   --------------------------------------------------------------------- */
.knz-daystrip{
  display:flex; gap:6px; overflow-x:auto; padding:2px 0 10px;
  margin-bottom:10px; border-bottom:1px solid var(--dd-border);
}
.knz-day{
  flex:0 0 auto; min-width:46px; padding:6px 8px; border-radius:10px;
  border:1px solid var(--dd-border); background:var(--dd-surface);
  text-align:center; line-height:1.25;
}
.knz-day-label{
  display:block; font-size:.64rem; font-weight:700; letter-spacing:.04em;
  color:var(--dd-text3); white-space:nowrap;
}
.knz-day-count{
  display:block; font-family:var(--dd-mono); font-variant-numeric:tabular-nums;
  font-size:1rem; font-weight:700; color:var(--dd-text);
}
.knz-day.is-empty{ background:var(--dd-surface2); }
.knz-day.is-empty .knz-day-count{ color:var(--dd-text3); }
.knz-day.is-today{ border-color:var(--dd-accent); box-shadow:0 0 0 2px var(--dd-accent-soft); }
.knz-day.is-today .knz-day-count{ color:var(--dd-accent-ink); }