/* ============================================
   CXO Command Center - application theme
   Restrained enterprise style: slate neutrals, Suzuki-blue accent, red highlight.
   ============================================ */
:root {
    --pla-ink: #0f172a;
    --pla-text: #334155;
    --pla-muted: #64748b;
    --pla-faint: #94a3b8;
    --pla-line: #e2e8f0;
    --pla-line-soft: #eef2f6;
    --pla-bg: #eef2f9;                 /* soft grey-blue page background (less glare than white) */
    --pla-header-bg: #f7f9fd;
    --pla-head-bg: linear-gradient(120deg, #e2eafa 0%, #e9eff9 55%, #eef2fa 100%);
    --pla-head-line: #d3def2;
    --pla-card-head: #f7f9fd;
    --pla-surface: #ffffff;
    --pla-accent: #1446a0;          /* Suzuki blue */
    --pla-accent-hover: #0b2a6b;
    --pla-accent-soft: #eaf0fb;
    --pla-teal: #1446a0;
    --pla-teal-dark: #0b2a6b;
    --pla-navy: #1e3a8a;
    --pla-side: #0b2a6b;
    --pla-red: #e60012;              /* Suzuki red highlight */
    --pla-radius: 10px;
}

html { font-size: 13px; }

body {
    background: var(--pla-bg); color: var(--pla-text); font-size: 1rem;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--pla-accent); }
a:hover { color: var(--pla-accent-hover); }

/* ---------- Sidebar ---------- */
.sidebar {
    position: fixed; top: 0; left: 0; width: 248px; height: 100vh; z-index: 1000;
    display: flex; flex-direction: column; background: var(--pla-side); color: #cbd5e1;
    transition: transform 0.25s ease, width 0.25s ease;
}
.sidebar-header { display: flex; align-items: center; gap: 0.75rem; height: 60px; padding: 0 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sidebar-logo { height: 18px; width: auto; filter: brightness(0) invert(1); flex-shrink: 0; }
.sidebar-subtitle { font-size: 0.88rem; font-weight: 500; color: #94a3b8; white-space: nowrap; padding-left: 0.75rem; border-left: 1px solid rgba(255,255,255,0.12); line-height: 1.2; }
.sidebar-nav { flex: 1; overflow-y: auto; margin: 0; padding: 0.75rem 0.75rem; list-style: none; }
.sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.45) rgba(255,255,255,0.06); }
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.45); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.7); background-clip: padding-box; }
.nav-section-title { padding: 1rem 0.75rem 0.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; }
.sidebar .nav-link {
    position: relative; display: flex; align-items: center; gap: 0.75rem;
    padding: 0.55rem 0.75rem; margin: 1px 0; border-radius: 6px;
    color: #cbd5e1; font-size: 1rem; font-weight: 500; text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.sidebar .nav-link .bi { font-size: 1rem; width: 18px; text-align: center; color: #94a3b8; }
.sidebar .nav-link:hover { background: rgba(255,255,255,0.05); color: #fff; }
.sidebar .nav-link:hover .bi { color: #e2e8f0; }
.sidebar .nav-link.active { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar .nav-link.active .bi { color: #22d3ee; }
.sidebar .nav-link.active::before {
    content: ''; position: absolute; left: -0.75rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #22d3ee;
}
.sidebar .nav-link.is-disabled { cursor: default; color: #64748b; }
.sidebar .nav-link.is-disabled .bi, .sidebar .nav-link.is-disabled:hover .bi { color: #475569; }
.sidebar .nav-link.is-disabled:hover { background: transparent; color: #64748b; }
.nav-soon {
    margin-left: auto; padding: 0.1rem 0.45rem; border-radius: 4px;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    background: rgba(148,163,184,0.12); color: #94a3b8; border: 1px solid rgba(148,163,184,0.2);
}
.sidebar.collapsed .nav-soon { display: none; }
/* Collapsible sub-menu (User Management) */
.sidebar .nav-group .nav-caret { margin-left: auto; font-size: 0.75rem; width: auto; transition: transform 0.2s; }
.sidebar .nav-group.collapsed .nav-caret { transform: rotate(-90deg); }
.sidebar .sub-nav { list-style: none; margin: 2px 0 4px; padding: 0 0 0 1.55rem; border-left: 1px solid rgba(255,255,255,0.08); margin-left: 1.3rem; }
.sidebar .sub-nav .nav-link { padding: 0.42rem 0.75rem; font-size: 0.96rem; color: #94a3b8; }
.sidebar .sub-nav .nav-link:hover { color: #fff; }
.sidebar .sub-nav .nav-link.active { color: #fff; background: rgba(255,255,255,0.08); }
.sidebar .sub-nav .nav-link.active::before { left: -1.6rem; }
.sidebar.collapsed .sub-nav { display: none !important; }

.sidebar-footer { padding: 0.75rem; border-top: 1px solid rgba(255,255,255,0.06); }
.sidebar-user { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem; border-radius: 6px; text-decoration: none; }
.sidebar-user:hover { background: rgba(255,255,255,0.05); }
.sidebar-user .avatar { width: 32px; height: 32px; font-size: 0.88rem; }
.sidebar-user .u-name { color: #f1f5f9; font-size: 0.96rem; font-weight: 600; line-height: 1.2; }
.sidebar-user .u-role { color: #94a3b8; font-size: 0.88rem; }
.sidebar-copy { padding: 0.6rem 0.5rem 0.1rem; font-size: 0.82rem; color: #475569; }
.sidebar.collapsed { width: 68px; }
.sidebar.collapsed .sidebar-header { justify-content: center; padding: 0; }
.sidebar.collapsed .sidebar-logo { height: auto; width: 40px; }
.sidebar.collapsed .sidebar-subtitle, .sidebar.collapsed .nav-text, .sidebar.collapsed .nav-section-title,
.sidebar.collapsed .sidebar-user > div, .sidebar.collapsed .sidebar-copy { display: none; }
.sidebar.collapsed .nav-link { justify-content: center; padding: 0.6rem 0; }
.sidebar.collapsed .sidebar-user { justify-content: center; }
body.sidebar-collapsed .main-content { margin-left: 68px; }
.sidebar.collapsed .nav-caret { display: none; }
/* Pop-out of a menu group when the sidebar is collapsed */
.nav-flyout { position: fixed; z-index: 1060; min-width: 220px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 0.4rem;
    background: var(--pla-side); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; box-shadow: 0 12px 30px rgba(10,20,50,0.35); }
.nav-flyout .nf-title { padding: 0.45rem 0.7rem 0.35rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.nav-flyout .nf-list { list-style: none; margin: 0; padding: 0; }
.nav-flyout .nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.7rem; border-radius: 6px; color: #cbd5e1; font-size: 0.95rem; text-decoration: none; white-space: nowrap; }
.nav-flyout .nav-link:hover { background: rgba(255,255,255,0.07); color: #fff; }
.nav-flyout .nav-link.active { background: rgba(255,255,255,0.1); color: #fff; box-shadow: inset 3px 0 0 #22d3ee; }
.nav-flyout .nav-link.is-disabled, .nav-flyout .nav-link.is-disabled:hover { color: #64748b; background: transparent; cursor: default; }
.nav-flyout .nav-soon { margin-left: auto; font-size: 0.68rem; }

/* ---------- Main layout & header ---------- */
.main-content { margin-left: 248px; min-height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.25s ease; }
.main-content > .container-fluid { flex: 1; padding: 1.75rem 2rem !important; max-width: 1600px; }
.main-header {
    position: sticky; top: 0; z-index: 999; height: 60px;
    display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem 0 1rem;
    background: var(--pla-header-bg); border-bottom: 1px solid var(--pla-line);
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.hdr-burger { border: 0; background: transparent; color: var(--pla-muted); font-size: 1.35rem; line-height: 1; padding: 0.35rem 0.45rem; border-radius: 6px; }
.hdr-burger:hover { background: var(--pla-line-soft); color: var(--pla-ink); }
.hdr-crumbs { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.5rem; font-size: 1rem; }
.hdr-crumbs a { color: var(--pla-muted); text-decoration: none; }
.hdr-crumbs a:hover { color: var(--pla-ink); }
.hdr-crumbs .sep { color: #cbd5e1; font-size: 0.88rem; }
.hdr-crumbs .current { color: var(--pla-ink); font-weight: 600; }
.hdr-actions { display: flex; align-items: center; gap: 0.35rem; }
.hdr-btn {
    width: 36px; height: 36px; border-radius: 6px; border: 0; background: transparent;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--pla-muted);
}
.hdr-btn:hover { background: var(--pla-line-soft); color: var(--pla-ink); }
.hdr-divider { width: 1px; height: 24px; background: var(--pla-line); margin: 0 0.5rem; }
.hdr-user { display: flex; align-items: center; gap: 0.6rem; border: 0; background: transparent; padding: 0.25rem 0.4rem; border-radius: 6px; text-align: left; }
.hdr-user:hover { background: var(--pla-line-soft); }
.hdr-user .avatar { width: 32px; height: 32px; font-size: 0.88rem; }
.hdr-user .u-name { color: var(--pla-ink); font-size: 0.96rem; font-weight: 600; line-height: 1.2; }
.hdr-user .u-role { color: var(--pla-muted); font-size: 0.88rem; line-height: 1.2; }
.hdr-user::after { margin-left: 0.25rem; color: var(--pla-faint); }
.main-footer { border-top: 1px solid var(--pla-line); background: transparent; color: var(--pla-faint); font-size: 0.92rem; }

/* ---------- Page heading ---------- */
.page-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
    padding: 0.8rem 1.2rem; background: var(--pla-head-bg); border: 1px solid var(--pla-head-line); border-radius: var(--pla-radius);
}
.page-title { margin: 0; font-size: 1.55rem; font-weight: 600; color: var(--pla-ink); letter-spacing: -0.01em; }
.page-sub { margin: 0.25rem 0 0; color: var(--pla-muted); font-size: 1rem; }
.page-meta { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--pla-muted); font-size: 0.96rem; }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--pla-line); border-radius: var(--pla-radius); box-shadow: 0 1px 2px rgba(15,23,42,0.04); background: var(--pla-surface); }
.card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    background: var(--pla-card-head); border-bottom: 1px solid var(--pla-line-soft); border-radius: var(--pla-radius) var(--pla-radius) 0 0 !important;
    padding: 0.9rem 1.25rem; font-weight: 600; font-size: 1.04rem; color: var(--pla-ink);
}
.card-header .card-hint { font-weight: 400; font-size: 0.92rem; color: var(--pla-muted); }
.card-footer { background: #fafbfc; border-top: 1px solid var(--pla-line-soft); border-radius: 0 0 var(--pla-radius) var(--pla-radius) !important; }

/* ---------- Stat cards ---------- */
.stat {
    height: 100%; padding: 1.1rem 1.25rem; display: block; text-decoration: none; color: inherit;
    background: var(--pla-surface); border: 1px solid var(--pla-line); border-radius: var(--pla-radius);
    box-shadow: 0 1px 2px rgba(15,23,42,0.04); transition: border-color 0.15s, box-shadow 0.15s;
}
a.stat:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(15,23,42,0.06); color: inherit; }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-label { font-size: 0.92rem; font-weight: 500; color: var(--pla-muted); }
.stat-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.04rem; }
.stat-value { margin-top: 0.6rem; font-size: 1.75rem; font-weight: 600; color: var(--pla-ink); line-height: 1.1; letter-spacing: -0.01em; }
.stat-foot { margin-top: 0.35rem; font-size: 0.92rem; color: var(--pla-muted); }
.stat-bar { margin-top: 0.75rem; height: 4px; border-radius: 2px; background: var(--pla-line-soft); overflow: hidden; }
.stat-bar > span { display: block; height: 100%; border-radius: 2px; }
.tone-blue   { background: #eff6ff; color: #2563eb; }
.tone-green  { background: #ecfdf5; color: #059669; }
.tone-amber  { background: #fffbeb; color: #d97706; }
.tone-red    { background: #fef2f2; color: #dc2626; }
.tone-teal   { background: #ecfeff; color: #0e7490; }
.tone-slate  { background: #f1f5f9; color: #475569; }
.bar-blue { background: #3b82f6; } .bar-green { background: #10b981; } .bar-amber { background: #f59e0b; } .bar-teal { background: #0891b2; }

/* ---------- Summary chips (compact counts that double as filters) ---------- */
.summary-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.summary-chips .chip {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem; border-radius: 999px;
    border: 1px solid var(--pla-line); background: var(--pla-surface); color: var(--pla-text);
    font-size: 0.92rem; text-decoration: none; transition: border-color 0.15s, background 0.15s;
}
.summary-chips .chip strong { color: var(--pla-ink); font-weight: 600; }
.summary-chips .chip:hover { border-color: #cbd5e1; }
.summary-chips .chip.active { border-color: var(--pla-accent); background: var(--pla-accent-soft); }
.summary-chips .dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-red { background: #dc2626; } .dot-green { background: #059669; } .dot-amber { background: #d97706; } .dot-slate { background: #94a3b8; }
body.dark-theme .summary-chips .chip { background: #0f172a; border-color: #1e293b; color: #cbd5e1; }
body.dark-theme .summary-chips .chip strong { color: #f1f5f9; }

/* ---------- Master pages (Roles / Modules / Access / Settings) ---------- */
.ph-tile { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; box-shadow: 0 4px 12px rgba(15,23,42,0.12); }
.tile-purple { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.tile-orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.tile-teal   { background: linear-gradient(135deg, #14b8a6, #0e7490); }
.tile-blue   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.filter-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 1rem;
    background: var(--pla-surface); border: 1px solid var(--pla-line); border-radius: var(--pla-radius); }
.filter-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pla-muted); }
.seg { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--pla-line); border-radius: 999px; background: #f8fafc; }
.seg a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.85rem; border-radius: 999px; color: var(--pla-text); text-decoration: none; font-size: 0.96rem; }
.seg a:hover { background: #fff; }
.seg a.active { background: #fff; color: var(--pla-accent); font-weight: 600; box-shadow: 0 0 0 1px #b7c9ec; }
.dot-blue { background: #2563eb; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 1rem; border-bottom: 1px solid var(--pla-line-soft); }
.toolbar-search { width: 280px; max-width: 100%; }
.bulk-actions { display: none; align-items: center; gap: 0.4rem; margin-left: 0.75rem; padding-left: 0.75rem; border-left: 1px solid var(--pla-line); }
.bulk-actions.show { display: inline-flex; }
.col-check { width: 40px; }
.role-picker { width: 280px; max-width: 100%; }
.count-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; border: 1px solid var(--pla-line); background: #f8fafc; font-size: 0.92rem; color: var(--pla-text); }
.count-chip.chip-green { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.count-chip.chip-blue { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.access-table thead th { vertical-align: middle; }
.access-table .col-perm { width: 150px; text-align: center; border-left: 1px solid var(--pla-line-soft); }
.access-table .col-status { width: 130px; text-align: center; border-left: 1px solid var(--pla-line-soft); }
.access-table .sel-all { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin: 0.35rem 0 0; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pla-faint); cursor: pointer; }
.access-table .group-row td { background: #f1f7fb; border-top: 2px solid #cfe3ee; }
.access-table .group-row td:first-child { border-left: 3px solid var(--pla-accent); }
.access-table .group-name { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pla-ink); }
.access-table .group-count { margin-left: 0.5rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: #e3ebfa; color: var(--pla-accent); font-size: 0.85rem; }
.access-table .module-row td:first-child { padding-left: 2rem; }
.access-table .form-check-input { width: 1.15em; height: 1.15em; cursor: pointer; }
.settings-tabs { border-bottom-color: var(--pla-line); margin-bottom: 0.75rem; }
.settings-tabs .nav-link { color: var(--pla-muted); font-weight: 500; border: 0; border-bottom: 2px solid transparent; padding: 0.6rem 1rem; }
.settings-tabs .nav-link.active { color: var(--pla-accent); border-bottom-color: var(--pla-accent); background: transparent; }
.settings-card { max-width: 980px; }
.settings-section { margin-bottom: 0.75rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--pla-line-soft); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pla-muted); }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.settings-actions .test-box { width: 360px; max-width: 100%; }
body.dark-theme .filter-strip, body.dark-theme .seg, body.dark-theme .seg a.active, body.dark-theme .count-chip { background: #0f172a; border-color: #1e293b; color: #cbd5e1; }
body.dark-theme .access-table .group-row td { background: #111c33; border-color: #1e293b; }
body.dark-theme .access-table .group-name { color: #f1f5f9; }

/* ---------- Activity feed ---------- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.8rem 1.25rem; border-bottom: 1px solid var(--pla-line-soft); }
.feed li:last-child { border-bottom: 0; }
.feed .f-icon { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.96rem; }
.feed .f-icon.success { background: #ecfdf5; color: #059669; }
.feed .f-icon.danger  { background: #fef2f2; color: #dc2626; }
.feed .f-icon.warning { background: #fffbeb; color: #d97706; }
.feed .f-icon.neutral { background: #f1f5f9; color: #475569; }
.feed .f-text { flex: 1; min-width: 0; color: var(--pla-text); line-height: 1.45; }
.feed .f-text strong { color: var(--pla-ink); font-weight: 600; }
.feed .f-time { flex-shrink: 0; font-size: 0.88rem; color: var(--pla-faint); white-space: nowrap; padding-top: 0.1rem; }
.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--pla-faint); }
.empty-state .bi { font-size: 1.6rem; display: block; margin-bottom: 0.4rem; }

/* ---------- Key/value list ---------- */
.kv { margin: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.25rem; border-bottom: 1px solid var(--pla-line-soft); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { font-weight: 400; color: var(--pla-muted); }
.kv dd { margin: 0; color: var(--pla-ink); font-weight: 500; text-align: right; }

/* ---------- Planned modules list ---------- */
.module-list { list-style: none; margin: 0; padding: 0; }
.module-list li { display: flex; gap: 0.85rem; align-items: center; padding: 0.8rem 1.25rem; border-bottom: 1px solid var(--pla-line-soft); }
.module-list li:last-child { border-bottom: 0; }
.module-list .m-icon { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #475569; }
.module-list .m-name { color: var(--pla-ink); font-weight: 600; }
.module-list .m-desc { color: var(--pla-muted); font-size: 0.92rem; }
.status-pill { margin-left: auto; flex-shrink: 0; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.82rem; font-weight: 500; background: #f1f5f9; color: #475569; border: 1px solid var(--pla-line); }

/* ---------- Buttons ---------- */
.btn { border-radius: 6px; font-weight: 500; font-size: 1rem; }
.btn-primary { background: var(--pla-accent); border-color: var(--pla-accent); color: #fff; box-shadow: none; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--pla-accent-hover) !important; border-color: var(--pla-accent-hover) !important; color: #fff; }
.btn-outline-primary { color: var(--pla-accent); border-color: #b7c9ec; }
.btn-outline-primary:hover { background: var(--pla-accent); border-color: var(--pla-accent); color: #fff; }
.btn-light { background: #fff; border-color: var(--pla-line); color: var(--pla-text); }
.btn-light:hover { background: var(--pla-line-soft); border-color: #cbd5e1; }
.btn-danger { background: #dc2626; border-color: #dc2626; }
.btn-warning { background: #d97706; border-color: #d97706; color: #fff; }
.btn-warning:hover { background: #b45309; border-color: #b45309; color: #fff; }

/* ---------- Badges ---------- */
.badge { font-weight: 500; padding: 0.3em 0.6em; border-radius: 999px; font-size: 0.82rem; }
.badge.bg-success   { background: #ecfdf5 !important; color: #047857; }
.badge.bg-danger    { background: #fef2f2 !important; color: #b91c1c; }
.badge.bg-primary   { background: #eaf0fb !important; color: #1446a0; }
.badge.bg-secondary { background: #f1f5f9 !important; color: #475569; }
.badge.bg-info      { background: #eff6ff !important; color: #1d4ed8; }
.badge.bg-warning   { background: #fffbeb !important; color: #b45309; }
.badge.bg-light     { background: #f1f5f9 !important; color: #475569 !important; border-color: var(--pla-line) !important; }

/* ---------- Tables ---------- */
.table { font-size: 1rem; color: var(--pla-text); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 0.7rem 0.85rem; }
.table thead th {
    background: #f8fafc !important; color: var(--pla-muted);
    font-weight: 600; font-size: 0.88rem; letter-spacing: 0.02em;
    border-bottom: 1px solid var(--pla-line); white-space: nowrap;
}
.table thead th a.sort-link { color: inherit; text-decoration: none; }
.table thead th a.sort-link:hover { color: var(--pla-ink); }
.table thead th a.sort-link .bi { font-size: 0.82rem; opacity: 0.4; }
.table thead th a.sort-link.active { color: var(--pla-ink); }
.table thead th a.sort-link.active .bi { opacity: 1; color: var(--pla-accent); }
.table-hover tbody tr:hover > * { background-color: #f8fafc; }
.table td { vertical-align: middle; border-color: var(--pla-line-soft); }
.table .actions { white-space: nowrap; }
.table .actions .btn { padding: 0.2rem 0.45rem; }
tr.row-inactive td { color: var(--pla-faint); }
.page-link { color: var(--pla-text); border-color: var(--pla-line); }
.page-link:hover { color: var(--pla-ink); background: var(--pla-line-soft); }
.page-item.active .page-link { background: var(--pla-accent); border-color: var(--pla-accent); color: #fff; }

/* ---------- Avatar ---------- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: #1446a0; color: #fff; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.3px;
}
.avatar-lg { width: 72px; height: 72px; font-size: 1.5rem; }
.avatar-sm { width: 28px; height: 28px; font-size: 0.82rem; }

/* ---------- Forms ---------- */
.form-label { font-weight: 500; font-size: 0.92rem; color: var(--pla-text); margin-bottom: 0.3rem; }
.form-control, .form-select { border-color: #d1d9e2; border-radius: 6px; font-size: 1rem; }
.form-control:focus, .form-select:focus { border-color: var(--pla-accent); box-shadow: 0 0 0 3px rgba(20,70,160,0.14); }
.form-control[readonly] { background-color: #f8fafc; color: var(--pla-muted); }
.form-check-input:checked { background-color: var(--pla-accent); border-color: var(--pla-accent); }
.form-check-input:focus { border-color: var(--pla-accent); box-shadow: 0 0 0 3px rgba(20,70,160,0.14); }
.input-group-text { background: #f8fafc; border-color: #d1d9e2; color: var(--pla-faint); }
.password-toggle { cursor: pointer; }
.pw-strength { height: 4px; border-radius: 2px; background: #e9ecef; overflow: hidden; margin-top: 6px; }
.pw-strength > div { height: 100%; width: 0; transition: width 0.25s, background 0.25s; }
.pw-rules { list-style: none; padding: 0; margin: 6px 0 0; font-size: 0.88rem; columns: 2; }
.pw-rules li { color: var(--pla-faint); }
.pw-rules li.ok { color: #059669; }
.pw-rules li .bi { margin-right: 4px; }
.modal-content { border: 1px solid var(--pla-line); border-radius: 12px; box-shadow: 0 20px 50px rgba(15,23,42,0.15); }
.modal-header { border-bottom-color: var(--pla-line-soft); }
.modal-header .modal-title { font-weight: 600; font-size: 1.15rem; color: var(--pla-ink); }
.modal-footer { border-top-color: var(--pla-line-soft); background: #fafbfc; border-radius: 0 0 12px 12px; }
.dropdown-menu { border-color: var(--pla-line); border-radius: 8px; box-shadow: 0 10px 30px rgba(15,23,42,0.10); font-size: 1rem; }
.dropdown-item { padding: 0.45rem 1rem; }
.dropdown-item:active { background: var(--pla-accent); }

/* ---------- Profile ---------- */
.profile-hero { padding: 1.75rem 1.5rem 1.4rem; border-bottom: 1px solid var(--pla-line-soft); text-align: center; }
.profile-hero h5 { color: var(--pla-ink); font-weight: 600; font-size: 1.1rem; }
.profile-hero .handle { color: var(--pla-muted); font-size: 0.96rem; }
.detail-list dt { font-size: 0.88rem; font-weight: 500; color: var(--pla-muted); }
.detail-list dd { margin: 0.15rem 0 0.9rem; color: var(--pla-ink); }

/* ---------- Toasts ---------- */
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; }

/* ---------- Auth pages (login, forgot, reset, change password) ---------- */
.auth-body {
    margin: 0; min-height: 100vh; background: #f3f6fa; color: #1e293b;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.auth-container { display: flex; min-height: 100vh; }

/* Left: brand panel - soft lavender with a faint grid */
.auth-left {
    flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 92% 4%, rgba(233,69,96,0.10) 0%, transparent 32%),
        linear-gradient(rgba(15,52,96,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,52,96,0.045) 1px, transparent 1px),
        linear-gradient(160deg, #f4f5fb 0%, #eceffa 55%, #e5eaf8 100%);
    background-size: auto, 57px 57px, 57px 57px, auto;
    border-right: 1px solid #e3e8f2;
}
.auth-left::after {   /* faint ring top-right */
    content: ''; position: absolute; top: -170px; right: -170px; width: 380px; height: 380px;
    border-radius: 50%; border: 1px solid rgba(233,69,96,0.10);
}
.auth-left-inner {
    position: relative; z-index: 1; min-height: 100%;
    display: flex; flex-direction: column; padding: 4.5rem 4.5rem 2.5rem;
}
.auth-logo { height: 26px; width: auto; align-self: flex-start; margin-left: 1.25rem; }
.auth-badge {
    align-self: flex-start; margin-top: 1.75rem;
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 1rem; border: 1px solid #c9d2ea; border-radius: 4px; background: rgba(255,255,255,0.45);
    color: #1d3f86; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.auth-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #1d4ed8; }
.auth-headline {
    margin: 4.5rem 0 0; font-size: 2.6rem; font-weight: 800; line-height: 1.22;
    letter-spacing: -0.02em; color: #0b1220;
}
.auth-headline span { color: #0e8fa8; }
.auth-sub { margin: 1rem 0 0; font-size: 1.1rem; color: #334155; }
.auth-bar { display: block; width: 48px; height: 4px; border-radius: 2px; background: #1d4f91; margin: 2rem 0 1.75rem; }
.auth-features { list-style: none; padding: 0; margin: 0; }
.auth-features li { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.4rem; }
.auth-features .f-icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.7); border: 1px solid #d3daec; color: #1d3f86; font-size: 1.05rem;
}
.auth-features strong { display: block; font-weight: 600; font-size: 1.05rem; color: #0b1220; }
.auth-features small { display: block; margin-top: 0.3rem; font-size: 0.95rem; color: #475569; }
.auth-stats {
    display: flex; gap: 2.75rem; flex-wrap: wrap;
    margin-top: 1.75rem; padding-top: 2.25rem; border-top: 1px solid #dde3ef;
}
.auth-stats .s-value { font-size: 1.75rem; font-weight: 800; color: #0b1220; letter-spacing: -0.01em; line-height: 1.1; }
.auth-stats .s-label { margin-top: 0.4rem; font-size: 0.88rem; color: #475569; }
.auth-left-footer {
    margin-top: auto; padding-top: 2.5rem; font-size: 0.9rem; color: #475569;
    display: flex; align-items: center; gap: 0.6rem;
}
.auth-left-footer::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #93a4d6; }

/* Right: form panel */
.auth-right {
    flex: 0 0 44%; min-width: 420px; position: relative; display: flex; align-items: center; justify-content: center;
    padding: 4rem 2.5rem;
    background: radial-gradient(circle at 70% 30%, rgba(14,143,168,0.05) 0%, transparent 45%), #f5f8fb;
}
.auth-right::before {   /* teal accent line along the top */
    content: ''; position: absolute; top: 20px; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #0e7490 0%, #22b5d1 45%, rgba(34,181,209,0) 85%);
}
.auth-card { width: 100%; max-width: 520px; }
.auth-eyebrow {
    display: flex; align-items: center; gap: 0.75rem;
    color: #0e8fa8; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.auth-eyebrow::before { content: ''; width: 26px; height: 3px; border-radius: 2px; background: #0e8fa8; }
.auth-title { margin: 1.1rem 0 0; font-size: 2.2rem; font-weight: 800; color: #0b1220; letter-spacing: -0.02em; }
.auth-subtitle { margin: 0.6rem 0 2.25rem; font-size: 1.1rem; color: #475569; }
.auth-label {
    display: block; margin-bottom: 0.6rem;
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #1e293b;
}
.auth-label .req { color: #e11d48; margin-left: 2px; }
.auth-input { position: relative; }
.auth-input > .bi:first-child {
    position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 1.15rem; pointer-events: none;
}
.auth-input input {
    width: 100%; height: 44px; padding: 0 3rem 0 2.9rem;
    font-size: 1.1rem; color: #0b1220;
    background: #e9f0fb; border: 1px solid #d5deec; border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.auth-input input::placeholder { color: #94a3b8; }
.auth-input input:focus { outline: none; background: #eef4fd; border-color: #0e8fa8; box-shadow: 0 0 0 3px rgba(14,143,168,0.15); }
.auth-input .auth-eye {
    position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: #64748b; padding: 0.4rem 0.6rem; font-size: 1.15rem; border-radius: 4px;
}
.auth-input .auth-eye:hover { color: #0e8fa8; }
.auth-field { margin-bottom: 1.6rem; }
.auth-field .pw-rules { margin-top: 0.6rem; }
.auth-link { color: #0e8fa8; text-decoration: none; font-size: 1rem; }
.auth-link:hover { color: #0b7287; text-decoration: underline; }
.auth-forgot { text-align: right; margin: -0.75rem 0 2rem; }
.btn-auth {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; height: 48px;
    border: 0; border-radius: 6px; color: #fff; font-size: 1.2rem; font-weight: 700; text-decoration: none;
    background: linear-gradient(90deg, #0b86a8 0%, #08b6d6 100%);
    box-shadow: 0 8px 20px rgba(8,140,180,0.25); transition: box-shadow 0.2s, transform 0.2s, filter 0.2s;
}
.btn-auth:hover { color: #fff; filter: brightness(1.05); box-shadow: 0 10px 24px rgba(8,140,180,0.32); transform: translateY(-1px); }
.btn-auth:disabled { opacity: 0.7; transform: none; }
.auth-divider {
    display: flex; align-items: center; gap: 1rem; margin: 2.75rem 0 2rem;
    color: #94a3b8; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
.auth-notice {
    display: flex; gap: 1rem; padding: 1.1rem 1.25rem;
    background: #eef1f6; border: 1px solid #e3e8f0; border-radius: 8px;
}
.auth-notice .n-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #e3f5ec; border: 1px solid #c4e8d5; color: #15925e; font-size: 1.05rem;
}
.auth-notice strong { display: block; font-weight: 600; color: #1e293b; }
.auth-notice p { margin: 0.25rem 0 0; font-size: 0.95rem; color: #64748b; line-height: 1.6; }
.auth-footer {
    margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #e2e8f0;
    text-align: center; font-size: 0.95rem; color: #94a3b8;
}
.auth-alert { border-radius: 6px; font-size: 0.95rem; margin-bottom: 1.5rem; }
.auth-mobile-brand { display: none; }

@media (max-width: 1199.98px) {
    .auth-left-inner { padding: 3.5rem 3rem 2rem; }
    .auth-headline { font-size: 2.2rem; margin-top: 3rem; }
}
@media (max-width: 991.98px) {
    .auth-left { display: none; }
    .auth-right { flex: 1 1 auto; padding: 3rem 1rem; }
    .auth-mobile-brand { display: block; margin-bottom: 2rem; }
    .auth-mobile-brand img { height: 24px; }
    .auth-title { font-size: 1.9rem; }
    .btn-auth { height: 46px; }
}


/* ---------- Dark theme ---------- */
body.dark-theme { background: #0b1120 !important; color: #cbd5e1; }
body.dark-theme .sidebar { background: #060b16; border-right: 1px solid #1e293b; }
body.dark-theme .main-header { background: #0f172a; border-bottom-color: #1e293b; box-shadow: none; }
body.dark-theme .page-head { background: linear-gradient(120deg, #10213a 0%, #111c33 100%); border-color: #1e293b; }
body.dark-theme .card-header { background: transparent; }
body.dark-theme .hdr-crumbs .current, body.dark-theme .hdr-user .u-name { color: #f1f5f9; }
body.dark-theme .hdr-btn:hover, body.dark-theme .hdr-user:hover, body.dark-theme .hdr-burger:hover { background: #1e293b; color: #f1f5f9; }
body.dark-theme .hdr-divider { background: #1e293b; }
body.dark-theme .main-footer { border-top-color: #1e293b; color: #475569; }
body.dark-theme .page-title, body.dark-theme .card-header, body.dark-theme .stat-value,
body.dark-theme .feed .f-text strong, body.dark-theme .kv dd, body.dark-theme .module-list .m-name,
body.dark-theme .profile-hero h5, body.dark-theme .detail-list dd, body.dark-theme .modal-header .modal-title { color: #f1f5f9; }
body.dark-theme .feed .f-text { color: #cbd5e1; }
body.dark-theme .card, body.dark-theme .stat { background: #0f172a; border-color: #1e293b; color: #cbd5e1; box-shadow: none; }
body.dark-theme .card-header, body.dark-theme .feed li, body.dark-theme .kv > div, body.dark-theme .module-list li,
body.dark-theme .profile-hero { border-color: #1e293b; }
body.dark-theme .card-footer { background: #0f172a; border-color: #1e293b; }
body.dark-theme .stat-bar, body.dark-theme .module-list .m-icon, body.dark-theme .status-pill { background: #1e293b; border-color: #334155; color: #94a3b8; }
body.dark-theme .table { color: #cbd5e1; --bs-table-bg: transparent; --bs-table-color: #cbd5e1; }
body.dark-theme .table thead th { background: #111c33 !important; color: #94a3b8; border-color: #1e293b; }
body.dark-theme .table td { border-color: #1e293b; }
body.dark-theme .table-hover tbody tr:hover > * { background-color: #111c33; color: #cbd5e1; --bs-table-hover-color: #cbd5e1; }
body.dark-theme .form-control, body.dark-theme .form-select, body.dark-theme .input-group-text { background-color: #0b1120; border-color: #334155; color: #cbd5e1; }
body.dark-theme .form-control:focus, body.dark-theme .form-select:focus { background-color: #0f172a; color: #e2e8f0; }
body.dark-theme .form-control[readonly] { background-color: #111c33; color: #94a3b8; }
body.dark-theme .form-label { color: #cbd5e1; }
body.dark-theme .btn-light { background: #0f172a; border-color: #334155; color: #cbd5e1; }
body.dark-theme .modal-content { background: #0f172a; color: #cbd5e1; border-color: #1e293b; }
body.dark-theme .modal-header, body.dark-theme .modal-footer { border-color: #1e293b; background: #0f172a; }
body.dark-theme .btn-close { filter: invert(1); }
body.dark-theme .text-muted { color: #94a3b8 !important; }
body.dark-theme .dropdown-menu { background: #0f172a; border-color: #1e293b; }
body.dark-theme .dropdown-item { color: #cbd5e1; }
body.dark-theme .dropdown-item:hover { background: #1e293b; }
body.dark-theme .page-link { background: #0b1120; border-color: #1e293b; color: #94a3b8; }
body.dark-theme .page-item.active .page-link { background: var(--pla-accent); border-color: var(--pla-accent); color: #fff; }
body.dark-theme .page-item.disabled .page-link { background: #0b1120; color: #334155; }
body.dark-theme .pw-strength { background: #1e293b; }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
    .sidebar { transform: translateX(-100%); box-shadow: 4px 0 24px rgba(15,23,42,0.25); width: min(260px, 85vw); }
    .sidebar.show { transform: translateX(0); }
    .main-content, body.sidebar-collapsed .main-content { margin-left: 0 !important; }
    .main-content > .container-fluid { padding: 1.25rem 1rem !important; }
    .main-header { padding: 0 0.5rem; }
    .hdr-user > div, .hdr-divider { display: none; }
    .pw-rules { columns: 1; }
}
/* User table: drop the Department column on narrower screens so actions stay visible */
@media (max-width: 1399.98px) { .col-dept { display: none; } }

/* ---------- Production plan ---------- */
.font-pre { white-space: pre; }
.plan-table td, .plan-table th { vertical-align: middle; }
.plan-bulk { display: none; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.55rem 1.25rem; background: var(--pla-accent-soft, #eef6fb); border-bottom: 1px solid var(--pla-line); font-size: 0.85rem; }
.plan-bulk.show { display: flex; }
body.dark-theme .plan-bulk { background: #0f172a; border-color: #1e293b; }
/* Comment is the last column, on one line; the table scrolls sideways when needed */
.plan-table .comment-cell { white-space: nowrap; }
.plan-table .cell-ellipsis { display: block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.tooltip-wide .tooltip-inner { max-width: 440px; text-align: left; font-size: 0.85rem; line-height: 1.45; padding: 0.5rem 0.65rem; }
/* Row actions stay visible at the right edge while scrolling */
.plan-table .col-sticky { position: sticky; right: 0; z-index: 1; background: var(--pla-surface); box-shadow: -6px 0 6px -6px rgba(15,23,42,0.18); }
.plan-table thead .col-sticky { background: var(--pla-card-head); }
.plan-table tbody tr:hover .col-sticky { background: #f6f8fb; }
body.dark-theme .plan-table .col-sticky { background: #111827; }
.plan-table th, .plan-table td { padding-left: 0.55rem; padding-right: 0.55rem; }
.plan-table th { white-space: nowrap; }
.plan-table td.actions .btn { padding: 0.15rem 0.4rem; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plan-toolbar { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.plan-toolbar .plan-meta { margin-left: auto; color: var(--pla-muted); font-size: 0.88rem; white-space: nowrap; }
.plan-toolbar .plan-meta strong { color: var(--pla-text); }
.seg.seg-compact a { padding: 0.3rem 0.7rem; font-size: 0.9rem; }
.plan-filter { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.6rem 1rem; border-bottom: 1px solid var(--pla-line-soft); background: var(--pla-card-head); border-radius: var(--pla-radius) var(--pla-radius) 0 0; }
.plan-filter .pf-search { width: 300px; max-width: 100%; }
.plan-filter .pf-line { width: auto; min-width: 150px; }
.plan-filter .pf-size { width: auto; }
body.dark-theme .plan-filter { background: transparent; border-color: #1e293b; }
.table-responsive { position: relative; }
.plan-filter .pf-divider { width: 1px; align-self: stretch; margin: 0.15rem 0.25rem; background: var(--pla-line); }

/* ==========================================================================
   Login theme: Suzuki Blue (sign-in, forgot / reset / change password pages)
   ========================================================================== */
.auth-body { background: #ffffff; }
.auth-left {
    background:
        radial-gradient(circle at 88% 8%, rgba(255,255,255,0.10) 0%, transparent 34%),
        radial-gradient(circle at 10% 95%, rgba(230,0,18,0.10) 0%, transparent 30%),
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(155deg, #0b2a6b 0%, #103a8a 55%, #1446a0 100%);
    background-size: auto, auto, 57px 57px, 57px 57px, auto;
    border-right: 0;
}
.auth-left::after { border-color: rgba(255,255,255,0.12); }
.auth-logo { filter: brightness(0) invert(1); }                       /* white logo on blue */
.auth-badge { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.28); color: #e6eeff; }
.auth-badge .dot { background: #e60012; }
.auth-headline { color: #ffffff; }
.auth-headline span { color: #9cc3ff; }
.auth-sub { color: #c9d8f5; }
.auth-bar { background: #e60012; }                                     /* thin red accent */
.auth-features .f-icon { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); color: #ffffff; }
.auth-features strong { color: #ffffff; }
.auth-features small { color: #b9cbef; }
.auth-stats { border-top-color: rgba(255,255,255,0.18); }
.auth-stats .s-value { color: #ffffff; }
.auth-stats .s-label { color: #b9cbef; }
.auth-left-footer { color: #b9cbef; }
.auth-left-footer::before { background: #e60012; }

.auth-right { background: #ffffff; }
.auth-right::before { background: linear-gradient(90deg, #1446a0 0%, #3b6fd1 40%, rgba(59,111,209,0) 80%); }
.auth-eyebrow { color: #1446a0; }
.auth-eyebrow::before { background: #e60012; }
.auth-input input { background: #f1f4f9; border-color: #dbe2ee; }
.auth-input input:focus { background: #ffffff; border-color: #1446a0; box-shadow: 0 0 0 3px rgba(20,70,160,0.15); }
.auth-input .auth-eye:hover, .auth-link { color: #1446a0; }
.auth-link:hover { color: #0b2a6b; }
.btn-auth { background: linear-gradient(90deg, #0b2a6b 0%, #1446a0 100%); box-shadow: 0 8px 20px rgba(20,70,160,0.25); }
.btn-auth:hover { box-shadow: 0 10px 24px rgba(20,70,160,0.32); }
.auth-notice { background: #f1f4f9; border-color: #e1e7f0; }

/* ==========================================================================
   Inner pages: Suzuki Blue left menu
   ========================================================================== */
.sidebar { background: linear-gradient(180deg, #0b2a6b 0%, #0e3380 60%, #123d93 100%); color: #d6e2fb; }
.sidebar-header, .sidebar-footer { border-color: rgba(255,255,255,0.10); }
.sidebar-subtitle { color: #b8cbf2; border-left-color: rgba(255,255,255,0.18); }
.nav-section-title { color: #8fa8db; }
.sidebar .nav-link { color: #d6e2fb; }
.sidebar .nav-link .bi { color: #a9c0ee; }
.sidebar .nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar .nav-link:hover .bi { color: #fff; }
.sidebar .nav-link.active { background: rgba(255,255,255,0.14); color: #fff; }
.sidebar .nav-link.active .bi { color: #fff; }
.sidebar .nav-link.active::before { background: var(--pla-red); }
.sidebar .nav-link.is-disabled, .sidebar .nav-link.is-disabled:hover { color: #8fa8db; }
.sidebar .nav-link.is-disabled .bi, .sidebar .nav-link.is-disabled:hover .bi { color: #7f97c9; }
.sidebar .nav-soon { background: rgba(255,255,255,0.10); color: #c7d6f5; border-color: rgba(255,255,255,0.20); }
.sidebar .sub-nav { border-left-color: rgba(255,255,255,0.14); }
.sidebar .sub-nav .nav-link { color: #b8cbf2; }
.sidebar .sub-nav .nav-link:hover, .sidebar .sub-nav .nav-link.active { color: #fff; }
.sidebar .sub-nav .nav-link.active { background: rgba(255,255,255,0.14); }
.sidebar-user:hover { background: rgba(255,255,255,0.08); }
.sidebar-user .u-name { color: #ffffff; }
.sidebar-user .u-role { color: #b8cbf2; }
.sidebar-user .avatar { background: rgba(255,255,255,0.16); color: #fff; }
.sidebar-copy { color: #8fa8db; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.20); }
input[type="date"]:not(:disabled):not([readonly]), input[type="time"]:not(:disabled):not([readonly]),
input[type="datetime-local"]:not(:disabled):not([readonly]), input[type="month"]:not(:disabled):not([readonly]) { cursor: pointer; }

/* ---------- Dashboard ---------- */
.dash-clock { display: flex; gap: 1.5rem; padding: 0.45rem 1rem; background: var(--pla-surface); border: 1px solid var(--pla-head-line); border-radius: 8px; }
.dash-clock > div { display: flex; flex-direction: column; line-height: 1.2; }
.dash-clock .dc-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pla-muted); }
.dash-clock .dc-value { font-size: 1.25rem; font-weight: 700; color: var(--pla-ink); font-variant-numeric: tabular-nums; }
.dash-window { font-size: 0.95rem; color: var(--pla-text); }
.seg .seg-item { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; font-size: 0.9rem; color: var(--pla-text); }
.dash-table th, .dash-table td { text-align: center; vertical-align: middle; }
.dash-table thead th { white-space: nowrap; }
.light { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; border: 1px solid rgba(0,0,0,0.35); }
.seg .light, p .light { width: 12px; height: 12px; }
.light-red { background: #ef1c1c; }
.light-yellow { background: #f2e600; }
.light-green { background: #7cc35a; }
.light-none { background: transparent; border: 2px dashed #94a3b8; }
body.dark-theme .dash-clock { background: #0f172a; border-color: #1e293b; }
body.dark-theme .dash-clock .dc-value { color: #f1f5f9; }

/* Dashboard fits one screen: slim header row + card grid filling the remaining height (desktop) */
.dash-head { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; margin-bottom: 0.75rem;
    padding: 0.55rem 1rem; background: var(--pla-head-bg); border: 1px solid var(--pla-head-line); border-radius: var(--pla-radius); }
.dash-head .page-title { font-size: 1.35rem; }
.dash-head .dash-clock { padding: 0.25rem 0.75rem; }
.dash-head .dash-clock .dc-value { font-size: 1.05rem; }
.dash-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(var(--dash-cols, 3), minmax(0, 1fr)); }
.dash-card { min-height: 0; display: flex; flex-direction: column; }
.dash-card .card-header { padding: 0.45rem 0.85rem; font-size: 0.98rem; }
.dash-card-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.dash-table th, .dash-table td { padding: 0.28rem 0.35rem; font-size: 0.88rem; }
.dash-table thead th { position: sticky; top: 0; z-index: 1; font-size: 0.78rem; }
.dash-table .light { width: 15px; height: 15px; }
@media (min-width: 992px) {
    body.dash-fit { overflow: hidden; }
    body.dash-fit .main-footer { display: none; }
    body.dash-fit .main-content > .container-fluid { padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; }
    /* height is set by the page script to the remaining window height */
    body.dash-fit .dash-grid { height: calc(100vh - 140px); grid-template-rows: repeat(var(--dash-rows, 2), minmax(0, 1fr)); }
}
@media (max-width: 991.98px) { .dash-grid { grid-template-columns: 1fr; } }

/* Dashboard: each line card has its own header colour */
.dash-card { border-top-width: 0; overflow: hidden; }
.dash-card .card-header { color: #fff; border-bottom: 0; }
.dash-card .card-header .card-hint { color: rgba(255,255,255,0.85); }
.dash-c0 .card-header { background: linear-gradient(90deg, #1446a0, #3b6fd1); }   /* blue */
.dash-c1 .card-header { background: linear-gradient(90deg, #0e7490, #14a3b8); }   /* teal */
.dash-c2 .card-header { background: linear-gradient(90deg, #6d28d9, #8b5cf6); }   /* purple */
.dash-c3 .card-header { background: linear-gradient(90deg, #c2410c, #f97316); }   /* orange */
.dash-c4 .card-header { background: linear-gradient(90deg, #047857, #10b981); }   /* green */
.dash-c5 .card-header { background: linear-gradient(90deg, #be185d, #ec4899); }   /* pink */
.dash-c0 .dash-table thead th { color: #1446a0; }
.dash-c1 .dash-table thead th { color: #0e7490; }
.dash-c2 .dash-table thead th { color: #6d28d9; }
.dash-c3 .dash-table thead th { color: #c2410c; }
.dash-c4 .dash-table thead th { color: #047857; }
.dash-c5 .dash-table thead th { color: #be185d; }

/* Dashboard tables always fit their card: fixed layout, headers may wrap, cells ellipsis */
.dash-table { table-layout: fixed; width: 100%; }
.dash-table thead th { white-space: normal; line-height: 1.15; vertical-align: bottom; }
.dash-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-card-body { overflow-x: hidden; overflow-y: auto; }
/* Clock on one line inside the header row */
.dash-head .dash-clock { flex-direction: row; gap: 1rem; padding: 0.3rem 0.8rem; }
.dash-head .dash-clock > div { flex-direction: row; align-items: baseline; gap: 0.4rem; }
.dash-head .dash-clock .dc-label { font-size: 0.72rem; }
.dash-head .dash-clock .dc-value { font-size: 1rem; white-space: nowrap; }
.dash-head .dash-window { white-space: nowrap; }
.dash-source { background: #eaf0fb; color: #1446a0; border: 1px solid #c9d7f2; font-weight: 600; }
.dash-source-plan { background: #fff4e5; color: #b45309; border-color: #fcd9a8; }
/* Dashboard status: dot + text */
.dash-table td.dash-status { text-align: left; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; white-space: normal; overflow: visible; line-height: 1.2; }
.dash-table td.dash-status .light { margin-right: 0.35rem; }
.dash-status.st-red { color: #c62828; }
.dash-status.st-yellow { color: #a16207; }
.dash-status.st-green { color: #2e7d32; }
.dash-status.st-none { color: #64748b; font-weight: 500; }
.dash-table thead th:last-child { text-align: left; }
/* Compact key facts (instead of large stat boxes) */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.85rem 1.25rem; }
.facts > div { display: flex; flex-direction: column; gap: 0.15rem; padding-left: 0.65rem; border-left: 3px solid var(--pla-line); }
.facts .f-label { font-size: 0.8rem; color: var(--pla-muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.facts .f-value { font-size: 1.02rem; font-weight: 600; color: var(--pla-ink); }
body.dark-theme .facts .f-value { color: #f1f5f9; }
/* Manage Users: several roles per user */
.role-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.4rem 0.75rem; padding: 0.6rem 0.75rem;
    border: 1px solid var(--pla-line); border-radius: 8px; max-height: 190px; overflow-y: auto; }
.role-pick { display: flex; align-items: center; gap: 0.45rem; margin: 0; cursor: pointer; padding: 0.15rem 0; }
.role-pick .form-check-input { margin: 0; flex-shrink: 0; }
.role-badges .badge { margin: 1px 0; }
.notify-table td, .notify-table th { vertical-align: middle; }
/* Dashboard legend: what each status colour means */
.dash-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.25rem; margin: -0.25rem 0 0.6rem; padding: 0 0.25rem;
    font-size: 0.85rem; color: var(--pla-text); }
.dash-legend > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.dash-legend .lg-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pla-muted); }
.dash-legend .light { width: 13px; height: 13px; }
label .light { width: 13px; height: 13px; margin-right: 0.2rem; }
.table td .light { width: 14px; height: 14px; vertical-align: -2px; }
/* Red and amber status dots blink in the lot tables to draw attention (legend / chip dots stay still) */
@keyframes light-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,28,28,0.55); } 50% { opacity: 0.35; box-shadow: 0 0 0 4px rgba(239,28,28,0); } }
@keyframes light-blink-amber { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(242,230,0,0.6); } 50% { opacity: 0.35; box-shadow: 0 0 0 4px rgba(242,230,0,0); } }
.table td .light-red, .light-blinking.light-red { animation: light-blink 1.2s ease-in-out infinite; }
.table td .light-yellow, .light-blinking.light-yellow { animation: light-blink-amber 1.6s ease-in-out infinite; }
.summary-chips .chip .light { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .table td .light-red, .table td .light-yellow, .light-blinking { animation: none; } }
/* Contingency report */
.contingency-table .group-head th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 0; padding-top: 0.55rem; }
.contingency-table .gh-delayed { color: #c62828; }
.contingency-table .gh-repl { color: #2e7d32; }
.contingency-table .gh-arrow { width: 36px; }
/* Dark theme: dashboard header strip, legend and the coloured line headers */
body.dark-theme .dash-head { background: linear-gradient(120deg, #10213a 0%, #111c33 100%); border-color: #1e293b; }
body.dark-theme .dash-head .page-title, body.dark-theme .dash-window { color: #f1f5f9; }
body.dark-theme .dash-legend { color: #cbd5e1; }
body.dark-theme .dash-legend strong { color: #f1f5f9; }
body.dark-theme .dash-legend .lg-title { color: #94a3b8; }
body.dark-theme .seg .seg-item { color: #cbd5e1; }
body.dark-theme .dash-card .card-header { color: #fff; }
body.dark-theme .dash-c0 .card-header { background: linear-gradient(90deg, #1446a0, #3b6fd1); }
body.dark-theme .dash-c1 .card-header { background: linear-gradient(90deg, #0e7490, #14a3b8); }
body.dark-theme .dash-c2 .card-header { background: linear-gradient(90deg, #6d28d9, #8b5cf6); }
body.dark-theme .dash-c3 .card-header { background: linear-gradient(90deg, #c2410c, #f97316); }
body.dark-theme .dash-c4 .card-header { background: linear-gradient(90deg, #047857, #10b981); }
body.dark-theme .dash-c5 .card-header { background: linear-gradient(90deg, #be185d, #ec4899); }
body.dark-theme .dash-c0 .dash-table thead th { color: #93b4f0; }
body.dark-theme .dash-c1 .dash-table thead th { color: #67d4e6; }
body.dark-theme .dash-c2 .dash-table thead th { color: #c4b5fd; }
body.dark-theme .dash-c3 .dash-table thead th { color: #fdba74; }
body.dark-theme .dash-c4 .dash-table thead th { color: #6ee7b7; }
body.dark-theme .dash-c5 .dash-table thead th { color: #f9a8d4; }
body.dark-theme .light-none { border-color: #94a3b8; }
body.dark-theme .contingency-table .gh-delayed { color: #f87171; }
body.dark-theme .contingency-table .gh-repl { color: #6ee7b7; }
.contingency-table .supplier-cell { max-width: 220px; white-space: normal; }
.supplier-badge { background: #fdecec; color: #b42318; border: 1px solid #f5c2c0; font-family: Consolas, monospace; font-weight: 600; margin: 1px 0; }
body.dark-theme .supplier-badge { background: #3b1414; color: #fca5a5; border-color: #7f1d1d; }

/* ---------- AI Analysis panels: follow the portal theme (light / dark) ---------- */
.ai-panel {
    --ai-bg: linear-gradient(160deg, #ffffff 0%, #f7f6ff 55%, #f1f5ff 100%);
    --ai-border: #e3e3f5; --ai-shadow: 0 8px 24px rgba(30,40,90,0.07);
    --ai-text: #334155; --ai-strong: #0f172a; --ai-title: #312e81; --ai-muted: #64748b; --ai-faint: #94a3b8;
    --ai-pill-c: #4f46e5; --ai-pill-bg: rgba(99,102,241,0.08); --ai-pill-b: rgba(99,102,241,0.3);
    --ai-note-bg: rgba(99,102,241,0.05); --ai-note-b: rgba(99,102,241,0.3);
    --ai-card-bg: #ffffff; --ai-card-b: #e6e8f2; --ai-grid: rgba(15,23,42,0.08); --ai-track: rgba(15,23,42,0.07);
    --ai-tab-bg: rgba(99,102,241,0.06); --ai-tab-active: #ffffff; --ai-tab-c: #475569; --ai-tab-ac: #312e81;
    --c-red: #dc2626; --c-amber: #d97706; --c-green: #059669; --c-fc: #6366f1;
    position: relative; padding: 1.1rem 1.25rem 1rem; border-radius: 14px; color: var(--ai-text);
    background: var(--ai-bg); border: 1px solid var(--ai-border); box-shadow: var(--ai-shadow);
}
body.dark-theme .ai-panel {
    --ai-bg: radial-gradient(circle at 15% 0%, rgba(124,92,255,0.18) 0%, transparent 45%), linear-gradient(160deg, #141a33 0%, #10152b 60%, #0d1226 100%);
    --ai-border: #262f52; --ai-shadow: 0 10px 30px rgba(10,15,40,0.25);
    --ai-text: #dbe2f3; --ai-strong: #ffffff; --ai-title: #e7ebff; --ai-muted: #8f99c0; --ai-faint: #7c86ad;
    --ai-pill-c: #c7c9ff; --ai-pill-bg: rgba(99,102,241,0.15); --ai-pill-b: rgba(129,140,248,0.45);
    --ai-note-bg: rgba(99,102,241,0.08); --ai-note-b: rgba(129,140,248,0.35);
    --ai-card-bg: rgba(30,38,72,0.55); --ai-card-b: #2a3458; --ai-grid: rgba(148,163,184,0.15); --ai-track: rgba(148,163,184,0.15);
    --ai-tab-bg: rgba(255,255,255,0.04); --ai-tab-active: rgba(99,102,241,0.25); --ai-tab-c: #a3acd1; --ai-tab-ac: #ffffff;
    --c-red: #f87171; --c-amber: #facc15; --c-green: #4ade80; --c-fc: #818cf8;
}
.ai-panel::before { content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #8b5cf6, #3b82f6 60%, transparent); }
.ai-panel-alt::before { background: linear-gradient(90deg, #22d3ee, #6366f1 60%, transparent); }
.ai-panel-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.ai-icon { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6); font-size: 1.05rem; flex: none; }
.ai-dot { width: 12px; height: 12px; border-radius: 50%; background: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.25); flex: none; animation: light-blink 1.6s ease-in-out infinite; }
.ai-title { font-size: 1.02rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ai-title); }
.ai-pill { padding: 0.2rem 0.75rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ai-pill-c); background: var(--ai-pill-bg); border: 1px solid var(--ai-pill-b); white-space: nowrap; }
.ai-section-title { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-muted); margin-bottom: 0.5rem; }
.ai-section-title .ai-sub { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 0.4rem; color: var(--ai-muted); }
/* inner tabs (Status Trend | Risk Score) */
.ai-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--ai-tab-bg); border: 1px solid var(--ai-border); margin-bottom: 0.9rem; flex-wrap: wrap; }
.ai-tab { border: 0; background: transparent; color: var(--ai-tab-c); font-size: 0.86rem; font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.ai-tab:hover { color: var(--ai-tab-ac); }
.ai-tab.active { background: var(--ai-tab-active); color: var(--ai-tab-ac); box-shadow: 0 1px 4px rgba(30,40,90,0.12); }
.ai-tab .ai-count { font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--ai-pill-bg); color: var(--ai-pill-c); }
.ai-tab .ai-count.hot { background: rgba(239,68,68,0.15); color: var(--c-red); }
.ai-pane[hidden] { display: none; }
/* trend chart */
.ai-chart svg { display: block; width: 100%; }
.ai-chart .g { stroke: var(--ai-grid); stroke-width: 1; }
.ai-chart .ax { fill: var(--ai-faint); font-size: 11px; }
.ai-chart .ax.fc { fill: var(--c-fc); }
.ai-chart polyline { fill: none !important; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ai-chart .l-red { stroke: var(--c-red); fill: var(--c-red); }
.ai-chart .l-amber { stroke: var(--c-amber); fill: var(--c-amber); }
.ai-chart .l-green { stroke: var(--c-green); fill: var(--c-green); }
.ai-chart .l-fc { stroke: var(--c-fc); fill: var(--c-fc); }
.ai-chart polyline.l-fc { stroke-dasharray: 6 5; }
.ai-chart-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.8rem; color: var(--ai-muted); margin: 0.3rem 0 0.5rem; }
.ai-chart-legend .sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; }
.ai-chart-legend .sw-red { background: var(--c-red); } .ai-chart-legend .sw-amber { background: var(--c-amber); } .ai-chart-legend .sw-green { background: var(--c-green); }
.ai-chart-legend .sw-fc { background: repeating-linear-gradient(90deg, var(--c-fc) 0 5px, transparent 5px 8px); }
.ai-note { font-size: 0.85rem; color: var(--ai-text); background: var(--ai-note-bg); border: 1px dashed var(--ai-note-b); border-radius: 10px; padding: 0.55rem 0.75rem; margin-bottom: 0.6rem; }
.ai-note strong { color: var(--ai-strong); }
.ai-list { color: var(--ai-text); font-size: 0.9rem; margin: 0; padding-left: 1.1rem; }
.ai-list li { margin-bottom: 0.3rem; } .ai-list strong { color: var(--ai-strong); }
.ai-foot { font-size: 0.78rem; color: var(--ai-faint); margin-top: 0.7rem; }
.ai-btn { color: var(--ai-pill-c); border: 1px solid var(--ai-pill-b); background: var(--ai-pill-bg); }
.ai-btn:hover, .ai-btn:focus { color: #fff; background: #6366f1; border-color: #6366f1; }
/* risk list */
.risk-list { display: flex; flex-direction: column; gap: 0.55rem; }
.risk-row { display: grid; grid-template-columns: 110px 105px 1fr 40px 50px; align-items: center; column-gap: 0.7rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--ai-grid); }
.risk-row:last-child { border-bottom: 0; }
.risk-lot { color: var(--ai-strong); font-weight: 700; letter-spacing: 0.04em; text-decoration: none; display: inline-flex; align-items: center; }
.risk-lot:hover { color: #6366f1; }
.risk-meta { font-size: 0.78rem; color: var(--ai-muted); white-space: nowrap; }
.risk-bar { height: 8px; border-radius: 8px; background: var(--ai-track); overflow: hidden; }
.risk-fill { display: block; height: 100%; border-radius: 8px; }
.risk-score { font-size: 1.2rem; font-weight: 800; text-align: right; }
.risk-tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-align: center; padding: 0.2rem 0; border-radius: 6px; }
.risk-reasons { grid-column: 1 / -1; font-size: 0.74rem; color: var(--ai-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.risk-fill.lvl-high { background: linear-gradient(90deg, #ef4444, #f87171); } .risk-score.lvl-high { color: var(--c-red); }
.risk-tag.lvl-high { color: var(--c-red); background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.4); }
.risk-fill.lvl-med { background: linear-gradient(90deg, #f59e0b, #facc15); } .risk-score.lvl-med { color: var(--c-amber); }
.risk-tag.lvl-med { color: var(--c-amber); background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.4); }
.risk-fill.lvl-low { background: linear-gradient(90deg, #22c55e, #4ade80); } .risk-score.lvl-low { color: var(--c-green); }
.risk-tag.lvl-low { color: var(--c-green); background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.35); }
/* insight cards */
.insight-list { display: flex; flex-direction: column; gap: 0.7rem; }
.ai-tabs-main { margin-bottom: 1rem; background: var(--pla-card, #fff); border-color: #e3e3f5; }
.ai-tabs-main .ai-tab { --ai-tab-c: #475569; --ai-tab-ac: #312e81; --ai-tab-active: rgba(99,102,241,0.12); color: var(--ai-tab-c); font-size: 0.95rem; padding: 0.5rem 1.1rem; }
.ai-tabs-main .ai-tab.active { background: var(--ai-tab-active); color: var(--ai-tab-ac); }
.ai-tabs-main .ai-count { background: rgba(99,102,241,0.12); color: #4f46e5; }
body.dark-theme .ai-tabs-main { background: #0f172a; border-color: #1e293b; }
body.dark-theme .ai-tabs-main .ai-tab { --ai-tab-c: #a3acd1; --ai-tab-ac: #ffffff; --ai-tab-active: rgba(99,102,241,0.3); }
.ai-main-pane[hidden] { display: none; }
.insight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 0.8rem; }
.insight-card { padding: 0.8rem 0.9rem; border-radius: 12px; background: var(--ai-card-bg); border: 1px solid var(--ai-card-b); }
.insight-type { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; margin-bottom: 0.45rem; }
.type-prediction { color: #b45309; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.45); }
.type-action { color: #047857; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.4); }
.type-anomaly { color: #be123c; background: rgba(244,63,94,0.1); border: 1px solid rgba(244,63,94,0.4); }
.type-info { color: #4338ca; background: rgba(99,102,241,0.1); border: 1px solid rgba(129,140,248,0.4); }
body.dark-theme .type-prediction { color: #fcd34d; } body.dark-theme .type-action { color: #86efac; }
body.dark-theme .type-anomaly { color: #fda4af; } body.dark-theme .type-info { color: #a5b4fc; }
.insight-title { color: var(--ai-strong); font-weight: 700; font-size: 0.98rem; line-height: 1.35; }
.insight-detail { color: var(--ai-text); font-size: 0.88rem; margin-top: 0.25rem; }
.insight-basis { color: var(--ai-faint); font-size: 0.75rem; font-style: italic; margin-top: 0.3rem; }
.nav-soon-pill { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.05rem 0.4rem; border-radius: 4px; background: rgba(100,116,139,0.15); color: #64748b; margin-left: 0.25rem; vertical-align: 1px; }
@media (max-width: 767.98px) { .risk-row { grid-template-columns: 1fr 1fr 40px 50px; } .risk-meta { display: none; } }

/* ---------- Production Analysis ---------- */
.pa-pending { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.65rem 0.9rem; border-radius: 10px; font-size: 0.9rem;
    background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); color: var(--bs-body-color); }
.pa-pending .bi { color: #d97706; font-size: 1.05rem; margin-top: 1px; }
.pa-chart { display: flex; align-items: flex-end; gap: 1rem; height: 240px; padding: 1.4rem 0.25rem 0; border-bottom: 1px solid var(--bs-border-color); }
.pa-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.pa-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.pa-bar { position: relative; width: 38%; max-width: 34px; border-radius: 5px 5px 0 0; }
.pa-plan { background: linear-gradient(180deg, #3b6fd8, #1f4fae); }
.pa-actual { background: repeating-linear-gradient(135deg, rgba(100,116,139,0.18) 0 5px, rgba(100,116,139,0.06) 5px 10px); border: 1px dashed rgba(100,116,139,0.45); border-bottom: 0; }
.pa-val { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; color: var(--bs-body-color); }
.pa-label { font-size: 0.8rem; font-weight: 600; color: var(--pla-muted, #64748b); padding-top: 0.4rem; white-space: nowrap; transform: translateY(100%); margin-bottom: -0.2rem; }
.pa-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--pla-muted, #64748b); margin-top: 2rem; }
.pa-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 0.35rem; vertical-align: -1px; }
.pa-table .pa-total td { font-weight: 700; background: rgba(59,111,216,0.05); border-bottom-width: 2px; }

/* ---------- DUMMY DATA badges (demo rows kept in the system) ---------- */
.dummy-badge { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.12rem 0.55rem; border-radius: 999px; white-space: nowrap; vertical-align: middle;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; cursor: help;
    color: #9a3412; background: repeating-linear-gradient(135deg, #ffedd5 0 6px, #fed7aa 6px 12px); border: 1px dashed #f97316; }
.dummy-badge.dummy-sm { font-size: 0.6rem; padding: 0.02rem 0.4rem; letter-spacing: 0.06em; }
.dummy-badge.dummy-hdr { font-size: 0.74rem; padding: 0.3rem 0.75rem; margin-right: 0.5rem; }
body.dark-theme .dummy-badge { color: #fdba74; background: repeating-linear-gradient(135deg, rgba(249,115,22,0.18) 0 6px, rgba(249,115,22,0.08) 6px 12px); border-color: #fb923c; }

/* ---------- AI Analysis > Suppliers ---------- */
.sup-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.sup-chip { padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.84rem; color: var(--ai-text); background: var(--ai-card-bg); border: 1px solid var(--ai-card-b); }
.sup-chip strong { color: var(--ai-strong); margin-left: 0.2rem; }
.sup-chip-d strong { color: var(--c-red); }
.ai-panel .sup-table { --bs-table-bg: transparent; --bs-table-color: var(--ai-text); --bs-table-border-color: var(--ai-grid); }
.ai-panel .sup-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ai-muted); font-weight: 700; white-space: nowrap; }
.ai-panel .sup-table td { color: var(--ai-text); }
.sup-name { font-weight: 700; color: var(--ai-strong); }
.sup-code { font-size: 0.74rem; color: var(--ai-faint); }
.grade { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; font-weight: 800; font-size: 0.85rem; color: #fff; }
.grade-a { background: #059669; } .grade-b { background: #0ea5e9; } .grade-c { background: #d97706; } .grade-d { background: #dc2626; }
.grade-score { font-size: 0.74rem; color: var(--ai-faint); margin-left: 0.25rem; }
.sup-bars { display: flex; flex-direction: column; gap: 0.55rem; }
.sup-bar-row { display: grid; grid-template-columns: 9.5rem 1fr 3rem; align-items: center; gap: 0.6rem; font-size: 0.82rem; }
.sup-bar-label { color: var(--ai-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-bar { height: 12px; border-radius: 6px; background: var(--ai-track); overflow: hidden; }
.sup-bar-fill { display: block; height: 100%; border-radius: 6px; }
.grade-bg-a { background: linear-gradient(90deg, #059669, #34d399); } .grade-bg-b { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.grade-bg-c { background: linear-gradient(90deg, #d97706, #fbbf24); } .grade-bg-d { background: linear-gradient(90deg, #dc2626, #f87171); }
.sup-bar-val { text-align: right; font-weight: 700; color: var(--ai-strong); }
.sup-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: 1rem; font-size: 0.76rem; color: var(--ai-muted); }
.sup-legend .grade { width: 20px; height: 20px; font-size: 0.7rem; margin-right: 0.2rem; }

/* ---------- AI Cost Analysis ---------- */
.cost-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
@media (max-width: 1199.98px) { .cost-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .cost-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cost-card { background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color); border-left: 4px solid #6366f1; border-radius: 12px; padding: 0.7rem 1rem; }
.cost-card .cc-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pla-muted, #64748b); }
.cost-card .cc-value { font-size: 1.45rem; font-weight: 800; line-height: 1.2; margin-top: 0.15rem; }
.cost-card .cc-sub { font-size: 0.8rem; color: var(--pla-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-total { border-left-color: #2563eb; } .cc-total .cc-value { color: #2563eb; }
.cc-in { border-left-color: #06b6d4; } .cc-in .cc-value { color: #0891b2; }
.cc-out { border-left-color: #f59e0b; } .cc-out .cc-value { color: #d97706; }
.cc-avg { border-left-color: #059669; } .cc-avg .cc-value { color: #059669; }
.cc-calls { border-left-color: #64748b; }
body.dark-theme .cost-card { background: #0f172a; border-color: #1e293b; }
.cost-chart svg { display: block; width: 100%; }
.cost-chart .g { stroke: rgba(100,116,139,0.18); stroke-width: 1; }
.cost-chart .ax { fill: #94a3b8; font-size: 11px; }
.cost-chart polyline { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cost-chart .l-in { stroke: #06b6d4; fill: #06b6d4; } .cost-chart polyline.l-in { fill: none; }
.cost-chart .l-out { stroke: #f59e0b; fill: #f59e0b; } .cost-chart polyline.l-out { fill: none; }
.cost-chart .a-in { fill: rgba(6,182,212,0.12); } .cost-chart .a-out { fill: rgba(245,158,11,0.14); }
.cost-legend { display: flex; gap: 1.2rem; font-size: 0.82rem; color: var(--pla-muted, #64748b); margin-top: 0.4rem; }
.cost-legend .sw { display: inline-block; width: 22px; height: 10px; border-radius: 3px; margin-right: 0.35rem; vertical-align: -1px; }
.cost-legend .sw-in { background: #06b6d4; } .cost-legend .sw-out { background: #fbbf24; }
.cost-donut { display: flex; justify-content: center; }
.cost-donut .d-in { stroke: #06b6d4; } .cost-donut .d-out { stroke: #fbbf24; }
.cost-donut .d-pct { font-size: 26px; font-weight: 800; fill: #d97706; } .cost-donut .d-cap { font-size: 12px; fill: #94a3b8; }
.cost-features { margin-top: 1rem; border-top: 1px solid var(--bs-border-color); padding-top: 0.7rem; }
.cf-row { display: flex; justify-content: space-between; font-size: 0.86rem; padding: 0.15rem 0; }
.cost-table td, .cost-table th { vertical-align: middle; }

/* ---------- Coming-soon tab panels ---------- */
.soon-panel { text-align: center; padding: 3rem 1.5rem; }
.soon-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #fff; background: linear-gradient(135deg, #6366f1, #3b82f6); }
.soon-title { font-size: 1.35rem; font-weight: 700; }
.soon-text { max-width: 680px; margin: 0.5rem auto 1rem; color: var(--pla-muted, #64748b); }
.soon-needs { max-width: 680px; margin: 0 auto; font-size: 0.86rem; padding: 0.7rem 1rem; border-radius: 10px; background: rgba(99,102,241,0.06); border: 1px dashed rgba(99,102,241,0.35); }

/* ---------- Dashboard tabs and Daily KPIs ---------- */
.dash-tabs { margin-bottom: 0.6rem; }
.dash-tabs .nav-link { font-weight: 600; }
.kpi-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.8rem; }
.kpi-type { display: inline-flex; }
.kpi-type a { padding: 0.3rem 0.95rem; text-decoration: none; color: inherit; font-weight: 600; }
.kpi-type a.active { background: #2563eb; color: #fff; border-radius: 6px; }
.kpi-day { display: inline-flex; align-items: center; gap: 0.3rem; }
.kpi-daytitle { font-weight: 600; color: var(--pla-muted, #64748b); }
.kpi-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
@media (max-width: 1199.98px) { .kpi-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .kpi-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-card { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 1rem; border-radius: 12px; background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color); border-left: 4px solid #64748b; min-width: 0; }
.kpi-card > div:last-child { min-width: 0; }
.kc-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pla-muted, #64748b); }
.kc-value { font-size: 1.6rem; font-weight: 800; line-height: 1.15; }
.kc-sub { font-size: 0.78rem; color: var(--pla-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-icon { width: 42px; height: 42px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.kc-green { border-left-color: #059669; } .kc-green .kc-value { color: #059669; } .kc-green .kc-icon { background: rgba(5,150,105,0.1); color: #059669; }
.kc-blue { border-left-color: #2563eb; } .kc-blue .kc-value { color: #2563eb; } .kc-blue .kc-icon { background: rgba(37,99,235,0.1); color: #2563eb; }
.kc-red { border-left-color: #dc2626; } .kc-red .kc-value { color: #dc2626; } .kc-red .kc-icon { background: rgba(220,38,38,0.1); color: #dc2626; }
.kc-ring { --p: 0; width: 50px; height: 50px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: conic-gradient(#059669 calc(var(--p) * 1%), rgba(100,116,139,0.15) 0); }
.kc-ring span { width: 38px; height: 38px; border-radius: 50%; background: var(--bs-body-bg, #fff); display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; color: #059669; }
body.dark-theme .kpi-card { background: #0f172a; border-color: #1e293b; }
body.dark-theme .kc-ring span { background: #0f172a; }
.kpi-matrix { table-layout: fixed; width: 100%; }
.kpi-matrix th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pla-muted, #64748b); white-space: normal; line-height: 1.2; vertical-align: bottom; }
.kpi-matrix th:nth-child(1) { width: 13%; } .kpi-matrix th:nth-child(2) { width: 7%; } .kpi-matrix th:nth-child(3) { width: 8%; }
.kpi-matrix th:nth-child(4) { width: 9%; } .kpi-matrix th:nth-child(5) { width: 8%; } .kpi-matrix th:nth-child(6) { width: 10%; }
.kpi-matrix th:nth-child(7) { width: 9%; } .kpi-matrix th:nth-child(8) { width: 36%; }
.kpi-matrix th .light { width: 9px; height: 9px; }
.kpi-dots { line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1599.98px) {
    .kpi-matrix th { font-size: 0.62rem; letter-spacing: 0; }
    .kpi-matrix th .light { display: none; }
    .kpi-matrix th:nth-child(1) { width: 14%; } .kpi-matrix th:nth-child(4) { width: 11%; } .kpi-matrix th:nth-child(5) { width: 10%; }
    .kpi-matrix th:nth-child(6) { width: 13%; } .kpi-matrix th:nth-child(7) { width: 11%; } .kpi-matrix th:nth-child(8) { width: 26%; }
}
.kdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin: 1px; vertical-align: middle; cursor: help; }
.kdot-red { background: #dc2626; } .kdot-yellow { background: #eab308; } .kdot-green { background: #16a34a; } .kdot-none { border: 2px dashed #94a3b8; }
.top-sup { padding: 0.45rem 0; border-bottom: 1px solid var(--bs-border-color); }
.top-sup:last-child { border-bottom: 0; }
.ts-head { display: flex; align-items: center; gap: 0.5rem; }
.ts-rank { width: 22px; height: 22px; border-radius: 6px; background: rgba(220,38,38,0.12); color: #dc2626; font-weight: 800; font-size: 0.78rem;
    display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ts-name { font-weight: 700; } .ts-code { margin-left: auto; font-size: 0.75rem; color: var(--pla-muted, #64748b); }
.ts-bar { height: 7px; border-radius: 4px; background: rgba(100,116,139,0.15); margin: 0.35rem 0 0.2rem; overflow: hidden; }
.ts-bar span { display: block; height: 100%; background: linear-gradient(90deg, #dc2626, #f87171); border-radius: 4px; }
.ts-meta { font-size: 0.78rem; color: var(--pla-muted, #64748b); }
.wk-bar { position: relative; height: 16px; border-radius: 5px; background: rgba(100,116,139,0.13); overflow: hidden; }
.wk-bar span { display: block; height: 100%; background: linear-gradient(90deg, #059669, #34d399); }
.wk-bar em { position: absolute; right: 6px; top: 0; font-style: normal; font-size: 0.72rem; font-weight: 700; line-height: 16px; }

/* ---------- Data Sync ---------- */
.sync-status .card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.sync-health { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; border-radius: 10px; font-size: 0.95rem; flex: 1 1 340px; }
.sync-health .bi { font-size: 1.3rem; }
.sync-ok { background: rgba(5,150,105,0.08); color: #047857; }
.sync-stale { background: rgba(217,119,6,0.1); color: #b45309; }
.sync-failing, .sync-not_running { background: rgba(220,38,38,0.08); color: #b91c1c; }
.sync-off, .sync-waiting { background: rgba(100,116,139,0.1); color: #475569; }
body.dark-theme .sync-ok { color: #34d399; } body.dark-theme .sync-stale { color: #fbbf24; } body.dark-theme .sync-failing, body.dark-theme .sync-not_running { color: #f87171; } body.dark-theme .sync-off, body.dark-theme .sync-waiting { color: #cbd5e1; }
.sync-facts { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; }
.sync-facts > div { display: flex; flex-direction: column; }
.sf-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pla-muted, #64748b); }
.sf-value { font-weight: 600; }
.sync-table .sync-msg { max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; }
.st-success { background: #059669; } .st-failed { background: #dc2626; } .st-skipped { background: #64748b; } .st-running { background: #2563eb; }
.trig-auto { background: rgba(37,99,235,0.12); color: #1d4ed8; } .trig-manual { background: rgba(124,58,237,0.12); color: #6d28d9; }
.trig-scheduler { background: rgba(14,116,144,0.12); color: #0e7490; }
.sync-howto { font-size: 0.86rem; padding: 0.7rem 1rem; border-radius: 10px; background: rgba(37,99,235,0.05); border: 1px dashed rgba(37,99,235,0.3); }
.preview-table { max-height: 60vh; overflow: auto; }
.preview-table thead th { position: sticky; top: 0; background: var(--bs-body-bg, #fff); z-index: 1; }
.preview-table td, .preview-table th { font-size: 0.75rem; white-space: nowrap; }
.dash-source-live { background: rgba(5,150,105,0.12) !important; color: #047857 !important; }
body.dark-theme .dash-source-live { color: #34d399 !important; }
/* GEN / MRN status dots (Contingency report) */
.gm-dots { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.gm-dots .light { width: 11px; height: 11px; }
/* Production Analysis tabs */
.pa-prev { background: linear-gradient(180deg, #a5b4cf, #8394b3); }
.pa-mini { height: 6px; border-radius: 3px; background: rgba(100,116,139,0.15); overflow: hidden; }
.pa-mini span { display: block; height: 100%; background: #3b6fd8; }
.pa-hbar { position: relative; height: 20px; flex: 1; border-radius: 4px; background: rgba(100,116,139,0.08); min-width: 80px; }
.pa-hbar span { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(90deg, #3b6fd8, #5b8ae6); }
.pa-hbar-alt span { background: linear-gradient(90deg, #d97706, #f59e0b); }
.pa-hbar-soft span { background: linear-gradient(90deg, #64748b, #94a3b8); }
.pa-hbar b { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.45); }
.pa-split-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.22rem 0; }
.pa-split-name { width: 9.5rem; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-split-pct { width: 3.2rem; text-align: right; font-size: 0.8rem; color: var(--pla-muted, #64748b); }
.pa-heat td, .pa-heat th { font-size: 0.78rem; padding: 0.3rem 0.35rem; white-space: nowrap; }
.pa-heat td.heat-1 { background: rgba(59,111,216,0.12); } .pa-heat td.heat-2 { background: rgba(59,111,216,0.26); }
.pa-heat td.heat-3 { background: rgba(59,111,216,0.42); } .pa-heat td.heat-4 { background: rgba(59,111,216,0.62); color: #fff; }
.pa-heat td.heat-5 { background: rgba(31,79,174,0.9); color: #fff; font-weight: 700; }
.pa-stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(100,116,139,0.12); }
.pa-stack .s-green { background: #16a34a; } .pa-stack .s-yellow { background: #eab308; } .pa-stack .s-red { background: #dc2626; }
.pa-trend td, .pa-trend th { font-size: 0.8rem; }
.pa-vbar { height: 34px; width: 18px; margin: 0 auto 2px; display: flex; align-items: flex-end; background: rgba(100,116,139,0.08); border-radius: 3px; }
.pa-vbar span { display: block; width: 100%; background: #3b6fd8; border-radius: 3px; }
/* Supplier Analysis */
.supplier-code { display: inline-block; font-family: var(--bs-font-monospace); font-size: 0.75rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 4px; background: rgba(59,111,216,0.1); color: #1f4fae; }
body.dark-theme .supplier-code { background: rgba(91,138,230,0.2); color: #b9cdf5; }
.pa-stack .s-grey { background: #94a3b8; }
.summary-chips .chip .grade { width: 20px; height: 20px; font-size: 0.72rem; border-radius: 5px; }
.sh-series { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.sh-col { flex: 1 0 34px; max-width: 70px; text-align: center; }
.sh-bar { height: 110px; display: flex; align-items: flex-end; background: rgba(100,116,139,0.08); border-radius: 4px; }
.sh-bar span { display: block; width: 100%; border-radius: 4px; }
.sh-val { font-size: 0.75rem; font-weight: 600; margin-top: 2px; }
.sh-lbl { font-size: 0.68rem; color: var(--pla-muted, #64748b); white-space: nowrap; }
.sh-matrix td, .sh-matrix th { font-size: 0.78rem; padding: 0.3rem 0.35rem; white-space: nowrap; vertical-align: middle; }
.sh-cell { display: inline-block; min-width: 30px; padding: 0.05rem 0.3rem; border-radius: 4px; color: #fff; font-weight: 700; }
.sh-sub { font-size: 0.66rem; color: var(--pla-muted, #64748b); }
.fc-prob { display: flex; align-items: center; gap: 6px; min-width: 120px; }
.fc-prob .fc-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(100,116,139,0.15); overflow: hidden; }
.fc-prob .fc-bar span { display: block; height: 100%; }
.fc-high { background: #dc2626; } .fc-med { background: #f59e0b; } .fc-low { background: #16a34a; }
.fc-pct { font-weight: 700; width: 2.6rem; text-align: right; }