/* ═══════════════════════════════════════════
   FINANCE DASHBOARD Stylesheet (fin-db-*)
   Theme-aware: rgba(var(--ag-fg-rgb),..) + var(--mud-palette-*)
   Hoạt động ở cả Light & Dark mode.
   ═══════════════════════════════════════════ */

/* ── Header ── */
.fin-db-header { margin-bottom: 16px; }
.fin-db-header-icon { color: var(--mud-palette-success); font-size: 32px; }
.fin-db-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(var(--ag-fg-rgb), 0.4);
    display: block;
}
.fin-db-title {
    font-weight: 800 !important;
    letter-spacing: 0.3px;
    background: linear-gradient(90deg, var(--mud-palette-success), var(--mud-palette-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Filter bar ── */
.fin-db-filter-bar {
    background: rgba(var(--ag-fg-rgb), 0.03);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.07);
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.fin-db-month-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(var(--ag-fg-rgb), 0.12);
    border-radius: 999px;
    padding: 2px 6px;
    background: rgba(var(--ag-fg-rgb), 0.02);
}
.fin-db-month-lbl {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    padding: 0 4px;
}
.fin-db-filter-select { width: 150px !important; }

/* ── Section headers ── */
.fin-db-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 12px;
}
.fin-db-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}
.fin-db-section-hint {
    font-size: 0.72rem;
    color: rgba(var(--ag-fg-rgb), 0.4);
    margin-left: auto;
}

/* ════════════════════════════════════════════
   KPI CARDS
   ════════════════════════════════════════════ */
.fin-db-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.fin-db-kpi-grid--extra { margin-top: 8px; }
.fin-db-kpi-extra-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(var(--ag-fg-rgb), 0.4);
    margin: 16px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fin-db-kpi-extra-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(var(--ag-fg-rgb), 0.08);
}
.fin-db-kpi-card {
    background: rgba(var(--ag-fg-rgb), 0.04);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.fin-db-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--card-glow, var(--mud-palette-primary));
}
.fin-db-kpi-card:hover {
    transform: translateY(-3px);
    background: rgba(var(--ag-fg-rgb), 0.07);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}
.fin-db-kpi-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fin-db-kpi-ico {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-bg, rgba(var(--ag-fg-rgb), 0.05));
    color: var(--icon-color, var(--mud-palette-text-primary));
    flex: 0 0 30px;
}
.fin-db-kpi-label {
    font-size: 0.74rem;
    color: rgba(var(--ag-fg-rgb), 0.5);
    font-weight: 500;
}
.fin-db-kpi-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--mud-palette-text-primary);
}
.fin-db-kpi-value small {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(var(--ag-fg-rgb), 0.45);
}
.fin-db-kpi-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}
.fin-db-delta {
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.fin-db-delta.up { color: var(--mud-palette-success); }
.fin-db-delta.down { color: var(--mud-palette-error); }
.fin-db-delta-cmp {
    color: rgba(var(--ag-fg-rgb), 0.4);
    font-weight: 500;
}
.fin-db-kpi-split {
    font-size: 0.66rem;
    color: rgba(var(--ag-fg-rgb), 0.5);
    line-height: 1.4;
}
.fin-db-spark { flex: 0 0 auto; }

/* KPI glow per tone */
.fin-kpi--success   { --card-glow: var(--mud-palette-success);   --icon-bg: rgba(16, 185, 129, 0.12); --icon-color: var(--mud-palette-success); }
.fin-kpi--info      { --card-glow: var(--mud-palette-info);      --icon-bg: rgba(59, 130, 246, 0.12); --icon-color: var(--mud-palette-info); }
.fin-kpi--warning   { --card-glow: var(--mud-palette-warning);   --icon-bg: rgba(245, 158, 11, 0.12); --icon-color: var(--mud-palette-warning); }
.fin-kpi--error     { --card-glow: var(--mud-palette-error);     --icon-bg: rgba(239, 68, 68, 0.12);  --icon-color: var(--mud-palette-error); }
.fin-kpi--secondary { --card-glow: var(--mud-palette-secondary); --icon-bg: rgba(139, 92, 246, 0.12); --icon-color: var(--mud-palette-secondary); }
.fin-kpi--primary   { --card-glow: var(--mud-palette-primary);   --icon-bg: rgba(6, 182, 212, 0.12);  --icon-color: var(--mud-palette-primary); }

/* ════════════════════════════════════════════
   PANELS (shared)
   ════════════════════════════════════════════ */
.fin-db-panel {
    background: rgba(var(--ag-fg-rgb), 0.02);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.07);
    border-radius: 14px;
    overflow: hidden;
}
.fin-db-panel-pad { padding: 16px; }
.fin-db-panel-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(var(--ag-fg-rgb), 0.5);
    margin-bottom: 12px;
}

/* ════════════════════════════════════════════
   CALENDAR LAYOUT
   ════════════════════════════════════════════ */
.fin-db-cal-layout {
    display: grid;
    grid-template-columns: 200px 1fr 340px;
    gap: 12px;
    align-items: start;
}

/* ── Metric selector (left rail) ── */
.fin-db-crit-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fin-db-crit {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}
.fin-db-crit:hover { background: rgba(var(--ag-fg-rgb), 0.04); }
.fin-db-crit.is-on {
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
}
.fin-db-crit.is-on .fin-db-crit-text { color: var(--mud-palette-text-primary); }
.fin-db-crit-swatch {
    width: 11px; height: 11px;
    border-radius: 3px;
    flex: 0 0 11px;
    box-shadow: 0 0 0 1px rgba(var(--ag-fg-rgb), 0.12) inset;
}
.fin-db-crit-text {
    font-weight: 500;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fin-db-crit-tag {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(var(--ag-fg-rgb), 0.4);
    cursor: help;
}
.fin-db-legend-note {
    margin-top: 8px;
    font-size: 0.64rem;
    color: rgba(var(--ag-fg-rgb), 0.4);
    font-style: italic;
    line-height: 1.4;
}
.fin-db-legend {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--ag-fg-rgb), 0.07);
}
.fin-db-legend-title { margin-bottom: 8px; }
.fin-db-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    color: rgba(var(--ag-fg-rgb), 0.6);
    padding: 4px;
}

/* ── Status dots ── */
.fin-db-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex: 0 0 9px;
    display: inline-block;
}
.fin-db-dot.good     { background: var(--mud-palette-success); }
.fin-db-dot.warning  { background: var(--mud-palette-warning); }
.fin-db-dot.critical { background: var(--mud-palette-error); }
.fin-db-dot.none     { background: rgba(var(--ag-fg-rgb), 0.2); }

/* ── Calendar grid ── */
.fin-db-cal-head-title {
    display: flex;
    align-items: center;
    gap: 7px;
}
.fin-db-cal-dow-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}
.fin-db-cal-dow {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(var(--ag-fg-rgb), 0.5);
    padding: 6px 0;
}
.fin-db-cal-dow.we { color: var(--mud-palette-error); }
.fin-db-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    gap: 6px;
}
.fin-db-day {
    background:
        linear-gradient(180deg, rgba(var(--ag-fg-rgb), 0.045), rgba(var(--ag-fg-rgb), 0.015));
    border: 1px solid rgba(var(--ag-fg-rgb), 0.08);
    border-radius: 11px;
    padding: 7px 8px 8px;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
/* dải màu trạng thái mảnh ở mép trái ô có dữ liệu */
.fin-db-day.has-data::before {
    content: "";
    position: absolute;
    top: 8px; bottom: 8px; left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: rgba(var(--ag-fg-rgb), 0.12);
}
.fin-db-day.st-good::before     { background: var(--mud-palette-success); }
.fin-db-day.st-warning::before  { background: var(--mud-palette-warning); }
.fin-db-day.st-critical::before { background: var(--mud-palette-error); }
.fin-db-day.has-data { cursor: pointer; }
.fin-db-day.has-data:hover {
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4);
    border-color: rgba(var(--ag-fg-rgb), 0.22);
    transform: translateY(-2px);
}
.fin-db-day.we { background: linear-gradient(180deg, rgba(var(--ag-fg-rgb), 0.055), rgba(var(--ag-fg-rgb), 0.02)); }
.fin-db-day.future,
.fin-db-day.empty {
    background: rgba(var(--ag-fg-rgb), 0.012);
    border-style: dashed;
    border-color: rgba(var(--ag-fg-rgb), 0.07);
}
.fin-db-day.future .fin-db-dnum,
.fin-db-day.empty .fin-db-dnum { color: rgba(var(--ag-fg-rgb), 0.35); }
/* Hôm nay — viền nhấn nhẹ (khác với ô đang chọn) */
.fin-db-day.today {
    border-color: rgba(var(--mud-palette-success-rgb), 0.55);
    box-shadow: inset 0 0 0 1px rgba(var(--mud-palette-success-rgb), 0.35);
}
.fin-db-day.today .fin-db-dnum { color: var(--mud-palette-success); }
.fin-db-day.sel {
    border: 2px solid var(--mud-palette-primary);
    background:
        linear-gradient(180deg, rgba(var(--mud-palette-primary-rgb), 0.12), rgba(var(--mud-palette-primary-rgb), 0.04));
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.18);
    padding: 6px 7px 7px;
}
.fin-db-day.sel::before { background: var(--mud-palette-primary); }
.fin-db-day-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fin-db-dnum {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}
.fin-db-day.we .fin-db-dnum { color: var(--mud-palette-error); }
.fin-db-sel-tag {
    font-size: 0.5rem;
    font-weight: 700;
    background: var(--mud-palette-primary);
    color: #fff;
    padding: 1px 5px;
    border-radius: 5px;
    letter-spacing: 0.5px;
}
.fin-db-today-tag {
    font-size: 0.5rem;
    font-weight: 700;
    background: rgba(var(--mud-palette-success-rgb), 0.16);
    color: var(--mud-palette-success);
    border: 1px solid rgba(var(--mud-palette-success-rgb), 0.4);
    padding: 0 5px;
    border-radius: 5px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.fin-db-metrics {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
}
.fin-db-m-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    line-height: 1.35;
}
.fin-db-mi {
    width: 9px; height: 9px;
    flex: 0 0 9px;
    border-radius: 2px;
}
.fin-db-mi.m-rev   { background: #10b981; }
.fin-db-mi.m-pnl,
.fin-db-mi.m-gross { background: #34d399; }
.fin-db-mi.m-net   { background: #6ee7b7; }
.fin-db-mi.m-ar    { background: #f59e0b; }
.fin-db-mi.m-ap    { background: #3b82f6; }
.fin-db-mi.m-cf    { background: #8b5cf6; }
.fin-db-mi.m-inv   { background: #14b8a6; }
.fin-db-mi.m-order { background: #0ea5e9; }
.fin-db-mk {
    color: rgba(var(--ag-fg-rgb), 0.5);
    font-size: 0.56rem;
    font-weight: 600;
    min-width: 22px;            /* canh thẳng cột nhãn DT/LNG/KH/NCC… */
    letter-spacing: 0.2px;
}
.fin-db-mv {
    margin-left: auto;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.fin-db-mv.pos { color: var(--mud-palette-success); }
.fin-db-mv.neg { color: var(--mud-palette-error); }
.fin-db-day-dots {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}
.fin-db-day-dots .fin-db-dot { width: 7px; height: 7px; flex: 0 0 7px; }
.fin-db-no-data {
    font-size: 0.56rem;
    color: rgba(var(--ag-fg-rgb), 0.35);
    font-style: italic;
    margin-top: auto;
}

/* ── Day detail (right panel) ── */
.fin-db-dd-block {
    padding: 12px 16px;
    border-top: 1px solid rgba(var(--ag-fg-rgb), 0.06);
}
.fin-db-dd-block:first-of-type { border-top: 0; }
.fin-db-dd-h {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(var(--ag-fg-rgb), 0.5);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fin-db-dd-h--day {
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    margin-bottom: 0;
}
.fin-db-dd-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    font-size: 0.78rem;
}
.fin-db-dd-line .k { color: rgba(var(--ag-fg-rgb), 0.6); }
.fin-db-dd-line .v {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
/* Scoped state colors for value spans — color only, never background.
   (Bare .green/.amber/.red are MudBlazor global helpers that set a solid
   background-color and were painting a block over the number.) */
.fin-db-dd-line .v.fin-db-v--good { color: var(--mud-palette-success); background: none; }
.fin-db-dd-line .v.fin-db-v--due  { color: var(--mud-palette-warning); background: none; }
.fin-db-dd-line .v.fin-db-v--over { color: var(--mud-palette-error);   background: none; }
.fin-db-dd-line.total {
    border-top: 1px dashed rgba(var(--ag-fg-rgb), 0.15);
    margin-top: 4px;
    padding-top: 7px;
}
.fin-db-rank {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.78rem;
}
.fin-db-rn {
    width: 18px; height: 18px;
    border-radius: 5px;
    background: rgba(var(--mud-palette-success-rgb), 0.14);
    color: var(--mud-palette-success);
    font-weight: 700;
    font-size: 0.62rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
}
.fin-db-nm {
    color: var(--mud-palette-text-primary);
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fin-db-am {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-align: right;
}
.fin-db-more {
    display: block;
    text-align: right;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 4px;
    color: var(--mud-palette-primary);
    text-decoration: none;
}
.fin-db-more:hover { text-decoration: underline; }

/* tabular nums helper */
.tnum { font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════
   AI INSIGHTS
   ════════════════════════════════════════════ */
.fin-db-ai-panel {
    border: 1px solid rgba(var(--ag-fg-rgb), 0.08);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(var(--ag-fg-rgb), 0.02);
}
.fin-db-ai-head {
    background: linear-gradient(110deg,
        rgba(var(--mud-palette-success-rgb), 0.20),
        rgba(var(--mud-palette-primary-rgb), 0.12));
    border-bottom: 1px solid rgba(var(--mud-palette-success-rgb), 0.18);
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.fin-db-ai-spark {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: rgba(var(--mud-palette-success-rgb), 0.18);
    color: var(--mud-palette-success);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
}
.fin-db-ai-head-body { flex: 1; min-width: 200px; }
.fin-db-ai-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0;
}
.fin-db-ai-sub {
    font-size: 0.74rem;
    color: rgba(var(--ag-fg-rgb), 0.55);
    margin: 1px 0 0;
}
.fin-db-ai-badge {
    margin-left: auto;
    background: rgba(var(--mud-palette-success-rgb), 0.14);
    border: 1px solid rgba(var(--mud-palette-success-rgb), 0.3);
    color: var(--mud-palette-success);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fin-db-ai-pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-success);
    box-shadow: 0 0 0 0 rgba(var(--mud-palette-success-rgb), 0.7);
    animation: fin-db-pulse 2s infinite;
}
@keyframes fin-db-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--mud-palette-success-rgb), 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(var(--mud-palette-success-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--mud-palette-success-rgb), 0); }
}
.fin-db-ai-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 22px;
}
.fin-db-ai-card {
    border: 1px solid rgba(var(--ag-fg-rgb), 0.07);
    border-left: 4px solid var(--mud-palette-text-secondary);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: box-shadow 0.12s, transform 0.12s;
}
.fin-db-ai-card:hover {
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}
.fin-db-ai-ico {
    width: 30px; height: 30px;
    border-radius: 8px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fin-db-ai-txt {
    font-size: 0.78rem;
    color: rgba(var(--ag-fg-rgb), 0.78);
    line-height: 1.5;
}
.fin-db-ai-tag {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 2px;
}
/* severity skins */
.fin-db-ai-card.sev-success { border-left-color: var(--mud-palette-success); background: rgba(var(--mud-palette-success-rgb), 0.05); }
.fin-db-ai-card.sev-warning { border-left-color: var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), 0.05); }
.fin-db-ai-card.sev-info    { border-left-color: var(--mud-palette-info);    background: rgba(var(--mud-palette-info-rgb), 0.05); }
.fin-db-ai-card.sev-error   { border-left-color: var(--mud-palette-error);   background: rgba(var(--mud-palette-error-rgb), 0.05); }
.fin-db-ai-card.sev-neutral { border-left-color: rgba(var(--ag-fg-rgb), 0.3); background: rgba(var(--ag-fg-rgb), 0.02); }

.fin-db-ai-card.sev-success .fin-db-ai-ico { background: rgba(var(--mud-palette-success-rgb), 0.14); color: var(--mud-palette-success); }
.fin-db-ai-card.sev-warning .fin-db-ai-ico { background: rgba(var(--mud-palette-warning-rgb), 0.14); color: var(--mud-palette-warning); }
.fin-db-ai-card.sev-info    .fin-db-ai-ico { background: rgba(var(--mud-palette-info-rgb), 0.14);    color: var(--mud-palette-info); }
.fin-db-ai-card.sev-error   .fin-db-ai-ico { background: rgba(var(--mud-palette-error-rgb), 0.14);   color: var(--mud-palette-error); }
.fin-db-ai-card.sev-neutral .fin-db-ai-ico { background: rgba(var(--ag-fg-rgb), 0.06); color: var(--mud-palette-text-secondary); }

.fin-db-ai-card.sev-success .fin-db-ai-tag { color: var(--mud-palette-success); }
.fin-db-ai-card.sev-warning .fin-db-ai-tag { color: var(--mud-palette-warning); }
.fin-db-ai-card.sev-info    .fin-db-ai-tag { color: var(--mud-palette-info); }
.fin-db-ai-card.sev-error   .fin-db-ai-tag { color: var(--mud-palette-error); }
.fin-db-ai-card.sev-neutral .fin-db-ai-tag { color: var(--mud-palette-text-secondary); }

/* ════════════════════════════════════════════
   OPS CHIPS
   ════════════════════════════════════════════ */
.fin-db-chips {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}
.fin-db-chip {
    background: rgba(var(--ag-fg-rgb), 0.03);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fin-db-chip-label {
    font-size: 0.66rem;
    color: rgba(var(--ag-fg-rgb), 0.55);
    display: flex;
    align-items: center;
    gap: 5px;
}
.fin-db-chip-label .mud-icon-root { font-size: 0.95rem !important; color: var(--mud-palette-success); }
.fin-db-chip-value {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--mud-palette-text-primary);
}
.fin-db-chip-delta { font-size: 0.66rem; font-weight: 600; }
.fin-db-chip-delta.up { color: var(--mud-palette-success); }
.fin-db-chip-delta.down { color: var(--mud-palette-error); }

/* ════════════════════════════════════════════
   CHART CARDS
   ════════════════════════════════════════════ */
.fin-db-chart-card {
    background: rgba(var(--ag-fg-rgb), 0.02);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.07);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.fin-db-chart-h {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}
.fin-db-chart-sub {
    font-size: 0.68rem;
    color: rgba(var(--ag-fg-rgb), 0.4);
    margin-top: 1px;
    margin-bottom: 8px;
}
.fin-db-chart-box {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fin-db-chart-box > .apexcharts-canvas,
.fin-db-chart-box > div {
    width: 100% !important;
    align-self: stretch;
}
.fin-db-chart-empty {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(var(--ag-fg-rgb), 0.3);
    border: 1px dashed rgba(var(--ag-fg-rgb), 0.08);
    border-radius: 12px;
    width: 100%;
    background: rgba(var(--ag-fg-rgb), 0.01);
}
.fin-db-chart-empty-icon {
    font-size: 2rem !important;
    color: rgba(var(--ag-fg-rgb), 0.15) !important;
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 1400px) {
    .fin-db-cal-layout { grid-template-columns: 180px 1fr 320px; }
    .fin-db-ai-grid { grid-template-columns: repeat(2, 1fr); }
    .fin-db-chips { grid-template-columns: repeat(4, 1fr); }
    .fin-db-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
    .fin-db-cal-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .fin-db-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .fin-db-filter-select { width: 100% !important; }
    .fin-db-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .fin-db-ai-grid { grid-template-columns: 1fr; }
    .fin-db-chips { grid-template-columns: repeat(2, 1fr); }
    .fin-db-section-hint { margin-left: 0; width: 100%; }
}