:root {
            --navy: #0000A0;
            --emerald: #10b981;
            --rose: #ef4444;
            --amber: #f59e0b;
            --slate-50: #f8fafc;
            --slate-100: #f1f5f9;
            --slate-200: #e2e8f0;
            --slate-400: #94a3b8;
            --slate-600: #475569;
            --slate-900: #0f172a;
        }

        body { font-family: 'Inter', sans-serif; background: #f1f5f9; color: var(--slate-900); margin: 0; padding: 24px; }
        .dashboard-container { max-width: 1440px; margin: 0 auto; }

        /* KPI Ribbon */
        .kpi-ribbon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
        .kpi-card { background: white; padding: 20px; border-radius: 8px; border: 1px solid var(--slate-200); position: relative; }
        .kpi-card label { display: block; font-size: 11px; font-weight: 700; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
        .kpi-value { font-size: 28px; font-weight: 700; color: var(--navy); }
        .kpi-trend { font-size: 12px; font-weight: 600; margin-top: 8px; display: flex; align-items: center; gap: 4px; }
        .trend-up { color: var(--rose); }
        .trend-down { color: var(--emerald); }

        /* Grid Layouts */
        .strategic-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; margin-bottom: 24px; }
        .glass-card { background: white; border-radius: 12px; border: 1px solid var(--slate-200); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); padding: 24px; }

        /* Headers */
        .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
        .card-header h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--navy); }
        .lens-selector { background: var(--slate-50); border: 1px solid var(--slate-200); padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }

        /* Bridge Component */
        .dso-bridge { display: flex; align-items: center; justify-content: space-between; background: var(--slate-50); padding: 15px; border-radius: 8px; margin-top: 20px; border: 1px solid var(--slate-200); }
        .bridge-part { text-align: center; flex: 1; }
        .bridge-part label { font-size: 9px; font-weight: 800; color: var(--slate-400); text-transform: uppercase; display: block; }
        .bridge-part .val { font-size: 16px; font-weight: 700; }
        .bridge-sign { font-size: 18px; color: var(--slate-400); padding: 0 10px; }

        /* Diagnostics Table */
        .no-padding { padding: 0; overflow: hidden; }
        .diagnostic-table { width: 100%; border-collapse: collapse; text-align: left; }
        .diagnostic-table th { background: var(--slate-50); padding: 14px 24px; font-size: 10px; font-weight: 700; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--slate-200); }
        .diagnostic-table td { padding: 16px 24px; border-bottom: 1px solid var(--slate-200); font-size: 14px; vertical-align: middle; }
        
        /* Growth/Status Helpers */
        .sub-name { font-weight: 700; color: var(--slate-900); }
        .sub-meta { font-size: 11px; color: var(--slate-400); font-weight: 500; }
        .growth-container { display: flex; align-items: center; gap: 10px; }
        .progress-mini { height: 4px; width: 60px; background: var(--slate-200); border-radius: 2px; }
        .progress-mini .fill { height: 100%; background: var(--emerald); border-radius: 2px; }
        .status-pill { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; display: inline-block; }
        .status-pill.optimized { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
        .status-pill.at-risk { background: #fef2f2; color: #991b1b; border: 1px solid #fecdd3; }
        .status-pill.stable { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
        .cash-impact-badge { background: #f0fdf4; color: #166534; font-weight: 700; padding: 4px 8px; border-radius: 4px; border: 1px solid #bbf7d0; font-size: 12px; }

        /* Sidebar */
        .velocity-header { border-bottom: 1px solid var(--slate-200); margin-bottom: 20px; padding-bottom: 15px; }
        .stat-row { display: flex; justify-content: space-between; margin-bottom: 20px; }
        .stat-group label { display: block; font-size: 10px; font-weight: 800; color: var(--slate-400); text-transform: uppercase; margin-bottom: 4px; }
        .stat-group .val { font-size: 22px; font-weight: 700; }
        .progress-bar-bg { height: 8px; background: var(--slate-200); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
        .progress-fill { height: 100%; background: var(--navy); }
        .status-ribbon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--slate-200); border-radius: 8px; overflow: hidden; border: 1px solid var(--slate-200); margin-bottom: 24px; }
        .status-tile { background: white; padding: 12px; text-align: center; }
        .lever-impact-card { background: var(--slate-50); border: 1px solid var(--slate-200); border-left: 4px solid var(--navy); padding: 16px; border-radius: 4px; }
        .cfo-brief { background: #fffbeb; border: 1px solid #fde68a; padding: 12px; border-radius: 6px; margin-top: 20px; font-size: 12px; line-height: 1.5; }
        .smart-insight { background: #f0f7ff; border-left: 4px solid var(--navy); padding: 16px; border-radius: 0 8px 8px 0; margin-top: 24px; display: flex; gap: 16px; }
        .insight-pill { background: var(--navy); color: white; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; height: fit-content; }
    
        /* Color icons only */
.icon-up { color: var(--rose); font-weight: bold; margin-right: 4px; }
.icon-down { color: var(--emerald); font-weight: bold; margin-right: 4px; }

/* Actual DSO Column Styling */
.dso-cell { font-weight: 700; color: var(--slate-900); }

/* Keep ADD text neutral unless it's a critical label */
.add-value { font-weight: 700; color: var(--slate-900); }
.add-risk { color: var(--rose); } /* Use only for the 'Risk' labels if desired */


:root {
    /* Primary Brand Palette */
    --navy: #0000A0;
    --navy-dark: #000070;
    --emerald: #10b981;
    --rose: #ef4444;
    --amber: #f59e0b;
    
    /* Slate Grayscale System */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-400: #94a3b8;
    --slate-600: #475569;
    --slate-900: #0f172a;

    /* Shadows & Depth */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Global Resets & Typography */
body { 
    font-family: 'Inter', sans-serif; 
    background: #f1f5f9; 
    color: var(--slate-900); 
    margin: 0; 
    padding: 24px; 
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

.dashboard-container { 
    max-width: 1440px; 
    margin: 0 auto; 
}

/* Card Foundations */
.glass-card { 
    background: white; 
    border-radius: 12px; 
    border: 1px solid var(--slate-200); 
    box-shadow: var(--shadow-sm); 
    padding: 24px; 
}

.no-padding { padding: 0; overflow: hidden; }

/* KPI Ribbon */
.kpi-ribbon { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    margin-bottom: 24px; 
}

.kpi-card { 
    background: white; 
    padding: 20px; 
    border-radius: 8px; 
    border: 1px solid var(--slate-200); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kpi-card label { 
    display: block; 
    font-size: 11px; 
    font-weight: 700; 
    color: var(--slate-400); 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    margin-bottom: 12px; 
}

.kpi-value { 
    font-size: 28px; 
    font-weight: 700; 
    color: var(--navy); 
}

/* Impact Card (Dark Variant) */
.kpi-card.impact {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%) !important;
    border: none;
}

/* Strategic Grid Layout */
.strategic-grid { 
    display: grid; 
    grid-template-columns: 1fr 380px; 
    gap: 24px; 
    margin-bottom: 24px; 
}

/* Diagnostic Table & Performance Indicators */
.diagnostic-table { 
    width: 100%; 
    border-collapse: collapse; 
    text-align: left; 
}

.diagnostic-table th { 
    background: white; 
    padding: 16px 24px; 
    font-size: 10px; 
    font-weight: 800; 
    color: var(--slate-400); 
    text-transform: uppercase; 
    letter-spacing: 0.08em; 
    border-bottom: 1px solid var(--slate-200); 
}

.diagnostic-table td { 
    padding: 16px 24px; 
    border-bottom: 1px solid var(--slate-100); 
    font-size: 14px; 
    vertical-align: middle; 
}

/* New Actual DSO Highlight */
.dso-cell {
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    background: var(--slate-50);
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
}

/* Subtle Trend Icons */
.icon-up { color: var(--rose); font-weight: bold; margin-right: 6px; }
.icon-down { color: var(--emerald); font-weight: bold; margin-right: 6px; }

/* Status Pills */
.status-pill { 
    padding: 4px 12px; 
    border-radius: 20px; 
    font-size: 11px; 
    font-weight: 700; 
}

.status-pill.optimized { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.status-pill.at-risk { background: #fef2f2; color: #991b1b; border: 1px solid #fecdd3; }
.status-pill.stable { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* Sidebar & Velocity Components */
.velocity-header { border-bottom: 1px solid var(--slate-200); margin-bottom: 20px; padding-bottom: 15px; }

.status-ribbon { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 1px; 
    background: var(--slate-200); 
    border-radius: 8px; 
    overflow: hidden; 
    border: 1px solid var(--slate-200); 
    margin-bottom: 24px; 
}

.status-tile { background: white; padding: 12px; text-align: center; }

.lever-impact-card { 
    background: white; 
    border: 1px solid var(--slate-200); 
    border-left: 4px solid var(--navy); 
    padding: 16px; 
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

/* AI & CFO Briefings */
.cfo-brief { 
    background: #FFFDF5; 
    border: 1px solid #FEF3C7; 
    border-left: 4px solid var(--amber);
    padding: 12px; 
    border-radius: 6px; 
    margin-top: 20px; 
    font-size: 12px; 
    line-height: 1.5; 
    color: #92400e;
}

.smart-insight { 
    background: #f0f7ff; 
    border-left: 4px solid var(--navy); 
    padding: 16px; 
    border-radius: 0 8px 8px 0; 
    margin-top: 24px; 
}


.kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid var(--accent); /* Consulting signature: colored accent top-border */
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
}

.benchmark-tag {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    background: #f8fafc;
    padding: 2px 6px;
    border-radius: 4px;
}

.kpi-body {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Splits the empty space into two columns */
    align-items: end;
}

.mini-insight {
    text-align: right;
    display: flex;
    flex-direction: column;
}

.delta-label {
    font-size: 9px;
    color: #94a3b8;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.delta-value.positive { color: var(--positive); font-weight: 600; }
.delta-value.negative { color: var(--negative); font-weight: 600; }

/* The Hero Card (WC Released) Styling */
/* Hero Card – Working Capital Released */
.hero-card {
  background: #fbfdff;
  border: 1px solid var(--slate-200);
  border-top: 3px solid var(--navy);
  box-shadow: none;
}

/* Label */
.hero-card label {
  color: var(--slate-500);
  letter-spacing: 0.04em;
}

/* Value */
.hero-card .kpi-value {
  color: var(--slate-900);
  font-weight: 800;
}

/* Status Pill */
.status-indicator {
  background: #ecfdf5;
  border: 1px solid var(--emerald);
  color: var(--emerald);
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
}

/* Progress */
.progress-track {
  background: var(--slate-200);
}

.progress-fill {
  background: var(--navy);
  opacity: 0.75;
}


:root {
    --warning: #f59e0b; /* Amber/Orange */
}

.delta-value.warning {
    color: var(--warning);
}



/* =========================================================
   MOBILE OPTIMIZATION (≤ 768px)
========================================================= */

@media (max-width: 768px) {

  body {
    padding: 12px;
  }

  .kpi-ribbon {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .kpi-value {
    font-size: 22px;
  }

  .strategic-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dso-bridge {
    flex-direction: column;
    gap: 12px;
  }

  .bridge-sign {
    display: none;
  }

  .card-header h2 {
    font-size: 16px;
  }

  .lens-selector {
    padding: 10px 14px;
    font-size: 14px;
  }

  .status-ribbon {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    overflow-x: auto;
  }

  .hero-card {
    order: -1;
  }
}