/* ==================================================================
   cashflow-components.css — Component-Level Styles
   Consolidated: cashflow-management + cashflow-unified +
                 cashflow-advanced + cashflow-polish + cashflow-professional
================================================================== */

/* ── cashflow-management.css ── */
/* ═══════════════════════════════════════════════════════════════════════════
   CASH FLOW MANAGEMENT — Enterprise Professional Design
   Same design language as Reports Center
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --cfm-primary: var(--fp-brand-primary, #0f172a);
    --cfm-primary-light: var(--fp-brand-accent, #3b82f6);
    --cfm-accent: var(--fp-semantic-success, #059669);
    --cfm-surface: var(--fp-surface, #ffffff);
    --cfm-surface-2: var(--fp-background, #f8fafc);
    --cfm-border: var(--fp-border, #e2e8f0);
    --cfm-text: var(--fp-text-primary, #0f172a);
    --cfm-text-2: var(--fp-text-secondary, #475569);
    --cfm-text-3: var(--fp-text-tertiary, #94a3b8);
    --cfm-radius: var(--fp-radius-md, 8px);
    --cfm-shadow: var(--fp-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
}

/* ═══ ROOT ═══ */
.cfm-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--cfm-surface-2);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ═══ HEADER ═══ */
.cfm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 1.5rem;
    background: var(--cfm-primary);
    color: white;
    flex-shrink: 0;
}

.cfm-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cfm-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.125rem;
}

.cfm-logo-icon {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cfm-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: white;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cfm-nav-btn:hover { background: rgba(255,255,255,0.2); }

.cfm-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cfm-hdr-btn {
    padding: 0.5rem 0.875rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: white;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.15s ease;
}

.cfm-hdr-btn:hover { background: rgba(255,255,255,0.2); }

.cfm-hdr-btn.primary {
    background: white;
    color: var(--cfm-primary);
    border-color: white;
}

/* ═══ MAIN LAYOUT ═══ */
.cfm-main {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ═══ SIDEBAR ═══ */
.cfm-sidebar {
    width: 260px;
    background: var(--cfm-surface);
    border-right: 1px solid var(--cfm-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.cfm-sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--cfm-border);
}

.cfm-sidebar-title {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cfm-text-3);
}

.cfm-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
}

.cfm-nav-group {
    margin-bottom: 1.25rem;
}

.cfm-group-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cfm-text-3);
    padding: 0.5rem 0.75rem;
}

.cfm-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cfm-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--cfm-text-2);
}

.cfm-nav-item:hover {
    background: var(--cfm-surface-2);
    color: var(--cfm-text);
}

.cfm-nav-item.active {
    background: #eff6ff;
    color: var(--cfm-primary);
}

.cfm-nav-item i {
    width: 18px;
    text-align: center;
    font-size: 0.875rem;
}

.cfm-nav-item span {
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ═══ CONTENT AREA ═══ */
.cfm-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cfm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    background: var(--cfm-surface);
    border-bottom: 1px solid var(--cfm-border);
}

.cfm-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cfm-toolbar-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cfm-text);
    margin: 0;
}

.cfm-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cfm-toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--cfm-border);
    margin: 0 0.25rem;
}

.cfm-filter-btn {
    padding: 0.4375rem 0.75rem;
    background: var(--cfm-surface);
    border: 1px solid var(--cfm-border);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cfm-text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.15s ease;
}

.cfm-filter-btn:hover { border-color: var(--cfm-text-3); }

.cfm-filter-btn.active {
    background: var(--cfm-primary);
    border-color: var(--cfm-primary);
    color: white;
}

.cfm-filter-btn.spinning i {
    animation: cfm-spin 1s linear infinite;
}

@keyframes cfm-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.cfm-select {
    padding: 0.4375rem 0.75rem;
    background: var(--cfm-surface);
    border: 1px solid var(--cfm-border);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cfm-text);
    min-width: 140px;
    cursor: pointer;
}

.cfm-select:focus { border-color: var(--cfm-primary-light); outline: none; }

/* ═══ REPORT VIEWER ═══ */
.cfm-viewer {
    flex: 1;
    padding: 1.25rem;
    overflow: auto;
}

.cfm-report-container {
    background: var(--cfm-surface);
    border: 1px solid var(--cfm-border);
    border-radius: var(--cfm-radius);
    box-shadow: var(--cfm-shadow);
    overflow: hidden;
}

.cfm-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white;
}

.cfm-report-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.cfm-report-meta {
    font-size: 0.75rem;
    opacity: 0.8;
}

.cfm-report-body {
    padding: 1.25rem;
}

/* ═══ CASH FLOW TABLE ═══ */
.cfm-cf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.cfm-cf-table th {
    padding: 0.75rem 1rem;
    text-align: right;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cfm-text-3);
    background: #f8fafc;
    border-bottom: 2px solid var(--cfm-border);
}

.cfm-cf-table th:first-child {
    text-align: left;
    width: 300px;
}

.cfm-cf-table td {
    padding: 0.75rem 1rem;
    text-align: right;
    border-bottom: 1px solid var(--cfm-border);
}

.cfm-cf-table td:first-child {
    text-align: left;
}

.cfm-cf-table tr:hover {
    background: #f8fafc;
}

.cfm-cf-table tr.section-header {
    background: #f1f5f9;
}

.cfm-cf-table tr.section-header td {
    font-weight: 700;
    color: var(--cfm-primary);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.cfm-cf-table tr.subtotal td {
    font-weight: 600;
    background: #f8fafc;
    border-top: 1px solid var(--cfm-border);
}

.cfm-cf-table tr.grand-total {
    background: var(--cfm-primary);
    color: white;
}

.cfm-cf-table tr.grand-total td {
    font-weight: 700;
    padding: 1rem;
    border: none;
    color: white;
}

.cfm-cf-table tr.separator-row td {
    padding: 0.25rem 0;
    border: none;
}

.cfm-cf-table tr.overdue-row { background: #fef2f2; }
.cfm-cf-table tr.urgent-row { background: #fffbeb; }

/* ═══ VALUE FORMATTING ═══ */
.cfm-positive { color: #16a34a; }
.cfm-negative { color: #dc2626; }

/* ═══ KPI GRID ═══ */
.cfm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.cfm-kpi-card {
    background: var(--cfm-surface-2);
    border: 1px solid var(--cfm-border);
    border-radius: var(--cfm-radius);
    padding: 1rem 1.25rem;
}

.cfm-kpi-card h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cfm-text-3);
}

.cfm-kpi-val {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cfm-text);
}

.cfm-kpi-sub {
    font-size: 0.6875rem;
    color: var(--cfm-text-3);
    margin-top: 0.25rem;
}

.cfm-kpi-card--highlight {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    border-color: transparent;
}

.cfm-kpi-card--highlight h4 { color: rgba(255,255,255,0.7); }
.cfm-kpi-card--highlight .cfm-kpi-val { color: white; }
.cfm-kpi-card--highlight .cfm-kpi-sub { color: rgba(255,255,255,0.7); }
.cfm-kpi-card--highlight .cfm-positive { color: #86efac; }
.cfm-kpi-card--highlight .cfm-negative { color: #fca5a5; }

/* ═══ DASHBOARD GRID ═══ */
.cfm-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.cfm-dash-card {
    background: var(--cfm-surface);
    border: 1px solid var(--cfm-border);
    border-radius: var(--cfm-radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--cfm-shadow);
}

.cfm-dash-card.positive { border-left: 4px solid #16a34a; }
.cfm-dash-card.negative { border-left: 4px solid #dc2626; }

.cfm-dash-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--cfm-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cfm-dash-data {
    flex: 1;
    min-width: 0;
}

.cfm-dash-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cfm-text-3);
    margin-bottom: 0.25rem;
}

.cfm-dash-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cfm-text);
}

/* ═══ ENTRY ACTIONS ═══ */
.cfm-entry-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cfm-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--cfm-primary-light);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cfm-primary-btn:hover { background: #2563eb; }

.cfm-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--cfm-surface);
    color: var(--cfm-text-2);
    border: 1px solid var(--cfm-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cfm-secondary-btn:hover {
    border-color: var(--cfm-text-3);
    color: var(--cfm-text);
}

/* ═══ BADGE ═══ */
.cfm-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.cfm-badge.success { background: #dcfce7; color: #16a34a; }
.cfm-badge.warning { background: #fef3c7; color: #d97706; }
.cfm-badge.danger { background: #fef2f2; color: #dc2626; }
.cfm-badge.info { background: #dbeafe; color: #2563eb; }

/* ═══ EMPTY STATE ═══ */
.cfm-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--cfm-text-3);
}

.cfm-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.cfm-empty-state h3 {
    margin: 0 0 0.5rem 0;
    color: var(--cfm-text);
    font-size: 1.125rem;
    font-weight: 700;
}

.cfm-empty-state p {
    margin: 0 0 1.25rem 0;
    font-size: 0.875rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ═══ LOADING ═══ */
.cfm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--cfm-text-3);
}

.cfm-loading-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--cfm-border);
    border-top-color: var(--cfm-primary-light);
    animation: cfm-spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

.cfm-loading p {
    font-size: 0.875rem;
}

/* ═══ PRINT STYLES ═══ */
@media print {
    .cfm-header, .cfm-sidebar, .cfm-toolbar, .cfm-entry-actions,
    .cfm-primary-btn, .cfm-secondary-btn, .cfm-hdr-btn, .cfm-nav-btn {
        display: none !important;
    }
    .cfm-root { height: auto; }
    .cfm-main { display: block; }
    .cfm-content { display: block; }
    .cfm-viewer { padding: 0; }
}

/* ── cashflow-unified.css ── */
/* ============================================================================
   CASH FLOW UNIFIED DESIGN SYSTEM
   ============================================================================
   Hub page, shared layouts, and component styles for Cash Flow Management.
   Uses design tokens from cashflow-variables.css
   ============================================================================ */

/* ── Hub Layout ───────────────────────────────────────────────────────────── */

.cf-hub {
    font-family: var(--cf-font-family, 'Inter', 'Segoe UI', system-ui, sans-serif);
    color: var(--cf-text, #2d3748);
    background: var(--cf-bg, #f7f8fc);
    min-height: 100vh;
    padding: var(--cf-space-lg, 24px);
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.cf-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--cf-space-md, 16px);
    margin-bottom: var(--cf-space-xl, 32px);
    padding-bottom: var(--cf-space-lg, 24px);
    border-bottom: 1px solid var(--cf-border, #e2e8f0);
}

.cf-hub-brand {
    display: flex;
    align-items: center;
    gap: var(--cf-space-md, 16px);
}

.cf-hub-brand-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--cf-radius-lg, 12px);
    background: linear-gradient(135deg, var(--cf-primary, #1a365d), var(--cf-primary-light, #2a4a7f));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    box-shadow: var(--cf-shadow, 0 1px 3px rgba(0,0,0,.12));
}

.cf-hub-brand h1 {
    margin: 0;
    font-size: var(--cf-text-2xl, 1.375rem);
    font-weight: var(--cf-font-bold, 700);
    color: var(--cf-primary, #1a365d);
    line-height: 1.2;
}

.cf-hub-brand p {
    margin: 2px 0 0;
    font-size: var(--cf-text-sm, .8125rem);
    color: var(--cf-text-muted, #718096);
}

.cf-hub-header-right {
    display: flex;
    align-items: center;
    gap: var(--cf-space-sm, 8px);
}

.cf-hub-select {
    padding: 6px 12px;
    border: 1px solid var(--cf-border, #e2e8f0);
    border-radius: var(--cf-radius, 8px);
    font-size: var(--cf-text-sm, .8125rem);
    color: var(--cf-text, #2d3748);
    background: var(--cf-surface, #fff);
    cursor: pointer;
    transition: border-color var(--cf-transition, 200ms ease);
    min-width: 140px;
}
.cf-hub-select:focus {
    outline: none;
    border-color: var(--cf-border-focus, #3182ce);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, .12);
}

.cf-hub-btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cf-border, #e2e8f0);
    border-radius: var(--cf-radius, 8px);
    background: var(--cf-surface, #fff);
    color: var(--cf-text-secondary, #4a5568);
    cursor: pointer;
    font-size: .875rem;
    transition: all var(--cf-transition, 200ms ease);
}
.cf-hub-btn-icon:hover {
    background: var(--cf-bg-hover, #edf2f7);
    border-color: var(--cf-border-dark, #cbd5e0);
}
.cf-hub-btn-icon.spinning i {
    animation: cf-spin .8s linear infinite;
}
@keyframes cf-spin {
    to { transform: rotate(360deg); }
}

/* ── Loading ──────────────────────────────────────────────────────────────── */

.cf-hub-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--cf-space-2xl, 48px);
    gap: var(--cf-space-md, 16px);
}
.cf-hub-loading p {
    color: var(--cf-text-muted, #718096);
    font-size: var(--cf-text-sm, .8125rem);
}
.cf-hub-loading-ring {
    width: 40px;
    height: 40px;
    border: 3px solid var(--cf-border-light, #edf2f7);
    border-top-color: var(--cf-primary, #1a365d);
    border-radius: 50%;
    animation: cf-spin .8s linear infinite;
}

/* ── KPI Strip ────────────────────────────────────────────────────────────── */

.cf-hub-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--cf-space-md, 16px);
    margin-bottom: var(--cf-space-xl, 32px);
}

.cf-hub-kpi {
    display: flex;
    align-items: center;
    gap: var(--cf-space-md, 16px);
    padding: var(--cf-space-md, 16px) var(--cf-space-lg, 24px);
    background: var(--cf-surface, #fff);
    border-radius: var(--cf-radius-lg, 12px);
    border: 1px solid var(--cf-border-light, #edf2f7);
    box-shadow: var(--cf-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    transition: all var(--cf-transition, 200ms ease);
}
.cf-hub-kpi:hover {
    box-shadow: var(--cf-shadow-md, 0 4px 6px rgba(0,0,0,.07));
    transform: translateY(-1px);
}

.cf-hub-kpi-icon {
    width: var(--cf-kpi-icon-size, 40px);
    height: var(--cf-kpi-icon-size, 40px);
    border-radius: var(--cf-radius, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.cf-hub-kpi.success .cf-hub-kpi-icon {
    background: var(--cf-success-bg, rgba(45,134,89,.08));
    color: var(--cf-success, #2d8659);
}
.cf-hub-kpi.danger .cf-hub-kpi-icon {
    background: var(--cf-danger-bg, rgba(197,48,48,.08));
    color: var(--cf-danger, #c53030);
}
.cf-hub-kpi.primary .cf-hub-kpi-icon {
    background: var(--cf-primary-50, rgba(26,54,93,.05));
    color: var(--cf-primary, #1a365d);
}
.cf-hub-kpi.info .cf-hub-kpi-icon {
    background: var(--cf-info-bg, rgba(49,130,206,.08));
    color: var(--cf-info, #3182ce);
}
.cf-hub-kpi.warning .cf-hub-kpi-icon {
    background: var(--cf-warning-bg, rgba(214,158,46,.08));
    color: var(--cf-warning, #d69e2e);
}

.cf-hub-kpi-data {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cf-hub-kpi-label {
    font-size: var(--cf-text-xs, .75rem);
    color: var(--cf-text-muted, #718096);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: var(--cf-font-medium, 500);
}
.cf-hub-kpi-value {
    font-size: var(--cf-text-xl, 1.125rem);
    font-weight: var(--cf-font-bold, 700);
    color: var(--cf-text, #2d3748);
    font-family: var(--cf-font-mono, monospace);
}

/* ── Central Treasury Control Deck ───────────────────────────────────────── */

.cf-hub-control-deck {
    display: grid;
    grid-template-columns: minmax(320px, 1.25fr) repeat(2, minmax(260px, 1fr));
    gap: var(--cf-space-md, 16px);
    margin-bottom: var(--cf-space-xl, 32px);
}

.cf-hub-command-panel {
    background: var(--cf-surface, #fff);
    border: 1px solid var(--cf-border-light, #edf2f7);
    border-radius: var(--cf-radius, 8px);
    box-shadow: var(--cf-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    padding: var(--cf-space-lg, 24px);
    min-width: 0;
}

.cf-hub-command-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cf-space-md, 16px);
    margin-bottom: var(--cf-space-md, 16px);
}

.cf-hub-command-head h3 {
    margin: 2px 0 0;
    color: var(--cf-primary, #1a365d);
    font-size: var(--cf-text-base, .875rem);
    font-weight: var(--cf-font-bold, 700);
}

.cf-hub-command-head > i {
    color: var(--cf-accent, #d4a843);
    font-size: 1.05rem;
}

.cf-hub-eyebrow {
    display: block;
    color: var(--cf-text-muted, #718096);
    font-size: var(--cf-text-xs, .75rem);
    font-weight: var(--cf-font-semibold, 600);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cf-hub-health-pill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--cf-radius-full, 9999px);
    padding: 4px 10px;
    font-size: var(--cf-text-xs, .75rem);
    font-weight: var(--cf-font-semibold, 600);
    white-space: nowrap;
}

.cf-hub-health-pill.success { background: var(--cf-success-bg); color: var(--cf-success); }
.cf-hub-health-pill.warning { background: var(--cf-warning-bg); color: var(--cf-warning); }
.cf-hub-health-pill.danger { background: var(--cf-danger-bg); color: var(--cf-danger); }

.cf-hub-command-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cf-space-sm, 8px);
}

.cf-hub-command-metrics > div,
.cf-hub-signal-list > div {
    background: var(--cf-bg-alt, #f0f2f8);
    border: 1px solid var(--cf-border-light, #edf2f7);
    border-radius: var(--cf-radius, 8px);
    padding: 10px 12px;
    min-width: 0;
}

.cf-hub-command-metrics small,
.cf-hub-signal-list span {
    display: block;
    color: var(--cf-text-muted, #718096);
    font-size: var(--cf-text-xs, .75rem);
    margin-bottom: 2px;
}

.cf-hub-command-metrics strong,
.cf-hub-signal-list strong {
    display: block;
    color: var(--cf-text, #2d3748);
    font-size: var(--cf-text-sm, .8125rem);
    font-weight: var(--cf-font-bold, 700);
    overflow-wrap: anywhere;
}

.cf-hub-signal-list,
.cf-hub-lane-stack {
    display: grid;
    gap: var(--cf-space-sm, 8px);
}

.cf-hub-signal-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cf-hub-lane {
    border: 1px solid var(--cf-border-light, #edf2f7);
    border-radius: var(--cf-radius, 8px);
    padding: 10px 12px;
}

.cf-hub-lane strong {
    display: block;
    color: var(--cf-text, #2d3748);
    font-size: var(--cf-text-sm, .8125rem);
    margin-bottom: 2px;
}

.cf-hub-lane span {
    display: block;
    color: var(--cf-text-secondary, #4a5568);
    font-size: var(--cf-text-xs, .75rem);
    line-height: 1.4;
}

.cf-hub-lane.success { background: var(--cf-success-bg); border-color: rgba(45,134,89,.18); }
.cf-hub-lane.warning { background: var(--cf-warning-bg); border-color: rgba(214,158,46,.22); }
.cf-hub-lane.danger { background: var(--cf-danger-bg); border-color: rgba(197,48,48,.18); }

.cf-hub-command-metrics .text-success,
.cf-hub-signal-list .text-success {
    color: var(--cf-success, #2d8659);
}

.cf-hub-command-metrics .text-danger,
.cf-hub-signal-list .text-danger {
    color: var(--cf-danger, #c53030);
}

/* ── Navigation Grid ──────────────────────────────────────────────────────── */

.cf-hub-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--cf-space-lg, 24px);
    margin-bottom: var(--cf-space-xl, 32px);
}

.cf-hub-section {
    background: var(--cf-surface, #fff);
    border-radius: var(--cf-radius-lg, 12px);
    border: 1px solid var(--cf-border-light, #edf2f7);
    box-shadow: var(--cf-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    padding: var(--cf-space-lg, 24px);
}

.cf-hub-section-title {
    font-size: var(--cf-text-base, .875rem);
    font-weight: var(--cf-font-semibold, 600);
    color: var(--cf-primary, #1a365d);
    margin: 0 0 var(--cf-space-md, 16px);
    padding-bottom: var(--cf-space-sm, 8px);
    border-bottom: 2px solid var(--cf-primary-50, rgba(26,54,93,.05));
    display: flex;
    align-items: center;
    gap: var(--cf-space-sm, 8px);
}
.cf-hub-section-title i {
    color: var(--cf-accent, #d4a843);
}

.cf-hub-cards {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-sm, 8px);
}

.cf-hub-card {
    display: flex;
    align-items: center;
    gap: var(--cf-space-md, 16px);
    padding: var(--cf-space-sm, 8px) var(--cf-space-md, 16px);
    border-radius: var(--cf-radius, 8px);
    text-decoration: none;
    color: inherit;
    transition: all var(--cf-transition, 200ms ease);
    border: 1px solid transparent;
}
.cf-hub-card:hover {
    background: var(--cf-bg-hover, #edf2f7);
    border-color: var(--cf-border, #e2e8f0);
    text-decoration: none;
    color: inherit;
}

.cf-hub-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--cf-radius, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    flex-shrink: 0;
}
.cf-hub-card-icon.primary  { background: var(--cf-primary-50); color: var(--cf-primary); }
.cf-hub-card-icon.success  { background: var(--cf-success-bg); color: var(--cf-success); }
.cf-hub-card-icon.danger   { background: var(--cf-danger-bg); color: var(--cf-danger); }
.cf-hub-card-icon.warning  { background: var(--cf-warning-bg); color: var(--cf-warning); }
.cf-hub-card-icon.info     { background: var(--cf-info-bg); color: var(--cf-info); }
.cf-hub-card-icon.purple   { background: rgba(128,90,213,.08); color: #805ad5; }
.cf-hub-card-icon.neutral  { background: rgba(113,128,150,.08); color: #718096; }

.cf-hub-card-body {
    flex: 1;
    min-width: 0;
}
.cf-hub-card-body h4 {
    margin: 0;
    font-size: var(--cf-text-sm, .8125rem);
    font-weight: var(--cf-font-semibold, 600);
    color: var(--cf-text, #2d3748);
    line-height: 1.3;
}
.cf-hub-card-body p {
    margin: 1px 0 0;
    font-size: var(--cf-text-xs, .75rem);
    color: var(--cf-text-muted, #718096);
    line-height: 1.3;
}

.cf-hub-card-arrow {
    color: var(--cf-text-placeholder, #a0aec0);
    font-size: .75rem;
    transition: transform var(--cf-transition, 200ms ease);
}
.cf-hub-card:hover .cf-hub-card-arrow {
    transform: translateX(3px);
    color: var(--cf-primary, #1a365d);
}

/* ── Panels ───────────────────────────────────────────────────────────────── */

.cf-hub-panel {
    background: var(--cf-surface, #fff);
    border-radius: var(--cf-radius-lg, 12px);
    border: 1px solid var(--cf-border-light, #edf2f7);
    box-shadow: var(--cf-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    overflow: hidden;
}

.cf-hub-panel-header {
    padding: var(--cf-space-md, 16px) var(--cf-space-lg, 24px);
    border-bottom: 1px solid var(--cf-border-light, #edf2f7);
    background: var(--cf-bg-alt, #f0f2f8);
}
.cf-hub-panel-header h3 {
    margin: 0;
    font-size: var(--cf-text-base, .875rem);
    font-weight: var(--cf-font-semibold, 600);
    color: var(--cf-primary, #1a365d);
    display: flex;
    align-items: center;
    gap: var(--cf-space-sm, 8px);
}

.cf-hub-panel-body {
    padding: var(--cf-space-md, 16px) var(--cf-space-lg, 24px);
}

.cf-hub-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--cf-radius-full, 9999px);
    background: var(--cf-danger, #c53030);
    color: #fff;
    font-size: var(--cf-text-xs, .75rem);
    font-weight: var(--cf-font-semibold, 600);
}

/* ── Hub Table ────────────────────────────────────────────────────────────── */

.cf-hub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cf-text-sm, .8125rem);
}
.cf-hub-table th {
    padding: var(--cf-space-sm, 8px) var(--cf-space-md, 16px);
    text-align: left;
    font-weight: var(--cf-font-semibold, 600);
    color: var(--cf-text-secondary, #4a5568);
    font-size: var(--cf-text-xs, .75rem);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid var(--cf-border, #e2e8f0);
}
.cf-hub-table td {
    padding: var(--cf-space-sm, 8px) var(--cf-space-md, 16px);
    border-bottom: 1px solid var(--cf-border-light, #edf2f7);
    color: var(--cf-text, #2d3748);
}
.cf-hub-table tr:last-child td {
    border-bottom: none;
}
.cf-hub-table tr.row-overdue {
    background: var(--cf-danger-bg, rgba(197,48,48,.08));
}
.cf-hub-table tr.row-urgent {
    background: var(--cf-warning-bg, rgba(214,158,46,.08));
}

/* ── Status Badges ────────────────────────────────────────────────────────── */

.cf-hub-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--cf-radius-full, 9999px);
    font-size: var(--cf-text-xs, .75rem);
    font-weight: var(--cf-font-medium, 500);
    white-space: nowrap;
}
.cf-hub-status-badge.success { background: var(--cf-success-bg); color: var(--cf-success); }
.cf-hub-status-badge.danger  { background: var(--cf-danger-bg); color: var(--cf-danger); }
.cf-hub-status-badge.warning { background: var(--cf-warning-bg); color: var(--cf-warning); }
.cf-hub-status-badge.info    { background: var(--cf-info-bg); color: var(--cf-info); }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .cf-hub-control-deck {
        grid-template-columns: 1fr 1fr;
    }
    .cf-hub-command-panel--wide {
        grid-column: 1 / -1;
    }
    .cf-hub-nav-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .cf-hub {
        padding: var(--cf-space-md, 16px);
    }
    .cf-hub-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .cf-hub-kpi-strip {
        grid-template-columns: 1fr 1fr;
    }
    .cf-hub-control-deck {
        grid-template-columns: 1fr;
    }
    .cf-hub-command-panel--wide {
        grid-column: auto;
    }
    .cf-hub-nav-grid {
        grid-template-columns: 1fr;
    }
    .cf-hub-select {
        min-width: unset;
        flex: 1;
    }
}

@media (max-width: 480px) {
    .cf-hub-kpi-strip {
        grid-template-columns: 1fr;
    }
    .cf-hub-command-metrics,
    .cf-hub-signal-list {
        grid-template-columns: 1fr;
    }
}

/* ── cashflow-advanced.css ── */
/* =============================================================================
   CashFlow Advanced Pages — Professional Design System
   Navy + Gold theme aligned with CashFlowManagement
   (Executive Dashboard, Memo Records, Working Capital, Forecast Accuracy,
    Alert Management, Rule Engine, Short-Term Forecast, Medium-Term Liquidity,
    Cash Flow Statement)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Page Container Shells
   ----------------------------------------------------------------------------- */
.cf-exec-dashboard,
.cf-statement-page,
.cf-forecast-page,
.cf-liquidity-page,
.cf-accuracy-page,
.cf-wc-page,
.cf-memo-page,
.cf-alert-page,
.cf-rule-page {
    font-family: var(--cf-font, 'Inter', 'Segoe UI', system-ui, sans-serif);
    padding: 1.5rem 2rem;
    min-height: 100vh;
    background: var(--cf-bg, #f2f3f5);
    color: var(--cf-text, #0f1729);
}

@media (max-width: 768px) {
    .cf-exec-dashboard,
    .cf-statement-page,
    .cf-forecast-page,
    .cf-liquidity-page,
    .cf-accuracy-page,
    .cf-wc-page,
    .cf-memo-page,
    .cf-alert-page,
    .cf-rule-page {
        padding: 1rem;
    }
}

/* -----------------------------------------------------------------------------
   Page Header — Navy Brand Layout (matches CashFlowManagement topbar)
   ----------------------------------------------------------------------------- */
.cf-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--cf-navy, #1a2744);
    border-radius: var(--cf-radius-lg, 18px);
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    color: #fff;
    box-shadow: 0 2px 12px rgba(26, 39, 68, 0.25);
}

.cf-header-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cf-brand-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: linear-gradient(135deg, var(--cf-gold, #b8922a), var(--cf-gold-light, #d4aa4a));
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(184, 146, 42, 0.4);
}

.cf-brand-icon--executive { background: linear-gradient(135deg, var(--cf-gold, #b8922a), var(--cf-gold-light, #d4aa4a)); color: #fff; }
.cf-brand-icon--teal { background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff; }
.cf-brand-icon--indigo { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; }
.cf-brand-icon--rose { background: linear-gradient(135deg, #e11d48, #f43f5e); color: #fff; }
.cf-brand-icon--red { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; }

.cf-brand-text h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cf-brand-text p {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    opacity: 0.65;
}

.cf-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   Buttons — cfm-btn * (Gold primary, Navy accents)
   ----------------------------------------------------------------------------- */
:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--cf-radius-sm, 8px);
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--cf-transition, all 0.18s ease);
    white-space: nowrap;
    font-family: inherit;
}

:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-primary {
    background: linear-gradient(135deg, var(--cf-gold, #b8922a), var(--cf-gold-light, #d4aa4a));
    color: #fff;
    box-shadow: 0 2px 8px rgba(184, 146, 42, 0.35);
}
:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(184, 146, 42, 0.45);
}

:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-success {
    background: linear-gradient(135deg, var(--cf-positive, #1e8a50), #22a55f);
    color: #fff;
    box-shadow: 0 2px 6px rgba(30, 138, 80, 0.3);
}
:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-success:hover { filter: brightness(1.08); transform: translateY(-1px); }

:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-ghost {
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.15);
}
:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-ghost:hover { background: rgba(255,255,255,0.20); color: #fff; }

:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-danger-ghost {
    background: transparent;
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
}
:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-danger-ghost:hover { background: rgba(239, 68, 68, 0.1); }

:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
    border: none;
}
:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-danger:hover { filter: brightness(1.08); transform: translateY(-1px); }

:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-sm { padding: 0.3rem 0.65rem; font-size: 0.75rem; }

/* Inside panels (light bg), re-color ghost buttons for contrast */
.cf-panel .cfm-btn-ghost {
    background: transparent;
    color: var(--cf-text-soft, #4a5568);
    border: 1px solid var(--cf-border, #e4e6ea);
}
.cf-panel .cfm-btn-ghost:hover {
    background: var(--cf-surface-alt, #f8f9fb);
    color: var(--cf-text, #0f1729);
}

.cf-panel .cfm-btn-primary {
    background: linear-gradient(135deg, var(--cf-gold, #b8922a), var(--cf-gold-light, #d4aa4a));
    color: #fff;
    box-shadow: 0 2px 6px rgba(184, 146, 42, 0.3);
}

.cf-panel .cfm-btn-danger-ghost { color: var(--cf-negative, #c23b22); border-color: rgba(194, 59, 34, 0.3); }
.cf-panel .cfm-btn-danger-ghost:hover { background: rgba(194, 59, 34, 0.08); }

.cf-panel .cfm-btn-success { background: linear-gradient(135deg, var(--cf-positive, #1e8a50), #22a55f); color: #fff; }
.cf-panel .cfm-btn-sm { padding: 0.25rem 0.55rem; font-size: 0.72rem; }

/* Period selector group */
.cf-period-selector {
    display: flex;
    gap: 0.25rem;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 3px;
}

.cf-period-selector .cfm-btn { border-radius: 6px; }
.cf-period-selector .cfm-btn.active {
    background: linear-gradient(135deg, var(--cf-gold, #b8922a), var(--cf-gold-light, #d4aa4a));
    color: #fff;
}

/* -----------------------------------------------------------------------------
   KPI Grid & Cards
   ----------------------------------------------------------------------------- */
.cf-kpi-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cf-kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cf-kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cf-kpi-grid-5 { grid-template-columns: repeat(5, 1fr); }
.cf-kpi-grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1400px) {
    .cf-kpi-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1200px) {
    .cf-kpi-grid-5 { grid-template-columns: repeat(3, 1fr); }
    .cf-kpi-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .cf-kpi-grid-3, .cf-kpi-grid-4, .cf-kpi-grid-5, .cf-kpi-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .cf-kpi-grid-3, .cf-kpi-grid-4, .cf-kpi-grid-5, .cf-kpi-grid-6 {
        grid-template-columns: 1fr;
    }
}

.cf-kpi-card {
    background: var(--cf-surface, #ffffff);
    border-radius: var(--cf-radius, 12px);
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid var(--cf-border, #e4e6ea);
    box-shadow: var(--cf-shadow, 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04));
    transition: var(--cf-transition, all 0.18s ease);
}

.cf-kpi-card:hover {
    box-shadow: var(--cf-shadow-md, 0 4px 16px rgba(0,0,0,0.10));
    transform: translateY(-2px);
}

.cf-kpi-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cf-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cf-kpi-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cf-kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cf-text-muted, #8a94a6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-kpi-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cf-text, #0f1729);
    line-height: 1.2;
}

/* KPI Card color variants — Navy primary, Gold accent */
.cf-kpi-primary .cf-kpi-icon-circle,
.cf-kpi-primary .cf-kpi-icon { background: rgba(26, 54, 93, 0.08); color: var(--cf-navy, #1a2744); }
.cf-kpi-primary { border-left: 3px solid var(--cf-navy, #1a2744); }

.cf-kpi-success .cf-kpi-icon-circle,
.cf-kpi-success .cf-kpi-icon { background: var(--cf-success-bg, rgba(45,134,89,0.08)); color: var(--cf-positive, #1e8a50); }
.cf-kpi-success { border-left: 3px solid var(--cf-positive, #1e8a50); }

.cf-kpi-danger .cf-kpi-icon-circle,
.cf-kpi-danger .cf-kpi-icon { background: var(--cf-danger-bg, rgba(197,48,48,0.08)); color: var(--cf-negative, #c23b22); }
.cf-kpi-danger { border-left: 3px solid var(--cf-negative, #c23b22); }

.cf-kpi-warning .cf-kpi-icon-circle,
.cf-kpi-warning .cf-kpi-icon { background: var(--cf-warning-bg, rgba(214,158,46,0.08)); color: var(--cf-warning, #b45309); }
.cf-kpi-warning { border-left: 3px solid var(--cf-warning, #b45309); }

.cf-kpi-info .cf-kpi-icon-circle,
.cf-kpi-info .cf-kpi-icon { background: var(--cf-info-bg, rgba(49,130,206,0.08)); color: var(--cf-info, #0369a1); }
.cf-kpi-info { border-left: 3px solid var(--cf-info, #0369a1); }

/* KPI Hero variant — Navy gradient with Gold icon */
.cf-kpi-hero {
    background: linear-gradient(135deg, var(--cf-navy, #1a2744) 0%, var(--cf-navy-soft, #243055) 100%);
    border: none;
    border-left: none;
    color: #fff;
    box-shadow: 0 2px 12px rgba(26, 39, 68, 0.25);
}
.cf-kpi-hero .cf-kpi-label { color: rgba(255,255,255,0.65); }
.cf-kpi-hero .cf-kpi-value { color: #fff; }
.cf-kpi-hero .cf-kpi-sub { color: rgba(255,255,255,0.5); }
.cf-kpi-hero .cf-kpi-icon-circle {
    background: linear-gradient(135deg, var(--cf-gold, #b8922a), var(--cf-gold-light, #d4aa4a));
    color: #fff;
    box-shadow: 0 2px 6px rgba(184, 146, 42, 0.35);
}

.cf-kpi-value--large { font-size: 1.5rem; }

.cf-kpi-sub {
    font-size: 0.72rem;
    color: var(--cf-text-muted, #8a94a6);
    margin-top: 0.15rem;
}

/* -----------------------------------------------------------------------------
   Metrics Bar (Executive Dashboard)
   ----------------------------------------------------------------------------- */
.cf-metrics-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--cf-surface, #ffffff);
    border-radius: var(--cf-radius, 12px);
    border: 1px solid var(--cf-border, #e4e6ea);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    box-shadow: var(--cf-shadow, 0 2px 8px rgba(0,0,0,0.08));
}

.cf-metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    background: var(--cf-surface-alt, #f8f9fb);
    border: 1px solid var(--cf-border, #e4e6ea);
    font-size: 0.78rem;
    color: var(--cf-text-soft, #4a5568);
    white-space: nowrap;
}

.cf-metric-chip i {
    font-size: 0.75rem;
    color: var(--cf-text-muted, #8a94a6);
}

.cf-metric-chip strong {
    font-weight: 700;
    color: var(--cf-text, #0f1729);
}

.cf-metric-chip small {
    font-size: 0.68rem;
    color: var(--cf-text-muted, #8a94a6);
}

/* -----------------------------------------------------------------------------
   Two-Column Layout
   ----------------------------------------------------------------------------- */
.cf-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .cf-two-col { grid-template-columns: 1fr; }
}

/* Three-column layout */
.cf-three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1100px) {
    .cf-three-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .cf-three-col { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   Panel Component
   ----------------------------------------------------------------------------- */
.cf-panel {
    background: var(--cf-surface, #ffffff);
    border-radius: var(--cf-radius, 12px);
    border: 1px solid var(--cf-border, #e4e6ea);
    box-shadow: var(--cf-shadow, 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04));
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.cf-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cf-border, #e4e6ea);
}

.cf-panel-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cf-text, #0f1729);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-panel-header h3 i { color: var(--cf-text-soft, #4a5568); font-size: 0.85rem; }

.cf-panel-subtitle {
    font-size: 0.75rem;
    color: var(--cf-text-muted, #8a94a6);
}

.cf-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-panel-chart { overflow: visible; }

.cf-chart-area {
    padding: 0.5rem 1rem 1rem;
}

/* Link style — Gold accent */
.cf-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cf-gold, #b8922a);
    text-decoration: none;
    white-space: nowrap;
    transition: color 150ms ease;
}
.cf-link:hover { color: var(--cf-gold-light, #d4aa4a); }

/* Alert badges container */
.cf-alert-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cf-alert-badges .cf-badge {
    gap: 0.25rem;
}

/* Table responsive wrapper */
.cf-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Empty text */
.cf-empty-text {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--cf-text-muted, #8a94a6);
    font-size: 0.85rem;
}

/* Probability badge */
.cf-probability {
    display: inline-flex;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
}
.cf-probability.high { background: var(--cf-success-bg, rgba(45,134,89,0.08)); color: var(--cf-positive, #1e8a50); }
.cf-probability.medium { background: var(--cf-warning-bg, rgba(214,158,46,0.08)); color: var(--cf-warning, #b45309); }
.cf-probability.low { background: var(--cf-danger-bg, rgba(197,48,48,0.08)); color: var(--cf-negative, #c23b22); }

/* -----------------------------------------------------------------------------
   Working Capital Grid
   ----------------------------------------------------------------------------- */
.cf-wc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 0.5rem 0;
}

.cf-wc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--cf-border, #e4e6ea);
}

.cf-wc-item:nth-child(odd) { border-right: 1px solid var(--cf-border, #e4e6ea); }

.cf-wc-item--total {
    background: var(--cf-surface-alt, #f8f9fb);
    font-weight: 700;
    grid-column: 1 / -1;
}

.cf-wc-item--total .cf-wc-label { font-weight: 700; }

.cf-wc-label {
    font-size: 0.8rem;
    color: var(--cf-text-soft, #4a5568);
}

.cf-wc-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cf-text, #0f1729);
}

@media (max-width: 600px) {
    .cf-wc-grid { grid-template-columns: 1fr; }
    .cf-wc-item:nth-child(odd) { border-right: none; }
}

/* -----------------------------------------------------------------------------
   Loading Overlay — Gold spinner
   ----------------------------------------------------------------------------- */
.cf-loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.cf-loading-content {
    text-align: center;
    color: var(--cf-text-soft, #4a5568);
}

.cf-loading-content p {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.cf-loading-ring {
    width: 48px;
    height: 48px;
    border: 3px solid var(--cf-border, #e4e6ea);
    border-top: 3px solid var(--cf-gold, #b8922a);
    border-radius: 50%;
    margin: 0 auto;
    animation: cf-spin 0.8s linear infinite;
}

@keyframes cf-spin {
    to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------------------
   Badges
   ----------------------------------------------------------------------------- */
.cf-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.cf-badge-sm { padding: 0.15rem 0.5rem; font-size: 0.68rem; }
.cf-badge-success { background: var(--cf-success-bg, rgba(45,134,89,0.08)); color: var(--cf-positive, #1e8a50); }
.cf-badge-danger { background: var(--cf-danger-bg, rgba(197,48,48,0.08)); color: var(--cf-negative, #c23b22); }
.cf-badge-warning { background: var(--cf-warning-bg, rgba(214,158,46,0.08)); color: var(--cf-warning, #b45309); }
.cf-badge-info { background: var(--cf-info-bg, rgba(49,130,206,0.08)); color: var(--cf-info, #0369a1); }
.cf-badge-critical { background: rgba(197,48,48,0.12); color: #991b1b; }
.cf-badge-high { background: var(--cf-danger-bg, rgba(197,48,48,0.08)); color: var(--cf-negative, #c23b22); }
.cf-badge-medium { background: var(--cf-warning-bg, rgba(214,158,46,0.08)); color: var(--cf-warning, #b45309); }
.cf-badge-low { background: var(--cf-success-bg, rgba(45,134,89,0.08)); color: var(--cf-positive, #1e8a50); }
.cf-badge-emergency { background: #7f1d1d; color: #fecaca; }

/* Status badges — Navy for active */
.cf-status-badge {
    display: inline-flex;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
}

.cf-status-active { background: rgba(26, 54, 93, 0.08); color: var(--cf-navy, #1a2744); }
.cf-status-acknowledged { background: var(--cf-warning-bg, rgba(214,158,46,0.08)); color: var(--cf-warning, #b45309); }
.cf-status-inprogress { background: rgba(109, 40, 217, 0.08); color: var(--cf-purple, #6d28d9); }
.cf-status-resolved { background: var(--cf-success-bg, rgba(45,134,89,0.08)); color: var(--cf-positive, #1e8a50); }
.cf-status-dismissed { background: rgba(138, 148, 166, 0.1); color: var(--cf-text-muted, #8a94a6); }
.cf-status-autoresolved { background: var(--cf-info-bg, rgba(49,130,206,0.08)); color: var(--cf-info, #0369a1); }

/* -----------------------------------------------------------------------------
   Alert List Items
   ----------------------------------------------------------------------------- */
.cf-alert-list { padding: 0.75rem; }
.cf-alert-list--full { padding: 0.5rem 1rem; }

.cf-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--cf-radius-sm, 8px);
    margin-bottom: 0.5rem;
    border: 1px solid transparent;
    transition: background 150ms ease;
}

.cf-alert-item:hover { background: rgba(0,0,0,0.02); }

.cf-alert-item--full {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--cf-border, #e4e6ea);
    margin-bottom: 0.75rem;
}

.cf-alert-critical, .cf-alert-emergency { border-color: var(--cf-danger-border, rgba(197,48,48,0.25)); background: var(--cf-negative-bg, #fef0ee); }
.cf-alert-warning { border-color: var(--cf-warning-border, rgba(214,158,46,0.25)); background: var(--cf-warning-bg, rgba(214,158,46,0.04)); }
.cf-alert-info { border-color: var(--cf-info-border, rgba(49,130,206,0.25)); background: var(--cf-info-bg, rgba(49,130,206,0.04)); }

.cf-alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.cf-alert-critical .cf-alert-icon,
.cf-alert-emergency .cf-alert-icon { background: var(--cf-danger-bg, rgba(197,48,48,0.08)); color: var(--cf-negative, #c23b22); }
.cf-alert-warning .cf-alert-icon { background: var(--cf-warning-bg, rgba(214,158,46,0.08)); color: var(--cf-warning, #b45309); }
.cf-alert-info .cf-alert-icon { background: var(--cf-info-bg, rgba(49,130,206,0.08)); color: var(--cf-info, #0369a1); }

.cf-alert-body { flex: 1; min-width: 0; }

.cf-alert-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--cf-text, #0f1729);
    margin-bottom: 0.2rem;
}

.cf-alert-msg {
    font-size: 0.8rem;
    color: var(--cf-text-soft, #4a5568);
    margin-bottom: 0.4rem;
}

.cf-alert-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--cf-text-muted, #8a94a6);
}

.cf-alert-meta i { margin-right: 0.2rem; }

.cf-alert-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Risk List
   ----------------------------------------------------------------------------- */
.cf-risk-panel { border-left: 3px solid var(--cf-warning, #b45309); }

.cf-risk-list { padding: 0.75rem 1.25rem; }

.cf-risk-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--cf-border, #e4e6ea);
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.cf-risk-item:last-child { border-bottom: none; }

.cf-risk-date { font-weight: 600; color: var(--cf-text, #0f1729); min-width: 130px; }
.cf-risk-balance { font-weight: 700; }
.cf-risk-shortfall { color: var(--cf-text-soft, #4a5568); }
.cf-risk-action { color: var(--cf-warning, #b45309); font-style: italic; }

.cf-risk-badge { margin-left: 0.25rem; }

.cf-risk-high { border-left: 3px solid var(--cf-negative, #c23b22); }
.cf-risk-critical { border-left: 3px solid #991b1b; }
.cf-risk-medium { border-left: 3px solid var(--cf-warning, #b45309); }

/* -----------------------------------------------------------------------------
   Text Utilities
   ----------------------------------------------------------------------------- */
.cf-positive { color: var(--cf-positive, #1e8a50); }
.cf-negative { color: var(--cf-negative, #c23b22); }
.cf-text-danger { color: var(--cf-negative, #c23b22); }
.cf-text-success { color: var(--cf-positive, #1e8a50); }
.cf-text-warning { color: var(--cf-warning, #b45309); }

.cf-success-icon { font-size: 2.5rem; color: var(--cf-positive, #1e8a50); margin-bottom: 0.5rem; }

/* -----------------------------------------------------------------------------
   Empty State
   ----------------------------------------------------------------------------- */
.cf-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--cf-text-muted, #8a94a6);
}

.cf-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

.cf-empty-state p {
    font-size: 0.88rem;
    max-width: 400px;
    margin: 0 auto;
}

/* -----------------------------------------------------------------------------
   Loading State — Gold accent
   ----------------------------------------------------------------------------- */
.cf-loading {
    text-align: center;
    padding: 3.5rem 2rem;
    font-size: 0.9rem;
    color: var(--cf-text-soft, #4a5568);
}

.cf-loading i { margin-right: 0.5rem; color: var(--cf-gold, #b8922a); }

/* -----------------------------------------------------------------------------
   Action Buttons (inline in grids)
   ----------------------------------------------------------------------------- */
.cf-action-buttons {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

/* -----------------------------------------------------------------------------
   Filter Bar
   ----------------------------------------------------------------------------- */
.cf-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    background: var(--cf-surface, #ffffff);
    padding: 1rem 1.25rem;
    border-radius: var(--cf-radius, 12px);
    border: 1px solid var(--cf-border, #e4e6ea);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    box-shadow: var(--cf-shadow, 0 2px 8px rgba(0,0,0,0.08));
}

.cf-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cf-filter-group label,
.cf-filter-bar label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cf-text-muted, #8a94a6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Filter bar buttons — Gold primary */
.cf-filter-bar .cfm-btn-primary {
    background: linear-gradient(135deg, var(--cf-gold, #b8922a), var(--cf-gold-light, #d4aa4a));
    color: #fff;
    box-shadow: 0 2px 6px rgba(184, 146, 42, 0.3);
}
.cf-filter-bar .cfm-btn-ghost {
    background: transparent;
    color: var(--cf-text-soft, #4a5568);
    border: 1px solid var(--cf-border-strong, #cdd0d8);
}
.cf-filter-bar .cfm-btn-ghost:hover { background: var(--cf-surface-alt, #f8f9fb); color: var(--cf-text, #0f1729); }

/* -----------------------------------------------------------------------------
   Forms (Dialog Forms)
   ----------------------------------------------------------------------------- */
.cf-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
}

.cf-form .cf-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cf-form .cf-form-row label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cf-text, #0f1729);
}

.cf-form .cf-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cf-form .cf-form-row-2col > div {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cf-form .cf-form-row-2col label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cf-text, #0f1729);
}

/* -----------------------------------------------------------------------------
   Result Summary Bar
   ----------------------------------------------------------------------------- */
.cf-result-summary {
    display: flex;
    gap: 2rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
    color: var(--cf-text, #0f1729);
    flex-wrap: wrap;
}

.cf-result-summary strong { font-weight: 700; }

.cf-result-warnings {
    padding: 0.5rem 1.25rem;
    border-top: 1px solid var(--cf-warning-border, rgba(214,158,46,0.25));
    background: var(--cf-warning-bg, rgba(214,158,46,0.04));
}

.cf-warning-line {
    font-size: 0.78rem;
    color: #92400e;
    padding: 0.2rem 0;
}

.cf-warning-line i { margin-right: 0.3rem; color: var(--cf-warning, #b45309); }

/* -----------------------------------------------------------------------------
   Statement Cash Bar — Navy+Gold gradient
   ----------------------------------------------------------------------------- */
.cf-statement-cash-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(26, 39, 68, 0.04), rgba(184, 146, 42, 0.04));
    border-radius: var(--cf-radius, 12px);
    margin-bottom: 1.5rem;
    border: 1px solid var(--cf-border, #e4e6ea);
}

.cf-cash-item {
    text-align: center;
}

.cf-cash-item--highlight {
    padding: 0.5rem 1.5rem;
    background: var(--cf-success-bg, rgba(45,134,89,0.08));
    border-radius: 10px;
}

.cf-cash-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cf-text-muted, #8a94a6);
    letter-spacing: 0.04em;
}

.cf-cash-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cf-text, #0f1729);
}

.cf-cash-arrow {
    font-size: 1.5rem;
    color: var(--cf-border-strong, #cdd0d8);
}

/* -----------------------------------------------------------------------------
   Navigation Cards Grid (Executive Dashboard)
   ----------------------------------------------------------------------------- */
.cf-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.cf-nav-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
    .cf-nav-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cf-nav-grid-4 { grid-template-columns: 1fr; }
}

.cf-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.5rem 1.25rem;
    border-radius: var(--cf-radius, 12px);
    border: 1px solid var(--cf-border, #e4e6ea);
    background: var(--cf-surface, #ffffff);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: var(--cf-transition, all 0.18s ease);
    box-shadow: var(--cf-shadow, 0 2px 8px rgba(0,0,0,0.08));
}

.cf-nav-card:hover {
    box-shadow: var(--cf-shadow-lg, 0 8px 32px rgba(0,0,0,0.12));
    transform: translateY(-3px);
    border-color: var(--cf-gold, #b8922a);
}

.cf-nav-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
}

.cf-nav-card h4 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cf-text, #0f1729);
}

.cf-nav-card p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--cf-text-muted, #8a94a6);
    line-height: 1.3;
}

/* Nav Card Color Variants — Navy top accent as default */
.cf-nav-card--blue { border-top: 3px solid var(--cf-navy, #1a2744); }
.cf-nav-card--blue:hover { border-color: var(--cf-navy, #1a2744); }
.cf-nav-card--blue .cf-nav-card-icon { background: rgba(26, 54, 93, 0.08); color: var(--cf-navy, #1a2744); }

.cf-nav-card--purple { border-top: 3px solid var(--cf-purple, #6d28d9); }
.cf-nav-card--purple:hover { border-color: var(--cf-purple, #6d28d9); }
.cf-nav-card--purple .cf-nav-card-icon { background: rgba(109, 40, 217, 0.08); color: var(--cf-purple, #6d28d9); }

.cf-nav-card--green { border-top: 3px solid var(--cf-positive, #1e8a50); }
.cf-nav-card--green:hover { border-color: var(--cf-positive, #1e8a50); }
.cf-nav-card--green .cf-nav-card-icon { background: var(--cf-success-bg, rgba(45,134,89,0.08)); color: var(--cf-positive, #1e8a50); }

.cf-nav-card--amber { border-top: 3px solid var(--cf-gold, #b8922a); }
.cf-nav-card--amber:hover { border-color: var(--cf-gold, #b8922a); }
.cf-nav-card--amber .cf-nav-card-icon { background: rgba(184, 146, 42, 0.08); color: var(--cf-gold, #b8922a); }

.cf-nav-card--teal { border-top: 3px solid #0d9488; }
.cf-nav-card--teal:hover { border-color: #0d9488; }
.cf-nav-card--teal .cf-nav-card-icon { background: rgba(13, 148, 136, 0.08); color: #0d9488; }

.cf-nav-card--indigo { border-top: 3px solid #4f46e5; }
.cf-nav-card--indigo:hover { border-color: #4f46e5; }
.cf-nav-card--indigo .cf-nav-card-icon { background: rgba(79, 70, 229, 0.08); color: #4f46e5; }

.cf-nav-card--rose { border-top: 3px solid #e11d48; }
.cf-nav-card--rose:hover { border-color: #e11d48; }
.cf-nav-card--rose .cf-nav-card-icon { background: rgba(225, 29, 72, 0.08); color: #e11d48; }

.cf-nav-card--red { border-top: 3px solid var(--cf-negative, #c23b22); }
.cf-nav-card--red:hover { border-color: var(--cf-negative, #c23b22); }
.cf-nav-card--red .cf-nav-card-icon { background: var(--cf-danger-bg, rgba(197,48,48,0.08)); color: var(--cf-negative, #c23b22); }

/* -----------------------------------------------------------------------------
   Memo Status Tabs — Gold active state
   ----------------------------------------------------------------------------- */
.cf-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--cf-border, #e4e6ea);
    overflow-x: auto;
}

.cf-tab {
    padding: 0.4rem 0.85rem;
    border-radius: var(--cf-radius-sm, 8px);
    border: none;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cf-text-soft, #4a5568);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--cf-transition, all 0.18s ease);
}

.cf-tab:hover { background: var(--cf-surface-alt, #f8f9fb); }
.cf-tab.active {
    background: var(--cf-navy, #1a2744);
    color: #fff;
    box-shadow: 0 2px 6px rgba(26, 39, 68, 0.25);
}

/* -----------------------------------------------------------------------------
   Aging Bars (Working Capital)
   ----------------------------------------------------------------------------- */
.cf-aging-section {
    margin-bottom: 1.5rem;
}

.cf-aging-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.cf-aging-header h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.cf-aging-bar {
    display: flex;
    height: 32px;
    border-radius: var(--cf-radius-sm, 8px);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.cf-aging-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    min-width: 0;
    transition: flex 300ms ease;
}

.cf-aging-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
}

.cf-aging-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cf-aging-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Currency selector — Navy active state */
.cf-currency-selector {
    display: flex;
    gap: 0.2rem;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 3px;
}

.cf-currency-btn {
    padding: 0.3rem 0.65rem;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--cf-transition, all 0.18s ease);
}

.cf-currency-btn:hover { color: rgba(255,255,255,0.9); }
.cf-currency-btn.active {
    background: linear-gradient(135deg, var(--cf-gold, #b8922a), var(--cf-gold-light, #d4aa4a));
    color: #fff;
    box-shadow: 0 2px 4px rgba(184, 146, 42, 0.3);
}

/* Trend table inline */
.cf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.cf-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cf-text-muted, #8a94a6);
    padding: 0.6rem 1rem;
    border-bottom: 2px solid var(--cf-border, #e4e6ea);
}

.cf-table td {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--cf-border, #e4e6ea);
    color: var(--cf-text, #0f1729);
}

.cf-table tr:hover td { background: rgba(26, 54, 93, 0.03); }

.cf-table .text-right { text-align: right; }
.cf-table .text-center { text-align: center; }
.cf-table .text-bold { font-weight: 700; }

/* Brand icon — indigo variant */
.cf-brand-icon--indigo { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; }

/* Button — warning variant */
:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-warning {
    background: linear-gradient(135deg, var(--cf-warning, #b45309), #d97706);
    color: #fff;
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.3);
}
:is(.cf-exec-dashboard, .cf-statement-page, .cf-forecast-page, .cf-liquidity-page, .cf-accuracy-page, .cf-wc-page, .cf-memo-page, .cf-alert-page, .cf-rule-page) .cfm-btn-warning:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Filter tabs (Memo Records) — Navy active state */
.cf-filter-tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.cf-filter-tab {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    border: none;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cf-text-soft, #4a5568);
    cursor: pointer;
    transition: var(--cf-transition, all 0.18s ease);
    white-space: nowrap;
}
.cf-filter-tab:hover { background: var(--cf-surface-alt, #f8f9fb); }
.cf-filter-tab.active {
    background: var(--cf-navy, #1a2744);
    color: #fff;
    box-shadow: 0 2px 6px rgba(26, 39, 68, 0.25);
}

/* Aging strip (Memo Records) — vade analizi kartları */
.cf-aging-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0.75rem;
    margin: 0.75rem 0 1rem 0;
}
.cf-aging-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.9rem;
    background: var(--cf-surface, #ffffff);
    border: 1px solid var(--cf-border, #e4e6ea);
    border-left: 4px solid var(--cf-border, #e4e6ea);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.cf-aging-card:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.cf-aging-card.active { background: #f8fafc; box-shadow: 0 4px 12px rgba(26,39,68,0.12); }
.cf-aging-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 600; color: var(--cf-text-soft, #4a5568); text-transform: uppercase; letter-spacing: 0.04em; }
.cf-aging-count { font-size: 1.35rem; font-weight: 700; color: var(--cf-navy, #1a2744); line-height: 1; }
.cf-aging-count span { font-size: 0.7rem; font-weight: 500; color: var(--cf-text-soft, #4a5568); margin-left: 0.25rem; }
.cf-aging-net { font-size: 0.85rem; font-weight: 600; color: var(--cf-text, #1f2937); }
.cf-aging-overdue { border-left-color: #dc2626; }
.cf-aging-overdue .cf-aging-head i { color: #dc2626; }
.cf-aging-week { border-left-color: #d97706; }
.cf-aging-week .cf-aging-head i { color: #d97706; }
.cf-aging-month { border-left-color: #2563eb; }
.cf-aging-month .cf-aging-head i { color: #2563eb; }
.cf-aging-beyond { border-left-color: #16a34a; }
.cf-aging-beyond .cf-aging-head i { color: #16a34a; }
.cf-aging-clear {
    align-self: stretch;
    padding: 0 0.9rem;
    border: 1px dashed var(--cf-border, #e4e6ea);
    background: transparent;
    color: var(--cf-text-soft, #4a5568);
    border-radius: 10px;
    font-size: 0.78rem;
    cursor: pointer;
}
.cf-aging-clear:hover { background: var(--cf-surface-alt, #f8f9fb); color: var(--cf-navy, #1a2744); }
.cf-aging-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.cf-aging-alert i { color: #dc2626; }
@media (max-width: 768px) {
    .cf-aging-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-aging-clear { grid-column: span 2; }
}

/* Info banner — ShortTerm forecast generation message */
.cf-info-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.cf-info-banner i { font-size: 1rem; flex-shrink: 0; }
.cf-info-banner-success { background: #f0fdf4; color: #14532d; border-color: #bbf7d0; }
.cf-info-banner-success i { color: #16a34a; }
.cf-info-banner-warn { background: #fffbeb; color: #78350f; border-color: #fde68a; }
.cf-info-banner-warn i { color: #d97706; }

/* Result panel */
.cf-result-panel {
    background: var(--cf-surface, #ffffff);
    border-radius: var(--cf-radius, 12px);
    border: 1px solid var(--cf-border, #e4e6ea);
    box-shadow: var(--cf-shadow, 0 2px 8px rgba(0,0,0,0.08));
    margin-bottom: 1.5rem;
    overflow: hidden;
    padding: 1rem 1.25rem;
}

/* WC metric & sub text */
.cf-wc-metric {
    font-size: 0.8rem;
    color: var(--cf-text, #0f1729);
}

.cf-wc-sub {
    font-size: 0.72rem;
    color: var(--cf-text-muted, #8a94a6);
    margin-top: 0.1rem;
}

/* Aging items (Working Capital detailed) */
.cf-aging-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.cf-aging-item:last-child { border-bottom: none; }

.cf-aging-label {
    min-width: 110px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
}

.cf-aging-bar-container {
    flex: 1;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.cf-aging-bar-container > div {
    height: 100%;
    border-radius: 4px;
    transition: width 300ms ease;
}

.cf-aging-value {
    min-width: 80px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 700;
    color: #111827;
}

/* Aging color classes */
.cf-aging-green { background: #10b981; }
.cf-aging-yellow { background: #f59e0b; }
.cf-aging-orange { background: #f97316; }
.cf-aging-red { background: #ef4444; }
.cf-aging-darkred { background: #991b1b; }

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .cf-page-header {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .cf-header-actions { width: 100%; }
    .cf-filter-bar { flex-direction: column; align-items: stretch; }
    .cf-statement-cash-bar { flex-direction: column; gap: 1rem; }
    .cf-result-summary { flex-direction: column; gap: 0.5rem; }
    .cf-form .cf-form-row-2col { grid-template-columns: 1fr; }
}

/* =============================================================================
   MEDIUM-TERM LIQUIDITY (mockup #5) — 2-col layout, buffer gauge, funding timeline
   ============================================================================= */
.cf-liquidity-2col {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 1280px) {
    .cf-liquidity-2col { grid-template-columns: 1fr; }
}
.cf-liquidity-side { display: flex; flex-direction: column; gap: 1rem; }
.cf-panel-actions { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }
.cf-chip { display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.cf-chip-blue { background: #dbeafe; color: #1d4ed8; }
.cf-panel-sub { font-size: 0.72rem; color: #64748b; margin-left: 0.5rem; font-weight: 500; }

/* Buffer gauge */
.cf-buffer-panel .cf-buffer-gauge { padding: 0.5rem 0.25rem 0; text-align: center; }
.cf-buffer-value { font-size: 2rem; font-weight: 800; color: #0f172a; line-height: 1; }
.cf-buffer-gauge.is-positive .cf-buffer-value { color: #059669; }
.cf-buffer-gauge.is-negative .cf-buffer-value { color: #dc2626; }
.cf-buffer-currency { font-size: 0.78rem; color: #64748b; font-weight: 600; margin-bottom: 0.85rem; }
.cf-buffer-bar {
    height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin: 0.25rem 0 0.85rem;
}
.cf-buffer-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 60%, #6ee7b7 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.cf-buffer-gauge.is-negative .cf-buffer-fill { background: linear-gradient(90deg, #dc2626, #f87171); }
.cf-buffer-stats { display: grid; gap: 0.4rem; text-align: left; padding: 0 0.25rem; margin-bottom: 0.75rem; }
.cf-buffer-stats div { display: flex; justify-content: space-between; font-size: 0.78rem; }
.cf-buffer-stats span { color: #64748b; }
.cf-buffer-stats strong { color: #0f172a; font-weight: 700; }
.cf-buffer-status {
    margin-top: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex; align-items: center; gap: 0.45rem; justify-content: center;
}
.cf-status-ok { background: #ecfdf5; color: #047857; }
.cf-status-bad { background: #fef2f2; color: #b91c1c; }

/* Insights list */
.cf-insight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.cf-insight-list li { display: flex; gap: 0.65rem; align-items: flex-start; }
.cf-insight-ico {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0; font-size: 0.85rem;
}
.cf-bg-blue { background: #3b82f6; }
.cf-bg-green { background: #10b981; }
.cf-bg-red { background: #ef4444; }
.cf-bg-amber { background: #f59e0b; }
.cf-insight-list strong { display: block; font-size: 0.82rem; color: #0f172a; }
.cf-insight-list p { margin: 0.15rem 0 0; font-size: 0.74rem; color: #64748b; line-height: 1.35; }

/* Constraints */
.cf-constraint-list { display: flex; flex-direction: column; gap: 0.5rem; }
.cf-constraint-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.55rem 0.7rem; background: #f8fafc; border-radius: 8px;
}
.cf-constraint-item strong { display: block; font-size: 0.8rem; color: #0f172a; }
.cf-constraint-item span { font-size: 0.7rem; color: #64748b; }
.cf-constraint-value { font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 0.35rem; }
.cf-constraint-warning {
    margin-top: 0.4rem; padding: 0.6rem 0.7rem;
    background: #fef2f2; border-left: 3px solid #ef4444; border-radius: 6px;
    display: flex; gap: 0.5rem; align-items: flex-start; color: #991b1b; font-size: 0.78rem;
}
.cf-constraint-warning i { margin-top: 0.15rem; }
.cf-constraint-warning strong { display: block; font-size: 0.82rem; }

/* Funding-need timeline */
.cf-funding-legend { display: flex; gap: 0.85rem; font-size: 0.72rem; color: #475569; flex-wrap: wrap; margin-left: auto; }
.cf-funding-legend i { font-size: 0.65rem; margin-right: 0.25rem; }
.cf-funding-timeline {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(80px, 1fr);
    gap: 0.5rem; padding: 0.5rem 0; overflow-x: auto;
}
.cf-funding-cell {
    border-radius: 8px;
    padding: 0.6rem 0.5rem;
    text-align: center;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.cf-funding-cell .cf-fund-period { font-size: 0.78rem; font-weight: 700; color: #0f172a; }
.cf-funding-cell .cf-fund-net { font-size: 0.78rem; font-weight: 600; }
.cf-fund-none { background: #ecfdf5; border-color: #a7f3d0; }
.cf-fund-none .cf-fund-net { color: #047857; }
.cf-fund-low { background: #eff6ff; border-color: #bfdbfe; }
.cf-fund-low .cf-fund-net { color: #1d4ed8; }
.cf-fund-mid { background: #fffbeb; border-color: #fde68a; }
.cf-fund-mid .cf-fund-net { color: #b45309; }
.cf-fund-high { background: #fff7ed; border-color: #fed7aa; }
.cf-fund-high .cf-fund-net { color: #c2410c; }
.cf-fund-critical { background: #fef2f2; border-color: #fecaca; }
.cf-fund-critical .cf-fund-net { color: #b91c1c; }

.cf-text-success { color: #10b981; }
.cf-text-info { color: #3b82f6; }
.cf-text-warning { color: #f59e0b; }
.cf-text-danger { color: #ef4444; }

/* =============================================================================
   SHORT-TERM FORECAST (mockup #6) — 2-col layout, risk strip, drivers sidebar
   ============================================================================= */
.cf-stf-2col {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 1280px) {
    .cf-stf-2col { grid-template-columns: 1fr; }
}
.cf-stf-side { display: flex; flex-direction: column; gap: 1rem; }
.cf-chip-grey { background: #f1f5f9; color: #475569; }

/* Daily risk strip (next 7 days) */
.cf-risk-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}
@media (max-width: 900px) {
    .cf-risk-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
    .cf-risk-strip { grid-template-columns: repeat(2, 1fr); }
}
.cf-risk-cell {
    border-radius: 10px;
    padding: 0.7rem 0.55rem;
    text-align: center;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: flex; flex-direction: column; gap: 0.2rem;
    align-items: center;
    position: relative;
}
.cf-risk-cell strong { font-size: 0.85rem; color: #0f172a; }
.cf-risk-cell span:not(.cf-risk-cell-dot) { font-size: 0.7rem; color: #64748b; }
.cf-risk-cell-dot {
    width: 10px; height: 10px; border-radius: 50%;
    margin-bottom: 0.2rem;
}
.cf-risk-cell.cf-risk-low { background: #ecfdf5; border-color: #a7f3d0; }
.cf-risk-cell.cf-risk-low .cf-risk-cell-dot { background: #10b981; }
.cf-risk-cell.cf-risk-mid { background: #fffbeb; border-color: #fde68a; }
.cf-risk-cell.cf-risk-mid .cf-risk-cell-dot { background: #f59e0b; }
.cf-risk-cell.cf-risk-high { background: #fef2f2; border-color: #fecaca; }
.cf-risk-cell.cf-risk-high .cf-risk-cell-dot { background: #ef4444; }

.cf-risk-threshold {
    margin-top: 0.65rem;
    padding: 0.45rem 0.7rem;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 0.74rem;
    color: #475569;
    display: flex; align-items: center; gap: 0.4rem;
}

/* Drivers sidebar */
.cf-driver-block { padding: 0.65rem 0; border-bottom: 1px dashed #e2e8f0; }
.cf-driver-block:last-child { border-bottom: none; }
.cf-driver-label { display: block; font-size: 0.68rem; font-weight: 700; color: #94a3b8; letter-spacing: 0.05em; margin-bottom: 0.35rem; }
.cf-driver-row { display: flex; gap: 0.6rem; align-items: center; }
.cf-driver-ico { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; font-size: 0.85rem; }
.cf-driver-row strong { display: block; font-size: 0.95rem; color: #0f172a; line-height: 1.1; }
.cf-driver-row span { font-size: 0.72rem; color: #64748b; }
.cf-driver-note { margin: 0.25rem 0 0; font-size: 0.78rem; color: #475569; line-height: 1.45; }

/* Risk score */
.cf-risk-score { text-align: center; padding: 0.5rem 0; }
.cf-risk-score-num { font-size: 2.4rem; font-weight: 800; color: #0f172a; line-height: 1; }
.cf-risk-score-num span { font-size: 1rem; font-weight: 600; color: #94a3b8; }
.cf-risk-score-band {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}
.cf-status-warn { background: #fffbeb; color: #b45309; }
.cf-risk-bullets { list-style: none; padding: 0; margin: 0.85rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.78rem; color: #475569; }
.cf-risk-bullets li { display: flex; gap: 0.45rem; align-items: center; padding: 0.4rem 0.6rem; background: #f8fafc; border-radius: 6px; }
.cf-risk-bullets li::before { content: "•"; color: #3b82f6; font-weight: 800; }

/* ── cashflow-polish.css ── */
/* ============================================================================
   CASH FLOW MANAGEMENT — Polish Layer (v1, Apr 2026)
   ============================================================================
   Cross-cutting fixes applied AFTER all other cash-flow stylesheets so it
   always wins. Targets layout consistency, full-width fit, density, and
   Syncfusion control polish across every CashFlow* page.
   ============================================================================ */

/* ── 1. Page Container Normalisation ─────────────────────────────────────── */
.cf-hub,
.cf-page,
.cf-exec-dashboard,
.cf-statement-page,
.cf-forecast-page,
.cf-liquidity-page,
.cf-accuracy-page,
.cf-wc-page,
.cf-memo-page,
.cf-alert-page,
.cf-rule-page,
.cf-pooling-page,
.cf-recon-page,
.cf-audit-page,
.cce-container,
.cp-root,
.studio-container,
.data-entry-shell,
.ifrs-cat-page {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    /* keep at least viewport-minus-header; lets pages fill the screen */
    min-height: calc(100vh - 64px);
    background: var(--cf-bg, #f7f8fc);
    color: var(--cf-text, #2d3748);
    padding: clamp(16px, 1.5vw, 24px);
    overflow-x: hidden;
}

/* Strip any double padding from inner page wrappers */
.main-content > .cf-hub,
.main-content > .cf-page,
.main-content > .cf-exec-dashboard,
.main-content > .cf-statement-page,
.main-content > .cf-forecast-page,
.main-content > .cf-liquidity-page,
.main-content > .cf-accuracy-page,
.main-content > .cf-wc-page,
.main-content > .cf-memo-page,
.main-content > .cf-alert-page,
.main-content > .cf-rule-page,
.main-content > .cf-pooling-page,
.main-content > .cf-recon-page,
.main-content > .cf-audit-page,
.main-content > .cce-container,
.main-content > .cp-root,
.main-content > .studio-container,
.main-content > .data-entry-shell,
.main-content > .ifrs-cat-page {
    padding-top: clamp(16px, 1.2vw, 20px);
}

/* ── 2. Header pattern normalisation ─────────────────────────────────────── */
.cf-page-header,
.cf-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: clamp(16px, 1.4vw, 24px);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cf-border, #e2e8f0);
}

.cf-page-header h1,
.cf-hub-brand h1 {
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.45rem);
    font-weight: 700;
    color: var(--cf-primary, #1a365d);
    line-height: 1.2;
}

/* ── 3. KPI strips: prevent value clipping at narrow widths ───────────────── */
.cf-kpi-grid,
.cf-hub-kpi-strip {
    width: 100%;
}
.cf-kpi-card .cf-kpi-value,
.cf-kpi-value,
.cf-hub-kpi-value {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 1280px) {
    .cf-kpi-grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
    .cf-kpi-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 720px) {
    .cf-kpi-grid-3,
    .cf-kpi-grid-4,
    .cf-kpi-grid-5 { grid-template-columns: 1fr !important; }
}

/* ── 4. Filter bar consistency ───────────────────────────────────────────── */
.cf-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 14px 16px;
    background: var(--cf-surface, #fff);
    border: 1px solid var(--cf-border-light, #edf2f7);
    border-radius: var(--cf-radius-lg, 12px);
    box-shadow: var(--cf-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    margin-bottom: clamp(12px, 1vw, 18px);
}
.cf-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cf-filter-group > label {
    font-size: .72rem;
    color: var(--cf-text-muted, #718096);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

/* ── 5. Cards / panels: shared elevation tokens ─────────────────────────── */
.cf-panel,
.cf-card,
.cf-section,
.cf-hub-section,
.cf-hub-panel,
.cf-hub-command-panel,
.cf-kpi-card {
    background: var(--cf-surface, #fff);
    border: 1px solid var(--cf-border-light, #edf2f7);
    border-radius: var(--cf-radius-lg, 12px);
    box-shadow: var(--cf-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    transition: box-shadow .2s ease, transform .2s ease;
}
.cf-card:hover,
.cf-kpi-card:hover {
    box-shadow: 0 6px 14px rgba(15,23,42,.08);
    transform: translateY(-1px);
}

/* ── 6. Tables: sticky header + zebra + density ──────────────────────────── */
.cf-table,
.cf-data-table,
.cf-hub-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--cf-surface, #fff);
    border-radius: var(--cf-radius, 8px);
    overflow: hidden;
}
.cf-table thead th,
.cf-data-table thead th,
.cf-hub-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--cf-bg-alt, #f0f2f8);
    color: var(--cf-text-secondary, #4a5568);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--cf-border, #e2e8f0);
}
.cf-table tbody td,
.cf-data-table tbody td,
.cf-hub-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--cf-border-light, #edf2f7);
    font-size: .82rem;
}
.cf-table tbody tr:hover,
.cf-data-table tbody tr:hover,
.cf-hub-table tbody tr:hover {
    background: rgba(49,130,206,.04);
}

.cf-num,
.cf-text-right { text-align: right !important; font-variant-numeric: tabular-nums; }
.cf-text-center { text-align: center !important; }

/* ── 7. Loading overlays unified ─────────────────────────────────────────── */
.cf-loading-overlay,
.cf-loading,
.cf-hub-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 4vw, 64px);
    gap: 14px;
    min-height: 240px;
}
.cf-loading-content { text-align: center; }
.cf-loading-ring,
.cf-hub-loading-ring {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(26,54,93,.08);
    border-top-color: var(--cf-primary, #1a365d);
    border-radius: 50%;
    animation: cf-spin .8s linear infinite;
}

/* ── 8. Empty state ──────────────────────────────────────────────────────── */
.cf-empty-state {
    text-align: center;
    padding: clamp(32px, 5vw, 64px) 16px;
    color: var(--cf-text-muted, #718096);
}
.cf-empty-state i {
    font-size: 2.4rem;
    color: var(--cf-border, #e2e8f0);
    margin-bottom: 12px;
    display: block;
}

/* ── 9. Syncfusion control alignment with our design ─────────────────────── */
.cf-hub .e-input-group,
.cf-page .e-input-group,
.cf-exec-dashboard .e-input-group,
.cf-statement-page .e-input-group,
.cf-forecast-page .e-input-group,
.cf-wc-page .e-input-group,
.cf-pooling-page .e-input-group,
.cf-recon-page .e-input-group {
    border-radius: var(--cf-radius, 8px) !important;
}

/* Syncfusion grid in CF pages */
.cf-hub .e-grid,
.cf-page .e-grid,
.cf-exec-dashboard .e-grid,
.cf-statement-page .e-grid,
.cf-forecast-page .e-grid,
.cf-wc-page .e-grid,
.cf-recon-page .e-grid {
    border-radius: var(--cf-radius-lg, 12px);
    border: 1px solid var(--cf-border-light, #edf2f7) !important;
    overflow: hidden;
}
.cf-hub .e-grid .e-headercell,
.cf-page .e-grid .e-headercell,
.cf-exec-dashboard .e-grid .e-headercell,
.cf-statement-page .e-grid .e-headercell,
.cf-forecast-page .e-grid .e-headercell,
.cf-wc-page .e-grid .e-headercell,
.cf-recon-page .e-grid .e-headercell {
    background: var(--cf-bg-alt, #f0f2f8) !important;
    color: var(--cf-text-secondary, #4a5568) !important;
    font-weight: 700 !important;
    font-size: .72rem !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
}

/* ── 10. Buttons: unified ghost/primary fallbacks for non-themed surfaces ── */
.cfm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--cf-radius, 8px);
    border: 1px solid transparent;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    line-height: 1.2;
    white-space: nowrap;
}
.cfm-btn-sm { padding: 4px 10px; font-size: .75rem; }
.cfm-btn-primary {
    background: linear-gradient(135deg, var(--cf-primary, #1a365d), var(--cf-primary-light, #2a4a7f));
    color: #fff !important;
}
.cfm-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cfm-btn-ghost {
    background: transparent;
    color: var(--cf-text-secondary, #4a5568);
    border-color: var(--cf-border, #e2e8f0);
}
.cfm-btn-ghost:hover { background: var(--cf-bg-hover, #edf2f7); }
.cfm-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ── 11. Chart container hardening (ECharts) ─────────────────────────────── */
.cf-chart,
.cf-chart-container,
.cf-chart-wrap {
    width: 100% !important;
    min-height: 280px;
    background: var(--cf-surface, #fff);
    border-radius: var(--cf-radius-lg, 12px);
    border: 1px solid var(--cf-border-light, #edf2f7);
    padding: 16px;
    box-shadow: var(--cf-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
.cf-chart canvas,
.cf-chart-container canvas {
    max-width: 100% !important;
}

/* ── 12. Status badges (shared) ──────────────────────────────────────────── */
.cf-status,
.cf-badge,
.cf-hub-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
}
.cf-status.success, .cf-badge.success { background: var(--cf-success-bg); color: var(--cf-success); }
.cf-status.warning, .cf-badge.warning { background: var(--cf-warning-bg); color: var(--cf-warning); }
.cf-status.danger,  .cf-badge.danger  { background: var(--cf-danger-bg);  color: var(--cf-danger);  }
.cf-status.info,    .cf-badge.info    { background: var(--cf-info-bg);    color: var(--cf-info);    }
.cf-status.neutral, .cf-badge.neutral { background: rgba(113,128,150,.08);color: #4a5568; }

/* ── 13. Scroll containment for wide reports ─────────────────────────────── */
.cf-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cf-scroll-x::-webkit-scrollbar { height: 8px; }
.cf-scroll-x::-webkit-scrollbar-thumb { background: var(--cf-border, #e2e8f0); border-radius: 4px; }
.cf-scroll-x::-webkit-scrollbar-thumb:hover { background: var(--cf-border-dark, #cbd5e0); }

/* ── 14. Number colourisation helpers ────────────────────────────────────── */
.cf-positive { color: var(--cf-success, #2d8659) !important; }
.cf-negative { color: var(--cf-danger, #c53030) !important; }
.cf-muted    { color: var(--cf-text-muted, #718096) !important; }

/* ── 15. Print-friendly tweaks ───────────────────────────────────────────── */
@media print {
    .cf-hub-header-right,
    .cf-page-header .cf-header-actions,
    .cf-filter-bar,
    .cfm-btn { display: none !important; }
    .cf-hub, .cf-exec-dashboard, .cf-statement-page,
    .cf-forecast-page, .cf-wc-page { background: #fff !important; padding: 0 !important; }
    .cf-card, .cf-panel, .cf-hub-section, .cf-hub-panel { box-shadow: none !important; border-color: #ddd !important; }
}

/* ── 16. Dark mode polite override (only if dark-mode.css activates root) ── */
:root.dark-mode .cf-hub,
:root.dark-mode .cf-exec-dashboard,
:root.dark-mode .cf-statement-page,
:root.dark-mode .cf-forecast-page,
:root.dark-mode .cf-wc-page,
:root.dark-mode .cf-page {
    background: #0f172a;
    color: #e2e8f0;
}
:root.dark-mode .cf-panel,
:root.dark-mode .cf-card,
:root.dark-mode .cf-hub-section,
:root.dark-mode .cf-hub-panel,
:root.dark-mode .cf-hub-command-panel,
:root.dark-mode .cf-kpi-card {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

/* ── cashflow-professional.css ── */
:root {
    --cfp-surface: #ffffff;
    --cfp-surface-soft: #f8fafc;
    --cfp-surface-muted: #f1f5f9;
    --cfp-border: #dbe3ef;
    --cfp-border-strong: #c7d3e5;
    --cfp-text: #0f172a;
    --cfp-text-muted: #475569;
    --cfp-text-soft: #64748b;
    --cfp-primary: #0f766e;
    --cfp-primary-strong: #0b5c56;
    --cfp-accent: #0369a1;
    --cfp-success: #15803d;
    --cfp-danger: #b91c1c;
    --cfp-warning: #b45309;
    --cfp-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --cfp-shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.cf-page {
    color: var(--cfp-text);
}

.cf-page,
[class*="cf-"] {
    --cfp-radius-sm: 10px;
    --cfp-radius-md: 14px;
    --cfp-radius-lg: 18px;
}

.cf-page,
.cf-management-page,
.cf-statement-page,
.cf-forecast-page,
.cf-liquidity-page,
.cf-accuracy-page,
.cf-wc-page,
.cf-rule-page,
.cf-memo-page,
.cf-alert-page,
.cf-pooling-page,
.cf-recon-page,
.cf-audit-page,
.cf-cash-position-page,
.cf-exec-dashboard,
.cce-container,
.studio-wrap,
.cfm-root {
    padding: 1rem;
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 45%),
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 38%);
}

.cf-page-header,
.cfm-header,
.studio-header {
    background: linear-gradient(120deg, #f8fafc 0%, #eef6ff 55%, #ecfeff 100%);
    border: 1px solid var(--cfp-border);
    border-radius: var(--cfp-radius-lg);
    box-shadow: var(--cfp-shadow);
    position: relative;
    overflow: hidden;
}

.cf-page-header::after,
.cfm-header::after,
.studio-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    pointer-events: none;
}

.cfm-btn,
.cf-btn,
.studio-btn {
    border-radius: var(--cfp-radius-sm);
    border: 1px solid var(--cfp-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    font-weight: 600;
}

.cfm-btn-primary,
.cf-btn-primary,
.studio-btn-primary {
    background: linear-gradient(135deg, var(--cfp-primary), var(--cfp-accent));
    color: #fff;
    border-color: transparent;
}

.cfm-btn:hover,
.cf-btn:hover,
.studio-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.2);
}

.cf-panel,
.cfm-card,
.studio-card {
    background: var(--cfp-surface);
    border: 1px solid var(--cfp-border);
    border-radius: var(--cfp-radius-md);
    box-shadow: var(--cfp-shadow-soft);
}

.cf-panel-header,
.cfm-card-header,
.studio-card-header {
    border-bottom: 1px solid var(--cfp-border);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.cf-kpi-grid,
.cfm-kpi-grid,
.studio-kpi-grid {
    gap: 0.85rem;
}

.cf-kpi-card,
.cfm-kpi-card,
.cf-pool-kpi,
.cf-recon-card,
.cf-audit-kpi,
.cf-wc-metric,
.studio-kpi {
    background: var(--cfp-surface);
    border: 1px solid var(--cfp-border);
    border-radius: var(--cfp-radius-md);
    box-shadow: var(--cfp-shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cf-kpi-card:hover,
.cfm-kpi-card:hover,
.cf-pool-kpi:hover,
.cf-recon-card:hover,
.cf-audit-kpi:hover,
.cf-wc-metric:hover,
.studio-kpi:hover {
    transform: translateY(-1px);
    box-shadow: var(--cfp-shadow);
}

.cf-kpi-label,
.cfm-kpi-label {
    color: var(--cfp-text-soft);
    font-weight: 600;
}

.cf-kpi-value,
.cfm-kpi-value,
.cf-pool-kpi-value,
.cf-recon-value,
.cf-wc-value,
.cf-audit-kpi .cf-kpi-value {
    color: var(--cfp-text);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cf-page-subtitle,
.cfm-subtitle,
.studio-subtitle {
    color: var(--cfp-text-muted);
}

.cf-header-brand,
.cfm-header-brand,
.studio-header-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.cf-brand-icon,
.cfm-brand-icon,
.studio-brand-icon,
.cf-kpi-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--cfp-primary), var(--cfp-accent));
    box-shadow: 0 8px 18px rgba(3, 105, 161, 0.24);
}

.cf-brand-text h1,
.cfm-brand-text h1,
.studio-brand-text h1 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--cfp-text);
}

.cf-brand-text p,
.cfm-brand-text p,
.studio-brand-text p {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--cfp-text-soft);
}

.cf-header-actions,
.cfm-header-actions,
.studio-header-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.cf-page-header,
.cfm-page-header {
    flex-wrap: wrap;
}

.cf-header-brand,
.cfm-header-brand {
    min-width: 0;
    flex: 1 1 auto;
}

.cf-two-col,
.cfm-two-col,
.studio-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.cf-recon-filter-group,
.cf-audit-filter-group,
.cf-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cf-recon-filter-group label,
.cf-audit-filter-group label,
.cf-filter-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cfp-text-soft);
}

.cf-recon-filters input,
.cf-recon-filters select,
.cf-recon-filters .e-input,
.cf-audit-filters input,
.cf-audit-filters select,
.cf-audit-filters .e-input,
.cf-filter-row input,
.cf-filter-row select,
.cf-filter-row .e-input {
    border: 1px solid var(--cfp-border);
    border-radius: var(--cfp-radius-sm);
    background: #fff;
    color: var(--cfp-text);
    min-height: 36px;
}

.cf-recon-filters input:focus,
.cf-recon-filters select:focus,
.cf-audit-filters input:focus,
.cf-audit-filters select:focus,
.cf-filter-row input:focus,
.cf-filter-row select:focus {
    outline: none;
    border-color: #7dd3fc;
    box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.12);
}

.cf-aging-item,
.cf-recon-card,
.cf-audit-kpi,
.cf-pool-kpi,
.cf-wc-metric {
    position: relative;
    overflow: hidden;
}

.cf-aging-item::before,
.cf-recon-card::before,
.cf-audit-kpi::before,
.cf-pool-kpi::before,
.cf-wc-metric::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(180deg, var(--cfp-primary), var(--cfp-accent));
    opacity: 0.35;
}

.cf-aging-label,
.cf-aging-value,
.cf-pool-kpi-label,
.cf-pool-kpi-value,
.cf-recon-label,
.cf-recon-value {
    position: relative;
    z-index: 1;
}

.cf-panel .e-grid,
.cf-panel .e-treegrid {
    margin-top: 0.65rem;
}

.cf-panel .e-content,
.cf-panel .e-gridcontent {
    background: #fff;
}

.cf-panel .e-rowcell,
.cf-panel .e-headercell {
    padding-top: 0.58rem;
    padding-bottom: 0.58rem;
}

.cf-loading,
.cfm-loading {
    border: 1px dashed var(--cfp-border-strong);
    border-radius: var(--cfp-radius-md);
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.cf-badge,
.cfm-badge {
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid transparent;
}

.cf-badge-success,
.cfm-badge.success {
    background: #ecfdf3;
    color: var(--cfp-success);
    border-color: #bbf7d0;
}

.cf-badge-danger,
.cfm-badge.danger {
    background: #fef2f2;
    color: var(--cfp-danger);
    border-color: #fecaca;
}

.cf-badge-warning,
.cfm-badge.warning {
    background: #fff7ed;
    color: var(--cfp-warning);
    border-color: #fed7aa;
}

.cf-table,
.cfm-table,
.e-grid,
.e-treegrid {
    border-radius: var(--cfp-radius-md);
    overflow: hidden;
    border: 1px solid var(--cfp-border);
}

.e-grid .e-headercell,
.e-treegrid .e-headercell,
.e-treegrid .e-stackedheadercell {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    color: var(--cfp-text-muted);
    border-color: var(--cfp-border);
    font-weight: 700;
}

.e-grid .e-row:hover td,
.e-treegrid .e-row:hover td {
    background: #f8fbff;
}

.cf-recon-filters,
.cf-audit-filters,
.cf-filter-row,
.cfm-filter-strip {
    background: var(--cfp-surface);
    border: 1px solid var(--cfp-border);
    border-radius: var(--cfp-radius-md);
    box-shadow: var(--cfp-shadow-soft);
}

.cf-audit-empty-state,
.cf-empty-state,
.cfm-empty-state {
    border: 1px dashed var(--cfp-border-strong);
    border-radius: var(--cfp-radius-md);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.cf-text-success,
.cf-positive {
    color: var(--cfp-success) !important;
}

.cf-text-danger,
.cf-negative {
    color: var(--cfp-danger) !important;
}

.cf-aging-bar {
    border-radius: 999px;
}

/* Executive Dashboard Signature */
.cf-page-header.cf-page-header--executive {
    background: linear-gradient(120deg, #eff6ff 0%, #e0f2fe 45%, #ecfeff 100%);
    border-color: #bfdbfe;
}

.cf-page-header--executive .cf-brand-icon--executive {
    background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
    box-shadow: 0 10px 22px rgba(30, 64, 175, 0.28);
}

.cf-exec-dashboard .cf-kpi-card.cf-kpi-hero {
    border-color: #bfdbfe;
    background: linear-gradient(140deg, #f0f9ff 0%, #ffffff 55%);
}

.cf-exec-dashboard .cf-metrics-bar,
.cf-exec-dashboard .cf-command-deck {
    gap: 0.9rem;
}

.cf-exec-dashboard .cf-metric-chip,
.cf-exec-dashboard .cf-command-panel {
    background: #fff;
    border: 1px solid var(--cfp-border);
    border-radius: var(--cfp-radius-md);
    box-shadow: var(--cfp-shadow-soft);
}

.cf-exec-dashboard .cf-command-metric--highlight.negative,
.cf-exec-dashboard .cf-command-metric--highlight.cf-negative {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.cf-exec-dashboard .cf-command-metric--highlight.positive,
.cf-exec-dashboard .cf-command-metric--highlight.cf-positive {
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
}

/* Bank Reconciliation Signature */
.cf-recon-page .cf-recon-summary {
    gap: 0.9rem;
}

.cf-recon-page .cf-recon-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.cf-recon-page .cf-recon-card.cf-recon-mismatch {
    border: 1px solid #fecaca;
    background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
    animation: cfp-alert-pulse 2.2s ease-in-out infinite;
}

.cf-recon-page .cf-recon-card.cf-recon-match {
    border: 1px solid #bbf7d0;
    background: linear-gradient(180deg, #ecfdf3 0%, #ffffff 100%);
}

.cf-recon-page .cf-recon-status .cf-badge-danger {
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

.cf-recon-page .cf-panel .e-grid .e-row td {
    border-bottom-color: #e5edf7;
}

/* Audit Trail Signature */
.cf-audit-page .cf-audit-kpis {
    gap: 0.9rem;
}

.cf-audit-page .cf-audit-kpi {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.cf-audit-page .cf-audit-json {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
}

.cf-audit-page .cf-audit-detail-card {
    border: 1px solid var(--cfp-border);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.cf-audit-page .cf-json-block pre {
    font-size: 0.76rem;
    line-height: 1.45;
    background: #f8fafc;
    border-color: #dbe3ef;
}

.cf-audit-page .cf-audit-detail-overlay {
    backdrop-filter: blur(3px);
}

@keyframes cfp-alert-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.12);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(185, 28, 28, 0.08);
    }
}

@media (max-width: 900px) {
    .cf-page-header,
    .cfm-header,
    .studio-header {
        border-radius: 12px;
    }

    .cf-page,
    .cf-management-page,
    .cf-statement-page,
    .cf-forecast-page,
    .cf-liquidity-page,
    .cf-accuracy-page,
    .cf-wc-page,
    .cf-rule-page,
    .cf-memo-page,
    .cf-alert-page,
    .cf-pooling-page,
    .cf-recon-page,
    .cf-audit-page,
    .cf-cash-position-page,
    .cf-exec-dashboard,
    .cce-container,
    .studio-wrap,
    .cfm-root {
        padding: 0.75rem;
    }

    .cf-two-col,
    .cfm-two-col,
    .studio-two-col {
        grid-template-columns: 1fr;
    }

    .cf-header-brand,
    .cfm-header-brand,
    .studio-header-brand {
        align-items: flex-start;
    }

    .cf-header-actions,
    .cfm-header-actions,
    .studio-header-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}