/* =====================================================================
   dashboard-modern.css — Modern dashboard refresh (ADDITIVE & REVERSIBLE)
   ---------------------------------------------------------------------
   Aligns the dashboard's visual language with the Advanced Warehouse
   redesign: surface cards, indigo/violet accent, severity stripes,
   uppercase muted labels, monospace tabular numbers, refined dark mode.

   SAFE: only touches color / background / border / shadow / number font.
   It does NOT change padding / margin / layout (those are responsive-tuned
   in style.css) and it does NOT touch any id/markup/JS — so charts, data
   population, and the Display-Options section hiding all keep working.

   Loaded LAST in index.html. 100% reversible: delete this file + its <link>.
   ===================================================================== */

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

/* Dashboard ground */
.content-wrapper{ background:var(--dm-bg) !important; }

/* ---- Quick-stats → vibrant gradient KPI cards (bold, unmistakable) ---- */
.content-wrapper .stat-card{
  border:0 !important;
  border-radius:18px !important;
  box-shadow:0 10px 26px -12px rgba(20,22,43,.35) !important;
  color:#fff !important;
  position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease !important;
}
.content-wrapper .stat-card:hover{ transform:translateY(-4px) !important; box-shadow:0 18px 40px -14px rgba(20,22,43,.45) !important; }
/* Soft top sheen so the gradient reads as premium */
.content-wrapper .stat-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 46%);
}
.content-wrapper .stat-card.stat-primary{ background:linear-gradient(135deg,#7C6BFF 0%,#4736C9 100%) !important; }
.content-wrapper .stat-card.stat-success{ background:linear-gradient(135deg,#22C089 0%,#0F855C 100%) !important; }
.content-wrapper .stat-card.stat-warning{ background:linear-gradient(135deg,#FBB03B 0%,#E07C0A 100%) !important; }
.content-wrapper .stat-card.stat-info{ background:linear-gradient(135deg,#49B7F5 0%,#2E7BD0 100%) !important; }
.content-wrapper .stat-card::before{ display:none !important; }
.content-wrapper .stat-card h3, .content-wrapper .stat-card h2{
  font-family:var(--dm-mono) !important; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em !important; color:#fff !important; font-weight:700; position:relative; z-index:1;
}
.content-wrapper .stat-card h6, .content-wrapper .stat-card small, .content-wrapper .stat-info small{
  color:rgba(255,255,255,.82) !important; position:relative; z-index:1;
}
.content-wrapper .stat-icon{
  background:rgba(255,255,255,.22) !important; color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25) !important; position:relative; z-index:1;
}

/* ---- Section headers ---- */
.section-header h5{ color:var(--dm-text) !important; font-weight:700; letter-spacing:-.01em; }
.section-header h5 i{ color:var(--dm-accent) !important; background:none !important; box-shadow:none !important; }

/* ---- Quick action buttons ---- */
.quick-action-btn{
  background:var(--dm-surface) !important; border:1px solid var(--dm-border) !important;
  border-radius:var(--dm-radius) !important; color:var(--dm-text) !important; box-shadow:var(--dm-shadow) !important;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.quick-action-btn:hover{ border-color:var(--dm-accent) !important; color:var(--dm-accent-ink) !important; transform:translateY(-2px); }
.quick-action-btn i{ color:var(--dm-accent) !important; }

/* ---- Panels: charts, insight cards, focus hub, recent activities ---- */
.dashboard-chart-card,
.dashboard-insight-card,
#dashboardFocusHubSection .card,
#dashboardRecentActivitiesSection .card,
#smartInsightsSection .card,
#dashboardDraftsSection .card{
  background:var(--dm-surface) !important; border:1px solid var(--dm-border) !important;
  border-radius:var(--dm-radius) !important; box-shadow:var(--dm-shadow) !important; color:var(--dm-text) !important;
}
.dashboard-chart-card .card-header,
#dashboardRecentActivitiesSection .card-header{ background:transparent !important; border-bottom:1px solid var(--dm-border) !important; }
.dashboard-insight-value{ font-family:var(--dm-mono) !important; font-variant-numeric:tabular-nums; color:var(--dm-text) !important; }
/* ...but Top Client holds a NAME, not a figure. A Latin monospace font has no
   Arabic/Kurdish glyphs, so the browser falls back per character and gives each
   one a fixed advance — which breaks the cursive joining and renders the name
   as disconnected letters. Names use the normal UI font. */
#dashboardInsightTopClient{ font-family:inherit !important; font-variant-numeric:normal; letter-spacing:normal; }
.dashboard-insight-label, .dashboard-insight-note{ color:var(--dm-text3) !important; }
.dashboard-chart-header h6, .card-title{ color:var(--dm-text) !important; }
.dashboard-chart-header small, .dashboard-chart-card .text-muted{ color:var(--dm-text3) !important; }

/* Focus hub big numbers → monospace tabular for consistency */
#dashboardFocusHubSection .card h4,
#dashboardFocusHubSection .card .h4,
#dashboardFocusHubSection .card h3{ font-family:var(--dm-mono) !important; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* Recent-activities table: modern hover + header */
#dashboardRecentActivitiesSection thead th{ color:var(--dm-text3) !important; border-color:var(--dm-border) !important; }
#dashboardRecentActivitiesSection tbody td{ border-color:var(--dm-border) !important; }
#dashboardRecentActivitiesSection tbody tr:hover{ background:var(--dm-surface2) !important; }

/* Segmented range filter (7D / 30D / 12M) accent */
.dashboard-range-btn.active{ background:var(--dm-accent-soft) !important; color:var(--dm-accent-ink) !important; }

/* =====================================================================
   Dashboard refresh control — the "Live Dashboard" chip is a button that
   opens the per-PC refresh menu (Live / Manual / Off). It reuses
   .dashboard-chart-chip so it keeps the exact chip look in both themes;
   these rules only add the button affordances and the paused state.
   ===================================================================== */
.dashboard-refresh-control{ position:relative; }
.dashboard-refresh-chip{ border:0; cursor:pointer; font-family:inherit; }
.dashboard-refresh-chip::after{ display:none; }           /* no Bootstrap caret */
.dashboard-refresh-chip:hover{ filter:brightness(.97); }
.dashboard-refresh-chip:focus-visible{ outline:2px solid var(--dm-accent,#6366f1); outline-offset:2px; }
.dashboard-refresh-caret{ font-size:.7em; opacity:.7; }

/* Paused / manual: drop the "live" colour so the state is obvious at a glance */
.dashboard-refresh-chip.dashboard-refresh-chip-paused{
  background:rgba(120,120,135,.14); color:#6b7280;
}

.dashboard-refresh-menu{ font-size:.85rem; min-width:15rem; }
.dashboard-refresh-menu .dropdown-item{ display:flex; align-items:center; gap:.5rem; }
.dashboard-refresh-menu .dropdown-item.active{
  background:var(--dm-accent-soft,rgba(99,102,241,.12));
  color:var(--dm-accent-ink,#4338ca);
}

/* "New data — update" button shown in manual mode, in the chart header */
.dashboard-update-pill{
  border:0; cursor:pointer; font-family:inherit; margin-inline-start:.5rem;
  background:linear-gradient(135deg,#4f46e5,#3b82f6); color:#fff;
}
.dashboard-update-pill:hover{ filter:brightness(1.06); }

/* =====================================================================
   Quick-stat card totals ("Total: $504,655.11")
   The figure is the point of the card, so it is white and legible rather
   than muted grey on a saturated background. Sized just under the count
   so the hierarchy still reads count-first.
   ===================================================================== */
#dashboardQuickStatsSection .stat-card .stat-card-total,
.content-wrapper .stat-card .stat-card-total{
  display:block; margin-top:.15rem;
  color:#fff !important; opacity:.96;
  font-size:1rem; font-weight:600; letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  /* the value can be long on a narrow card — wrap rather than overflow */
  white-space:normal; overflow-wrap:anywhere;
}
@media (max-width:575.98px){
  #dashboardQuickStatsSection .stat-card .stat-card-total,
  .content-wrapper .stat-card .stat-card-total{ font-size:.9rem; }
}