/* ZCODE UI polish layer. Visual-only overrides, no data or behavior changes. */
:root {
    --ui-ink: #111827;
    --ui-ink-soft: #334155;
    --ui-muted: #8a94a6;
    --ui-line: rgba(15, 23, 42, 0.10);
    --ui-line-soft: rgba(15, 23, 42, 0.06);
    --ui-surface: rgba(255, 255, 255, 0.94);
    --ui-surface-strong: rgba(255, 255, 255, 0.985);
    --ui-surface-card: #f8fafc;
    --ui-blue: #2563eb;
    --ui-blue-soft: #eff6ff;
    --ui-green: #10b981;
    --ui-amber: #d97706;
    --ui-red: #ef4444;
    --ui-shadow-panel: 0 24px 60px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
    --ui-shadow-float: 0 14px 34px rgba(15, 23, 42, 0.13), 0 1px 4px rgba(15, 23, 42, 0.08);
    --ui-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body {
    color: var(--ui-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.top-action-group { display:inline-flex; align-items:center; gap:4px; padding:2px; border:1px solid rgba(15,23,42,.08); border-radius:8px; background:rgba(248,250,252,.88); }
.top-action-btn,.alert-bell-btn.top-action-btn { position:relative; width:auto; min-width:58px; height:30px; padding:0 9px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border:0!important; border-radius:6px!important; background:transparent!important; color:#526071; font-size:12px; font-weight:700; letter-spacing:0; cursor:pointer; box-shadow:none!important; }
.top-action-btn:hover,.alert-bell-btn.top-action-btn:hover { color:#1d4ed8; background:#eff6ff!important; }
.top-action-btn.is-active { color:#1d4ed8; background:#dbeafe!important; }
.top-action-btn.has-alerts { color:#b91c1c; background:#fef2f2!important; }
.top-action-btn svg,.alert-bell-btn.top-action-btn svg { width:15px; height:15px; flex:none; }
.top-action-badge,.top-action-btn .alert-bell-badge { position:absolute; top:-5px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; display:none; align-items:center; justify-content:center; color:#fff; background:#dc2626; font-size:10px; font-weight:800; line-height:1; }
.top-action-btn.has-signals .top-action-badge,.top-action-btn.has-alerts .alert-bell-badge { display:flex; }
.module-context { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:10px; overflow:hidden; border:1px solid rgba(15,23,42,.08); border-radius:8px; background:rgba(15,23,42,.08); }
.module-context-item { min-width:0; padding:7px 8px; background:#f8fafc; color:#64748b; font-size:10px; line-height:1.4; }
.module-context-item b { display:block; margin-bottom:2px; color:#334155; font-size:10px; }
@media(max-width:900px){.top-action-btn,.alert-bell-btn.top-action-btn{min-width:30px;padding:0 7px}.top-action-btn>span:not(.top-action-badge):not(.alert-bell-badge){display:none}}
@media(max-width:768px){.module-context{grid-template-columns:1fr}}

#dataFreshnessBadge.data-freshness-badge {
    position: fixed;
    right: 16px;
    bottom: 28px;
    z-index: var(--z-panel-expand, 310);
    display: inline-flex !important;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #475569;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

@media (min-width: 769px) {
    .top-bar {
        top: 10px !important;
        left: 16px !important;
        right: 16px !important;
        padding: 6px 12px !important;
        min-height: 44px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.90) !important;
        border: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
    }

    .top-bar h1 {
        color: var(--ui-ink);
        font-weight: 750;
        letter-spacing: 0;
    }

    .bar-sep {
        height: 22px;
        margin: 0 10px;
        background: rgba(15, 23, 42, 0.10);
    }

    .month-select,
    .category-select,
    .granularity-group,
    .region-filter,
    .color-mode-group,
    .filter-btn,
    .alert-bell-btn,
    .node-search-box {
        min-height: 30px;
        border-radius: 999px !important;
        border: 1px solid var(--ui-line) !important;
        background-color: rgba(255, 255, 255, 0.86) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    }

    .granularity-btn,
    .region-btn,
    .color-mode-btn {
        min-height: 30px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        color: #64748b;
        font-weight: 650;
        letter-spacing: 0;
    }

    .granularity-btn.active,
    .region-btn.active,
    .color-mode-btn.active,
    .filter-btn.active:not(.tier-btn) {
        background: var(--ui-blue) !important;
        color: #fff !important;
        box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
    }

    .filter-btn {
        padding: 4px 10px !important;
        color: #64748b;
        font-weight: 700;
        letter-spacing: 0;
    }

    .filter-btn.tier-btn {
        min-width: 34px;
        justify-content: center;
        background: rgba(255, 255, 255, 0.78) !important;
    }

    .filter-sep {
        color: rgba(15, 23, 42, 0.18) !important;
        margin: 0 4px;
    }

    .node-search-box {
        padding: 0 10px;
        gap: 7px;
    }

    .node-search-box input {
        color: var(--ui-ink);
        font-weight: 560;
    }

    .stats-panel {
        top: 72px !important;
        left: 24px !important;
        width: 320px;
        padding: 20px 18px 18px !important;
        border-radius: 18px !important;
        background: var(--ui-surface-strong) !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        box-shadow: var(--ui-shadow-panel) !important;
        scrollbar-color: rgba(15, 23, 42, 0.20) transparent !important;
    }

    .stats-panel.wide {
        width: min(492px, calc(100vw - 48px));
    }

    .stats-panel::-webkit-scrollbar,
    .drawer-body::-webkit-scrollbar {
        width: 8px;
    }

    .stats-panel::-webkit-scrollbar-thumb,
    .drawer-body::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.18) !important;
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box !important;
    }

    .panel-collapse-btn,
    .drawer-collapse-btn,
    .sp-close {
        background: #f3f4f6 !important;
        border: 1px solid rgba(15, 23, 42, 0.05) !important;
        color: #94a3b8 !important;
        border-radius: 8px !important;
    }

    .panel-collapse-btn:hover,
    .drawer-collapse-btn:hover,
    .sp-close:hover {
        background: #e5e7eb !important;
        color: #475569 !important;
    }

    .stats-title {
        color: #7a8494;
        font-size: 15px;
        font-weight: 750;
        letter-spacing: 0;
        text-transform: none;
        margin-bottom: 18px;
    }

    .stat-card {
        margin-bottom: 10px;
        padding: 14px 14px 13px;
        border: 1px solid transparent;
        border-bottom: 1px solid transparent !important;
        border-radius: 8px !important;
        background: rgba(248, 250, 252, 0.72);
        box-shadow: var(--ui-shadow-card);
        gap: 8px;
    }

    .stat-card:hover {
        background: #f8fbff !important;
        border-color: rgba(37, 99, 235, 0.16);
        transform: translateY(-1px);
    }

    .stat-card.active {
        border-color: rgba(37, 99, 235, 0.18);
        background: #f8fbff !important;
        box-shadow: inset 3px 0 0 var(--card-accent, var(--ui-blue)), 0 6px 18px rgba(15, 23, 42, 0.07) !important;
    }

    .stat-label,
    .wh-title,
    .line-style-title {
        color: #7a8494;
        font-weight: 750;
        letter-spacing: 0;
    }

    .stat-value {
        color: var(--ui-ink);
        font-size: 28px;
        font-weight: 850;
        letter-spacing: 0;
    }

    .stat-sub {
        color: var(--ui-amber);
        font-size: 13px;
        font-weight: 750;
    }

    .temp-row {
        gap: 8px;
        flex-wrap: wrap;
    }

    .temp-tag {
        min-height: 28px;
        padding: 4px 10px;
        border-radius: 7px;
        font-weight: 750;
    }

    .stat-card.delivery-saas-match {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 240, 0.95)) !important;
        border-color: rgba(239, 68, 68, 0.22) !important;
        border-left: 4px solid var(--ui-red) !important;
        box-shadow: 0 10px 26px rgba(180, 83, 9, 0.10) !important;
    }

    .stat-card.delivery-saas-match.active {
        box-shadow: inset 3px 0 0 var(--ui-red), 0 14px 34px rgba(180, 83, 9, 0.12) !important;
    }

    .caliber-badge {
        border-radius: 999px;
        background: #fff;
        border-color: rgba(239, 68, 68, 0.28);
        color: #b91c1c;
        letter-spacing: 0;
    }

    .delivery-caliber-note {
        border-radius: 8px;
        background: rgba(255, 251, 235, 0.72);
        border-color: rgba(245, 158, 11, 0.26);
        color: #b45309;
        letter-spacing: 0;
    }

    .top-tabs {
        margin-top: 14px !important;
        padding: 4px;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
        border-radius: 8px !important;
        background: #263247 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .top-tab {
        border-radius: 7px !important;
        border-bottom: none !important;
        margin-bottom: 0 !important;
        color: #b8c2d2 !important;
        letter-spacing: 0;
    }

    .top-tab.active {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.11) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    .line-style-section,
    .warehouse-section,
    .global-logistics-section,
    .alert-summary-section,
    .sp-cat-section {
        border-top-color: var(--ui-line-soft) !important;
    }

    .line-style-section {
        background: rgba(248, 250, 252, 0.80) !important;
        border: 1px solid var(--ui-line-soft);
        border-radius: 8px !important;
    }

    .gl-kpi-box,
    .gl-fee-card,
    .sp-card,
    .alert-kpi-card {
        border-radius: 8px !important;
        background: var(--ui-surface-card) !important;
        border: 1px solid var(--ui-line-soft) !important;
        box-shadow: var(--ui-shadow-card);
    }

    .gl-tabs,
    .sp-main-tabs,
    .sp-chart-tabs {
        gap: 4px;
        border-bottom: 1px solid var(--ui-line-soft) !important;
    }

    .gl-tab,
    .sp-main-tab,
    .sp-chart-tab {
        border-radius: 7px 7px 0 0;
        color: #94a3b8;
        letter-spacing: 0;
    }

    .gl-tab.active,
    .sp-main-tab.active,
    .sp-chart-tab.active {
        color: var(--ui-blue) !important;
        border-bottom-color: var(--ui-blue) !important;
        background: rgba(37, 99, 235, 0.05);
    }

    .drawer-panel {
        top: 76px !important;
        right: 24px !important;
        width: min(444px, calc(100vw - 48px)) !important;
        max-height: calc(100vh - 112px) !important;
        border-radius: 18px !important;
        background: var(--ui-surface-strong) !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        box-shadow: var(--ui-shadow-panel) !important;
    }

    .drawer-panel.ai-panel-open {
        max-height: calc(100vh - 470px) !important;
    }

    .drawer-body {
        padding: 22px 22px 18px !important;
        background: var(--ui-surface-strong) !important;
        border-radius: 18px !important;
    }

    .drawer-header {
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .sp-name {
        color: var(--ui-ink);
        font-size: 18px;
        font-weight: 820;
        letter-spacing: 0;
    }

    .sp-code {
        color: #a1a8b3;
        font-size: 13px;
        letter-spacing: 0;
    }

    .sp-grid {
        gap: 8px;
    }

    .sp-card {
        min-height: 68px;
        padding: 12px 8px 10px !important;
    }

    .sp-card-value {
        color: var(--ui-ink);
        font-size: 17px;
        font-weight: 850;
        letter-spacing: 0;
    }

    .sp-card-label,
    .sp-temp-label {
        color: #8a94a6;
        font-size: 11px;
        letter-spacing: 0;
    }

    .sp-temp-detail {
        margin-top: 16px;
        padding-top: 14px;
        border-top-color: var(--ui-line-soft) !important;
    }

    .sp-temp-bar {
        gap: 18px;
    }

    .sp-temp-val {
        font-size: 15px;
    }

    .sp-ai-eval-btn {
        border-radius: 8px !important;
        background: #6256d9 !important;
        box-shadow: 0 12px 22px rgba(98, 86, 217, 0.22);
    }

    #spLogisticsInsight {
        background: #fffaf0 !important;
        border: 1px solid rgba(245, 158, 11, 0.18);
        color: #334155;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70);
    }

    #spLogisticsToggle {
        color: #b45309 !important;
        font-weight: 750;
        letter-spacing: 0;
    }

    #spLogisticsTag {
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.66) !important;
    }

    #spLogisticsInner > div:first-child > div {
        background: rgba(255, 255, 255, 0.72) !important;
        border: 1px solid rgba(245, 158, 11, 0.12);
    }

    #spLogisticsInner > div:first-child > div > div:first-child {
        color: #7a8494 !important;
    }

    #spLogisticsInner > div:first-child > div > div:last-child,
    #spLogisticsInner [style*="color:#e2e8f0"],
    #spLogisticsInner [style*="color:#f8fafc"] {
        color: #111827 !important;
    }

    #spLogisticsInner [style*="color:#cbd5e1"] {
        color: #334155 !important;
    }

    #spLogisticsInner [style*="color:#94a3b8"] {
        color: #64748b !important;
    }

    .bottom-dock {
        bottom: 18px !important;
        padding: 5px !important;
        gap: 4px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.90) !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12) !important;
    }

    .dock-btn {
        flex-direction: row;
        gap: 6px;
        height: 34px;
        min-width: 0;
        padding: 7px 12px !important;
        border-radius: 999px !important;
        color: #6b7280;
        font-size: 12px;
        font-weight: 650;
        letter-spacing: 0;
    }

    .dock-btn svg {
        width: 17px;
        height: 17px;
        stroke-width: 1.9;
    }

    #dockAlerts,
    #dockWizard,
    #dockLab {
        display: none !important;
    }

    .dock-btn:hover {
        background: var(--ui-blue-soft) !important;
        color: var(--ui-blue) !important;
    }

    .dock-btn.active {
        background: #eaf2ff !important;
        color: var(--ui-blue) !important;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
    }

    .lab-menu,
    .alert-dropdown,
    .node-search-dropdown {
        border-radius: 12px !important;
        background: var(--ui-surface-strong) !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        box-shadow: var(--ui-shadow-float) !important;
    }

    .hm-metric-btn,
    .gl-subtab,
    .sp-y-btn {
        letter-spacing: 0;
    }
}

@media (max-width: 768px) {
    .drawer-panel,
    .stats-panel,
    .bottom-dock {
        background: var(--ui-surface-strong) !important;
    }

    #dataFreshnessBadge.data-freshness-badge {
        right: 10px;
        bottom: 62px;
        font-size: 11px;
        min-height: 26px;
        padding: 4px 9px;
    }
}