/* ============================================================
   css/style.css — ZenDMS Distribution Management System
   ============================================================ */

/* ============================================
   DESIGN TOKENS
============================================ */
:root {
  /* Backgrounds */
  --c-bg:      #0d1117;
  --c-surface: #161b22;
  --c-sunken:  #0a0f17;

  /* Borders */
  --c-border:  #21262d;
  --c-border2: #30363d;

  /* Text */
  --c-text:    #e6edf3;
  --c-muted:   #8b949e;
  --c-dim:     #484f58;

  /* Brand colors */
  --c-blue:    #1f6feb;
  --c-blue-lt: #58a6ff;
  --c-green:   #3fb950;
  --c-yellow:  #e3b341;
  --c-red:     #f85149;
  --c-purple:  #bc8cff;

  /* Tinted backgrounds */
  --c-blue-bg:   #0c1f3d;
  --c-green-bg:  #1a2e1a;
  --c-yellow-bg: #2e1f0a;
  --c-red-bg:    #2e0f0f;
  --c-purple-bg: #1c0e30;

  /* Border radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;

  /* Spacing */
  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap-md: 14px;
  --gap-lg: 24px;
}

/* ============================================
   RESET & BASE
============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--text-base);
  overflow-x: hidden;
}

/* Accessibility: visible focus ring */
:focus-visible {
  outline: 2px solid var(--c-blue-lt);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* ============================================
   LAYOUT
============================================ */
.layout  { display: flex; height: 100vh; min-height: 700px; }

.sidebar {
  width: 220px;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--c-border2) transparent;
}
.sidebar::-webkit-scrollbar       { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--c-border2); border-radius: 2px; }

.main { flex: 1; overflow-y: auto; background: var(--c-bg); }

/* ============================================
   SIDEBAR
============================================ */
.logo      { display: flex; align-items: center; gap: 8px; padding: 16px 14px 8px; }
.logo-icon { width: 32px; height: 32px; background: var(--c-blue); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-text { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.3px; }
.logo-sub  { font-size: var(--text-xs); color: var(--c-muted); margin-top: 1px; }

.nav-group  { padding: 10px 10px 4px; }
.nav-label  { font-size: var(--text-xs); color: var(--c-muted); letter-spacing: .08em; text-transform: uppercase; padding: 0 6px 6px; }
.nav-item   {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-sm);
  cursor: pointer; font-size: var(--text-sm); color: var(--c-muted);
  transition: all .15s; margin-bottom: 2px;
  border: none; background: none; width: 100%; text-align: left; font-family: inherit;
}
.nav-item:hover  { background: var(--c-border); color: var(--c-text); }
.nav-item.active { background: #1f6feb22; color: var(--c-blue-lt); font-weight: 500; }
.nav-item .dot   { width: 6px; height: 6px; border-radius: 50%; background: var(--c-red); margin-left: auto; flex-shrink: 0; }
.nav-text        { flex: 1; text-align: left; }

.sidebar-footer {
  padding: 12px 10px;
  margin-top: auto;
  border-top: 1px solid var(--c-border);
}

/* ============================================
   TOPBAR
============================================ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; gap: 12px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  position: sticky; top: 0; z-index: 20;
}
.topbar-left  { display: flex; align-items: center; gap: var(--gap-md); flex: 1; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: var(--gap-sm); flex-shrink: 0; }
.topbar-title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }


.topbar-notif-btn { position: relative; }
.notif-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--c-red); border-radius: 10px;
  width: 16px; height: 16px;
  font-size: 9px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; border: 2px solid var(--c-surface);
  pointer-events: none;
}

.notif-panel {
  position: fixed; z-index: 500; width: 320px; max-width: calc(100vw - 16px);
  max-height: 70vh; overflow-y: auto;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.notif-panel-header {
  padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--c-text);
  border-bottom: 1px solid var(--c-border); position: sticky; top: 0; background: var(--c-surface);
}
/* topbar-notif-* (không dùng lại .notif-item* — tên đó đã có sẵn cho
   khối "Brief buổi sáng"/AI activity feed ở nơi khác trong index.html,
   dùng chung sẽ đè layout display:flex của khối kia lên đây, xem
   ZENDMS_ROADMAP.md Phase 24). */
.topbar-notif-item { padding: 12px 16px; border-bottom: 1px solid var(--c-border); }
.topbar-notif-item:last-child { border-bottom: none; }
.topbar-notif-title { font-size: 12px; font-weight: 600; color: var(--c-text); margin-bottom: 3px; }
.topbar-notif-msg { font-size: 12px; color: var(--c-muted); line-height: 1.5; }
.topbar-notif-meta { font-size: 10px; color: var(--c-muted); margin-top: 6px; }
.topbar-notif-empty { padding: 32px 16px; text-align: center; font-size: 12px; color: var(--c-muted); }

.topbar-user {
  display: flex; align-items: center; gap: 8px;
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 5px 10px;
  cursor: pointer; transition: border-color .15s;
}
.topbar-user:hover { border-color: var(--c-border2); }
.user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--c-blue); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.user-info   { display: flex; flex-direction: column; }
.user-name   { font-size: var(--text-sm); font-weight: 500; }
.user-role   { font-size: var(--text-xs); color: var(--c-muted); }

/* Morning brief reopen button — hidden by default, shown via JS */
.brief-reopen-btn { display: none; }
.brief-reopen-btn.visible { display: flex; }

/* ============================================
   TOPBAR BUTTON
============================================ */
.topbar-btn {
  padding: 5px 12px; border-radius: 7px;
  border: 1px solid var(--c-border2); background: none;
  color: var(--c-muted); font-size: var(--text-sm);
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 6px;
  transition: all .15s; white-space: nowrap;
}
.topbar-btn:hover { background: var(--c-border); color: var(--c-text); }
.topbar-btn.active { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.topbar-btn.active:hover { background: var(--c-blue); color: #fff; }

/* ============================================
   ROLE TABS
============================================ */
.role-tab-bar {
  display: flex; gap: var(--gap-xs); padding: 10px 20px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface); overflow-x: auto;
  scrollbar-width: none;
}
.role-tab-bar::-webkit-scrollbar { display: none; }

.role-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: var(--r-sm);
  font-size: var(--text-xs); font-weight: 500;
  cursor: pointer; border: 1px solid transparent;
  transition: all .15s; white-space: nowrap;
  background: none; font-family: inherit; color: var(--c-muted);
}
.role-tab:hover  { background: var(--c-border); color: var(--c-text); }
.role-tab.active { background: #1f6feb22; color: var(--c-blue-lt); border-color: #1f6feb44; }
.role-tab svg    { flex-shrink: 0; opacity: .7; }
.role-tab.active svg { opacity: 1; }

/* ============================================
   BADGES & CHIPS
============================================ */
.badge        { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 4px; font-size: var(--text-xs); font-weight: 500; }
.badge-green  { background: var(--c-green-bg); color: var(--c-green); }
.badge-red    { background: var(--c-red-bg);   color: var(--c-red); }
.badge-orange { background: var(--c-yellow-bg); color: var(--c-yellow); }
.badge-blue   { background: var(--c-blue-bg);  color: var(--c-blue-lt); }
.badge-purple { background: var(--c-purple-bg); color: var(--c-purple); }

.chip     { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: var(--text-xs); }
.ai-badge { background: var(--c-purple-bg); color: var(--c-purple); border: 1px solid #3b2478; padding: 2px 8px; border-radius: 4px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; white-space: nowrap; }

/* ============================================
   CONTENT AREA
============================================ */
.content { padding: 20px; display: flex; flex-direction: column; gap: var(--gap-lg); }

/* ============================================
   CARDS
============================================ */
.card        { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 16px 18px; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border); }
.card-title  { font-size: var(--text-base); font-weight: 700; display: flex; align-items: center; gap: 7px; letter-spacing: -.1px; }
.card-link   { font-size: var(--text-xs); color: var(--c-blue-lt); cursor: pointer; text-decoration: none; border: none; background: none; font-family: inherit; white-space: nowrap; }
.card-subtitle { font-size: var(--text-xs); color: var(--c-green); margin-top: 2px; }

.card-select {
  background: var(--c-bg); border: 1px solid var(--c-border);
  color: var(--c-muted); border-radius: var(--r-sm);
  padding: 3px 8px; font-size: var(--text-xs);
  cursor: pointer; font-family: inherit;
}
.card-select:hover { border-color: var(--c-border2); }

/* ============================================
   CHART CONTAINERS
============================================ */
.chart-box     { position: relative; }
.chart-box--lg { height: 210px; }
.chart-box--md { height: 110px; }
.chart-box--sm { height: 90px; }

/* ============================================
   KPI GRID
============================================ */
.kpi-grid   { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap-sm); }
.kpi-row    { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-sm); margin-bottom: var(--gap-md); }
.kpi        { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 16px 18px; transition: border-color .2s; }
.kpi--action { cursor: pointer; }
.kpi--action:hover { border-color: var(--c-border2); }

/* Chế độ "Tuỳ chỉnh" (Phase 25) — kéo-thả sắp xếp lại KPI tile trong
   từng nhóm, xem toggleDmsCustomizeMode()/js/dms-overview.js */
.kpi--draggable { position: relative; cursor: grab; padding-left: 30px; border-style: dashed; }
.kpi--draggable:active { cursor: grabbing; }
.kpi--dragging { opacity: .4; }
.kpi-drag-handle {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  color: var(--c-dim); font-size: 14px; line-height: 1; user-select: none;
}

/* Top accent colors */
.kpi--blue   { border-top: 3px solid var(--c-blue); }
.kpi--green  { border-top: 3px solid var(--c-green); }
.kpi--yellow { border-top: 3px solid var(--c-yellow); }
.kpi--red    { border-top: 3px solid var(--c-red); }
.kpi--purple { border-top: 3px solid var(--c-purple); }

.kpi-label    { font-size: 11px; font-weight: 500; color: var(--c-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.kpi-value    { font-size: 26px; font-weight: 700; letter-spacing: -.6px; line-height: 1; }
.kpi-value--fit { font-size: clamp(18px, 1.6vw, 26px); padding-top: 3px; letter-spacing: -.4px; font-weight: 700; }
.kpi-sub      { font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--c-muted); }
.kpi-up       { color: var(--c-green); }
.kpi-warn     { color: var(--c-yellow); }
.kpi-danger   { color: var(--c-red); }
.kpi-link     { color: var(--c-blue-lt); }
.kpi-purple   { color: var(--c-purple); }

/* ============================================
   GRID LAYOUTS
============================================ */
.mid-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; }
.bot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ai-row   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* ============================================
   DONUT CHART
============================================ */
.donut-wrap   { display: flex; align-items: center; gap: 14px; }
.donut-canvas { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.donut-legend { flex: 1; }
.legend-row   { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--c-border); }
.legend-row:last-child { border-bottom: none; }
.legend-label { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); }
.legend-dot   { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.legend-count { font-size: var(--text-xs); display: flex; align-items: center; gap: 4px; }
.legend-action { color: var(--c-red); }
.legend-pct    { color: var(--c-muted); }

/* ============================================
   AI INSIGHT CARDS
============================================ */
.ai-card       { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 14px; transition: border-color .2s; cursor: pointer; }
.ai-card:hover { border-color: var(--c-border2); }
.ai-card-title { font-size: var(--text-sm); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ai-card-body  { font-size: var(--text-xs); color: var(--c-muted); line-height: 1.5; margin-bottom: 10px; }
.ai-cta        { font-size: var(--text-xs); font-weight: 500; padding: 5px 10px; border-radius: var(--r-sm); border: none; cursor: pointer; font-family: inherit; transition: opacity .15s; }
.ai-cta:hover  { opacity: .8; }

/* ============================================
   NOTIFICATIONS
============================================ */
.notif-item          { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--c-border); align-items: flex-start; }
.notif-item:last-child { border-bottom: none; }
.notif-icon          { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-icon--red     { background: var(--c-red-bg); }
.notif-icon--yellow  { background: var(--c-yellow-bg); }
.notif-icon--blue    { background: var(--c-blue-bg); }
.notif-icon--green   { background: var(--c-green-bg); }
.notif-body          { flex: 1; min-width: 0; }
.notif-text          { font-size: var(--text-sm); color: var(--c-text); line-height: 1.4; }
.notif-time          { font-size: var(--text-xs); color: var(--c-muted); margin-top: 2px; }
.notif-action-link   { cursor: pointer; transition: opacity .15s; }
.notif-action-link:hover { opacity: .8; text-decoration: underline; }

/* ============================================
   BAR COMPONENTS
============================================ */
.bar-track { flex: 1; height: 5px; background: var(--c-border); border-radius: 3px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 3px; transition: width .6s; }

/* ============================================
   SECTION HEADER
============================================ */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section-title  { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); font-weight: 600; }
.section-note   { font-size: var(--text-xs); color: var(--c-muted); font-weight: 400; }

/* ============================================
   PULSE DOT
============================================ */
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-green); display: inline-block; animation: pulse 2s infinite; }

/* ============================================
   MORNING BRIEF
============================================ */
.morning-brief {
  background: linear-gradient(135deg, #0f1c2e 0%, #161b22 50%, #1a0f2e 100%);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-purple);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; position: relative; overflow: hidden;
  animation: briefFade .4s ease;
}
.morning-brief.brief--hidden { display: none; }
.morning-brief::before {
  content: '';
  position: absolute; top: -40px; right: 60px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(188,140,255,.07) 0%, transparent 70%);
  pointer-events: none;
}
.brief-greeting      { font-size: var(--text-lg); font-weight: 700; color: var(--c-text); margin-bottom: 2px; }
.brief-sub           { font-size: var(--text-xs); color: var(--c-muted); }
.brief-stats         { display: flex; gap: 20px; flex-shrink: 0; }
.brief-stat          { text-align: center; }
.brief-stat-val      { font-size: 16px; font-weight: 700; line-height: 1; }
.brief-stat-label    { font-size: var(--text-xs); color: var(--c-muted); margin-top: 2px; }
.brief-actions       { display: flex; flex-direction: column; gap: 5px; min-width: 220px; }
.brief-actions-label { font-size: var(--text-xs); color: var(--c-muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .06em; }
.brief-action-item   { display: flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--c-muted); cursor: pointer; padding: 3px 0; transition: color .15s; border: none; background: none; font-family: inherit; text-align: left; width: 100%; }
.brief-action-item:hover { color: var(--c-text); }
.brief-action-num    { width: 16px; height: 16px; border-radius: 4px; background: var(--c-border); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--c-muted); flex-shrink: 0; }
.brief-close         { background: none; border: none; color: var(--c-dim); cursor: pointer; font-size: 16px; padding: 4px; line-height: 1; flex-shrink: 0; }
.brief-close:hover   { color: var(--c-muted); }

/* ============================================
   AI ACTION CENTER
============================================ */
.action-center {
  background: var(--c-bg);
  border: 1px solid #1f6feb44;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.action-center-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  background: linear-gradient(90deg, #0c1f3d 0%, var(--c-bg) 100%);
  border-bottom: 1px solid var(--c-border);
}
.action-center-title { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); font-weight: 700; color: var(--c-blue-lt); flex-wrap: wrap; }
.action-center-note  { font-size: var(--text-xs); color: var(--c-muted); font-weight: 400; }
.action-counter      { display: flex; align-items: center; gap: 6px; }

/* Live indicator — green to signal "live", not red (alert) */
.action-dot-pulse    { width: 6px; height: 6px; border-radius: 50%; background: var(--c-green); animation: pulse 2s infinite; }

.action-cards-row    { display: grid; grid-template-columns: repeat(3, 1fr); }
.action-card         {
  padding: 14px 16px;
  border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column; gap: 8px;
  transition: background .15s; cursor: pointer;
}
.action-card:last-child { border-right: none; }
.action-card:hover   { background: var(--c-surface); }

/* Priority-based top accent — critical cards visually stand out */
.action-card--high { border-top: 3px solid var(--c-red); }
.action-card--med  { border-top: 3px solid var(--c-yellow); }
.action-card--low  { border-top: 3px solid var(--c-blue-lt); }

.action-row-divider  { border-top: 1px solid var(--c-border); }

.action-card-top        { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.action-priority        { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 7px; border-radius: 3px; flex-shrink: 0; }
.priority-high          { background: #2e0f0f; color: var(--c-red); border: 1px solid #f8514922; }
.priority-med           { background: var(--c-yellow-bg); color: var(--c-yellow); border: 1px solid #e3b34122; }
.priority-low           { background: var(--c-blue-bg); color: var(--c-blue-lt); border: 1px solid #58a6ff22; }
.action-card-msg        { font-size: var(--text-sm); color: var(--c-text); line-height: 1.5; font-weight: 500; }
.action-card-suggestion { display: none; }
.action-card-suggestion span { color: var(--c-purple); font-weight: 500; }
.action-card-footer     { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.action-card-meta       { font-size: var(--text-xs); color: var(--c-dim); }
.action-ts              { font-size: var(--text-xs); color: var(--c-dim); white-space: nowrap; }

.action-btn       { padding: 4px 12px; border-radius: var(--r-sm); border: none; cursor: pointer; font-size: var(--text-xs); font-weight: 600; font-family: inherit; transition: opacity .15s; white-space: nowrap; }
.action-btn:hover { opacity: .8; }
.action-btn-high  { background: #f8514920; color: var(--c-red); border: 1px solid #f8514940; }
.action-btn-med   { background: #e3b34120; color: var(--c-yellow); border: 1px solid #e3b34140; }
.action-btn-low   { background: #58a6ff20; color: var(--c-blue-lt); border: 1px solid #58a6ff40; }

/* ============================================
   INVENTORY RISK FORECAST
============================================ */
.inv-risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.inv-risk-card {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 13px;
  transition: border-color .2s; cursor: pointer;
}
.inv-risk-card:hover  { border-color: var(--c-border2); }
.inv-risk-card.risk-high { border-left: 3px solid var(--c-red); }
.inv-risk-card.risk-med  { border-left: 3px solid var(--c-yellow); }
.inv-risk-card.risk-ok   { border-left: 3px solid var(--c-green); }

.inv-wh-name     { font-size: var(--text-sm); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.inv-risk-badge  { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 3px; letter-spacing: .05em; }
.risk-badge-high { background: #2e0f0f; color: var(--c-red); }
.risk-badge-med  { background: var(--c-yellow-bg); color: var(--c-yellow); }
.risk-badge-ok   { background: var(--c-green-bg); color: var(--c-green); }

.inv-metric       { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.inv-metric-label { font-size: var(--text-xs); color: var(--c-muted); }
.inv-metric-val   { font-size: var(--text-base); font-weight: 600; }
.inv-bar-track    { height: 4px; background: var(--c-border); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.inv-bar-fill     { height: 100%; border-radius: 2px; transition: width .6s; }
.inv-suggestion   { font-size: var(--text-xs); color: var(--c-muted); padding: 7px 10px; background: var(--c-sunken); border-radius: var(--r-sm); border: 1px solid #1a1f27; line-height: 1.4; margin-top: 6px; }
.inv-suggestion strong { color: var(--c-purple); }
.inv-action-row   { display: flex; gap: 6px; margin-top: 8px; }
.inv-action-btn   { flex: 1; padding: 5px; border-radius: var(--r-sm); border: none; cursor: pointer; font-size: var(--text-xs); font-weight: 600; font-family: inherit; transition: opacity .15s; text-align: center; }
.inv-action-btn:hover { opacity: .8; }

/* ============================================
   DISPATCH FORECAST
============================================ */
.dispatch-grid       { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.dispatch-stat       { background: var(--c-bg); border-radius: var(--r-md); padding: 10px 12px; border: 1px solid var(--c-border); }
.dispatch-stat-label { font-size: var(--text-xs); color: var(--c-muted); margin-bottom: 4px; }
.dispatch-stat-val   { font-size: 18px; font-weight: 700; line-height: 1; }
.dispatch-risk-bar   { background: var(--c-bg); border-radius: var(--r-md); padding: 12px; border: 1px solid var(--c-border); margin-bottom: 10px; }
.dispatch-risk-title { font-size: var(--text-xs); color: var(--c-muted); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.driver-row          { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: var(--text-xs); }
.driver-dot          { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dispatch-recommend  { background: #1a0f0f; border: 1px solid #f8514928; border-radius: var(--r-md); padding: 10px 12px; }
.dispatch-recommend-label { font-size: var(--text-xs); color: var(--c-red); font-weight: 600; letter-spacing: .05em; margin-bottom: 5px; }
.dispatch-recommend-text  { font-size: var(--text-sm); color: var(--c-text); line-height: 1.5; }
.dispatch-actions    { display: flex; gap: 7px; margin-top: 10px; }

/* ============================================
   ORDER APPROVAL SCORING
============================================ */
.approval-item          { padding: 10px 0; border-bottom: 1px solid var(--c-border); }
.approval-item:last-child { border-bottom: none; }
.approval-top-row       { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.approval-id            { font-size: var(--text-xs); color: var(--c-blue-lt); font-weight: 700; min-width: 68px; }
.approval-name          { font-size: var(--text-sm); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-score-badge   { display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.score-high  { background: var(--c-green-bg); color: var(--c-green); }
.score-med   { background: var(--c-yellow-bg); color: var(--c-yellow); }
.score-low   { background: var(--c-red-bg); color: var(--c-red); }

.approval-checks     { display: flex; gap: 6px; flex-wrap: wrap; }
.check-pill  { display: flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 3px; font-size: var(--text-xs); font-weight: 500; }
.check-pass  { background: var(--c-green-bg); color: var(--c-green); }
.check-fail  { background: var(--c-red-bg); color: var(--c-red); }
.check-warn  { background: var(--c-yellow-bg); color: var(--c-yellow); }

.approval-action-row  { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.approval-action-btns { display: flex; gap: 5px; }
.approve-btn          { padding: 3px 10px; border-radius: 5px; border: none; cursor: pointer; font-size: var(--text-xs); font-weight: 600; font-family: inherit; transition: opacity .15s; }
.approve-btn:hover    { opacity: .8; }
.approve-btn-green    { background: var(--c-green-bg); color: var(--c-green); }
.approve-btn-ok       { background: var(--c-green-bg); color: var(--c-green); }
.approve-btn-red      { background: #2e1515; color: var(--c-red); }
.approve-btn-reject   { background: #2e1515; color: var(--c-red); }
.approve-btn-warn     { background: var(--c-yellow-bg); color: var(--c-yellow); }
.approve-btn-blue     { background: #1a2a3a; color: #58a6ff; }
.approve-btn-neutral  { background: var(--c-border); color: var(--c-muted); }
.approve-btn-upsell   { background: var(--c-border); color: var(--c-purple); border: 1px solid #3b2478; }
.verdict-approve { color: var(--c-green); font-weight: 700; font-size: var(--text-xs); }
.verdict-review  { color: var(--c-yellow); font-weight: 700; font-size: var(--text-xs); }
.verdict-hold    { color: var(--c-red); font-weight: 700; font-size: var(--text-xs); }

/* ============================================
   MISA SYNC
============================================ */
.misa-row        { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.misa-stat       { background: var(--c-bg); border-radius: var(--r-md); padding: 12px; border: 1px solid var(--c-border); }
.misa-stat-label { font-size: var(--text-xs); color: var(--c-muted); margin-bottom: 4px; }
.misa-stat-status { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.misa-stat-dot   { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.misa-dot-ok     { background: var(--c-green); }
.misa-status-text { font-size: var(--text-sm); font-weight: 600; color: var(--c-green); }
.misa-stat-val   { font-size: 18px; font-weight: 700; }
.misa-stat-rate  { font-size: var(--text-base); font-weight: 600; color: var(--c-green); }
.misa-meta       { font-size: var(--text-xs); color: var(--c-muted); margin-top: 3px; }
.misa-queue      { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: var(--text-sm); border-bottom: 1px solid var(--c-border); }
.misa-queue:last-of-type { border-bottom: none; }
.misa-queue--warn { cursor: pointer; }
.misa-queue-label { color: var(--c-muted); }
.misa-queue-warn  { color: var(--c-yellow); font-weight: 500; }
.misa-auto        { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-border); }
.misa-auto-label  { font-size: var(--text-xs); color: var(--c-muted); margin-bottom: 6px; }
.misa-auto-row    { display: flex; justify-content: space-between; font-size: var(--text-xs); margin-bottom: 4px; }
.misa-auto-key    { color: var(--c-muted); }
.misa-auto-val    { color: var(--c-green); }
.misa-sync-btn    { margin-top: 10px; }

/* Live indicator */
.live-indicator   { display: flex; align-items: center; gap: 5px; }
.live-text        { font-size: var(--text-xs); color: var(--c-green); }

/* ============================================
   QUICK PROMPTS
============================================ */
.quick-prompts-list { display: flex; flex-direction: column; gap: 7px; }
.quick-prompt-btn {
  padding: 8px 12px; background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  color: var(--c-muted); font-size: var(--text-sm);
  cursor: pointer; text-align: left; font-family: inherit;
  transition: all .15s; width: 100%;
}
.quick-prompt-btn:hover { border-color: var(--c-border2); color: var(--c-text); }

/* ============================================
   AI COPILOT FLOATING
============================================ */
.copilot-fab     { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.copilot-trigger { display: flex; align-items: center; gap: 8px; }

.copilot-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-blue), #7c3aed);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(31,111,235,.4);
  transition: transform .2s, box-shadow .2s;
  flex-shrink: 0;
}
.copilot-btn:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(31,111,235,.5); }

.copilot-btn-label {
  background: var(--c-blue); color: #fff;
  font-size: var(--text-xs); font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-sm);
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}

.copilot-panel {
  width: 360px; background: var(--c-surface);
  border: 1px solid var(--c-border2); border-radius: var(--r-xl);
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  display: none; flex-direction: column; max-height: 500px;
  animation: panelIn .2s ease;
}
.copilot-panel.open   { display: flex; }

.copilot-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--c-border); }
.copilot-panel-title  { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); font-weight: 600; }
.copilot-panel-icon   { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--c-blue), #7c3aed); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.copilot-status       { font-size: var(--text-xs); color: var(--c-green); font-weight: 400; }
.copilot-panel-close  { background: none; border: none; color: var(--c-muted); cursor: pointer; font-size: 18px; line-height: 1; }
.copilot-panel-close:hover { color: var(--c-text); }

.copilot-msgs  { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--c-border2) transparent; }
.copilot-msg   { max-width: 90%; padding: 8px 12px; border-radius: 8px; font-size: var(--text-sm); line-height: 1.5; }
.copilot-msg-user { background: var(--c-blue); color: #fff; align-self: flex-end; border-radius: 8px 8px 2px 8px; }
.copilot-msg-ai   { background: var(--c-border); color: var(--c-text); align-self: flex-start; border-radius: 8px 8px 8px 2px; }
.copilot-msg-ai .msg-label { font-size: var(--text-xs); color: var(--c-purple); font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }

.copilot-quick     { padding: 8px 14px; border-top: 1px solid var(--c-border); display: flex; flex-wrap: wrap; gap: 5px; }
.copilot-quick-btn { padding: 3px 9px; border-radius: 5px; border: 1px solid var(--c-border2); background: none; color: var(--c-muted); font-size: var(--text-xs); cursor: pointer; font-family: inherit; transition: all .15s; }
.copilot-quick-btn:hover { background: var(--c-border); color: var(--c-text); border-color: var(--c-blue-lt); }

.copilot-input-row { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--c-border); }
.copilot-input     { flex: 1; background: var(--c-bg); border: 1px solid var(--c-border2); border-radius: var(--r-md); padding: 8px 10px; color: var(--c-text); font-size: var(--text-sm); font-family: inherit; outline: none; resize: none; }
.copilot-input:focus { border-color: var(--c-blue-lt); }
.copilot-send      { padding: 8px 12px; border-radius: var(--r-md); border: none; background: var(--c-blue); color: #fff; cursor: pointer; font-size: var(--text-sm); font-weight: 600; font-family: inherit; transition: opacity .15s; }
.copilot-send:hover { opacity: .85; }

.copilot-thinking     { display: flex; gap: 4px; align-items: center; padding: 2px 0; }
.copilot-thinking span { width: 5px; height: 5px; border-radius: 50%; background: var(--c-muted); animation: thinking 1.2s infinite; }
.copilot-thinking span:nth-child(2) { animation-delay: .2s; }
.copilot-thinking span:nth-child(3) { animation-delay: .4s; }

/* ============================================
   ANIMATIONS
============================================ */
@keyframes briefFade { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes panelIn   { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pulse     { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes thinking  { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes fadeIn    { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes skeleton  { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.fade-in  { animation: fadeIn .3s ease; }
.skeleton { background: linear-gradient(90deg, #21262d 25%, #2d333b 50%, #21262d 75%); background-size: 200% 100%; animation: skeleton .8s infinite; border-radius: 4px; }
[data-theme="light"] .skeleton { background: linear-gradient(90deg, #e8ebf0 25%, #f0f2f5 50%, #e8ebf0 75%); background-size: 200% 100%; }

/* ============================================
   PAGE HEADER
============================================ */
.page-header   { margin-bottom: 4px; }
.page-title    { font-size: 22px; font-weight: 700; color: var(--c-text); letter-spacing: -.4px; margin-bottom: 5px; line-height: 1.2; }
.page-subtitle { font-size: 13px; color: var(--c-muted); line-height: 1.5; }

/* ============================================
   FORMS
============================================ */
.form-section-title { font-size: 11px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }
.form-group  { margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }
.form-label  { display: block; font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; font-weight: 600; }
.form-input  { width: 100%; background: var(--c-bg); border: 1px solid var(--c-border2); border-radius: var(--r-md); padding: 8px 12px; color: var(--c-text); font-size: var(--text-sm); font-family: inherit; outline: none; transition: border-color .15s; }
.form-input:focus { border-color: var(--c-blue-lt); }
textarea.form-input { resize: vertical; }
select.form-input { cursor: pointer; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-submit { padding: 9px 20px; border-radius: var(--r-md); background: var(--c-blue); color: #fff; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity .15s; }
.form-submit:hover { opacity: .85; }

/* Product cards (create order) */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.product-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 12px; cursor: pointer; transition: border-color .15s; }
.product-card:hover { border-color: var(--c-border2); }
.product-card.selected { border-color: var(--c-blue-lt); background: var(--c-blue-bg); }
.product-name  { font-size: var(--text-base); font-weight: 600; margin-bottom: 4px; }
.product-price { font-size: var(--text-xs); color: var(--c-green); }
.product-qty   { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.qty-btn { width: 24px; height: 24px; border-radius: 4px; background: var(--c-border2); border: none; color: var(--c-text); cursor: pointer; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
.qty-btn:hover { background: var(--c-blue); }

/* AI credit check */
.ai-check-result { padding: 10px 14px; border-radius: var(--r-md); margin-top: 8px; line-height: 1.4; }
.ai-check-pass { background: var(--c-green-bg); border: 1px solid #3fb95040; }
.ai-check-warn { background: var(--c-yellow-bg); border: 1px solid #e3b34140; }
.ai-check-fail { background: var(--c-red-bg);   border: 1px solid #f8514940; }

/* ============================================
   FILTER TABS & SEARCH
============================================ */
.filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-tab { padding: 5px 13px; border-radius: var(--r-sm); font-size: var(--text-xs); font-weight: 500; cursor: pointer; border: 1px solid var(--c-border); background: none; color: var(--c-muted); font-family: inherit; transition: all .15s; white-space: nowrap; }
.filter-tab:hover { background: var(--c-border); color: var(--c-text); }
.filter-tab.active { background: var(--c-blue-bg); color: var(--c-blue-lt); border-color: #1f6feb66; }

.search-row  { display: flex; gap: 8px; align-items: center; }
.search-input { flex: 1; background: var(--c-bg); border: 1px solid var(--c-border2); border-radius: var(--r-md); padding: 7px 12px; color: var(--c-text); font-size: var(--text-sm); font-family: inherit; outline: none; min-width: 0; }
.search-input:focus { border-color: var(--c-blue-lt); }

/* ============================================
   REPORT PAGE
============================================ */
.report-meta-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.report-period-btn { padding: 5px 12px; border-radius: var(--r-sm); font-size: var(--text-xs); font-weight: 500; cursor: pointer; border: 1px solid var(--c-border); background: none; color: var(--c-muted); font-family: inherit; transition: all .15s; }
.report-period-btn:hover { background: var(--c-border); color: var(--c-text); }
.report-period-btn.active { background: var(--c-blue-bg); color: var(--c-blue-lt); border-color: #1f6feb66; }
.report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.report-stat { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 14px; }
.report-stat-label { font-size: 10px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.report-stat-val { font-size: 20px; font-weight: 700; margin-bottom: 3px; }
.report-stat-sub { font-size: var(--text-xs); color: var(--c-muted); }

/* ============================================
   VEHICLE FORECAST CALENDAR
============================================ */
.week-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 8px; min-height: 100px; }
.cal-day.cal-today { border-color: var(--c-blue-lt); background: var(--c-blue-bg); }
.cal-day.cal-past  { opacity: .55; }
.cal-day-header { display: flex; flex-direction: column; margin-bottom: 6px; }
.cal-day-name { font-size: 9px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; }
.cal-day-date { font-size: 15px; font-weight: 700; line-height: 1.2; }
.cal-event { font-size: 10px; padding: 2px 5px; border-radius: 3px; margin-bottom: 2px; display: block; }
.cal-event-green  { background: var(--c-green-bg); color: var(--c-green); }
.cal-event-red    { background: var(--c-red-bg); color: var(--c-red); }
.cal-event-yellow { background: var(--c-yellow-bg); color: var(--c-yellow); }
.cal-event-blue   { background: var(--c-blue-bg); color: var(--c-blue-lt); }

/* ============================================
   DATA TABLES
============================================ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .07em; padding: 9px 12px; border-bottom: 2px solid var(--c-border); text-align: left; white-space: nowrap; font-weight: 600; background: var(--c-sunken); }
.data-table td { font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--c-border); color: var(--c-text); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) td { background: rgba(128,128,128,.03); }
.data-table tbody tr:hover td { background: rgba(31,111,235,.06) !important; }

/* Status pills */
.status-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.status-pending   { background: var(--c-yellow-bg); color: var(--c-yellow); }
.status-approved  { background: var(--c-green-bg); color: var(--c-green); }
.status-delivering { background: var(--c-blue-bg); color: var(--c-blue-lt); }
.status-overdue   { background: var(--c-red-bg); color: var(--c-red); }
.status-completed { background: #21262d; color: var(--c-muted); }
.status-exception { background: var(--c-red-bg); color: var(--c-red); }

/* Debt row highlight */
.debt-row-overdue td { background: rgba(46, 15, 15, 0.4); }
.debt-row-overdue:hover td { background: rgba(46, 15, 15, 0.7) !important; }

/* ============================================
   LIGHT THEME — Zenmoat-inspired
   Sidebar: dark navy  |  Content: soft blue-white
============================================ */

/* ── CSS variables ────────────────────────────────────────── */
[data-theme="light"] {
  --c-bg:         #f4f6fb;
  --c-surface:    #ffffff;
  --c-sunken:     #edf0f7;
  --c-border:     #dde3ee;
  --c-border2:    #c4cde0;
  --c-text:       #111827;
  --c-muted:      #4b5a6e;
  --c-dim:        #8b99b0;

  /* Brand */
  --c-blue:       #2563eb;
  --c-blue-lt:    #3b82f6;
  --c-green:      #059669;
  --c-yellow:     #d97706;
  --c-red:        #dc2626;
  --c-purple:     #7c3aed;

  /* Tinted badges */
  --c-blue-bg:    #eff6ff;
  --c-green-bg:   #ecfdf5;
  --c-yellow-bg:  #fffbeb;
  --c-red-bg:     #fef2f2;
  --c-purple-bg:  #f5f3ff;

  color-scheme: light;
}

/* ── Sidebar: Zenmoat dark-navy ─────────────────────────────── */
[data-theme="light"] .sidebar {
  background: #1a2238;
  border-right: none;
  box-shadow: 2px 0 8px rgba(0,0,0,.18);
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
[data-theme="light"] .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15) !important; }

[data-theme="light"] .logo-text { color: #ffffff; }
[data-theme="light"] .logo-sub  { color: rgba(255,255,255,.5); }
[data-theme="light"] .logo-icon { background: #2563eb; }

[data-theme="light"] .nav-label { color: rgba(255,255,255,.38); }

[data-theme="light"] .nav-item  { color: rgba(255,255,255,.68); }
[data-theme="light"] .nav-item:hover {
  background: rgba(255,255,255,.1);
  color: #ffffff;
}
[data-theme="light"] .nav-item.active {
  background: rgba(255,255,255,.16);
  color: #ffffff;
  font-weight: 600;
  border-left: 3px solid #60a5fa;
  padding-left: 7px;
}
[data-theme="light"] .nav-item .dot { background: #f87171; border: none; }

[data-theme="light"] .sidebar-footer {
  border-top-color: rgba(255,255,255,.12);
}
[data-theme="light"] .sidebar-footer .nav-item { color: rgba(255,255,255,.55); }
[data-theme="light"] .sidebar-footer .nav-item:hover { color: #fff; }

/* ── Topbar ─────────────────────────────────────────────────── */
[data-theme="light"] .topbar {
  background: #ffffff;
  border-bottom: 1px solid #e2e6ed;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .topbar-user {
  background: #f4f6f9;
  border-color: #dde1e9;
}
[data-theme="light"] .user-avatar { background: #5b21b6; }

[data-theme="light"] .topbar-btn {
  border-color: #dde1e9;
  color: #64748b;
  background: #f4f6f9;
}
[data-theme="light"] .topbar-btn:hover { background: #eaecf2; border-color: #c8cdd6; color: #1c1f23; }

/* ── Role tabs ──────────────────────────────────────────────── */
[data-theme="light"] .role-tab-bar {
  background: #ffffff;
  border-bottom-color: #e2e6ed;
}
[data-theme="light"] .role-tab { color: #64748b; }
[data-theme="light"] .role-tab:hover { background: #f0f2f5; color: #1c1f23; }
[data-theme="light"] .role-tab.active {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #c4b5fd;
}

/* ── Cards ──────────────────────────────────────────────────── */
[data-theme="light"] .card {
  background: #ffffff;
  border-color: #e2e6ed;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.03);
}
[data-theme="light"] .card-link { color: #2563eb; }
[data-theme="light"] .card-select {
  background: #f4f6f9;
  border-color: #dde1e9;
  color: #64748b;
}

/* ── KPI boxes ──────────────────────────────────────────────── */
[data-theme="light"] .kpi {
  background: #ffffff;
  border-color: #e2e6ed;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
[data-theme="light"] .kpi--blue   { border-top-color: #2563eb; }
[data-theme="light"] .kpi--green  { border-top-color: #059669; }
[data-theme="light"] .kpi--yellow { border-top-color: #d97706; }
[data-theme="light"] .kpi--red    { border-top-color: #dc2626; }
[data-theme="light"] .kpi--purple { border-top-color: #7c3aed; }

/* ── AI cards ───────────────────────────────────────────────── */
[data-theme="light"] .ai-card {
  background: #ffffff;
  border-color: #e2e6ed;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
[data-theme="light"] .ai-card:hover { border-color: #c4b5fd; box-shadow: 0 2px 8px rgba(91,33,182,.1); }

/* ── Morning brief ──────────────────────────────────────────── */
[data-theme="light"] .morning-brief {
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 60%, #faf5ff 100%);
  border-color: #c4b5fd;
  border-left-color: #7c3aed;
}
[data-theme="light"] .morning-brief::before {
  background: radial-gradient(circle, rgba(124,58,237,.08) 0%, transparent 70%);
}
[data-theme="light"] .brief-greeting { color: #1c1f23; }

/* ── Action center ──────────────────────────────────────────── */
[data-theme="light"] .action-center {
  background: #ffffff;
  border-color: #bfdbfe;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .action-center-header {
  background: linear-gradient(90deg, #eff6ff 0%, #ffffff 100%);
  border-bottom-color: #dbeafe;
}
[data-theme="light"] .action-center-title { color: #2563eb; }
[data-theme="light"] .action-card:hover  { background: #f8fafc; }
[data-theme="light"] .action-card { border-right-color: #e2e6ed; }

/* ── Tables ─────────────────────────────────────────────────── */
[data-theme="light"] .data-table thead th {
  background: #f4f6f9;
  border-bottom-color: #e2e6ed;
  color: #64748b;
}
[data-theme="light"] tr:hover td,
[data-theme="light"] tr:hover th  { background: rgba(91,33,182,.04) !important; }
[data-theme="light"] .data-table td { border-bottom-color: #eef0f4; }

/* ── Badges ─────────────────────────────────────────────────── */
[data-theme="light"] .badge-green  { background: #dcfce7; color: #166534; }
[data-theme="light"] .badge-red    { background: #fee2e2; color: #991b1b; }
[data-theme="light"] .badge-orange { background: #ffedd5; color: #9a3412; }
[data-theme="light"] .badge-blue   { background: #dbeafe; color: #1e40af; }
[data-theme="light"] .badge-purple { background: #ede9fe; color: #5b21b6; }
[data-theme="light"] .ai-badge     { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }

/* ── Status chips ───────────────────────────────────────────── */
[data-theme="light"] .status-ok       { background: #dcfce7; color: #166534; }
[data-theme="light"] .status-warn     { background: #ffedd5; color: #9a3412; }
[data-theme="light"] .status-danger   { background: #fee2e2; color: #991b1b; }
[data-theme="light"] .status-overdue  { background: #fee2e2; color: #991b1b; }
[data-theme="light"] .status-completed{ background: #f1f5f9; color: #64748b; }
[data-theme="light"] .status-exception{ background: #fee2e2; color: #991b1b; }
[data-theme="light"] .debt-row-overdue td       { background: rgba(198,40,40,.06) !important; }
[data-theme="light"] .debt-row-overdue:hover td { background: rgba(198,40,40,.12) !important; }

/* ── Copilot panel ──────────────────────────────────────────── */
[data-theme="light"] .copilot-panel {
  background: #ffffff;
  border-left-color: #e2e6ed;
  box-shadow: -4px 0 16px rgba(0,0,0,.1);
}
[data-theme="light"] .copilot-header { background: #f4f6f9; border-bottom-color: #e2e6ed; }
[data-theme="light"] .copilot-input  { background: #f4f6f9; border-top-color: #e2e6ed; }
[data-theme="light"] .copilot-input input {
  background: #ffffff;
  border-color: #dde1e9;
  color: #1c1f23;
}
[data-theme="light"] .copilot-msg-user   { background: #ede9fe; }
[data-theme="light"] .copilot-msg-ai     { background: #f4f6f9; }

/* ── Bar / chart helpers ────────────────────────────────────── */
[data-theme="light"] .bar-track { background: #e2e6ed; }

/* ── Forms ──────────────────────────────────────────────────── */
[data-theme="light"] input:not([type=checkbox]):not([type=radio]),
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #ffffff !important;
  color: #1c1f23 !important;
  border-color: #dde1e9 !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #94a3b8 !important; }

/* ── Scrollbar ──────────────────────────────────────────────── */
[data-theme="light"] .main { scrollbar-color: #c8cdd6 transparent; }
[data-theme="light"] .main::-webkit-scrollbar-thumb { background: #c8cdd6 !important; }

/* ══════════════════════════════════════════════════════════════
   INLINE STYLE OVERRIDES — analytics.js / charts.js / actions.js
   generated HTML uses hard-coded dark hex values
══════════════════════════════════════════════════════════════ */

/* page backgrounds */
[data-theme="light"] [style*="background:#0d1117"],
[data-theme="light"] [style*="background: #0d1117"]  { background: #f4f6fb !important; }
[data-theme="light"] [style*="background:#161b22"],
[data-theme="light"] [style*="background: #161b22"]  { background: #ffffff !important; }
[data-theme="light"] [style*="background:#0a0f17"]   { background: #edf0f7 !important; }
[data-theme="light"] [style*="background:#1c2128"]   { background: #f4f6fb !important; }
[data-theme="light"] [style*="background:#21262d"]   { background: #f1f5f9 !important; }
[data-theme="light"] [style*="background:#30363d"]   { background: #dde3ee !important; }

/* status tints */
[data-theme="light"] [style*="background:#2e1515"],
[data-theme="light"] [style*="background:#2e0f0f"]   { background: #fef2f2 !important; }
[data-theme="light"] [style*="background:#1a2e1a"],
[data-theme="light"] [style*="background:#1a2400"]   { background: #ecfdf5 !important; }
[data-theme="light"] [style*="background:#2e1f0a"]   { background: #fffbeb !important; }
[data-theme="light"] [style*="background:#0c2a4a"],
[data-theme="light"] [style*="background:#0c1f3d"]   { background: #eff6ff !important; }
[data-theme="light"] [style*="background:#1c0e30"]   { background: #f5f3ff !important; }

/* text */
[data-theme="light"] [style*="color:#e6edf3"]  { color: #111827 !important; }
[data-theme="light"] [style*="color:#c9d1d9"]  { color: #1f2937 !important; }
[data-theme="light"] [style*="color:#8b949e"]  { color: #4b5a6e !important; }
[data-theme="light"] [style*="color:#484f58"]  { color: #8b99b0 !important; }

/* borders */
[data-theme="light"] [style*="solid #30363d"]  { border-color: #dde3ee !important; }
[data-theme="light"] [style*="solid #21262d"]  { border-color: #dde3ee !important; }
[data-theme="light"] [style*="1px solid #1f6feb44"] { border-color: #bfdbfe !important; }
[data-theme="light"] [style*="border-left:3px solid #a371f7"] { border-left-color: #7c3aed !important; }
[data-theme="light"] [style*="border-left: 3px solid #a371f7"] { border-left-color: #7c3aed !important; }

/* AI insight box */
[data-theme="light"] [style*="background:#161b22"][style*="border-left:3px solid #a371f7"],
[data-theme="light"] [style*="background:#161b22"][style*="border-left: 3px solid #a371f7"] {
  background: #faf5ff !important;
  border-color: #e9d5ff !important;
  border-left-color: #7c3aed !important;
}

/* scrollbar */
[data-theme="light"] * { scrollbar-color: #c8cdd6 transparent; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c8cdd6 !important; }

/* ══════════════════════════════════════════════════════════════
   XÁC NHẬN CHUYỂN KHOẢN
══════════════════════════════════════════════════════════════ */
.ck-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s;
}
.ck-card--active { border-left: 3px solid #58a6ff; }

.ck-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ck-customer { font-weight: 700; font-size: 14px; color: var(--c-text); }
.ck-amount   { font-size: 22px; font-weight: 700; color: #3fb950; font-variant-numeric: tabular-nums; margin-top: 2px; }

.ck-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.ck-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
}
.ck-info-full { grid-column: 1 / -1; }
.ck-info-item { display: flex; gap: 6px; align-items: baseline; font-size: 12px; }
.ck-info-label { color: var(--c-muted); flex-shrink: 0; min-width: 90px; }
.ck-info-val   { color: var(--c-text); font-weight: 500; }
.ck-mono       { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 11px; letter-spacing: .03em; }

.ck-meta-row {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  line-height: 1.5;
}
.ck-meta-ok   { background: #1a3a2a; color: #3fb950; }
.ck-meta-err  { background: #1a0808; color: #f85149; }
.ck-meta-warn { background: #2e1f0a; color: #e3b341; }

.ck-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* light mode */
[data-theme="light"] .ck-card    { background: #fff; border-color: #d0d7de; }
[data-theme="light"] .ck-meta-ok   { background: #dcfce7; color: #166534; }
[data-theme="light"] .ck-meta-err  { background: #fee2e2; color: #991b1b; }
[data-theme="light"] .ck-meta-warn { background: #fef9c3; color: #854d0e; }

/* ══════════════════════════════════════════════════════════════
   AUDIT LOG — Nhật ký hoạt động
══════════════════════════════════════════════════════════════ */

.al-summary-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.al-stat {
  flex: 1;
  min-width: 100px;
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  border-bottom-width: 2px;
}
.al-stat-val   { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.al-stat-label { font-size: 11px; color: var(--c-muted); margin-top: 2px; }

.al-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.al-search {
  flex: 1;
  min-width: 220px;
  padding: 7px 12px;
  background: var(--c-input-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: 12px;
  outline: none;
}
.al-search:focus { border-color: var(--c-accent); }
.al-select {
  padding: 7px 10px;
  background: var(--c-input-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: 12px;
  cursor: pointer;
}

.al-timeline { display: flex; flex-direction: column; gap: 24px; }

.al-date-group { display: flex; flex-direction: column; gap: 0; }
.al-date-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 0;
}

.al-track {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--c-border);
  margin-left: 6px;
  padding-left: 0;
}

.al-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0 12px 18px;
  border-bottom: 1px solid var(--c-border);
  position: relative;
}
.al-row:last-child { border-bottom: none; }

.al-dot {
  position: absolute;
  left: -5px;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.al-time {
  flex-shrink: 0;
  min-width: 38px;
  font-size: 11px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.al-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }

.al-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.al-action  { font-size: 13px; font-weight: 600; color: var(--c-text); }

.al-result-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
}

.al-detail  { font-size: 12px; color: var(--c-muted); line-height: 1.5; }
.al-entity  { color: var(--c-accent); font-weight: 600; }
.al-actor   { font-size: 11px; font-weight: 600; }

/* light mode */
[data-theme="light"] .al-stat       { background: #fff; border-color: #d0d7de; }
[data-theme="light"] .al-search,
[data-theme="light"] .al-select     { background: #fff; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .al-track      { border-color: #d0d7de; }
[data-theme="light"] .al-row        { border-color: #e8eaed; }
[data-theme="light"] .al-date-label { border-color: #d0d7de; }

/* light mode — result badge bg overrides */
[data-theme="light"] .al-result-badge[style*="background:#1a3a2a"] { background: #dcfce7 !important; color: #166534 !important; border-color: #bbf7d0 !important; }
[data-theme="light"] .al-result-badge[style*="background:#2e1f0a"] { background: #fef9c3 !important; color: #854d0e !important; border-color: #fde68a !important; }
[data-theme="light"] .al-result-badge[style*="background:#1a0808"] { background: #fee2e2 !important; color: #991b1b !important; border-color: #fecaca !important; }

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — INLINE COLOR OVERRIDES
   Các màu dark-mode hardcode trong inline style / JS-generated HTML
   cần được remap sang phiên bản tương phản cao hơn cho nền sáng
══════════════════════════════════════════════════════════════ */

/* ── Chữ màu (text) ──────────────────────────────────────────── */

/* Vàng (#e3b341) → cam đậm (#d97706) */
[data-theme="light"] [style*="color:#e3b341"]  { color: #d97706 !important; }
[data-theme="light"] [style*="color: #e3b341"] { color: #d97706 !important; }

/* Xanh lá (#3fb950) → xanh đậm (#059669) */
[data-theme="light"] [style*="color:#3fb950"]  { color: #059669 !important; }
[data-theme="light"] [style*="color: #3fb950"] { color: #059669 !important; }

/* Đỏ (#f85149) → đỏ đậm (#dc2626) */
[data-theme="light"] [style*="color:#f85149"]  { color: #dc2626 !important; }
[data-theme="light"] [style*="color: #f85149"] { color: #dc2626 !important; }

/* Xanh dương (#58a6ff) → xanh đậm (#2563eb) */
[data-theme="light"] [style*="color:#58a6ff"]  { color: #2563eb !important; }
[data-theme="light"] [style*="color: #58a6ff"] { color: #2563eb !important; }

/* Tím (#a371f7) → tím đậm (#7c3aed) */
[data-theme="light"] [style*="color:#a371f7"]  { color: #7c3aed !important; }
[data-theme="light"] [style*="color: #a371f7"] { color: #7c3aed !important; }

/* Tím nhạt (#bc8cff) → tím đậm */
[data-theme="light"] [style*="color:#bc8cff"]  { color: #7c3aed !important; }
[data-theme="light"] [style*="color: #bc8cff"] { color: #7c3aed !important; }

/* ── Nền chưa được cover ─────────────────────────────────────── */

/* Near-black đỏ: #1a0f0f, #1a0808, #2a1a1a → đỏ nhạt */
[data-theme="light"] [style*="background:#1a0f0f"],
[data-theme="light"] [style*="background: #1a0f0f"],
[data-theme="light"] [style*="background:#1a0808"],
[data-theme="light"] [style*="background: #1a0808"],
[data-theme="light"] [style*="background:#2a1a1a"],
[data-theme="light"] [style*="background: #2a1a1a"] { background: #fee2e2 !important; }

/* Near-black xanh lá: #1a3a2a → xanh lá nhạt */
[data-theme="light"] [style*="background:#1a3a2a"],
[data-theme="light"] [style*="background: #1a3a2a"] { background: #dcfce7 !important; }

/* Near-black xanh dương: #1a2a3a → xanh nhạt */
[data-theme="light"] [style*="background:#1a2a3a"],
[data-theme="light"] [style*="background: #1a2a3a"] { background: #dbeafe !important; }

/* GitHub green (#238636) làm nền button → giữ màu nhưng đậm hơn */
[data-theme="light"] [style*="background:#238636"],
[data-theme="light"] [style*="background: #238636"] { background: #15803d !important; }

/* ── AI Insight boxes: background:#161b22 + border-left màu ──── */
/* (chỉ có #a371f7 đã được cover ở trên; bổ sung các màu còn lại) */

[data-theme="light"] [style*="background:#161b22"][style*="border-left:3px solid #3fb950"],
[data-theme="light"] [style*="background:#161b22"][style*="border-left: 3px solid #3fb950"] {
  background: #f0fdf4 !important;
  border-left-color: #16a34a !important;
}
[data-theme="light"] [style*="background:#161b22"][style*="border-left:3px solid #58a6ff"],
[data-theme="light"] [style*="background:#161b22"][style*="border-left: 3px solid #58a6ff"] {
  background: #eff6ff !important;
  border-left-color: #1d4ed8 !important;
}
[data-theme="light"] [style*="background:#161b22"][style*="border-left:3px solid #f85149"],
[data-theme="light"] [style*="background:#161b22"][style*="border-left: 3px solid #f85149"] {
  background: #fff1f2 !important;
  border-left-color: #dc2626 !important;
}
[data-theme="light"] [style*="background:#161b22"][style*="border-left:3px solid #e3b341"],
[data-theme="light"] [style*="background:#161b22"][style*="border-left: 3px solid #e3b341"] {
  background: #fffbeb !important;
  border-left-color: #d97706 !important;
}

/* ── CSS class overrides còn thiếu ───────────────────────────── */

/* .dispatch-recommend — hardcode dark bg trong CSS gốc */
[data-theme="light"] .dispatch-recommend {
  background: #fff1f2 !important;
  border-color: #fca5a5 !important;
}
[data-theme="light"] .dispatch-recommend-label { color: #991b1b !important; }
[data-theme="light"] .dispatch-recommend-text  { color: #1c1f23 !important; }

/* .inv-suggestion — border hardcode dark */
[data-theme="light"] .inv-suggestion {
  background: #f8fafc !important;
  border-color: #e2e6ed !important;
}

/* .morning-brief border-left được set inline theo từng role (không phải class) */
[data-theme="light"] [style*="border-left-color:#f85149"],
[data-theme="light"] [style*="border-left: color:#f85149"] { border-left-color: #dc2626 !important; }

/* Stroke SVG hardcode trong inline style (fill/stroke là attribute nên CSS không ảnh hưởng) */
/* — không cần override SVG attributes */

/* ══════════════════════════════════════════════════════════════ */

/* ============================================
   REVENUE RIBBON
============================================ */
:root { --ribbon-h: 33px; }

.revenue-ribbon {
  height: var(--ribbon-h);
  display: flex; align-items: center; gap: 0;
  padding: 0 20px;
  background: #0c1017;
  border-bottom: 1px solid #1f2937;
  font-size: 12px;
  position: sticky; top: 0; z-index: 21;
  overflow: hidden;
  transition: height .25s ease, opacity .2s ease;
  white-space: nowrap;
}
.revenue-ribbon.ribbon--hidden {
  height: 0; opacity: 0; pointer-events: none; border-bottom: none;
}

/* Light mode: dark accent strip so it reads as a separate layer */
[data-theme="light"] .revenue-ribbon {
  background: #1e1130;
  border-bottom-color: #0f0820;
}

/* Topbar sits below ribbon */
.topbar { top: var(--ribbon-h); }
.revenue-ribbon.ribbon--hidden ~ .topbar,
.revenue-ribbon.ribbon--hidden + .topbar { top: 0; }

/* Live pulse dot */
.ribbon-pulse {
  display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: #3fb950; flex-shrink: 0;
  animation: pulse 2.2s ease infinite;
  margin-right: 6px;
}

/* Sections */
.ribbon-live {
  display: flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #4a5568;
  padding-right: 16px; flex-shrink: 0;
}
[data-theme="light"] .ribbon-live { color: rgba(255,255,255,.35); }

.ribbon-sep {
  width: 1px; height: 16px;
  background: #1f2937; flex-shrink: 0; margin: 0 16px;
}
[data-theme="light"] .ribbon-sep { background: rgba(255,255,255,.12); }

.ribbon-metric {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: 5px;
  transition: background .12s; flex-shrink: 0;
  font-family: inherit;
}
.ribbon-metric:hover { background: rgba(255,255,255,.06); }
[data-theme="light"] .ribbon-metric:hover { background: rgba(255,255,255,.1); }

.ribbon-label {
  font-size: 11px; color: #4a5568; letter-spacing: -.01em;
}
[data-theme="light"] .ribbon-label { color: rgba(255,255,255,.45); }

.ribbon-value {
  font-size: 13px; font-weight: 700; color: #e6edf3;
  font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
[data-theme="light"] .ribbon-value { color: #ffffff; }

.ribbon-value--up   { color: #3fb950; }
.ribbon-value--warn { color: #e3b341; }
.ribbon-value--muted{ color: #6b7280; }

.ribbon-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 3px; flex-shrink: 0;
}
.ribbon-badge--up   { background: rgba(63,185,80,.15);  color: #3fb950; }
.ribbon-badge--warn { background: rgba(227,179,65,.15); color: #e3b341; }
.ribbon-badge--ok   { background: rgba(88,166,255,.12); color: #58a6ff; }
[data-theme="light"] .ribbon-badge--up   { background: rgba(63,185,80,.25);  color: #a8f0b0; }
[data-theme="light"] .ribbon-badge--warn { background: rgba(227,179,65,.25); color: #fcd34d; }
[data-theme="light"] .ribbon-badge--ok   { background: rgba(88,166,255,.2);  color: #93c5fd; }

/* Flash animation when value updates */
.ribbon-flash { animation: ribbonFlash .5s ease; }
@keyframes ribbonFlash {
  0%   { opacity: 1; }
  30%  { opacity: .35; }
  100% { opacity: 1; }
}

/* Right side */
.ribbon-spacer   { flex: 1; }
.ribbon-updated  {
  font-size: 10px; color: #374151; letter-spacing: .01em; flex-shrink: 0;
}
[data-theme="light"] .ribbon-updated { color: rgba(255,255,255,.3); }

.ribbon-dismiss {
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: #374151; line-height: 1;
  padding: 3px 6px; border-radius: 4px; margin-left: 10px;
  transition: color .12s; font-family: inherit; flex-shrink: 0;
}
.ribbon-dismiss:hover { color: #9ca3af; }
[data-theme="light"] .ribbon-dismiss { color: rgba(255,255,255,.3); }
[data-theme="light"] .ribbon-dismiss:hover { color: rgba(255,255,255,.7); }

/* Reshow button that appears in topbar after dismiss */
.ribbon-reshow {
  display: none; align-items: center;
  font-size: 11px; color: var(--c-dim); background: none; border: none;
  cursor: pointer; font-family: inherit; padding: 3px 8px;
  border-radius: 5px; transition: color .12s;
}
.ribbon-reshow:hover { color: var(--c-muted); }
.ribbon-reshow.visible { display: flex; }

/* ============================================
   COMMAND PALETTE
============================================ */
.cmd-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  animation: cmdFadeIn .12s ease;
}
.cmd-overlay.closing { animation: cmdFadeOut .1s ease forwards; }

.cmd-modal {
  width: 580px; max-width: calc(100vw - 32px);
  background: var(--c-surface);
  border: 1px solid var(--c-border2);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  overflow: hidden;
  animation: cmdSlideIn .14s ease;
}
[data-theme="light"] .cmd-modal {
  background: #ffffff;
  border-color: #d0d7de;
  box-shadow: 0 16px 60px rgba(0,0,0,.22);
}

.cmd-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border);
}
[data-theme="light"] .cmd-input-row { border-bottom-color: #e2e6ed; }

.cmd-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 16px; font-family: inherit; color: var(--c-text);
  letter-spacing: -.1px;
}
.cmd-input::placeholder { color: var(--c-dim); }
[data-theme="light"] .cmd-input::placeholder { color: #94a3b8; }

.cmd-esc {
  font-size: 11px; color: var(--c-dim);
  background: var(--c-bg); border: 1px solid var(--c-border2);
  border-radius: 5px; padding: 2px 7px; white-space: nowrap;
  font-family: inherit;
}
[data-theme="light"] .cmd-esc { background: #f4f6f9; border-color: #dde1e9; color: #94a3b8; }

.cmd-results {
  max-height: 380px; overflow-y: auto;
  padding: 6px 0;
  scrollbar-width: thin; scrollbar-color: var(--c-border2) transparent;
}

.cmd-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-dim);
  padding: 10px 18px 4px;
}
[data-theme="light"] .cmd-group-label { color: #94a3b8; }

.cmd-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 18px; cursor: pointer;
  transition: background .08s;
  gap: 12px;
}
.cmd-item:hover, .cmd-item.active {
  background: rgba(31,111,235,.1);
}
[data-theme="light"] .cmd-item:hover,
[data-theme="light"] .cmd-item.active {
  background: #eff6ff;
}
.cmd-item-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cmd-item-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0; opacity: .5;
}
.cmd-item-label {
  font-size: 13px; font-weight: 500; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmd-item.active .cmd-item-label { color: var(--c-blue-lt); }
[data-theme="light"] .cmd-item.active .cmd-item-label { color: #1565c0; }

.cmd-item-hint {
  font-size: 11px; color: var(--c-dim); white-space: nowrap; flex-shrink: 0;
}
[data-theme="light"] .cmd-item-hint { color: #94a3b8; }

.cmd-item-kbd {
  font-size: 10px; color: var(--c-muted);
  background: var(--c-bg); border: 1px solid var(--c-border2);
  border-radius: 4px; padding: 1px 6px; white-space: nowrap; flex-shrink: 0;
  font-family: inherit;
}
[data-theme="light"] .cmd-item-kbd { background: #f4f6f9; border-color: #dde1e9; color: #64748b; }

.cmd-empty {
  padding: 32px 18px; text-align: center;
  font-size: 13px; color: var(--c-dim);
}

.cmd-footer {
  display: flex; align-items: center; gap: 16px;
  padding: 9px 18px; border-top: 1px solid var(--c-border);
  font-size: 11px; color: var(--c-dim);
}
[data-theme="light"] .cmd-footer { border-top-color: #e2e6ed; color: #94a3b8; }
.cmd-footer kbd {
  background: var(--c-bg); border: 1px solid var(--c-border2);
  border-radius: 4px; padding: 1px 5px; font-family: inherit;
  font-size: 10px; color: var(--c-muted); margin-right: 3px;
}
[data-theme="light"] .cmd-footer kbd { background: #f4f6f9; border-color: #dde1e9; }

/* Trigger button in topbar */
.cmd-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 7px;
  background: var(--c-bg); border: 1px solid var(--c-border2);
  color: var(--c-dim); font-size: 12px; font-family: inherit;
  cursor: pointer; transition: all .15s; white-space: nowrap;
  min-width: 160px;
}
.cmd-trigger:hover { border-color: var(--c-blue-lt); color: var(--c-muted); }
[data-theme="light"] .cmd-trigger {
  background: #f4f6f9; border-color: #dde1e9; color: #94a3b8;
}
[data-theme="light"] .cmd-trigger:hover { border-color: #1976d2; }
.cmd-trigger-hint {
  margin-left: auto; font-size: 10px;
  background: var(--c-border); border-radius: 4px; padding: 1px 5px;
  color: var(--c-muted); font-family: inherit;
}
[data-theme="light"] .cmd-trigger-hint { background: #e2e6ed; color: #64748b; }

@keyframes cmdFadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes cmdFadeOut { from { opacity:1 } to { opacity:0 } }
@keyframes cmdSlideIn { from { opacity:0; transform:translateY(-8px) scale(.98) } to { opacity:1; transform:none } }

/* ============================================
   RESPONSIVE DESIGN
============================================ */
@media (max-width: 1400px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .mid-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
  .action-cards-row { grid-template-columns: repeat(2, 1fr); }
  .action-card:nth-child(2n) { border-right: none; }
  .mid-grid { grid-template-columns: 1fr; }
  .ai-row   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .sidebar { width: 56px; overflow: hidden; }
  .logo-text, .logo-sub, .nav-label, .nav-text { display: none; }
  .nav-item { padding: 10px; justify-content: center; gap: 0; }
  .logo-icon { margin: 0 auto; }
  .logo { justify-content: center; padding: 14px 8px 8px; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-row   { grid-template-columns: 1fr; }
  .inv-risk-grid { grid-template-columns: 1fr; }
  .action-cards-row { grid-template-columns: 1fr; }
  .action-card { border-right: none; border-bottom: 1px solid var(--c-border); }
  .action-card:last-child { border-bottom: none; }

  .morning-brief { flex-wrap: wrap; }
  .brief-stats   { flex-wrap: wrap; gap: 12px; }
  .brief-actions { min-width: 100%; }

  .topbar-title { font-size: var(--text-lg); }
  .role-tab .role-tab-text { display: none; }
  .role-tab { padding: 6px 10px; }
}

/* ============================================
   PRODUCT GATING — nav khoá + badge add-on + popup upsell
============================================ */
.nav-item--locked        { opacity: .62; }
.nav-item--locked:hover  { opacity: .9; }

.zendms-addon-badge {
  display: inline-flex; align-items: center;
  margin-left: auto; padding: 1px 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fbbf24;
  border: 1px solid rgba(251,191,36,.35);
}
[data-theme="light"] .zendms-addon-badge {
  background: rgba(255,255,255,.14); color: #fde68a;
  border-color: rgba(253,230,138,.4);
}
.cmd-item.zendms-locked .cmd-item-label { color: var(--c-dim); }

.zendms-upsell-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(13,17,23,.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fadeIn .15s ease;
}
.zendms-upsell-card {
  width: min(360px, 100%);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-xl); padding: 28px 26px 22px;
  text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.zendms-upsell-lock  { font-size: 26px; margin-bottom: 10px; }
.zendms-upsell-title { font-size: var(--text-md); font-weight: 700; color: var(--c-text); }
.zendms-upsell-tagline {
  font-size: var(--text-xs); color: var(--c-muted); margin-top: 4px; line-height: 1.5;
}
.zendms-upsell-note {
  margin-top: 16px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--c-yellow-bg); color: var(--c-yellow);
  font-size: var(--text-xs); line-height: 1.6; text-align: left;
}
.zendms-upsell-list {
  list-style: none; text-align: left; margin-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.zendms-upsell-list li {
  font-size: var(--text-xs); color: var(--c-text); line-height: 1.5;
  padding-left: 16px; position: relative;
}
.zendms-upsell-list li::before {
  content: '•'; position: absolute; left: 2px; color: var(--c-muted);
}
.zendms-upsell-ai {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--c-purple-bg); text-align: left;
}
.zendms-upsell-ai-ttl {
  font-size: var(--text-xs); font-weight: 700; color: var(--c-purple);
}
.zendms-upsell-ai .zendms-upsell-list { margin-top: 6px; }
.zendms-upsell-ai .zendms-upsell-list li::before { color: var(--c-purple); }

.zendms-upsell-included {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--c-green-bg); text-align: left;
}
.zendms-upsell-included-ttl {
  font-size: var(--text-xs); font-weight: 700; color: var(--c-green);
}
.zendms-upsell-included .zendms-upsell-list { margin-top: 6px; }
.zendms-upsell-included .zendms-upsell-list li::before { color: var(--c-green); }
.zendms-upsell-actions { display: flex; gap: 8px; margin-top: 18px; }
.zendms-upsell-btn {
  flex: 1; padding: 10px; border-radius: var(--r-md);
  border: 1px solid var(--c-border); background: transparent; color: var(--c-muted);
  font-family: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.zendms-upsell-btn:hover            { border-color: var(--c-border2); color: var(--c-text); }
.zendms-upsell-btn--primary         { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.zendms-upsell-btn--primary:hover   { opacity: .9; color: #fff; }

@media (max-width: 640px) {
  .content { padding: 12px; gap: 16px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .copilot-panel { width: calc(100vw - 48px); }
  .dispatch-grid { grid-template-columns: repeat(2, 1fr); }
  .misa-row { grid-template-columns: 1fr; }
}

/* Bảng chỉ số tuỳ chỉnh (custom-dashboard.js) — tile bị bỏ chọn trong
   chế độ tuỳ chỉnh: mờ đi để phân biệt với tile đang hiện thật, không
   ẩn hẳn (vẫn cần kéo-thả/tick lại được). */
.cd-tile-off { opacity: .4; }