/* Enterprise presentation layer. Loaded last to normalize legacy view styles. */
:root {
    --brand-400:#ffe45c;
    --brand-500:#ffd400;
    --brand-600:#e5b900;
    --ink-950:#111827;
    --ink-800:#1f2937;
    --ink-600:#334155;
    --ink-500:#526174;
    --canvas:#e8edf3;
    --surface:#ffffff;
    --surface-subtle:#f0f3f7;
    --surface-hover:#e7ecf2;
    --border:#c9d2dc;
    --border-strong:#aeb9c7;
    --success:#15803d;
    --warning:#b45309;
    --danger:#b91c1c;
    --info:#1d4ed8;
    --radius-xs:4px;
    --radius-sm:6px;
    --radius-md:10px;
    --shadow-sm:0 2px 6px rgba(15,23,42,.09);
    --shadow-md:0 9px 24px rgba(15,23,42,.13);
    --sidebar-width:248px;
    --sidebar-collapsed:72px;
    --header-height:112px;
    --control-height:40px;
    --table-row-height:46px;
    --transition-fast:160ms ease;
    --z-sidebar:100;
    --z-sticky:20;
    color-scheme:light;
}

body.dark-mode {
    --ink-950:#f8fafc;
    --ink-800:#e2e8f0;
    --ink-600:#cbd5e1;
    --ink-500:#94a3b8;
    --canvas:#0b1220;
    --surface:#111827;
    --surface-subtle:#172033;
    --surface-hover:#1e293b;
    --border:#2c3a50;
    --border-strong:#40516b;
    --success:#4ade80;
    --warning:#fbbf24;
    --danger:#f87171;
    --info:#60a5fa;
    --shadow-sm:0 1px 2px rgba(0,0,0,.25);
    --shadow-md:0 8px 22px rgba(0,0,0,.24);
    color-scheme:dark;
}

html { background:var(--canvas); }
body {
    background:var(--canvas);
    color:var(--ink-800);
    font-family:Poppins,"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:14px;
    line-height:1.5;
    overflow-x:hidden;
}
button,input,select,textarea { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.layout { min-height:100dvh; }
main { min-width:0; padding:28px clamp(18px,2vw,36px) 40px; }
.app-page { max-width:1920px; }

/* Navigation */
.sidebar {
    z-index:var(--z-sidebar);
    flex:0 0 var(--sidebar-width);
    width:var(--sidebar-width);
    background:#25221f;
    border-right:1px solid rgba(255,255,255,.08);
    box-shadow:none;
}
.sidebar.collapsed { flex-basis:var(--sidebar-collapsed); width:var(--sidebar-collapsed); }
.logo-area { padding:24px 18px 20px; border-color:rgba(255,255,255,.08); }
.logo-area img { width:154px; margin:0 0 12px; }
.logo-area h2 { font-size:15px; letter-spacing:.01em; }
.sidebar nav { padding:16px 12px; }
.sidebar nav a,
.sidebar-manage-toggle {
    position:relative;
    display:flex !important;
    width:100%;
    min-height:44px;
    align-items:center;
    gap:11px;
    margin:0 0 4px;
    padding:10px 12px;
    border:0;
    border-left:3px solid transparent;
    border-radius:var(--radius-sm);
    background:transparent;
    color:#cbd5e1;
    font-size:13px;
    font-weight:500;
    line-height:1.25;
    text-align:left;
    transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);
}
.sidebar nav a:hover,.sidebar-manage-toggle:hover { background:rgba(255,255,255,.07); color:#fff; }
.sidebar nav a.active,.sidebar-manage-toggle.active {
    border-left-color:var(--brand-400);
    background:var(--brand-500);
    color:#25221f;
    box-shadow:0 5px 14px rgba(255,212,0,.18);
}
.nav-parent-label { display:flex; min-width:0; align-items:center; gap:11px; }
.nav-icon { flex:0 0 19px; width:19px; height:19px; fill:currentColor; }
.sidebar nav a:hover .nav-icon,.sidebar-manage-toggle:hover .nav-icon { transform:translateY(-1px) scale(1.06); }
.nav-icon { transition:transform var(--transition-fast); }
.nav-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-menu-chevron { margin-left:auto; color:#94a3b8; }
.sidebar-manage-submenu { margin:4px 0 8px 18px; padding-left:9px; border-left:1px solid rgba(255,255,255,.14); }
.sidebar nav a.sidebar-sub-link { margin:0 0 3px; padding:9px 10px; border-left:0; border-radius:var(--radius-sm); font-size:12px; }
.sidebar-collapse-btn {
    top:20px; right:-17px; width:34px; height:34px;
    border:2px solid #25221f; background:var(--brand-500); color:#25221f;
    box-shadow:var(--shadow-md); font-size:24px;
}
.sidebar-collapse-btn:hover { background:#ffe266; box-shadow:var(--shadow-md); transform:scale(1.05); }
.sidebar.collapsed .logo-area { padding:54px 10px 16px; }
.sidebar.collapsed .logo-area img { width:48px; }
.sidebar.collapsed nav { padding:12px 8px; }
.sidebar.collapsed nav a,.sidebar.collapsed .sidebar-manage-toggle { justify-content:center; min-height:44px; padding:10px; border-left:0; }
.sidebar.collapsed .nav-parent-label { justify-content:center; }
.sidebar.collapsed .nav-label,.sidebar.collapsed .sidebar-menu-chevron { display:none; }
.sidebar.collapsed .sidebar-manage-submenu { margin:3px 0 8px; padding:0; border:0; }
.sidebar.collapsed [data-tooltip]::after {
    content:attr(data-tooltip); position:absolute; z-index:1000; left:calc(100% + 12px); top:50%;
    padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--ink-950); color:var(--surface); box-shadow:var(--shadow-md);
    font-size:12px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none;
    transform:translate(4px,-50%); transition:opacity var(--transition-fast),transform var(--transition-fast);
}
.sidebar.collapsed [data-tooltip]:hover::after,.sidebar.collapsed [data-tooltip]:focus-visible::after { opacity:1; transform:translate(0,-50%); }

/* Headers and actions */
.app-page > header {
    min-height:var(--header-height); margin:0 0 20px; padding:20px 22px;
    align-items:center; border:1px solid var(--border); border-radius:var(--radius-md);
    border-top:3px solid var(--brand-500); background:var(--surface); box-shadow:var(--shadow-sm);
}
header h1 { color:var(--ink-950); font-size:clamp(24px,2vw,32px); line-height:1.2; letter-spacing:-.025em; }
.loading-status { margin-top:8px; color:var(--ink-600); font-size:12px; font-weight:600; }
.refresh-notice {
    display:inline-flex; margin-top:10px; padding:6px 10px; border:1px solid #bfdbfe;
    border-radius:var(--radius-sm); background:#eff6ff; color:#1e40af; font-size:11px; font-weight:600;
}
body.dark-mode .refresh-notice { border-color:#1e3a5f; background:#12233e; color:#bfdbfe; }
.header-actions { gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.header-actions button,.manage-back-btn,.theme-toggle,#refreshBtn {
    min-height:var(--control-height); padding:0 14px; border:1px solid var(--border-strong);
    border-radius:var(--radius-sm); background:var(--surface); color:var(--ink-800);
    box-shadow:none; font-size:12px; font-weight:700; transition:all var(--transition-fast);
}
.header-actions #refreshBtn,.header-actions #ibManageRefreshBtn {
    border-color:var(--brand-600); background:var(--brand-500); color:#25221f;
}
.header-actions #refreshBtn:hover,.header-actions #ibManageRefreshBtn:hover { background:var(--brand-400); }
.header-actions button:hover,.manage-back-btn:hover,.theme-toggle:hover,#refreshBtn:hover { border-color:var(--brand-600); background:var(--surface-subtle); transform:none; }
.theme-toggle-icon { display:inline-flex; align-items:center; justify-content:center; }
.theme-toggle-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.manage-auto-refresh-btn.active { border-color:#86efac; background:#f0fdf4; color:#166534; }
body.dark-mode .manage-auto-refresh-btn.active { border-color:#166534; background:#12301f; color:#86efac; }

/* Executive KPI */
.cards,.manage-data-summary { gap:12px; margin-bottom:20px; }
.card,.manage-summary-card {
    min-width:0; min-height:94px; padding:16px 18px; border:1px solid var(--border);
    position:relative; overflow:hidden; border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-sm);
}
.card::before,.manage-summary-card::before {
    content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--brand-500);
}
.card:hover { transform:translateY(-2px); border-color:rgba(229,185,0,.65); box-shadow:var(--shadow-md); }
.card-top,.manage-summary-card { gap:13px; }
.icon,.manage-summary-card > span {
    flex:0 0 38px; width:38px; height:38px; border-radius:var(--radius-sm);
    border:1px solid rgba(229,185,0,.42); background:var(--brand-500); color:#25221f;
    box-shadow:0 4px 10px rgba(255,212,0,.18); font-size:13px; font-weight:800;
}
.icon svg { width:20px; height:20px; fill:currentColor; }
.manage-summary-card > span svg { width:20px; height:20px; fill:currentColor; }
.card-title,.manage-summary-card small { margin:0 0 3px; color:var(--ink-500); font-size:11px; font-weight:700; letter-spacing:.02em; }
.card-value,.manage-summary-card strong {
    color:var(--ink-950); font-size:clamp(21px,1.65vw,28px); font-weight:700;
    line-height:1.15; letter-spacing:-.025em; font-variant-numeric:tabular-nums;
}
.card-sub { margin-top:4px; color:var(--ink-500); font-size:10px; }
.manage-summary-card.warning,.manage-summary-card.danger { border-left-width:3px; }
.ib-manage-view-outbound .manage-summary-card.is-clickable:hover,.ib-manage-view-outbound .manage-summary-card.active {
    border-color:var(--brand-600); background:#fffdf2; box-shadow:0 0 0 2px rgba(255,212,0,.20),var(--shadow-md); transform:translateY(-2px);
}
body.dark-mode .ib-manage-view-outbound .manage-summary-card.is-clickable:hover,
body.dark-mode .ib-manage-view-outbound .manage-summary-card.active { background:#242116; }

/* Panels, charts and filters */
.analytics-card,.chart-box,.manage-panel,.manage-table-area,.table-area {
    border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-sm);
}
.analytics-card,.table-area,.manage-table-area { border-top:3px solid #25221f; }
body.dark-mode .analytics-card,body.dark-mode .table-area,body.dark-mode .manage-table-area { border-top-color:var(--brand-500); }
.analytics-card,.table-area,.manage-table-area { padding:18px; }
.analytics-card > h2,.table-header h2,.manage-table-header h2 { color:var(--ink-950); font-size:17px; font-weight:700; }
.analytics-card > h2::before,.table-header h2::before,.manage-table-header h2::before {
    content:""; display:inline-block; width:7px; height:18px; margin-right:9px;
    border-radius:2px; background:var(--brand-500); vertical-align:-3px;
}
.chart-grid,.manage-monitor-grid { gap:12px; }
.chart-box,.manage-panel { padding:16px; }
.chart-box { transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast); }
.chart-box:hover { transform:translateY(-2px); border-color:rgba(229,185,0,.55); box-shadow:var(--shadow-md); }
.chart-header,.manage-panel-header { min-height:36px; margin-bottom:12px; border-bottom:1px solid var(--border); }
.chart-header h3,.manage-panel-header h2 { color:var(--ink-950); font-size:13px; font-weight:700; }
.chart-header span,.manage-panel-header > span { color:var(--ink-500); font-size:10px; }
.legend-item,.manage-mini-bar,.manage-action-item { border-color:var(--border); border-radius:var(--radius-sm); background:var(--surface-subtle); }
.legend-item:hover,.manage-mini-bar:hover,.manage-action-item[role="button"]:hover { border-color:var(--brand-600); background:var(--surface-hover); transform:none; }
.legend-item.active,.manage-mini-bar.active,.manage-action-item.active { border-color:var(--brand-600); background:rgba(244,201,0,.10); box-shadow:inset 3px 0 0 var(--brand-500); }
.table-tools,.manage-table-tools,.search-row { gap:8px; }
#searchInput,#ibManageSearchInput,input[type="date"],.pbi-filter-button,.manage-multi-filter-button {
    min-height:var(--control-height); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
    background:var(--surface); color:var(--ink-800); box-shadow:none;
}
#searchInput,#ibManageSearchInput { min-width:260px; padding:0 12px; }
#searchInput:focus,#ibManageSearchInput:focus,input[type="date"]:focus { border-color:var(--brand-600); outline:3px solid rgba(244,201,0,.16); }
.filter-row,.manage-filter-grid { gap:10px; }
.filter-item label,.manage-filter-grid > label { color:var(--ink-600); font-size:10px; font-weight:700; }
.pbi-filter-panel,.manage-multi-filter-panel { z-index:200; border-color:var(--border); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-md); }
.date-row,.manage-date-filters,.ib-manage-view-qta .manage-date-filters,.ib-manage-view-outbound .manage-date-filters {
    border-color:var(--border); border-radius:var(--radius-sm); background:var(--surface-subtle);
}
.ib-manage-view-qta .manage-date-filters,.ib-manage-view-outbound .manage-date-filters {
    grid-template-columns:1fr;
}
.ib-manage-view-qta .manage-date-row,.ib-manage-view-outbound .manage-date-row {
    grid-template-columns:126px minmax(150px,1fr) 20px minmax(150px,1fr);
}
.manage-clear-btn,#clearFilterBtn { min-height:38px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink-600); box-shadow:none; }
.ib-manage-view-qta #ibManageClearFiltersBtn:hover,
.ib-manage-view-outbound #ibManageClearFiltersBtn:hover,
.ib-manage-view-qta #ibManageClearFiltersBtn:focus-visible,
.ib-manage-view-outbound #ibManageClearFiltersBtn:focus-visible {
    border-color:#dc2626;
    background:#ef4444;
    color:#fff;
    box-shadow:0 0 0 3px rgba(239,68,68,.18), 0 8px 18px rgba(220,38,38,.28);
    transform:translateY(-1px);
}
.manage-export-btn,#exportExcelBtn { min-height:38px; border-radius:var(--radius-sm); background:#166534; box-shadow:none; }
.manage-export-btn:hover,#exportExcelBtn:hover { background:#15803d; box-shadow:0 5px 12px rgba(21,128,61,.18); }
.manage-quick-focus button { border-color:var(--border); border-radius:var(--radius-sm) !important; background:var(--surface-subtle); box-shadow:none; }
.manage-quick-focus button:hover,.manage-quick-focus button.active { border-color:var(--brand-600); background:rgba(244,201,0,.09); transform:none; box-shadow:inset 3px 0 0 var(--brand-500); }
.manage-quick-focus span {
    border:1px solid rgba(229,185,0,.42); border-radius:var(--radius-sm) !important;
    background:var(--brand-500); color:#25221f; box-shadow:0 3px 8px rgba(255,212,0,.16);
    font-size:11px !important; font-weight:800;
}

/* Data tables */
.table-wrapper {
    position:relative; width:100%; max-width:100%; margin-top:14px; overflow:auto;
    border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
    scrollbar-color:var(--border-strong) transparent; scrollbar-width:thin; overscroll-behavior-x:contain;
}
.table-wrapper::after { content:""; position:sticky; right:0; float:right; width:10px; height:1px; box-shadow:-10px 0 14px rgba(15,23,42,.10); pointer-events:none; }
#pendingTable,.manage-data-table { width:100%; border-collapse:separate; border-spacing:0; color:var(--ink-800); font-size:11px; font-variant-numeric:tabular-nums; }
#pendingTable thead,.manage-data-table thead { position:sticky; z-index:var(--z-sticky); top:0; background:#263140; }
#pendingTable th,.manage-data-table th {
    position:sticky; top:0; height:42px; padding:9px 10px; border:0; border-bottom:2px solid var(--brand-500);
    background:#2e2a27; color:#f8fafc; font-size:10px; font-weight:700; letter-spacing:.015em;
    line-height:1.2; text-align:left; vertical-align:middle; white-space:nowrap;
}
#ibManageTable.manage-data-table th {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:1.2;
}
#ibManageTable.manage-data-table .manage-sort-icon {
    display:inline-block;
    margin-left:3px;
    vertical-align:middle;
    white-space:nowrap;
}
#pendingTable th {
    height:46px;
    padding:10px 12px;
    overflow:hidden;
    color:#fff;
    font-size:11px;
    font-weight:750;
    letter-spacing:0;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#pendingTable th:nth-child(-n+8) { text-align:center; }
#pendingTable th:nth-child(n+9):nth-child(-n+12) { text-align:right; }
#pendingTable th:nth-child(13) { text-align:left; }
#pendingTable .sort-icon {
    margin-left:3px;
    color:var(--brand-400);
    font-size:9px;
    opacity:.78;
    vertical-align:middle;
}
#pendingTable th.active-sort .sort-icon { opacity:1; }
#pendingTable th.sortable,.manage-data-table th.manage-sortable { cursor:pointer; }
#pendingTable th.sortable:hover,.manage-data-table th.manage-sortable:hover { background:#403a34; color:var(--brand-400); }
.sort-icon,.manage-sort-icon { display:inline-block; min-width:10px; margin-left:4px; color:#94a3b8; font-size:9px; }
thead th.active-sort,.manage-data-table th.active-sort { color:#fff; box-shadow:inset 0 -3px 0 var(--brand-500); }
#pendingTable td,.manage-data-table td {
    height:var(--table-row-height); padding:8px 10px; border:0; border-bottom:1px solid var(--border);
    background:transparent; color:var(--ink-800); line-height:1.25; vertical-align:middle;
}
#pendingTable tbody tr:nth-child(even),.manage-data-table tbody tr:nth-child(even) { background:var(--surface-subtle); }
#pendingTable tbody tr:hover,.manage-data-table tbody tr:hover { background:rgba(244,201,0,.075); }
.manage-data-table tr.manage-row-urgent td,.manage-data-table tr.manage-row-found td { background:transparent; }
.manage-data-table tr.manage-row-urgent { box-shadow:inset 3px 0 0 var(--danger); }
.manage-data-table tr.manage-row-found { box-shadow:inset 3px 0 0 var(--success); }
#pendingTable .col-no,.manage-data-table .col-no { width:48px; min-width:48px; text-align:center; }
#pendingTable td.col-no,.manage-data-table td.col-no { color:var(--ink-500); }
#pendingTable .col-ib,.manage-data-table .col-ib { min-width:92px; font-weight:650; }
#pendingTable td.col-ib,.manage-data-table td.col-ib { color:var(--ink-950); }
#pendingTable .col-store,.manage-data-table .col-store { min-width:72px; font-weight:600; }
#pendingTable .col-date,.manage-data-table .col-date { min-width:104px; text-align:center; }
#pendingTable .col-aging,.manage-data-table .col-aging { width:70px; min-width:70px; text-align:right; }
#pendingTable .col-aging { width:92px; min-width:92px; white-space:nowrap; }
#pendingTable .col-number { min-width:104px; white-space:nowrap; }
#pendingTable .col-number,#pendingTable .col-percent,#pendingTable .money,
.manage-data-table .col-number,.manage-data-table .col-percent,.manage-data-table .col-money { text-align:right; font-variant-numeric:tabular-nums; }
#pendingTable .remark,.manage-data-table .col-remark { min-width:180px; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.type-badge,.aging-badge,.sdr-badge,.manage-cell-badge { min-width:0; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:700; line-height:1.2; box-shadow:none; }
.manage-empty-state { margin:14px 0; border:1px dashed var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-subtle); color:var(--ink-500); }
.loading-spinner { border-color:var(--border-strong); border-top-color:var(--brand-600); }

/* Pagination */
.pagination,.manage-pagination {
    margin-top:0; padding:12px 4px 0; border-top:0; background:var(--surface);
    color:var(--ink-600); gap:12px;
}
.page-size,.page-nav button,.page-jump button,.manage-page-size button,.manage-page-nav button,.manage-page-jump button {
    min-width:34px; min-height:34px; padding:0 9px; border:1px solid var(--border);
    border-radius:var(--radius-sm); background:var(--surface); color:var(--ink-600); box-shadow:none; font-size:11px;
}
.page-size:hover,.page-nav button:hover,.page-jump button:hover,.manage-page-size button:hover,.manage-page-nav button:hover,.manage-page-jump button:hover { border-color:var(--brand-600); background:var(--surface-hover); }
.page-size.active,.page-jump button.active,.manage-page-size button.active,.manage-page-jump button.active { border-color:var(--brand-600); background:var(--ink-950); color:var(--surface); }
.page-size.active,.page-jump button.active,.manage-page-size button.active,.manage-page-jump button.active {
    background:var(--brand-500); color:#25221f; box-shadow:0 3px 8px rgba(255,212,0,.18);
}
button:disabled { cursor:not-allowed; opacity:.38; }

body.dark-mode .card,body.dark-mode .manage-summary-card,body.dark-mode .chart-box,body.dark-mode .analytics-card,
body.dark-mode .table-area,body.dark-mode .manage-table-area,body.dark-mode .manage-panel { background:var(--surface); border-color:var(--border); }
body.dark-mode #pendingTable td,body.dark-mode .manage-data-table td { color:var(--ink-800); border-color:var(--border); }
body.dark-mode #pendingTable tbody tr:nth-child(even),body.dark-mode .manage-data-table tbody tr:nth-child(even) { background:var(--surface-subtle); }
body.dark-mode #pendingTable tbody tr:hover,body.dark-mode .manage-data-table tbody tr:hover { background:rgba(244,201,0,.08); }

/* Fun mode: a playful yellow-black skin that preserves the operational layout. */
.fun-toggle-icon { display:inline-flex; align-items:center; justify-content:center; }
.fun-toggle-icon svg {
    width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round;
}
.fun-toggle.active {
    border-color:#171717 !important; background:var(--brand-500) !important; color:#171717 !important;
    box-shadow:3px 3px 0 #171717 !important;
}
body.dark-mode .fun-toggle.active { border-color:var(--brand-500) !important; box-shadow:3px 3px 0 var(--brand-600) !important; }

body.fun-mode {
    --radius-sm:9px;
    --radius-md:14px;
    --shadow-sm:3px 3px 0 rgba(31,28,23,.18);
    --shadow-md:5px 6px 0 rgba(31,28,23,.22);
    background-color:#f4f1e8;
    background-image:radial-gradient(circle at 1px 1px,rgba(37,34,31,.10) 1.2px,transparent 0);
    background-size:20px 20px;
}
body.dark-mode.fun-mode {
    --canvas:#17140f;
    --surface:#211e19;
    --surface-subtle:#2b271f;
    --surface-hover:#363024;
    --border:#5e5338;
    --border-strong:#8a7747;
    --shadow-sm:3px 3px 0 rgba(255,212,0,.20);
    --shadow-md:5px 6px 0 rgba(255,212,0,.22);
    background-color:#17140f;
    background-image:radial-gradient(circle at 1px 1px,rgba(255,212,0,.13) 1.2px,transparent 0);
}
.fun-mode .sidebar { background:#171717; border-right:3px solid var(--brand-500); }
.fun-mode .sidebar nav a,.fun-mode .sidebar-manage-toggle { border-radius:10px; font-weight:650; }
.fun-mode .sidebar nav a:hover,.fun-mode .sidebar-manage-toggle:hover { color:var(--brand-400); transform:translateX(2px); }
.fun-mode .sidebar nav a.active,.fun-mode .sidebar-manage-toggle.active {
    border:2px solid #171717; background:var(--brand-500); color:#171717;
    box-shadow:3px 3px 0 rgba(255,255,255,.24);
}
.fun-mode .nav-icon { stroke-width:2.2; }
.fun-mode .sidebar nav a:hover .nav-icon,.fun-mode .sidebar-manage-toggle:hover .nav-icon { transform:rotate(-7deg) scale(1.14); }

.fun-mode .app-page > header {
    position:relative; overflow:hidden; border:2px solid #24211d; border-top:6px solid var(--brand-500);
    box-shadow:5px 5px 0 rgba(36,33,29,.18);
}
body.dark-mode.fun-mode .app-page > header { border-color:var(--brand-600); border-top-color:var(--brand-500); }
.fun-mode .app-page > header::after {
    content:"✦  ●  ✦"; position:absolute; top:10px; right:18px; z-index:0;
    color:var(--brand-500); font-size:17px; font-weight:900; letter-spacing:7px; opacity:.35; pointer-events:none;
}
.fun-mode .header-left,.fun-mode .header-actions { position:relative; z-index:1; }
.fun-mode header h1 {
    font-weight:800; letter-spacing:-.04em; text-shadow:2px 2px 0 rgba(255,212,0,.48);
}
.fun-mode .header-actions button {
    border:2px solid #24211d; font-weight:800; box-shadow:2px 2px 0 rgba(36,33,29,.16);
}
.fun-mode .header-actions button:hover { transform:translate(-1px,-2px); box-shadow:4px 5px 0 rgba(36,33,29,.18); }
body.dark-mode.fun-mode .header-actions button { border-color:#8a7747; }

.fun-mode .card,.fun-mode .manage-summary-card {
    border:2px solid #2b2823; box-shadow:4px 4px 0 rgba(43,40,35,.16);
    animation:fun-pop .34s ease both;
}
body.dark-mode.fun-mode .card,body.dark-mode.fun-mode .manage-summary-card { border-color:#6e603d; }
.fun-mode .card::before,.fun-mode .manage-summary-card::before { width:6px; }
.fun-mode .card::after,.fun-mode .manage-summary-card::after {
    content:"✦"; position:absolute; top:7px; right:10px; color:var(--brand-600); font-size:14px; opacity:.55;
}
.fun-mode .card:hover,.fun-mode .manage-summary-card.is-clickable:hover {
    transform:translate(-1px,-4px) rotate(-.25deg); box-shadow:7px 8px 0 rgba(43,40,35,.18);
}
.fun-mode .icon,.fun-mode .manage-summary-card > span {
    border:2px solid #24211d; border-radius:12px; box-shadow:3px 3px 0 rgba(36,33,29,.22);
    transform:rotate(-3deg);
}
.fun-mode .card:nth-child(even) .icon,.fun-mode .manage-summary-card:nth-child(even) > span {
    background:#202020; color:var(--brand-500); transform:rotate(3deg);
}
.fun-mode .card:hover .icon,.fun-mode .manage-summary-card:hover > span { animation:fun-wiggle .42s ease; }
.fun-mode .card-title,.fun-mode .manage-summary-card small { font-weight:800; text-transform:uppercase; letter-spacing:.035em; }
.fun-mode .card-value,.fun-mode .manage-summary-card strong { font-weight:800; }

.fun-mode .analytics-card,.fun-mode .chart-box,.fun-mode .manage-panel,.fun-mode .manage-table-area,.fun-mode .table-area {
    border:2px solid #2b2823; box-shadow:4px 4px 0 rgba(43,40,35,.14);
}
body.dark-mode.fun-mode .analytics-card,body.dark-mode.fun-mode .chart-box,body.dark-mode.fun-mode .manage-panel,
body.dark-mode.fun-mode .manage-table-area,body.dark-mode.fun-mode .table-area { border-color:#665938; }
.fun-mode .analytics-card,.fun-mode .table-area,.fun-mode .manage-table-area { border-top:6px solid var(--brand-500); }
.fun-mode .analytics-card > h2::before,.fun-mode .table-header h2::before,.fun-mode .manage-table-header h2::before {
    width:9px; border-radius:5px; transform:rotate(5deg); box-shadow:2px 2px 0 #2b2823;
}
.fun-mode .chart-header,.fun-mode .manage-panel-header { border-bottom:3px solid var(--brand-500); }
.fun-mode .chart-header h3,.fun-mode .manage-panel-header h2 { font-weight:800; }
.fun-mode .legend-item,.fun-mode .manage-mini-bar,.fun-mode .manage-action-item {
    border:2px solid var(--border-strong); box-shadow:2px 2px 0 rgba(36,33,29,.10);
}
.fun-mode .legend-item:hover,.fun-mode .manage-mini-bar:hover,.fun-mode .manage-action-item[role="button"]:hover {
    transform:translate(-1px,-2px); box-shadow:4px 4px 0 rgba(36,33,29,.14);
}
.fun-mode .manage-quick-focus button {
    border:2px solid var(--border-strong); box-shadow:3px 3px 0 rgba(36,33,29,.12);
}
.fun-mode .manage-quick-focus button:hover,.fun-mode .manage-quick-focus button.active {
    transform:translate(-1px,-3px); box-shadow:4px 5px 0 rgba(36,33,29,.16),inset 5px 0 0 var(--brand-500);
}
.fun-mode .manage-quick-focus span { border:2px solid #24211d; border-radius:50% !important; transform:rotate(-5deg); }

.fun-mode #searchInput,.fun-mode #ibManageSearchInput,.fun-mode input[type="date"],
.fun-mode .pbi-filter-button,.fun-mode .manage-multi-filter-button {
    border-width:2px; box-shadow:2px 2px 0 rgba(36,33,29,.09);
}
.fun-mode .date-row,.fun-mode .manage-date-filters { border:2px dashed var(--brand-600); }
.fun-mode #pendingTable th,.fun-mode .manage-data-table th {
    border-bottom-width:4px; background:#191919; color:#fff; font-weight:800; text-transform:uppercase;
}
.fun-mode #pendingTable tbody tr:nth-child(even),.fun-mode .manage-data-table tbody tr:nth-child(even) { background:rgba(255,212,0,.07); }
.fun-mode #pendingTable tbody tr:hover,.fun-mode .manage-data-table tbody tr:hover { background:rgba(255,212,0,.18); }
.fun-mode .type-badge,.fun-mode .aging-badge,.fun-mode .sdr-badge,.fun-mode .manage-cell-badge { border:1px solid currentColor; font-weight:800; }
.fun-mode .page-size.active,.fun-mode .page-jump button.active,.fun-mode .manage-page-size button.active,.fun-mode .manage-page-jump button.active {
    border:2px solid #24211d; box-shadow:2px 2px 0 #24211d;
}
.fun-mode .manage-placeholder-card > span,.fun-mode .manage-emoji { filter:drop-shadow(3px 3px 0 rgba(255,212,0,.55)); }

/* Fun mode XL: field-crew arcade identity. */
body.fun-mode main {
    background-color:#fff9db;
    background-image:
        repeating-linear-gradient(135deg,rgba(25,25,25,.95) 0 12px,var(--brand-500) 12px 24px),
        radial-gradient(circle at 10% 18%,rgba(255,212,0,.36) 0 110px,transparent 112px),
        radial-gradient(circle at 92% 74%,rgba(255,212,0,.26) 0 170px,transparent 172px),
        radial-gradient(circle at 1px 1px,rgba(25,25,25,.12) 1.3px,transparent 0);
    background-repeat:no-repeat,no-repeat,no-repeat,repeat;
    background-position:top left,top left,bottom right,0 0;
    background-size:100% 12px,auto,auto,20px 20px;
}
body.dark-mode.fun-mode main {
    background-color:#17140f;
    background-image:
        repeating-linear-gradient(135deg,#0d0d0d 0 12px,var(--brand-500) 12px 24px),
        radial-gradient(circle at 10% 18%,rgba(255,212,0,.15) 0 110px,transparent 112px),
        radial-gradient(circle at 92% 74%,rgba(255,212,0,.10) 0 170px,transparent 172px),
        radial-gradient(circle at 1px 1px,rgba(255,212,0,.13) 1.3px,transparent 0);
}
body.fun-mode::after {
    content:"⚡ FUN SHIFT ON"; position:fixed; z-index:90; right:18px; bottom:16px;
    padding:8px 13px; border:2px solid #171717; border-radius:999px;
    background:var(--brand-500); color:#171717; box-shadow:4px 4px 0 #171717;
    font-size:11px; font-weight:900; letter-spacing:.07em; pointer-events:none;
    animation:fun-badge 2.4s ease-in-out infinite;
}
.fun-mode .logo-area { position:relative; overflow:hidden; }
.fun-mode .logo-area::after {
    content:"⚡ FIELD CREW"; display:inline-block; padding:4px 9px; border:2px solid var(--brand-500);
    border-radius:999px; color:var(--brand-500); font-size:9px; font-weight:900; letter-spacing:.08em;
    transform:rotate(-2deg);
}
.fun-mode .logo-area img { filter:drop-shadow(4px 5px 0 rgba(255,212,0,.34)); transform:rotate(-1deg); }

.fun-mode .sidebar .nav-icon { display:none; }
.fun-mode .sidebar nav > a::before,.fun-mode .sidebar-manage-toggle .nav-parent-label::before,
.fun-mode .sidebar-sub-link::before { flex:0 0 23px; font-size:19px; line-height:1; text-align:center; }
.fun-mode .sidebar a[data-page-link="dashboard"]::before { content:"🧾"; }
.fun-mode .sidebar-manage-toggle .nav-parent-label::before { content:"📦"; }
.fun-mode .sidebar a[data-page-link="ib-manage"]::before { content:"🕵️"; }
.fun-mode .sidebar a[data-page-link="ib-outbound"]::before { content:"🚚"; }
.fun-mode .sidebar a[data-page-link="analytics"]::before { content:"🚀"; }
.fun-mode .sidebar a[data-page-link="reports"]::before { content:"🧾"; }
.fun-mode .sidebar a[data-page-link="settings"]::before { content:"🛠️"; }
.fun-mode .sidebar nav a:hover::before,.fun-mode .sidebar-manage-toggle:hover .nav-parent-label::before { animation:fun-wiggle .42s ease; }

.fun-mode .app-page > header { margin-top:5px; border-radius:18px 7px 18px 7px; }
.fun-mode header h1 {
    display:inline-block; margin-bottom:4px; padding:7px 14px;
    border:3px solid var(--brand-500); border-radius:5px 14px 5px 14px;
    background:#171717; color:var(--brand-500); box-shadow:5px 5px 0 var(--brand-500);
    font-family:"Arial Black",Poppins,"Noto Sans Thai",sans-serif; text-transform:uppercase;
    transform:rotate(-.7deg); text-shadow:none;
}
body.dark-mode.fun-mode header h1 { border-color:#171717; background:var(--brand-500); color:#171717; box-shadow:5px 5px 0 rgba(255,255,255,.22); }
.fun-mode header h1::before { content:"⚡ "; }
.fun-mode .refresh-notice {
    border:2px dashed #171717; background:#fff4a8; color:#171717; box-shadow:3px 3px 0 rgba(23,23,23,.14);
    font-weight:800; transform:rotate(.2deg);
}
body.dark-mode.fun-mode .refresh-notice { border-color:var(--brand-500); background:#2f2814; color:#ffe875; }
.fun-mode .loading-status::before { content:"● "; color:#ef4444; animation:fun-blink 1s steps(2,end) infinite; }

.fun-mode .cards,.fun-mode .manage-data-summary { gap:16px; }
.fun-mode .card:nth-child(4n+1),.fun-mode .manage-summary-card:nth-child(4n+1) { transform:rotate(-.45deg); }
.fun-mode .card:nth-child(4n+3),.fun-mode .manage-summary-card:nth-child(4n+3) { transform:rotate(.45deg); }
.fun-mode .card { border-radius:18px 6px 18px 6px; }
.fun-mode .manage-summary-card { border-radius:6px 18px 6px 18px; }
.fun-mode .icon svg,.fun-mode .manage-summary-card > span svg { display:none; }
.fun-mode .icon::after,.fun-mode .manage-summary-card > span::after { font-size:20px; filter:drop-shadow(1px 2px 0 rgba(0,0,0,.16)); }
.fun-mode .icon-ib::after,.fun-mode .manage-summary-card:nth-child(1) > span::after { content:"📦"; }
.fun-mode .icon-sku::after,.fun-mode .manage-summary-card:nth-child(2) > span::after { content:"🧩"; }
.fun-mode .icon-received::after,.fun-mode .manage-summary-card:nth-child(3) > span::after { content:"✅"; }
.fun-mode .icon-pending::after,.fun-mode .manage-summary-card:nth-child(4) > span::after { content:"🚨"; }
.fun-mode .icon-aging::after,.fun-mode .manage-summary-card:nth-child(5) > span::after { content:"⏰"; }
.fun-mode .icon-value-ib::after,.fun-mode .manage-summary-card:nth-child(6) > span::after { content:"💸"; }
.fun-mode .icon-value-received::after,.fun-mode .manage-summary-card:nth-child(7) > span::after { content:"🎯"; }
.fun-mode .icon-value-pending::after,.fun-mode .manage-summary-card:nth-child(8) > span::after { content:"🧨"; }
.fun-mode .icon-received::after { content:"🏪"; }
.fun-mode .icon-value-ib::after { content:"💰"; }
.fun-mode .icon-value-received::after { content:"💵"; }
.fun-mode .icon-value-pending::after { content:"⏳"; }
.fun-mode .manage-summary-card[data-fun-icon="package"] > span::after { content:"📦"; }
.fun-mode .manage-summary-card[data-fun-icon="grid"] > span::after { content:"🧩"; }
.fun-mode .manage-summary-card[data-fun-icon="money"] > span::after { content:"💰"; }
.fun-mode .manage-summary-card[data-fun-icon="percent"] > span::after { content:"📉"; }
.fun-mode .manage-summary-card[data-fun-icon="clock"] > span::after { content:"⏰"; }
.fun-mode .manage-summary-card[data-fun-icon="pin"] > span::after { content:"📍"; }
.fun-mode .manage-summary-card[data-fun-icon="alert"] > span::after { content:"🚨"; }
.fun-mode .manage-summary-card[data-fun-icon="target"] > span::after { content:"🎯"; }
.fun-mode .manage-summary-card[data-fun-icon="warehouse"] > span::after { content:"🏭"; }
.fun-mode .manage-summary-card[data-fun-icon="city"] > span::after { content:"🏙️"; }
.fun-mode .manage-summary-card[data-fun-icon="truck"] > span::after { content:"🚚"; }
.fun-mode .card-title,.fun-mode .manage-summary-card small { color:var(--ink-800); }
.fun-mode .card-value,.fun-mode .manage-summary-card strong { text-shadow:2px 2px 0 rgba(255,212,0,.34); }

.fun-mode .analytics-card > h2,.fun-mode .table-header h2,.fun-mode .manage-table-header h2 {
    display:inline-flex; align-items:center; padding:6px 12px; border-radius:5px 12px 5px 12px;
    background:#171717; color:var(--brand-500); font-family:"Arial Black",Poppins,sans-serif;
    text-transform:uppercase; letter-spacing:.01em; transform:rotate(-.3deg);
}
.fun-mode .chart-box:nth-child(odd),.fun-mode .manage-monitor-grid .manage-panel:nth-child(odd) { transform:rotate(-.18deg); }
.fun-mode .chart-box:nth-child(even),.fun-mode .manage-monitor-grid .manage-panel:nth-child(even) { transform:rotate(.18deg); }
.fun-mode .chart-header,.fun-mode .manage-panel-header {
    margin:-16px -16px 13px; padding:10px 14px; border-bottom:0; background:#171717;
}
.fun-mode .chart-header h3,.fun-mode .manage-panel-header h2 { color:var(--brand-500); font-size:14px; text-transform:uppercase; }
.fun-mode .chart-header span,.fun-mode .manage-panel-header > span { color:#fff; opacity:.78; }
.fun-mode .chart-box::before,.fun-mode .manage-panel::before {
    content:""; display:block; width:54px; height:7px; margin:-20px auto 12px;
    background:rgba(255,212,0,.72); transform:rotate(-2deg); box-shadow:0 1px 0 rgba(0,0,0,.18);
}

.fun-mode .manage-filters-panel { background:linear-gradient(145deg,var(--surface) 0 72%,rgba(255,212,0,.16)); }
.fun-mode .manage-filter-grid > label,.fun-mode .filter-item label { font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.fun-mode .pbi-filter-button,.fun-mode .manage-multi-filter-button { border-radius:12px 4px 12px 4px; }
.fun-mode .manage-quick-focus button { border-radius:16px 5px 16px 5px !important; }
.fun-mode .manage-quick-focus button:nth-child(even) { transform:rotate(.45deg); }
.fun-mode .manage-quick-focus button:nth-child(odd) { transform:rotate(-.45deg); }
.fun-mode .manage-action-item::before { content:"⚡"; margin-right:7px; }
.fun-mode [data-ib-focus] > span { font-size:0 !important; }
.fun-mode [data-ib-focus] > span::after { font-size:19px; line-height:1; }
.fun-mode [data-ib-focus="aging43"] > span::after { content:"⏳"; }
.fun-mode [data-ib-focus="missing100"] > span::after { content:"💯"; }
.fun-mode [data-ib-focus="qtaHigh"] > span::after { content:"🚨"; }
.fun-mode [data-ib-focus="foundOb14"] > span::after { content:"📍"; }
.fun-mode [data-ib-focus="sentTransitAlert"] > span::after { content:"🚚"; }
.fun-mode [data-ib-focus="foundBkk"] > span::after { content:"🏙️"; }
.fun-mode [data-ib-focus="foundHubBu"] > span::after { content:"🚛"; }
.fun-mode [data-ib-focus="foundHubBs"] > span::after { content:"🚐"; }
.fun-mode [data-ib-focus="foundHubBn"] > span::after { content:"📦"; }
.fun-mode [data-ib-focus="urgentDispatch"] > span::after { content:"🚨"; }
.fun-mode .manage-action-item[data-fun-icon="qta"]::before { content:"🧭"; }
.fun-mode .manage-action-item[data-fun-icon="percent"]::before { content:"📉"; }
.fun-mode .manage-action-item[data-fun-icon="truck"]::before { content:"🚚"; }
.fun-mode .manage-action-item[data-fun-icon="store"]::before { content:"🏪"; }
.fun-mode .manage-action-item[data-fun-icon="clock"]::before { content:"⏰"; }
.fun-mode .manage-action-item[data-fun-icon="alert"]::before { content:"🚨"; }
.fun-mode .manage-action-item[data-fun-icon="warehouse"]::before { content:"🏭"; }
.fun-mode .manage-action-item[data-fun-icon="search"]::before { content:"🔎"; }
.fun-mode .manage-action-item[data-fun-icon="check"]::before { content:"✅"; }

.fun-mode header h1::before { content:"⚡ "; }
.fun-mode #dashboardPage header h1::before { content:"🧾 "; }
.fun-mode #ibManagePage.ib-manage-view-qta header h1::before { content:"🕵️ "; }
.fun-mode #ibManagePage.ib-manage-view-outbound header h1::before { content:"🚚 "; }
.fun-mode #analyticsPage header h1::before { content:"🚀 "; }
.fun-mode #reportsPage header h1::before { content:"🧾 "; }
.fun-mode #settingsPage header h1::before { content:"🛠️ "; }
.fun-mode .analytics-card > h2::after { content:" 📊"; }
.fun-mode .table-header h2::after { content:" 📋"; }
.fun-mode .manage-table-header h2::after { content:" 🧭"; }
.fun-mode .manage-filters-panel .manage-panel-header h2::before { content:"🎛️ "; }
.fun-mode .ib-manage-view-qta #ibManageSidePanelTitle::before { content:"⏳ "; }
.fun-mode .ib-manage-view-outbound #ibManageSidePanelTitle::before { content:"🚨 "; }
.fun-mode .chart-box:has(#typeChart) .chart-header h3::before { content:"🧩 "; }
.fun-mode .chart-box:has(#subwhChart) .chart-header h3::before { content:"🏭 "; }
.fun-mode .chart-box:has(#agingChart) .chart-header h3::before { content:"⏰ "; }
.fun-mode .manage-panel:has(#ibManageWhSplit) .manage-panel-header h2::before { content:"🏭 "; }
.fun-mode .manage-panel:has(#ibManageRiskSplit) .manage-panel-header h2::before { content:"⚠️ "; }
.fun-mode .manage-panel:has(#ibManageTypeSplit) .manage-panel-header h2::before { content:"🧩 "; }
.fun-mode .manage-panel:has(#ibManageObStatusSplit) .manage-panel-header h2::before { content:"📍 "; }
.fun-mode .manage-panel:has(#ibManageZoneSplit) .manage-panel-header h2::before { content:"🗺️ "; }

/* Dashboard Fun MAX: scoreboard + arcade control room. */
.fun-mode #dashboardPage > header {
    min-height:152px; padding:24px 28px; border:4px solid #171717; border-top-width:12px;
    border-radius:6px 24px 6px 24px; background:
        linear-gradient(112deg,var(--brand-500) 0 64%,#fff6bd 64% 100%);
    box-shadow:9px 10px 0 #171717;
}
body.dark-mode.fun-mode #dashboardPage > header {
    border-color:var(--brand-500); background:linear-gradient(112deg,#171717 0 64%,#332a0c 64% 100%);
    box-shadow:9px 10px 0 rgba(255,212,0,.42);
}
.fun-mode #dashboardPage > header::after {
    content:"● LIVE  /  FIELD OPS  /  LET'S CLEAR THE QUEUE!"; top:auto; right:26px; bottom:17px;
    padding:5px 10px; border:2px solid #171717; border-radius:999px; background:#fff; color:#171717;
    font-size:10px; letter-spacing:.06em; opacity:1; box-shadow:3px 3px 0 rgba(23,23,23,.16);
}
.fun-mode #dashboardPage header h1 {
    padding:10px 18px; border-width:4px; font-size:clamp(30px,3.1vw,48px);
    box-shadow:7px 7px 0 #fff; transform:rotate(-1deg);
}
.fun-mode #dashboardPage .loading-status { color:#171717; font-weight:900; }
body.dark-mode.fun-mode #dashboardPage .loading-status { color:#fff1a3; }
.fun-mode #dashboardPage .header-actions button {
    border:3px solid #171717; background:#fff; color:#171717; box-shadow:4px 4px 0 #171717;
}
.fun-mode #dashboardPage .header-actions #refreshBtn { background:#171717; color:var(--brand-500); }
.fun-mode #dashboardPage .header-actions button:hover { transform:translate(-2px,-4px) rotate(-1deg); box-shadow:7px 8px 0 #171717; }

.fun-mode #dashboardPage .cards {
    position:relative; padding:48px 8px 12px; gap:18px;
    border:4px solid #171717; border-radius:20px 7px 20px 7px;
    background:rgba(255,255,255,.76); box-shadow:8px 9px 0 rgba(23,23,23,.22);
}
.fun-mode #dashboardPage .cards::before {
    content:"⚡ LIVE SCOREBOARD"; position:absolute; top:-4px; left:-4px;
    padding:8px 17px; border:4px solid #171717; border-radius:16px 4px 16px 4px;
    background:#171717; color:var(--brand-500); font-family:"Arial Black",Poppins,sans-serif;
    font-size:15px; letter-spacing:.04em; transform:rotate(-1deg);
}
.fun-mode #dashboardPage .card {
    min-height:118px; padding:20px; border:4px solid #171717; border-radius:20px 5px 20px 5px;
    box-shadow:6px 7px 0 #171717; transform:none;
}
.fun-mode #dashboardPage .card:nth-child(odd) { background:var(--brand-500); color:#171717; }
.fun-mode #dashboardPage .card:nth-child(even) { background:#171717; color:#fff; border-color:var(--brand-500); box-shadow:6px 7px 0 var(--brand-600); }
.fun-mode #dashboardPage .card:nth-child(even)::before { background:#fff; }
.fun-mode #dashboardPage .card:nth-child(even)::after { color:var(--brand-500); opacity:1; }
.fun-mode #dashboardPage .card:nth-child(even) .card-title,
.fun-mode #dashboardPage .card:nth-child(even) .card-sub { color:#e5e7eb; }
.fun-mode #dashboardPage .card:nth-child(even) .card-value { color:var(--brand-500); text-shadow:3px 3px 0 rgba(255,255,255,.14); }
.fun-mode #dashboardPage .card:nth-child(odd) .card-title,
.fun-mode #dashboardPage .card:nth-child(odd) .card-sub,
.fun-mode #dashboardPage .card:nth-child(odd) .card-value { color:#171717; }
.fun-mode #dashboardPage .card-value { font-size:clamp(27px,2vw,38px); line-height:1; letter-spacing:-.045em; }
.fun-mode #dashboardPage .card-title { font-size:11px; letter-spacing:.08em; }
.fun-mode #dashboardPage .card-sub { margin-top:9px; font-weight:750; }
.fun-mode #dashboardPage .icon {
    flex-basis:50px; width:50px; height:50px; border:3px solid #171717; border-radius:15px 5px 15px 5px;
    background:#fff; box-shadow:4px 4px 0 #171717;
}
.fun-mode #dashboardPage .icon::after { font-size:27px; }
.fun-mode #dashboardPage .card:nth-child(even) .icon { background:var(--brand-500); color:#171717; transform:rotate(4deg); }
.fun-mode #dashboardPage .card:hover { transform:translate(-2px,-6px) rotate(-.5deg); box-shadow:10px 12px 0 #171717; }
.fun-mode #dashboardPage .card:nth-child(even):hover { box-shadow:10px 12px 0 var(--brand-600); }

.fun-mode #dashboardPage .analytics-card {
    padding:22px; border:5px solid #171717; border-top:14px solid var(--brand-500);
    border-radius:6px 22px 6px 22px; background:#171717; box-shadow:9px 10px 0 rgba(23,23,23,.22);
}
.fun-mode #dashboardPage .analytics-card > h2 {
    border:3px solid var(--brand-500); background:var(--brand-500); color:#171717; box-shadow:5px 5px 0 #fff;
}
.fun-mode #dashboardPage .chart-grid { gap:18px; margin-top:20px; }
.fun-mode #dashboardPage .chart-box {
    border:4px solid var(--brand-500); border-radius:18px 5px 18px 5px;
    background:#fffdf1; box-shadow:7px 8px 0 var(--brand-600); transform:none;
}
body.dark-mode.fun-mode #dashboardPage .chart-box { background:#211e19; }
.fun-mode #dashboardPage .chart-box:nth-child(2) { background:#ffef84; }
body.dark-mode.fun-mode #dashboardPage .chart-box:nth-child(2) { background:#30280e; }
.fun-mode #dashboardPage .chart-box:hover { transform:translate(-2px,-5px) rotate(.25deg); box-shadow:10px 12px 0 var(--brand-600); }
.fun-mode #dashboardPage .chart-header { border-radius:10px 2px 10px 2px; }
.fun-mode #dashboardPage .legend-item {
    border:2px solid #171717; background:#f5f2e9; color:#171717; box-shadow:3px 3px 0 rgba(23,23,23,.18);
}
.fun-mode #dashboardPage .legend-item:hover,.fun-mode #dashboardPage .legend-item.active {
    background:var(--brand-500); color:#171717; box-shadow:5px 5px 0 #171717; transform:translate(-2px,-2px);
}

.fun-mode #dashboardPage .table-area {
    margin-top:24px; padding:22px; border:5px solid #171717; border-top:14px solid var(--brand-500);
    border-radius:22px 6px 22px 6px; background:#fff7c7; box-shadow:9px 10px 0 rgba(23,23,23,.22);
}
body.dark-mode.fun-mode #dashboardPage .table-area { background:#211e19; }
.fun-mode #dashboardPage .table-header h2 { border:3px solid var(--brand-500); box-shadow:5px 5px 0 var(--brand-500); }
.fun-mode #dashboardPage .table-tools {
    margin-top:18px; padding:15px; border:3px dashed #171717; border-radius:14px 4px 14px 4px;
    background:rgba(255,255,255,.82);
}
body.dark-mode.fun-mode #dashboardPage .table-tools { border-color:var(--brand-500); background:#171717; }
.fun-mode #dashboardPage #searchInput,.fun-mode #dashboardPage .pbi-filter-button,.fun-mode #dashboardPage input[type="date"] {
    border:3px solid #171717; box-shadow:3px 3px 0 #171717;
}
.fun-mode #dashboardPage #pendingTable thead { background:#171717; }
.fun-mode #dashboardPage #pendingTable th { height:50px; color:var(--brand-500); font-size:11px; }
.fun-mode #dashboardPage #pendingTable tbody tr:hover { box-shadow:inset 6px 0 0 #171717; }
.fun-mode #dashboardPage .pagination { padding:16px; border:3px solid #171717; border-radius:4px 14px 4px 14px; background:var(--brand-500); }
.fun-mode #dashboardPage .pagination button { border:2px solid #171717; color:#171717; box-shadow:2px 2px 0 #171717; }

/* Fun MAX across Manage and utility pages. */
.fun-mode #ibManagePage > header,.fun-mode #analyticsPage > header,
.fun-mode #reportsPage > header,.fun-mode #settingsPage > header {
    min-height:142px; padding:23px 27px; border:4px solid #171717; border-top-width:12px;
    border-radius:6px 24px 6px 24px; background:linear-gradient(112deg,var(--brand-500) 0 58%,#fff6bd 58% 100%);
    box-shadow:9px 10px 0 #171717;
}
body.dark-mode.fun-mode #ibManagePage > header,body.dark-mode.fun-mode #analyticsPage > header,
body.dark-mode.fun-mode #reportsPage > header,body.dark-mode.fun-mode #settingsPage > header {
    border-color:var(--brand-500); background:linear-gradient(112deg,#171717 0 58%,#332a0c 58% 100%);
    box-shadow:9px 10px 0 rgba(255,212,0,.40);
}
.fun-mode #ibManagePage > header::after,.fun-mode #analyticsPage > header::after,
.fun-mode #reportsPage > header::after,.fun-mode #settingsPage > header::after {
    top:auto; right:25px; bottom:16px; padding:5px 10px; border:2px solid #171717;
    border-radius:999px; background:#fff; color:#171717; font-size:10px; letter-spacing:.06em; opacity:1;
    box-shadow:3px 3px 0 rgba(23,23,23,.16);
}
.fun-mode #ibManagePage.ib-manage-view-qta > header::after { content:"● LIVE  /  QTA CREW  /  FIND IT, FIX IT!"; }
.fun-mode #ibManagePage.ib-manage-view-outbound > header::after { content:"● LIVE  /  OUTBOUND CREW  /  MOVE IT!"; }
.fun-mode #analyticsPage > header::after { content:"● LAB MODE  /  NUMBERS GO BRRR!"; }
.fun-mode #reportsPage > header::after { content:"● PAPERWORK BOSS BATTLE"; }
.fun-mode #settingsPage > header::after { content:"● TUNING THE MACHINE"; }
.fun-mode #ibManagePage header h1,.fun-mode #analyticsPage header h1,
.fun-mode #reportsPage header h1,.fun-mode #settingsPage header h1 {
    padding:9px 17px; border-width:4px; font-size:clamp(28px,2.7vw,43px); box-shadow:7px 7px 0 #fff;
}
.fun-mode #ibManagePage .loading-status,.fun-mode #analyticsPage .manage-status,
.fun-mode #reportsPage .manage-status,.fun-mode #settingsPage .manage-status { color:#171717; font-weight:900; }
body.dark-mode.fun-mode #ibManagePage .loading-status,body.dark-mode.fun-mode #analyticsPage .manage-status,
body.dark-mode.fun-mode #reportsPage .manage-status,body.dark-mode.fun-mode #settingsPage .manage-status { color:#fff1a3; }

.fun-mode #ibManagePage .manage-subnav {
    margin:4px 0 22px; padding:10px; border:4px solid #171717; border-radius:18px 5px 18px 5px;
    background:#171717; box-shadow:7px 8px 0 var(--brand-600);
}
.fun-mode #ibManagePage .manage-subnav button {
    min-height:46px; border:3px solid var(--brand-500); border-radius:13px 4px 13px 4px;
    background:#fff; color:#171717; box-shadow:3px 3px 0 var(--brand-500); font-weight:900;
}
.fun-mode #ibManagePage .manage-subnav button:hover,.fun-mode #ibManagePage .manage-subnav button.active {
    background:var(--brand-500); color:#171717; transform:translate(-2px,-3px); box-shadow:6px 6px 0 #fff;
}
.fun-mode #ibManagePage .manage-maintenance-notice {
    border:4px solid #171717; border-left-width:14px; border-radius:5px 18px 5px 18px;
    background:repeating-linear-gradient(135deg,#fff6bd 0 18px,var(--brand-500) 18px 36px);
    color:#171717; box-shadow:7px 8px 0 rgba(23,23,23,.20);
}

.fun-mode #ibManagePage .manage-data-summary {
    position:relative; padding:48px 10px 12px; gap:18px; border:4px solid #171717;
    border-radius:20px 7px 20px 7px; background:rgba(255,255,255,.78); box-shadow:8px 9px 0 rgba(23,23,23,.22);
}
.fun-mode #ibManagePage .manage-data-summary::before {
    position:absolute; top:-4px; left:-4px; padding:8px 17px; border:4px solid #171717;
    border-radius:16px 4px 16px 4px; background:#171717; color:var(--brand-500);
    font-family:"Arial Black",Poppins,sans-serif; font-size:15px; letter-spacing:.04em; transform:rotate(-1deg);
}
.fun-mode #ibManagePage.ib-manage-view-qta .manage-data-summary::before { content:"🕵️ QTA SCOREBOARD"; }
.fun-mode #ibManagePage.ib-manage-view-outbound .manage-data-summary::before { content:"🚚 OUTBOUND SCOREBOARD"; }
.fun-mode #ibManagePage .manage-summary-card {
    min-height:112px; padding:18px; border:4px solid #171717; border-radius:18px 5px 18px 5px;
    box-shadow:6px 7px 0 #171717; transform:none;
}
.fun-mode #ibManagePage .manage-summary-card:nth-child(odd) { background:var(--brand-500); color:#171717; }
.fun-mode #ibManagePage .manage-summary-card:nth-child(even) { background:#171717; color:#fff; border-color:var(--brand-500); box-shadow:6px 7px 0 var(--brand-600); }
.fun-mode #ibManagePage .manage-summary-card:nth-child(even) small { color:#e5e7eb; }
.fun-mode #ibManagePage .manage-summary-card:nth-child(even) strong { color:var(--brand-500); }
.fun-mode #ibManagePage .manage-summary-card:nth-child(odd) small,.fun-mode #ibManagePage .manage-summary-card:nth-child(odd) strong { color:#171717; }
.fun-mode #ibManagePage .manage-summary-card strong { font-size:clamp(24px,1.9vw,34px); text-shadow:2px 2px 0 rgba(255,255,255,.18); }
.fun-mode #ibManagePage .manage-summary-card > span {
    flex-basis:48px; width:48px; height:48px; border:3px solid #171717; background:#fff;
    box-shadow:4px 4px 0 #171717;
}
.fun-mode #ibManagePage .manage-summary-card > span::after { font-size:25px; }
.fun-mode #ibManagePage .manage-summary-card:nth-child(even) > span { background:var(--brand-500); }
.fun-mode #ibManagePage .manage-summary-card:hover { transform:translate(-2px,-6px) rotate(-.4deg); box-shadow:10px 12px 0 #171717; }

.fun-mode #ibManagePage .manage-panel,.fun-mode #ibManagePage .manage-table-area {
    border:4px solid #171717; border-top:12px solid var(--brand-500);
    border-radius:6px 20px 6px 20px; box-shadow:8px 9px 0 rgba(23,23,23,.20);
}
body.dark-mode.fun-mode #ibManagePage .manage-panel,body.dark-mode.fun-mode #ibManagePage .manage-table-area { border-color:var(--brand-500); }
.fun-mode #ibManagePage .manage-command-center { gap:18px; }
.fun-mode #ibManagePage .manage-filters-panel { background:linear-gradient(145deg,#fff 0 67%,#fff08a 67%); }
body.dark-mode.fun-mode #ibManagePage .manage-filters-panel { background:linear-gradient(145deg,#211e19 0 67%,#332a0c 67%); }
.fun-mode #ibManagePage .manage-panel-header {
    border-radius:11px 3px 11px 3px; background:#171717; box-shadow:0 5px 0 var(--brand-500);
}
.fun-mode #ibManagePage .manage-quick-focus {
    padding:12px; border:3px dashed #171717; border-radius:15px 5px 15px 5px; background:#fff8c9;
}
body.dark-mode.fun-mode #ibManagePage .manage-quick-focus { border-color:var(--brand-500); background:#2d2716; }
.fun-mode #ibManagePage .manage-quick-focus button {
    min-height:82px; border:3px solid #171717; background:#fff; box-shadow:5px 5px 0 #171717;
}
.fun-mode #ibManagePage .manage-quick-focus button:hover,.fun-mode #ibManagePage .manage-quick-focus button.active {
    background:var(--brand-500); transform:translate(-2px,-5px) rotate(-.4deg); box-shadow:8px 9px 0 #171717;
}
.fun-mode #ibManagePage .manage-monitor-grid { gap:18px; }
.fun-mode #ibManagePage .manage-mini-bar,.fun-mode #ibManagePage .manage-action-item {
    border:3px solid #171717; background:#fff; box-shadow:4px 4px 0 rgba(23,23,23,.18);
}
.fun-mode #ibManagePage .manage-mini-bar:hover,.fun-mode #ibManagePage .manage-action-item[role="button"]:hover {
    background:var(--brand-500); transform:translate(-2px,-3px); box-shadow:7px 7px 0 #171717;
}
.fun-mode #ibManageAgingLegend .legend-item:nth-child(1) .legend-color { background:#ffd400 !important; }
.fun-mode #ibManageAgingLegend .legend-item:nth-child(2) .legend-color { background:#8a6e00 !important; }
.fun-mode #ibManageAgingLegend .legend-item:nth-child(3) .legend-color { background:#171717 !important; }
.fun-mode #ibManagePage .manage-table-area { margin-top:24px; padding:20px; background:#fff7c7; }
body.dark-mode.fun-mode #ibManagePage .manage-table-area { background:#211e19; }
.fun-mode #ibManagePage .manage-table-tools {
    padding:13px; border:3px dashed #171717; border-radius:14px 4px 14px 4px; background:rgba(255,255,255,.84);
}
body.dark-mode.fun-mode #ibManagePage .manage-table-tools { border-color:var(--brand-500); background:#171717; }
.fun-mode #ibManagePage .manage-data-table th { height:50px; color:var(--brand-500); font-size:11px; }
.fun-mode #ibManagePage .manage-pagination {
    margin-top:14px; padding:14px; border:3px solid #171717; border-radius:4px 14px 4px 14px; background:var(--brand-500); color:#171717;
}
.fun-mode #ibManagePage .manage-pagination button { border:2px solid #171717; color:#171717; box-shadow:2px 2px 0 #171717; }

.fun-mode #analyticsPage .manage-empty,.fun-mode #reportsPage .manage-empty,.fun-mode #settingsPage .manage-empty {
    padding:28px; border:5px solid #171717; border-top:14px solid var(--brand-500);
    border-radius:7px 24px 7px 24px; background:#fff7c7; box-shadow:9px 10px 0 rgba(23,23,23,.22);
}
body.dark-mode.fun-mode #analyticsPage .manage-empty,body.dark-mode.fun-mode #reportsPage .manage-empty,
body.dark-mode.fun-mode #settingsPage .manage-empty { border-color:var(--brand-500); background:#211e19; }
.fun-mode .manage-empty-hero {
    border:4px dashed #171717; border-radius:20px 6px 20px 6px; background:var(--brand-500); color:#171717;
    box-shadow:7px 8px 0 #171717;
}
.fun-mode .manage-stamp { border:3px solid #171717; background:#171717; color:var(--brand-500); transform:rotate(-2deg); }
.fun-mode .manage-placeholder-card {
    border:4px solid #171717; border-radius:18px 5px 18px 5px; background:#fff;
    box-shadow:6px 7px 0 #171717; transform:rotate(-.5deg);
}
.fun-mode .manage-placeholder-card:nth-child(even) { background:#171717; color:#fff; border-color:var(--brand-500); transform:rotate(.5deg); }
.fun-mode .manage-placeholder-card:hover { transform:translate(-2px,-6px) rotate(-1deg); box-shadow:10px 12px 0 #171717; }

.fun-mode .table-wrapper { border:3px solid #171717; border-radius:4px 14px 4px 14px; box-shadow:5px 5px 0 rgba(23,23,23,.18); }
body.dark-mode.fun-mode .table-wrapper { border-color:var(--brand-500); }
.fun-mode #pendingTable th,.fun-mode .manage-data-table th {
    background-image:linear-gradient(180deg,#242424,#101010); letter-spacing:.035em;
}
.fun-mode #pendingTable th.active-sort,.fun-mode .manage-data-table th.active-sort { color:var(--brand-500); }
.fun-mode #pendingTable tbody tr:hover td,.fun-mode .manage-data-table tbody tr:hover td { font-weight:650; }
.fun-mode .type-badge,.fun-mode .aging-badge,.fun-mode .sdr-badge,.fun-mode .manage-cell-badge {
    border-radius:5px 10px 5px 10px; box-shadow:2px 2px 0 rgba(23,23,23,.12);
}

/* Dark + Fun MAX compatibility and contrast. */
body.dark-mode.fun-mode #dashboardPage .cards,
body.dark-mode.fun-mode #ibManagePage .manage-data-summary {
    border-color:var(--brand-500); background:rgba(23,23,23,.92); box-shadow:8px 9px 0 rgba(255,212,0,.25);
}
body.dark-mode.fun-mode #dashboardPage .analytics-card { border-color:var(--brand-500); box-shadow:8px 9px 0 rgba(255,212,0,.24); }
body.dark-mode.fun-mode #dashboardPage .legend-item {
    border-color:#8a7747; background:#282319; color:#f8fafc; box-shadow:3px 3px 0 rgba(255,212,0,.20);
}
body.dark-mode.fun-mode #dashboardPage .legend-item .legend-label,
body.dark-mode.fun-mode #dashboardPage .legend-item .legend-value { color:#f8fafc; }
body.dark-mode.fun-mode #dashboardPage .legend-item:hover,
body.dark-mode.fun-mode #dashboardPage .legend-item.active {
    border-color:var(--brand-500); background:var(--brand-500); color:#171717; box-shadow:5px 5px 0 #7b6300;
}
body.dark-mode.fun-mode #dashboardPage .legend-item:hover .legend-label,
body.dark-mode.fun-mode #dashboardPage .legend-item:hover .legend-value,
body.dark-mode.fun-mode #dashboardPage .legend-item.active .legend-label,
body.dark-mode.fun-mode #dashboardPage .legend-item.active .legend-value { color:#171717; }
body.dark-mode.fun-mode #dashboardPage .table-wrapper,
body.dark-mode.fun-mode #ibManagePage .table-wrapper { border-color:var(--brand-500); background:#171717; box-shadow:6px 6px 0 rgba(255,212,0,.24); }

.fun-mode #dashboardPage .pagination button,
.fun-mode #ibManagePage .manage-pagination button { background:#fff; }
body.dark-mode.fun-mode #dashboardPage .pagination button,
body.dark-mode.fun-mode #ibManagePage .manage-pagination button { background:#fff; color:#171717; }
body.dark-mode.fun-mode #dashboardPage .pagination button.active,
body.dark-mode.fun-mode #ibManagePage .manage-pagination button.active { background:#171717; color:var(--brand-500); border-color:#171717; }

body.dark-mode.fun-mode #ibManagePage .manage-quick-focus button,
body.dark-mode.fun-mode #ibManagePage .manage-mini-bar,
body.dark-mode.fun-mode #ibManagePage .manage-action-item {
    border-color:#8a7747; background:#282319; color:#f8fafc; box-shadow:4px 4px 0 rgba(255,212,0,.17);
}
body.dark-mode.fun-mode #ibManagePage .manage-quick-focus button small,
body.dark-mode.fun-mode #ibManagePage .manage-quick-focus button strong,
body.dark-mode.fun-mode #ibManagePage .manage-mini-bar span,
body.dark-mode.fun-mode #ibManagePage .manage-mini-bar strong,
body.dark-mode.fun-mode #ibManagePage .manage-action-item span,
body.dark-mode.fun-mode #ibManagePage .manage-action-item strong { color:#f8fafc; }
body.dark-mode.fun-mode #ibManagePage .manage-quick-focus button:hover,
body.dark-mode.fun-mode #ibManagePage .manage-quick-focus button.active,
body.dark-mode.fun-mode #ibManagePage .manage-mini-bar:hover,
body.dark-mode.fun-mode #ibManagePage .manage-mini-bar.active,
body.dark-mode.fun-mode #ibManagePage .manage-action-item[role="button"]:hover,
body.dark-mode.fun-mode #ibManagePage .manage-action-item.active {
    border-color:var(--brand-500); background:var(--brand-500); color:#171717; box-shadow:7px 7px 0 #7b6300;
}
body.dark-mode.fun-mode #ibManagePage .manage-quick-focus button:hover small,
body.dark-mode.fun-mode #ibManagePage .manage-quick-focus button:hover strong,
body.dark-mode.fun-mode #ibManagePage .manage-quick-focus button.active small,
body.dark-mode.fun-mode #ibManagePage .manage-quick-focus button.active strong,
body.dark-mode.fun-mode #ibManagePage .manage-mini-bar:hover span,
body.dark-mode.fun-mode #ibManagePage .manage-mini-bar:hover strong,
body.dark-mode.fun-mode #ibManagePage .manage-action-item[role="button"]:hover span,
body.dark-mode.fun-mode #ibManagePage .manage-action-item[role="button"]:hover strong { color:#171717; }
body.dark-mode.fun-mode #ibManagePage .manage-mini-bar-track { background:#423a26; }
body.dark-mode.fun-mode #ibManagePage .manage-date-filters,
body.dark-mode.fun-mode #ibManagePage .manage-quick-focus { border-color:var(--brand-500); background:#2b2517; }
body.dark-mode.fun-mode #ibManagePage .manage-table-tools { border-color:var(--brand-500); background:#171717; }
body.dark-mode.fun-mode #ibManagePage .manage-empty-state { border-color:#8a7747; background:#282319; color:#cbd5e1; }

body.dark-mode.fun-mode .manage-placeholder-card {
    border-color:#8a7747; background:#282319; color:#f8fafc; box-shadow:6px 7px 0 rgba(255,212,0,.22);
}
body.dark-mode.fun-mode .manage-placeholder-card:nth-child(even) { border-color:var(--brand-500); background:#171717; }
body.dark-mode.fun-mode .manage-placeholder-card strong { color:var(--brand-400); }
body.dark-mode.fun-mode .manage-placeholder-card small { color:#cbd5e1; }
body.dark-mode.fun-mode .manage-empty-hero { border-color:var(--brand-500); background:var(--brand-500); color:#171717; box-shadow:7px 8px 0 #7b6300; }
body.dark-mode.fun-mode .pbi-filter-panel,
body.dark-mode.fun-mode .manage-multi-filter-panel { border-color:#8a7747; background:#211e19; color:#f8fafc; }
body.dark-mode.fun-mode input[type="date"] { color-scheme:dark; }

/* Vivid mode: warm, human and energetic without changing chart palettes. */
.vivid-toggle-icon { display:inline-flex; align-items:center; justify-content:center; }
.vivid-toggle-icon svg {
    width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round; transition:transform var(--transition-fast);
}
.vivid-toggle:hover .vivid-toggle-icon svg { transform:rotate(24deg) scale(1.08); }
.vivid-toggle.active {
    border-color:#25221f !important; background:#25221f !important; color:var(--brand-500) !important;
    box-shadow:0 5px 13px rgba(37,34,31,.20) !important;
}
body.dark-mode .vivid-toggle.active { border-color:var(--brand-500) !important; }

body.vivid-mode {
    --canvas:#f2efe8;
    --surface:#fffefa;
    --surface-subtle:#f7f3e9;
    --surface-hover:#fff5c9;
    --border:#d9d1bf;
    --border-strong:#b8ae98;
    --radius-sm:9px;
    --radius-md:14px;
    --shadow-sm:0 4px 14px rgba(43,38,29,.08);
    --shadow-md:0 12px 28px rgba(43,38,29,.14);
}
body.dark-mode.vivid-mode {
    --canvas:#100f0d;
    --surface:#1c1a17;
    --surface-subtle:#25221c;
    --surface-hover:#322c1c;
    --border:#494234;
    --border-strong:#6f6348;
    --ink-950:#fffdf5;
    --ink-800:#f1eee5;
    --ink-600:#d8d1c2;
    --ink-500:#aaa18e;
    --shadow-sm:0 4px 14px rgba(0,0,0,.25);
    --shadow-md:0 13px 30px rgba(0,0,0,.34);
}
body.vivid-mode main {
    background:
        radial-gradient(circle at 8% 5%,rgba(255,212,0,.15),transparent 24%),
        radial-gradient(circle at 95% 30%,rgba(255,212,0,.09),transparent 22%),
        var(--canvas);
}
body.dark-mode.vivid-mode main {
    background:
        radial-gradient(circle at 8% 5%,rgba(255,212,0,.10),transparent 25%),
        radial-gradient(circle at 95% 30%,rgba(255,212,0,.06),transparent 22%),
        var(--canvas);
}

.vivid-mode .sidebar {
    background:linear-gradient(180deg,#24211e 0%,#171614 100%); border-right:3px solid var(--brand-500);
    box-shadow:8px 0 28px rgba(26,23,19,.12);
}
.vivid-mode .logo-area img { filter:drop-shadow(0 5px 10px rgba(255,212,0,.18)); }
.vivid-mode .sidebar nav a,.vivid-mode .sidebar-manage-toggle { border-radius:10px; font-weight:600; }
.vivid-mode .sidebar nav a:hover,.vivid-mode .sidebar-manage-toggle:hover {
    background:rgba(255,212,0,.11); color:#fff; transform:translateX(3px);
}
.vivid-mode .sidebar nav a.active,.vivid-mode .sidebar-manage-toggle.active {
    border-left-color:var(--brand-500); background:rgba(255,212,0,.94); color:#25221f;
    box-shadow:0 7px 18px rgba(255,212,0,.20);
}
.vivid-mode .sidebar nav a:hover .nav-icon,.vivid-mode .sidebar-manage-toggle:hover .nav-icon { transform:translateY(-2px) rotate(-4deg) scale(1.10); }

.vivid-mode .app-page > header {
    position:relative; overflow:hidden; min-height:126px; border:1px solid var(--border);
    border-top:5px solid var(--brand-500); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-md);
}
.vivid-mode .app-page > header::after {
    content:""; position:absolute; z-index:0; top:-70px; right:-45px; width:190px; height:190px;
    border:30px solid rgba(255,212,0,.12); border-radius:50%; opacity:1; pointer-events:none;
}
.vivid-mode .header-left,.vivid-mode .header-actions { position:relative; z-index:1; }
.vivid-mode header h1 { display:flex; align-items:center; gap:11px; color:var(--ink-950); font-weight:750; letter-spacing:-.035em; }
.vivid-mode header h1::before {
    content:"◆"; display:inline-grid; flex:0 0 36px; width:36px; height:36px; place-items:center;
    border-radius:11px; background:var(--brand-500); color:#25221f; box-shadow:0 6px 14px rgba(255,212,0,.25);
    font-size:14px; transform:rotate(-4deg);
}
.vivid-mode #dashboardPage header h1::before { content:"IB"; font-size:11px; }
.vivid-mode #ibManagePage.ib-manage-view-qta header h1::before { content:"Q"; }
.vivid-mode #ibManagePage.ib-manage-view-outbound header h1::before { content:"OB"; font-size:10px; }
.vivid-mode #analyticsPage header h1::before { content:"A"; }
.vivid-mode #reportsPage header h1::before { content:"R"; }
.vivid-mode #settingsPage header h1::before { content:"S"; }
.vivid-mode .refresh-notice {
    border-color:#ead376; background:#fff9df; color:#66510a; box-shadow:0 3px 10px rgba(109,86,8,.06);
}
body.dark-mode.vivid-mode .refresh-notice { border-color:#6d5a18; background:#2a2517; color:#ffe685; }
.vivid-mode .header-actions button {
    border-color:var(--border); border-radius:10px; background:var(--surface); box-shadow:0 3px 9px rgba(34,30,24,.06);
}
.vivid-mode .header-actions button:hover { border-color:var(--brand-600); background:var(--surface-hover); transform:translateY(-2px); box-shadow:0 7px 16px rgba(56,47,24,.12); }

.vivid-mode .cards,.vivid-mode .manage-data-summary { gap:14px; }
.vivid-mode .card,.vivid-mode .manage-summary-card {
    min-height:104px; border-color:var(--border); border-radius:16px; background:var(--surface);
    box-shadow:var(--shadow-sm); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    animation:vivid-rise .34s ease both;
}
.vivid-mode .card::before,.vivid-mode .manage-summary-card::before { width:5px; border-radius:0 4px 4px 0; }
.vivid-mode .card::after,.vivid-mode .manage-summary-card::after {
    content:""; position:absolute; top:12px; right:12px; width:7px; height:7px;
    border-radius:50%; background:var(--brand-500); box-shadow:11px 0 0 rgba(255,212,0,.28);
}
.vivid-mode .card:hover,.vivid-mode .manage-summary-card.is-clickable:hover {
    border-color:rgba(229,185,0,.70); transform:translateY(-5px); box-shadow:0 15px 28px rgba(43,38,29,.14);
}
.vivid-mode .icon,.vivid-mode .manage-summary-card > span {
    flex-basis:44px; width:44px; height:44px; border:0; border-radius:13px;
    background:#25221f; color:var(--brand-500); box-shadow:0 7px 15px rgba(37,34,31,.16);
}
.vivid-mode .card:nth-child(even) .icon,.vivid-mode .manage-summary-card:nth-child(even) > span {
    background:var(--brand-500); color:#25221f;
}
.vivid-mode .card:hover .icon,.vivid-mode .manage-summary-card:hover > span { transform:rotate(-5deg) scale(1.07); }
.vivid-mode .icon,.vivid-mode .manage-summary-card > span { transition:transform .22s ease; }
.vivid-mode .card-title,.vivid-mode .manage-summary-card small { color:var(--ink-500); font-weight:700; letter-spacing:.035em; }
.vivid-mode .card-value,.vivid-mode .manage-summary-card strong { color:var(--ink-950); font-weight:750; }
.vivid-mode .ib-manage-view-outbound .manage-summary-card.is-clickable:hover,
.vivid-mode .ib-manage-view-outbound .manage-summary-card.active { background:var(--surface-hover); }

.vivid-mode .analytics-card,.vivid-mode .chart-box,.vivid-mode .manage-panel,
.vivid-mode .manage-table-area,.vivid-mode .table-area {
    border-color:var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm);
}
.vivid-mode .analytics-card,.vivid-mode .table-area,.vivid-mode .manage-table-area { border-top:5px solid var(--brand-500); }
.vivid-mode .chart-box:hover,.vivid-mode .manage-panel:hover { border-color:rgba(229,185,0,.65); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.vivid-mode .analytics-card > h2,.vivid-mode .table-header h2,.vivid-mode .manage-table-header h2 { font-weight:750; }
.vivid-mode .chart-header,.vivid-mode .manage-panel-header { border-bottom:2px solid rgba(229,185,0,.35); }
.vivid-mode .chart-header h3,.vivid-mode .manage-panel-header h2 { color:var(--ink-950); font-weight:750; }
.vivid-mode .legend-item,.vivid-mode .manage-mini-bar,.vivid-mode .manage-action-item {
    border-color:var(--border); border-radius:11px; background:var(--surface-subtle); transition:all .18s ease;
}
.vivid-mode .legend-item:hover,.vivid-mode .manage-mini-bar:hover,.vivid-mode .manage-action-item[role="button"]:hover {
    border-color:var(--brand-600); background:var(--surface-hover); transform:translateX(3px); box-shadow:0 6px 15px rgba(68,55,16,.10);
}
.vivid-mode .legend-item.active,.vivid-mode .manage-mini-bar.active,.vivid-mode .manage-action-item.active {
    border-color:var(--brand-600); background:var(--surface-hover); box-shadow:inset 4px 0 0 var(--brand-500),0 6px 15px rgba(68,55,16,.10);
}

.vivid-mode .manage-subnav {
    padding:8px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm);
}
.vivid-mode .manage-subnav button { border-radius:10px; }
.vivid-mode .manage-subnav button:hover,.vivid-mode .manage-subnav button.active {
    background:#25221f; color:var(--brand-500); box-shadow:0 7px 15px rgba(37,34,31,.14); transform:translateY(-2px);
}
.vivid-mode .manage-maintenance-notice {
    border-color:#e7c94c; border-left:6px solid var(--brand-500); border-radius:13px;
    background:#fff9df; color:#5c4a0d; box-shadow:var(--shadow-sm);
}
body.dark-mode.vivid-mode .manage-maintenance-notice { border-color:#6d5a18; border-left-color:var(--brand-500); background:#292415; color:#ffe899; }
.vivid-mode .manage-quick-focus { gap:11px; }
.vivid-mode .manage-quick-focus button {
    border-color:var(--border); border-radius:13px !important; background:var(--surface-subtle); box-shadow:none;
}
.vivid-mode .manage-quick-focus button:hover,.vivid-mode .manage-quick-focus button.active {
    border-color:var(--brand-600); background:var(--surface-hover); transform:translateY(-3px); box-shadow:0 9px 18px rgba(68,55,16,.12),inset 4px 0 0 var(--brand-500);
}
.vivid-mode .manage-quick-focus span { border:0; border-radius:11px !important; background:#25221f; color:var(--brand-500); box-shadow:none; }
.vivid-mode .manage-quick-focus button:nth-child(even) span { background:var(--brand-500); color:#25221f; }

.vivid-mode #searchInput,.vivid-mode #ibManageSearchInput,.vivid-mode input[type="date"],
.vivid-mode .pbi-filter-button,.vivid-mode .manage-multi-filter-button {
    border-color:var(--border-strong); border-radius:10px; background:var(--surface); box-shadow:0 2px 7px rgba(43,38,29,.04);
}
.vivid-mode #searchInput:focus,.vivid-mode #ibManageSearchInput:focus,.vivid-mode input[type="date"]:focus {
    border-color:var(--brand-600); outline:3px solid rgba(255,212,0,.18); box-shadow:0 7px 15px rgba(68,55,16,.08);
}
.vivid-mode .date-row,.vivid-mode .manage-date-filters { border-color:rgba(229,185,0,.48); background:var(--surface-subtle); }
.vivid-mode .manage-clear-btn,.vivid-mode #clearFilterBtn { border-radius:10px; }
.vivid-mode .manage-export-btn,.vivid-mode #exportExcelBtn { border-radius:10px; box-shadow:0 6px 13px rgba(21,128,61,.13); }

.vivid-mode .table-wrapper {
    border-color:var(--border); border-radius:12px; box-shadow:inset -12px 0 16px -18px rgba(15,23,42,.28);
}
.vivid-mode #pendingTable th,.vivid-mode .manage-data-table th {
    height:46px; border-bottom:3px solid var(--brand-500); background:#25221f; color:#fff;
}
.vivid-mode #pendingTable th.sortable:hover,.vivid-mode .manage-data-table th.manage-sortable:hover { background:#39332d; color:var(--brand-400); }
.vivid-mode #pendingTable tbody tr:nth-child(even),.vivid-mode .manage-data-table tbody tr:nth-child(even) { background:var(--surface-subtle); }
.vivid-mode #pendingTable tbody tr:hover,.vivid-mode .manage-data-table tbody tr:hover { background:rgba(255,212,0,.11); }
.vivid-mode .type-badge,.vivid-mode .aging-badge,.vivid-mode .sdr-badge,.vivid-mode .manage-cell-badge { box-shadow:0 2px 7px rgba(43,38,29,.09); }
.vivid-mode .pagination,.vivid-mode .manage-pagination { border-radius:12px; background:var(--surface); }
.vivid-mode .page-size,.vivid-mode .page-nav button,.vivid-mode .page-jump button,
.vivid-mode .manage-page-size button,.vivid-mode .manage-page-nav button,.vivid-mode .manage-page-jump button { border-radius:9px; }
.vivid-mode .page-size.active,.vivid-mode .page-jump button.active,
.vivid-mode .manage-page-size button.active,.vivid-mode .manage-page-jump button.active {
    background:#25221f; color:var(--brand-500); box-shadow:0 5px 12px rgba(37,34,31,.16);
}

.vivid-mode .manage-empty { border-color:var(--border); border-top:5px solid var(--brand-500); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-md); }
.vivid-mode .manage-empty-hero { border-color:rgba(229,185,0,.55); border-radius:16px; background:var(--surface-hover); }
.vivid-mode .manage-placeholder-card {
    border-color:var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm); transition:all .20s ease;
}
.vivid-mode .manage-placeholder-card:hover { border-color:var(--brand-600); transform:translateY(-4px); box-shadow:var(--shadow-md); }

body.dark-mode.vivid-mode .card,body.dark-mode.vivid-mode .manage-summary-card,
body.dark-mode.vivid-mode .chart-box,body.dark-mode.vivid-mode .analytics-card,
body.dark-mode.vivid-mode .table-area,body.dark-mode.vivid-mode .manage-table-area,
body.dark-mode.vivid-mode .manage-panel,body.dark-mode.vivid-mode .manage-empty,
body.dark-mode.vivid-mode .manage-placeholder-card { border-color:var(--border); background:var(--surface); }
body.dark-mode.vivid-mode .legend-item,body.dark-mode.vivid-mode .manage-mini-bar,
body.dark-mode.vivid-mode .manage-action-item,body.dark-mode.vivid-mode .manage-quick-focus button { color:var(--ink-800); }
body.dark-mode.vivid-mode .pbi-filter-panel,body.dark-mode.vivid-mode .manage-multi-filter-panel { border-color:var(--border); background:var(--surface); color:var(--ink-800); }
body.dark-mode.vivid-mode input[type="date"] { color-scheme:dark; }

/* Vivid semantic icons and richer data-table treatment. */
.vivid-mode header h1::before { font-size:18px; font-family:Poppins,"Noto Sans Thai",sans-serif; }
.vivid-mode #dashboardPage header h1::before { content:"🧾"; }
.vivid-mode #ibManagePage.ib-manage-view-qta header h1::before { content:"🔎"; }
.vivid-mode #ibManagePage.ib-manage-view-outbound header h1::before { content:"🚚"; }
.vivid-mode #analyticsPage header h1::before { content:"📊"; }
.vivid-mode #reportsPage header h1::before { content:"📑"; }
.vivid-mode #settingsPage header h1::before { content:"⚙️"; }

.vivid-mode .sidebar .nav-icon {
    box-sizing:content-box; padding:3px; border-radius:7px; background:rgba(255,212,0,.10); color:var(--brand-400);
}
.vivid-mode .sidebar nav a.active .nav-icon,.vivid-mode .sidebar-manage-toggle.active .nav-icon { background:#25221f; color:var(--brand-500); }

.vivid-mode .icon-ib { background:#25221f; color:var(--brand-500); }
.vivid-mode .icon-sku { background:#e8f1ff; color:#1d4ed8; }
.vivid-mode .icon-received { background:#dcfce7; color:#15803d; }
.vivid-mode .icon-pending { background:#fee2e2; color:#b91c1c; }
.vivid-mode .icon-aging { background:#ede9fe; color:#6d28d9; }
.vivid-mode .icon-value-ib { background:#fff1bd; color:#9a6700; }
.vivid-mode .icon-value-received { background:#d1fae5; color:#047857; }
.vivid-mode .icon-value-pending { background:#ffedd5; color:#c2410c; }
body.dark-mode.vivid-mode .icon-sku { background:#172a47; color:#93c5fd; }
body.dark-mode.vivid-mode .icon-received,body.dark-mode.vivid-mode .icon-value-received { background:#123322; color:#86efac; }
body.dark-mode.vivid-mode .icon-pending { background:#3b1717; color:#fca5a5; }
body.dark-mode.vivid-mode .icon-aging { background:#2c2145; color:#c4b5fd; }
body.dark-mode.vivid-mode .icon-value-ib { background:#3a3012; color:#fde68a; }
body.dark-mode.vivid-mode .icon-value-pending { background:#3b2414; color:#fdba74; }

.vivid-mode .manage-summary-card[data-fun-icon="package"] > span { background:#25221f; color:var(--brand-500); }
.vivid-mode .manage-summary-card[data-fun-icon="grid"] > span { background:#e8f1ff; color:#1d4ed8; }
.vivid-mode .manage-summary-card[data-fun-icon="money"] > span { background:#fff1bd; color:#9a6700; }
.vivid-mode .manage-summary-card[data-fun-icon="percent"] > span { background:#fee2e2; color:#b91c1c; }
.vivid-mode .manage-summary-card[data-fun-icon="clock"] > span { background:#ede9fe; color:#6d28d9; }
.vivid-mode .manage-summary-card[data-fun-icon="pin"] > span { background:#fce7f3; color:#be185d; }
.vivid-mode .manage-summary-card[data-fun-icon="alert"] > span { background:#fee2e2; color:#b91c1c; }
.vivid-mode .manage-summary-card[data-fun-icon="target"] > span { background:#dcfce7; color:#15803d; }
.vivid-mode .manage-summary-card[data-fun-icon="warehouse"] > span { background:#dbeafe; color:#1d4ed8; }
.vivid-mode .manage-summary-card[data-fun-icon="city"] > span { background:#e0f2fe; color:#0369a1; }
.vivid-mode .manage-summary-card[data-fun-icon="truck"] > span { background:#fff1bd; color:#9a6700; }
body.dark-mode.vivid-mode .manage-summary-card[data-fun-icon="grid"] > span,
body.dark-mode.vivid-mode .manage-summary-card[data-fun-icon="warehouse"] > span,
body.dark-mode.vivid-mode .manage-summary-card[data-fun-icon="city"] > span { background:#172a47; color:#93c5fd; }
body.dark-mode.vivid-mode .manage-summary-card[data-fun-icon="money"] > span,
body.dark-mode.vivid-mode .manage-summary-card[data-fun-icon="truck"] > span { background:#3a3012; color:#fde68a; }
body.dark-mode.vivid-mode .manage-summary-card[data-fun-icon="percent"] > span,
body.dark-mode.vivid-mode .manage-summary-card[data-fun-icon="alert"] > span { background:#3b1717; color:#fca5a5; }
body.dark-mode.vivid-mode .manage-summary-card[data-fun-icon="clock"] > span { background:#2c2145; color:#c4b5fd; }
body.dark-mode.vivid-mode .manage-summary-card[data-fun-icon="pin"] > span { background:#3b1c31; color:#f9a8d4; }
body.dark-mode.vivid-mode .manage-summary-card[data-fun-icon="target"] > span { background:#123322; color:#86efac; }

.vivid-mode .analytics-card > h2::before,.vivid-mode .table-header h2::before,.vivid-mode .manage-table-header h2::before {
    width:auto; height:auto; margin-right:8px; background:none; vertical-align:0; font-size:18px;
}
.vivid-mode .analytics-card > h2::before { content:"📊"; }
.vivid-mode .table-header h2::before { content:"📋"; }
.vivid-mode .manage-table-header h2::before { content:"🧭"; }
.vivid-mode .chart-box:has(#typeChart) .chart-header h3::before { content:"🧩 "; }
.vivid-mode .chart-box:has(#subwhChart) .chart-header h3::before { content:"🏭 "; }
.vivid-mode .chart-box:has(#agingChart) .chart-header h3::before { content:"⏱️ "; }
.vivid-mode .manage-filters-panel .manage-panel-header h2::before { content:"🎛️ "; }
.vivid-mode .ib-manage-view-qta #ibManageSidePanelTitle::before { content:"⏱️ "; }
.vivid-mode .ib-manage-view-outbound #ibManageSidePanelTitle::before { content:"🚦 "; }
.vivid-mode .manage-panel:has(#ibManageWhSplit) .manage-panel-header h2::before { content:"🏭 "; }
.vivid-mode .manage-panel:has(#ibManageRiskSplit) .manage-panel-header h2::before { content:"⚠️ "; }
.vivid-mode .manage-panel:has(#ibManageTypeSplit) .manage-panel-header h2::before { content:"🧩 "; }
.vivid-mode .manage-panel:has(#ibManageObStatusSplit) .manage-panel-header h2::before { content:"📍 "; }
.vivid-mode .manage-panel:has(#ibManageZoneSplit) .manage-panel-header h2::before { content:"🗺️ "; }

.vivid-mode [data-ib-focus] > span { font-size:0 !important; }
.vivid-mode [data-ib-focus] > span::after { font-size:18px; line-height:1; }
.vivid-mode [data-ib-focus="aging43"] > span::after { content:"⏳"; }
.vivid-mode [data-ib-focus="missing100"] > span::after { content:"💯"; }
.vivid-mode [data-ib-focus="qtaHigh"] > span::after { content:"🚨"; }
.vivid-mode [data-ib-focus="foundOb14"] > span::after { content:"📍"; }
.vivid-mode [data-ib-focus="sentTransitAlert"] > span::after { content:"🚚"; }
.vivid-mode [data-ib-focus="foundBkk"] > span::after { content:"🏙️"; }
.vivid-mode [data-ib-focus="foundHubBu"] > span::after { content:"🚛"; }
.vivid-mode [data-ib-focus="foundHubBs"] > span::after { content:"🚐"; }
.vivid-mode [data-ib-focus="foundHubBn"] > span::after { content:"📦"; }
.vivid-mode [data-ib-focus="urgentDispatch"] > span::after { content:"🚨"; }
.vivid-mode .manage-action-item[data-fun-icon]::before { margin-right:7px; font-size:15px; }
.vivid-mode .manage-action-item[data-fun-icon="qta"]::before { content:"🧭"; }
.vivid-mode .manage-action-item[data-fun-icon="percent"]::before { content:"📉"; }
.vivid-mode .manage-action-item[data-fun-icon="truck"]::before { content:"🚚"; }
.vivid-mode .manage-action-item[data-fun-icon="store"]::before { content:"🏪"; }
.vivid-mode .manage-action-item[data-fun-icon="clock"]::before { content:"⏰"; }
.vivid-mode .manage-action-item[data-fun-icon="alert"]::before { content:"🚨"; }
.vivid-mode .manage-action-item[data-fun-icon="warehouse"]::before { content:"🏭"; }
.vivid-mode .manage-action-item[data-fun-icon="search"]::before { content:"🔎"; }
.vivid-mode .manage-action-item[data-fun-icon="check"]::before { content:"✅"; }

.vivid-mode .manage-filter-grid label:has(#ibManageTypeFilter)::before,
.vivid-mode .filter-item:has(#typeFilter) label::before { content:"🧩 "; }
.vivid-mode .manage-filter-grid label:has(#ibManageStoreFilter)::before,
.vivid-mode .filter-item:has(#storeFilter) label::before { content:"🏪 "; }
.vivid-mode .manage-filter-grid label:has(#ibManageAgingFilter)::before,
.vivid-mode .filter-item:has(#agingFilter) label::before { content:"⏱️ "; }
.vivid-mode .manage-filter-grid label:has(#ibManageSubWhFilter)::before,
.vivid-mode .filter-item:has(#subwhFilter) label::before { content:"🏭 "; }
.vivid-mode .manage-filter-grid label:has(#ibManageMissingFilter)::before { content:"📉 "; }
.vivid-mode .manage-filter-grid label:has(#ibManageQtaFilter)::before { content:"🚨 "; }
.vivid-mode .manage-filter-grid label:has(#ibManageObStatusFilter)::before { content:"📍 "; }
.vivid-mode .manage-filter-grid label:has(#ibManageObDcFilter)::before { content:"🏢 "; }
.vivid-mode .manage-filter-grid label:has(#ibManageTransportFilter)::before { content:"🚚 "; }
.vivid-mode .manage-filter-grid label:has(#ibManageZoneFilter)::before { content:"🗺️ "; }
.vivid-mode .manage-filter-grid label:has(#ibManageRemarkFilter)::before,
.vivid-mode .filter-item:has(#remarkFilter) label::before { content:"💬 "; }
.vivid-mode .manage-filter-grid label:has(#ibManageProvinceFilter)::before { content:"🌐 "; }
.vivid-mode #dashboardPage .date-row label::before { content:"📅 "; }
.vivid-mode #dashboardPage .date-row + .date-row label::before { content:"🚚 "; }
.vivid-mode #clearFilterBtn::before { content:"🧹 "; }
.vivid-mode #exportExcelBtn::before,.vivid-mode #ibManageExportBtn::before { content:"📤 "; }

.vivid-mode #pendingTable th::before,.vivid-mode .manage-data-table th[data-column]::before {
    display:inline-block; margin-right:4px; font-size:11px; filter:saturate(.92);
}
.vivid-mode #pendingTable th:nth-child(1)::before,.vivid-mode .manage-data-table th[data-column="No."]::before { content:"#"; color:var(--brand-400); }
.vivid-mode #pendingTable th:nth-child(2)::before,.vivid-mode .manage-data-table th[data-column="IB No."]::before { content:"🧾"; }
.vivid-mode #pendingTable th:nth-child(3)::before,.vivid-mode .manage-data-table th[data-column="Store"]::before { content:"🏪"; }
.vivid-mode #pendingTable th:nth-child(4)::before,.vivid-mode .manage-data-table th[data-column="Type"]::before { content:"🧩"; }
.vivid-mode #pendingTable th:nth-child(5)::before,.vivid-mode .manage-data-table th[data-column="SUB WH"]::before { content:"🏭"; }
.vivid-mode #pendingTable th:nth-child(6)::before,.vivid-mode .manage-data-table th[data-column="Generate Date"]::before { content:"📅"; }
.vivid-mode #pendingTable th:nth-child(7)::before,.vivid-mode .manage-data-table th[data-column="Sent Transit Date"]::before { content:"🚚"; }
.vivid-mode #pendingTable th:nth-child(8)::before,.vivid-mode .manage-data-table th[data-column="Aging"]::before { content:"⏱️"; }
.vivid-mode #pendingTable th:nth-child(9)::before,.vivid-mode .manage-data-table th[data-column="Total SKU"]::before,
.vivid-mode .manage-data-table th[data-column="SKU Pending"]::before,.vivid-mode .manage-data-table th[data-column="Total QTY"]::before { content:"📦"; }
.vivid-mode #pendingTable th:nth-child(10)::before { content:"📦"; }
.vivid-mode #pendingTable th:nth-child(11)::before,.vivid-mode .manage-data-table th[data-column="% SDR"]::before { content:"📉"; }
.vivid-mode #pendingTable th:nth-child(12)::before,.vivid-mode .manage-data-table th[data-column="Pending AMT"]::before,
.vivid-mode .manage-data-table th[data-column="SDR AMT"]::before { content:"💰"; }
.vivid-mode #pendingTable th:nth-child(13)::before,.vivid-mode .manage-data-table th[data-column="Remark"]::before { content:"💬"; }
.vivid-mode .manage-data-table th[data-column="Store name"]::before { content:"👤"; }
.vivid-mode .manage-data-table th[data-column="QTA Process Alert"]::before { content:"🚨"; }
.vivid-mode .manage-data-table th[data-column="OB_Status"]::before { content:"📍"; }
.vivid-mode .manage-data-table th[data-column="OB_DC"]::before { content:"🏢"; }
.vivid-mode .manage-data-table th[data-column="OB_Location"]::before { content:"🗺️"; }
.vivid-mode .manage-data-table th[data-column="OB_Scan_Date"]::before { content:"📆"; }
.vivid-mode .manage-data-table th[data-column="Transport  Alert Pending"]::before { content:"🚚"; }
.vivid-mode .manage-data-table th[data-column="Zone_Delivery"]::before { content:"🌐"; }
.vivid-mode .manage-data-table th[data-column="Day_Delivery"]::before { content:"📅"; }
.vivid-mode .manage-data-table th[data-column="Province"]::before { content:"📌"; }
.vivid-mode #pendingTable th::before,
.vivid-mode .manage-data-table th[data-column]::before {
    content:none; display:none;
}
.vivid-mode #pendingTable th,
.vivid-mode .manage-data-table th {
    padding-inline:11px; letter-spacing:.01em;
}

.vivid-mode #pendingTable td.col-no,.vivid-mode .manage-data-table td.col-no {
    color:var(--brand-600); font-weight:800; font-variant-numeric:tabular-nums;
}
.vivid-mode #pendingTable td.col-ib,.vivid-mode .manage-data-table td.col-ib {
    background:rgba(255,212,0,.045); color:var(--ink-950); font-weight:750;
}
.vivid-mode #pendingTable tbody tr,.vivid-mode .manage-data-table tbody tr { transition:background .16s ease,box-shadow .16s ease,transform .16s ease; }
.vivid-mode #pendingTable tbody tr:hover,.vivid-mode .manage-data-table tbody tr:hover {
    box-shadow:inset 4px 0 0 var(--brand-500); transform:translateX(2px);
}
.vivid-mode #pendingTable td,.vivid-mode .manage-data-table td { border-bottom-color:rgba(185,174,151,.55); }
.vivid-mode .table-wrapper::-webkit-scrollbar { width:10px; height:10px; }
.vivid-mode .table-wrapper::-webkit-scrollbar-track { background:var(--surface-subtle); }
.vivid-mode .table-wrapper::-webkit-scrollbar-thumb { border:2px solid var(--surface-subtle); border-radius:999px; background:#b9a43c; }
.vivid-mode .table-wrapper::-webkit-scrollbar-thumb:hover { background:var(--brand-600); }

@keyframes vivid-rise {
    from { opacity:.75; transform:translateY(7px); }
    to { opacity:1; transform:translateY(0); }
}

/* Classic micro-interactions: same visual identity, more responsive and human. */
body:not(.fun-mode):not(.vivid-mode) .app-page > header {
    position:relative; overflow:hidden;
    transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
body:not(.fun-mode):not(.vivid-mode) .app-page > header::after {
    content:""; position:absolute; top:0; left:-35%; width:28%; height:3px;
    background:linear-gradient(90deg,transparent,var(--brand-400),transparent);
    pointer-events:none; transition:left .55s ease;
}
body:not(.fun-mode):not(.vivid-mode) .app-page > header:hover {
    border-color:rgba(229,185,0,.55); box-shadow:0 10px 25px rgba(15,23,42,.12); transform:translateY(-1px);
}
body.dark-mode:not(.fun-mode):not(.vivid-mode) .app-page > header:hover { box-shadow:0 11px 26px rgba(0,0,0,.28); }
body:not(.fun-mode):not(.vivid-mode) .app-page > header:hover::after { left:108%; }
body:not(.fun-mode):not(.vivid-mode) header h1 { position:relative; width:max-content; max-width:100%; }
body:not(.fun-mode):not(.vivid-mode) header h1::after {
    content:""; position:absolute; left:0; bottom:-5px; width:34px; height:3px; border-radius:999px;
    background:var(--brand-500); transition:width .28s ease;
}
body:not(.fun-mode):not(.vivid-mode) .app-page > header:hover h1::after { width:min(100%,92px); }

body:not(.fun-mode):not(.vivid-mode) .header-actions button {
    position:relative; overflow:hidden; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
body:not(.fun-mode):not(.vivid-mode) .header-actions button:hover {
    transform:translateY(-2px); box-shadow:0 7px 16px rgba(37,34,31,.13);
}
body:not(.fun-mode):not(.vivid-mode) .header-actions button:active { transform:translateY(0) scale(.97); }

body:not(.fun-mode):not(.vivid-mode) .card,
body:not(.fun-mode):not(.vivid-mode) .manage-summary-card {
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
body:not(.fun-mode):not(.vivid-mode) .card::after,
body:not(.fun-mode):not(.vivid-mode) .manage-summary-card::after {
    content:""; position:absolute; z-index:0; inset:-40% auto -40% -42%; width:25%;
    background:linear-gradient(90deg,transparent,rgba(255,212,0,.13),transparent);
    transform:skewX(-18deg); pointer-events:none; transition:left .52s ease;
}
body:not(.fun-mode):not(.vivid-mode) .card:hover::after,
body:not(.fun-mode):not(.vivid-mode) .manage-summary-card:hover::after { left:118%; }
body:not(.fun-mode):not(.vivid-mode) .card:hover,
body:not(.fun-mode):not(.vivid-mode) .manage-summary-card.is-clickable:hover {
    border-color:rgba(229,185,0,.68); transform:translateY(-4px); box-shadow:0 13px 25px rgba(15,23,42,.13);
}
body.dark-mode:not(.fun-mode):not(.vivid-mode) .card:hover,
body.dark-mode:not(.fun-mode):not(.vivid-mode) .manage-summary-card.is-clickable:hover { box-shadow:0 14px 27px rgba(0,0,0,.30); }
body:not(.fun-mode):not(.vivid-mode) .card > *,
body:not(.fun-mode):not(.vivid-mode) .manage-summary-card > * { position:relative; z-index:1; }
body:not(.fun-mode):not(.vivid-mode) .icon,
body:not(.fun-mode):not(.vivid-mode) .manage-summary-card > span { transition:transform .24s ease,box-shadow .24s ease; }
body:not(.fun-mode):not(.vivid-mode) .card:hover .icon,
body:not(.fun-mode):not(.vivid-mode) .manage-summary-card:hover > span {
    transform:translateY(-2px) rotate(-4deg) scale(1.07); box-shadow:0 7px 15px rgba(255,212,0,.25);
}
body:not(.fun-mode):not(.vivid-mode) .card-value,
body:not(.fun-mode):not(.vivid-mode) .manage-summary-card strong { transition:color .18s ease,transform .18s ease; }
body:not(.fun-mode):not(.vivid-mode) .card:hover .card-value,
body:not(.fun-mode):not(.vivid-mode) .manage-summary-card:hover strong { color:var(--ink-950); transform:translateX(2px); }

body:not(.fun-mode):not(.vivid-mode) .chart-box,
body:not(.fun-mode):not(.vivid-mode) .manage-panel {
    position:relative; overflow:visible; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
body:not(.fun-mode):not(.vivid-mode) .chart-box::before,
body:not(.fun-mode):not(.vivid-mode) .manage-panel::before {
    content:""; position:absolute; top:-1px; left:16px; width:28px; height:3px; border-radius:0 0 4px 4px;
    background:var(--brand-500); transition:width .28s ease;
}
body:not(.fun-mode):not(.vivid-mode) .chart-box:hover,
body:not(.fun-mode):not(.vivid-mode) .manage-panel:hover {
    border-color:rgba(229,185,0,.58); transform:translateY(-3px); box-shadow:0 13px 25px rgba(15,23,42,.12);
}
body.dark-mode:not(.fun-mode):not(.vivid-mode) .chart-box:hover,
body.dark-mode:not(.fun-mode):not(.vivid-mode) .manage-panel:hover { box-shadow:0 14px 27px rgba(0,0,0,.27); }
body:not(.fun-mode):not(.vivid-mode) .chart-box:hover::before,
body:not(.fun-mode):not(.vivid-mode) .manage-panel:hover::before { width:74px; }

body:not(.fun-mode):not(.vivid-mode) .legend-item,
body:not(.fun-mode):not(.vivid-mode) .manage-mini-bar,
body:not(.fun-mode):not(.vivid-mode) .manage-action-item,
body:not(.fun-mode):not(.vivid-mode) .manage-quick-focus button {
    transition:transform .17s ease,border-color .17s ease,background .17s ease,box-shadow .17s ease;
}
body:not(.fun-mode):not(.vivid-mode) .legend-item:hover,
body:not(.fun-mode):not(.vivid-mode) .manage-mini-bar:hover,
body:not(.fun-mode):not(.vivid-mode) .manage-action-item[role="button"]:hover,
body:not(.fun-mode):not(.vivid-mode) .manage-quick-focus button:hover {
    border-color:var(--brand-600); background:var(--surface-hover); transform:translateX(3px); box-shadow:0 6px 13px rgba(68,55,16,.09);
}
body:not(.fun-mode):not(.vivid-mode) .legend-item:active,
body:not(.fun-mode):not(.vivid-mode) .manage-mini-bar:active,
body:not(.fun-mode):not(.vivid-mode) .manage-action-item[role="button"]:active,
body:not(.fun-mode):not(.vivid-mode) .manage-quick-focus button:active { transform:translateX(1px) scale(.985); }

body:not(.fun-mode):not(.vivid-mode) #searchInput,
body:not(.fun-mode):not(.vivid-mode) #ibManageSearchInput,
body:not(.fun-mode):not(.vivid-mode) input[type="date"],
body:not(.fun-mode):not(.vivid-mode) .pbi-filter-button,
body:not(.fun-mode):not(.vivid-mode) .manage-multi-filter-button {
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease;
}
body:not(.fun-mode):not(.vivid-mode) #searchInput:hover,
body:not(.fun-mode):not(.vivid-mode) #ibManageSearchInput:hover,
body:not(.fun-mode):not(.vivid-mode) input[type="date"]:hover,
body:not(.fun-mode):not(.vivid-mode) .pbi-filter-button:hover,
body:not(.fun-mode):not(.vivid-mode) .manage-multi-filter-button:hover {
    border-color:rgba(229,185,0,.75); box-shadow:0 4px 11px rgba(68,55,16,.08);
}
body:not(.fun-mode):not(.vivid-mode) #searchInput:focus,
body:not(.fun-mode):not(.vivid-mode) #ibManageSearchInput:focus,
body:not(.fun-mode):not(.vivid-mode) input[type="date"]:focus {
    transform:translateY(-1px); box-shadow:0 7px 15px rgba(68,55,16,.10);
}

body:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr,
body:not(.fun-mode):not(.vivid-mode) .manage-data-table tbody tr {
    transition:background .15s ease,box-shadow .15s ease;
}
body:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr:hover,
body:not(.fun-mode):not(.vivid-mode) .manage-data-table tbody tr:hover {
    background:rgba(255,212,0,.11); box-shadow:inset 4px 0 0 var(--brand-500);
}
body:not(.fun-mode):not(.vivid-mode) #pendingTable th.sortable,
body:not(.fun-mode):not(.vivid-mode) .manage-data-table th.manage-sortable { transition:background .16s ease,color .16s ease; }
body:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr {
    position:relative; transform-origin:center; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
body:not(.fun-mode):not(.vivid-mode) #pendingTable tbody td {
    transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
body:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr:hover {
    position:relative; z-index:2; transform:translateY(-3px) scale(1.002);
    box-shadow:inset 5px 0 0 var(--brand-500),0 8px 16px rgba(15,23,42,.16);
    filter:saturate(1.06);
}
body:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr:hover td {
    border-bottom-color:rgba(229,185,0,.50); background:#fff9da;
}
body:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr:hover td.col-no {
    background:var(--brand-500); color:#25221f; font-weight:800; transform:scale(1.04);
}
body:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr:hover td.col-ib { color:#111827; transform:translateX(3px); }
body.dark-mode:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr:hover {
    box-shadow:inset 5px 0 0 var(--brand-500),0 9px 18px rgba(0,0,0,.38);
}
body.dark-mode:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr:hover td {
    border-bottom-color:#75631f; background:#2d291b; color:#f8fafc;
}
body.dark-mode:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr:hover td.col-no { background:var(--brand-500); color:#25221f; }
body.dark-mode:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr:hover td.col-ib { color:#fff7cf; }
body:not(.fun-mode):not(.vivid-mode) .page-size,
body:not(.fun-mode):not(.vivid-mode) .page-nav button,
body:not(.fun-mode):not(.vivid-mode) .page-jump button,
body:not(.fun-mode):not(.vivid-mode) .manage-page-size button,
body:not(.fun-mode):not(.vivid-mode) .manage-page-nav button,
body:not(.fun-mode):not(.vivid-mode) .manage-page-jump button { transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease; }
body:not(.fun-mode):not(.vivid-mode) .page-size:hover,
body:not(.fun-mode):not(.vivid-mode) .page-nav button:hover,
body:not(.fun-mode):not(.vivid-mode) .page-jump button:hover,
body:not(.fun-mode):not(.vivid-mode) .manage-page-size button:hover,
body:not(.fun-mode):not(.vivid-mode) .manage-page-nav button:hover,
body:not(.fun-mode):not(.vivid-mode) .manage-page-jump button:hover {
    transform:translateY(-2px); box-shadow:0 5px 11px rgba(68,55,16,.10);
}
body:not(.fun-mode):not(.vivid-mode) .sidebar nav a,
body:not(.fun-mode):not(.vivid-mode) .sidebar-manage-toggle { transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease; }
body:not(.fun-mode):not(.vivid-mode) .sidebar nav a:hover,
body:not(.fun-mode):not(.vivid-mode) .sidebar-manage-toggle:hover { transform:translateX(2px); }

@keyframes fun-badge {
    0%,100% { transform:rotate(-2deg) translateY(0); }
    50% { transform:rotate(2deg) translateY(-4px); }
}
@keyframes fun-blink { 50% { opacity:.25; } }

@keyframes fun-pop {
    from { opacity:.72; transform:scale(.97) translateY(4px); }
    to { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes fun-wiggle {
    0%,100% { transform:rotate(-3deg) scale(1); }
    40% { transform:rotate(7deg) scale(1.09); }
    70% { transform:rotate(-6deg) scale(1.05); }
}

@media (max-width:1366px) {
    main { padding:22px 18px 34px; }
    .sidebar { flex-basis:220px; width:220px; }
    .cards,.manage-data-summary { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .manage-command-center { grid-template-columns:minmax(0,2fr) minmax(280px,.8fr); gap:12px; }
    .manage-filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .chart-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:1024px) and (min-width:769px) {
    .sidebar { flex-basis:var(--sidebar-collapsed); width:var(--sidebar-collapsed); }
    .sidebar .logo-area { padding:50px 10px 16px; }
    .sidebar .logo-area img { width:48px; margin:0; }
    .sidebar .logo-area h2,.sidebar .nav-label,.sidebar .sidebar-menu-chevron { display:none; }
    .sidebar nav { padding:12px 8px; }
    .sidebar nav a,.sidebar-manage-toggle { justify-content:center; padding:10px; border-left:0; }
    .sidebar-manage-submenu { margin:3px 0 8px; padding:0; border:0; }
    .manage-command-center,.chart-grid { grid-template-columns:1fr; }
}

@media (max-width:768px) {
    body.fun-mode::after { display:none; }
    .fun-mode header h1 { padding:6px 10px; font-size:22px; box-shadow:3px 3px 0 var(--brand-500); }
    .fun-mode .app-page > header::after { display:none; }
    .fun-mode .card:nth-child(n),.fun-mode .manage-summary-card:nth-child(n) { transform:none; }
    .fun-mode #dashboardPage > header { min-height:0; padding:17px; border-width:3px; border-top-width:9px; box-shadow:5px 6px 0 #171717; }
    .fun-mode #dashboardPage header h1 { padding:7px 10px; font-size:24px; box-shadow:4px 4px 0 #fff; }
    .fun-mode #dashboardPage .cards { padding:42px 7px 9px; gap:10px; border-width:3px; box-shadow:5px 6px 0 rgba(23,23,23,.20); }
    .fun-mode #dashboardPage .cards::before { padding:6px 11px; border-width:3px; font-size:12px; }
    .fun-mode #dashboardPage .card { min-height:102px; padding:13px 10px; border-width:3px; box-shadow:4px 5px 0 #171717; }
    .fun-mode #dashboardPage .card-value { font-size:20px; letter-spacing:-.04em; }
    .fun-mode #dashboardPage .card-title { font-size:9px; }
    .fun-mode #dashboardPage .card-sub { margin-top:5px; font-size:8px; }
    .fun-mode #dashboardPage .icon { flex-basis:40px; width:40px; height:40px; border-width:2px; }
    .fun-mode #dashboardPage .icon::after { font-size:21px; }
    .fun-mode #dashboardPage .analytics-card,.fun-mode #dashboardPage .table-area { padding:13px; border-width:3px; border-top-width:10px; box-shadow:5px 6px 0 rgba(23,23,23,.20); }
    .fun-mode #dashboardPage .chart-grid { gap:13px; }
    .fun-mode #dashboardPage .chart-box { border-width:3px; box-shadow:4px 5px 0 var(--brand-600); }
    .fun-mode #dashboardPage .table-tools { padding:10px; border-width:2px; }
    .fun-mode #ibManagePage > header,.fun-mode #analyticsPage > header,
    .fun-mode #reportsPage > header,.fun-mode #settingsPage > header {
        min-height:0; padding:17px; border-width:3px; border-top-width:9px; box-shadow:5px 6px 0 #171717;
    }
    .fun-mode #ibManagePage header h1,.fun-mode #analyticsPage header h1,
    .fun-mode #reportsPage header h1,.fun-mode #settingsPage header h1 { padding:7px 10px; font-size:23px; box-shadow:4px 4px 0 #fff; }
    .fun-mode #ibManagePage .manage-subnav { padding:7px; border-width:3px; box-shadow:4px 5px 0 var(--brand-600); }
    .fun-mode #ibManagePage .manage-data-summary { padding:42px 7px 9px; gap:10px; border-width:3px; box-shadow:5px 6px 0 rgba(23,23,23,.20); }
    .fun-mode #ibManagePage .manage-data-summary::before { padding:6px 11px; border-width:3px; font-size:12px; }
    .fun-mode #ibManagePage .manage-summary-card { min-height:102px; padding:12px 9px; border-width:3px; box-shadow:4px 5px 0 #171717; }
    .fun-mode #ibManagePage .manage-summary-card strong { font-size:19px; }
    .fun-mode #ibManagePage .manage-summary-card small { font-size:8px; }
    .fun-mode #ibManagePage .manage-summary-card > span { flex-basis:40px; width:40px; height:40px; border-width:2px; }
    .fun-mode #ibManagePage .manage-summary-card > span::after { font-size:20px; }
    .fun-mode #ibManagePage .manage-panel,.fun-mode #ibManagePage .manage-table-area { border-width:3px; border-top-width:9px; box-shadow:5px 6px 0 rgba(23,23,23,.18); }
    .fun-mode #ibManagePage .manage-quick-focus { padding:8px; border-width:2px; }
    .fun-mode #ibManagePage .manage-quick-focus button { min-height:72px; border-width:2px; box-shadow:3px 4px 0 #171717; }
    .fun-mode #ibManagePage .manage-table-area { padding:12px; }
    .fun-mode #analyticsPage .manage-empty,.fun-mode #reportsPage .manage-empty,.fun-mode #settingsPage .manage-empty {
        padding:14px; border-width:3px; border-top-width:9px; box-shadow:5px 6px 0 rgba(23,23,23,.20);
    }
    .fun-mode .manage-empty-hero,.fun-mode .manage-placeholder-card { border-width:3px; box-shadow:4px 5px 0 #171717; transform:none; }
    .vivid-mode .app-page > header { min-height:0; padding:16px; border-radius:14px; }
    .vivid-mode header h1::before { flex-basis:31px; width:31px; height:31px; border-radius:9px; }
    .vivid-mode .card,.vivid-mode .manage-summary-card { min-height:88px; padding:12px; border-radius:13px; }
    .vivid-mode .icon,.vivid-mode .manage-summary-card > span { flex-basis:39px; width:39px; height:39px; border-radius:11px; }
    .vivid-mode .analytics-card,.vivid-mode .table-area,.vivid-mode .manage-table-area,.vivid-mode .manage-panel { border-radius:13px; }
    body:not(.fun-mode):not(.vivid-mode) .app-page > header:hover,
    body:not(.fun-mode):not(.vivid-mode) .card:hover,
    body:not(.fun-mode):not(.vivid-mode) .manage-summary-card.is-clickable:hover,
    body:not(.fun-mode):not(.vivid-mode) .chart-box:hover,
    body:not(.fun-mode):not(.vivid-mode) .manage-panel:hover,
    body:not(.fun-mode):not(.vivid-mode) .legend-item:hover,
    body:not(.fun-mode):not(.vivid-mode) .manage-mini-bar:hover,
    body:not(.fun-mode):not(.vivid-mode) .manage-action-item[role="button"]:hover,
    body:not(.fun-mode):not(.vivid-mode) .manage-quick-focus button:hover,
    body:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr:hover,
    body:not(.fun-mode):not(.vivid-mode) #pendingTable tbody tr:hover td { transform:none; }
    main { padding:14px 10px calc(92px + env(safe-area-inset-bottom)); }
    .sidebar { border:1px solid rgba(255,255,255,.12); background:rgba(23,26,31,.96); }
    .sidebar nav { grid-template-columns:repeat(6,minmax(0,1fr)); }
    .sidebar nav a { min-height:52px; padding:6px 2px; flex-direction:column; justify-content:center; gap:3px; border:0; font-size:9px; text-align:center; }
    .sidebar .nav-icon { width:19px; height:19px; }
    .sidebar .nav-label { display:block; max-width:100%; font-size:8px; }
    .sidebar nav a[data-page-link]::after { content:none; }
    .app-page > header { min-height:0; padding:16px; align-items:flex-start; }
    .header-actions { width:100%; }
    .header-actions button { flex:1; min-width:0; padding:0 8px; }
    .cards,.manage-data-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .card,.manage-summary-card { min-height:82px; padding:12px; }
    .analytics-card,.table-area,.manage-table-area { padding:12px; }
    .chart-grid,.manage-monitor-grid,.manage-command-center { grid-template-columns:1fr; }
    .filter-row,.manage-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ib-manage-view-qta .manage-date-row,.ib-manage-view-outbound .manage-date-row { grid-template-columns:1fr; }
    .ib-manage-view-qta .manage-date-row > span,.ib-manage-view-outbound .manage-date-row > span { display:none; }
    #searchInput,#ibManageSearchInput { width:100%; min-width:0; }
    .search-row,.table-tools,.manage-table-tools { width:100%; flex-wrap:wrap; }
    .table-wrapper { max-height:68vh; border-radius:var(--radius-sm); }
    #pendingTable,.manage-data-table { min-width:1050px !important; }
    .pagination,.manage-pagination { align-items:flex-start; flex-direction:column; }
}

@media (max-width:480px) {
    .filter-row,.manage-filter-grid { grid-template-columns:1fr; }
    .cards,.manage-data-summary { grid-template-columns:1fr 1fr; }
    .card-value,.manage-summary-card strong { font-size:20px; }
    .manage-quick-focus { grid-template-columns:1fr 1fr !important; }
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}