/* =============================================================================
   DRM Budget — Unified Design System (single source of truth)
   -----------------------------------------------------------------------------
   Consolidates the two legacy token sets (financial-planning-design-system.css
   and professional-design-system.css) behind ONE variable contract.
   Keeps backward-compatible aliases (--fp-*, --primary-500, etc.) so nothing
   breaks while pages migrate. Inspired by Oracle EPM, IBM Carbon, SAP Horizon.
   ============================================================================= */

:root {
    /* ── Brand ── */
    --drm-brand-900: #0b1220;
    --drm-brand-800: #0f172a;
    --drm-brand-700: #1e293b;
    --drm-brand-600: #334155;
    --drm-accent-600: #2563eb;
    --drm-accent-500: #3b82f6;
    --drm-accent-400: #60a5fa;

    /* ── Neutral scale ── */
    --drm-gray-50:  #f8fafc;
    --drm-gray-100: #f1f5f9;
    --drm-gray-200: #e2e8f0;
    --drm-gray-300: #cbd5e1;
    --drm-gray-400: #94a3b8;
    --drm-gray-500: #64748b;
    --drm-gray-600: #475569;
    --drm-gray-700: #334155;
    --drm-gray-800: #1e293b;
    --drm-gray-900: #0f172a;

    /* ── Semantic ── */
    --drm-success:  #16a34a;
    --drm-success-bg: #dcfce7;
    --drm-warning:  #d97706;
    --drm-warning-bg: #fef3c7;
    --drm-danger:   #dc2626;
    --drm-danger-bg:  #fee2e2;
    --drm-info:     #0284c7;
    --drm-info-bg:  #e0f2fe;

    /* ── Module accents (hero gradients) ── */
    --drm-hero-default: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #3b82f6 100%);
    --drm-hero-budget:  linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #3b82f6 100%);
    --drm-hero-revenue: linear-gradient(135deg, #0f172a 0%, #1e40af 50%, #3b82f6 100%);
    --drm-hero-energy:  linear-gradient(135deg, #0f3f57 0%, #0c5d73 50%, #116b7e 100%);
    --drm-hero-capex:   linear-gradient(135deg, #2e1065 0%, #6d28d9 50%, #7c3aed 100%);
    --drm-hero-cost:    linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #667eea 100%);
    --drm-hero-fb:      linear-gradient(135deg, #1a0a00 0%, #78350f 50%, #d97706 100%);
    --drm-hero-dashboard: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e3a5f 100%);

    /* ── Surfaces ── */
    --drm-surface:          #ffffff;
    --drm-surface-muted:    #f8fafc;
    --drm-surface-raised:   #ffffff;
    --drm-surface-sunken:   #f1f5f9;
    --drm-surface-overlay:  rgba(15, 23, 42, 0.6);

    /* ── Borders ── */
    --drm-border:      #e2e8f0;
    --drm-border-subtle: #f1f5f9;
    --drm-border-strong: #cbd5e1;
    --drm-border-focus:  #3b82f6;

    /* ── Text ── */
    --drm-text-primary:   #0f172a;
    --drm-text-secondary: #475569;
    --drm-text-tertiary:  #64748b;
    --drm-text-muted:     #94a3b8;
    --drm-text-inverse:   #ffffff;

    /* ── Spacing (0.25rem base) ── */
    --drm-space-0: 0;
    --drm-space-1: 0.25rem;
    --drm-space-2: 0.5rem;
    --drm-space-3: 0.75rem;
    --drm-space-4: 1rem;
    --drm-space-5: 1.25rem;
    --drm-space-6: 1.5rem;
    --drm-space-8: 2rem;
    --drm-space-10: 2.5rem;
    --drm-space-12: 3rem;
    --drm-space-16: 4rem;

    /* ── Radius ── */
    --drm-radius-xs: 4px;
    --drm-radius-sm: 6px;
    --drm-radius-md: 10px;
    --drm-radius-lg: 14px;
    --drm-radius-xl: 20px;
    --drm-radius-full: 999px;

    /* ── Shadows (soft, layered) ── */
    --drm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --drm-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --drm-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --drm-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
    --drm-shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06);
    --drm-shadow-hero: 0 20px 48px rgba(15, 23, 42, 0.30), 0 8px 16px rgba(15, 23, 42, 0.18);

    /* ── Typography ── */
    --drm-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --drm-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;
    --drm-text-xs: 0.75rem;
    --drm-text-sm: 0.875rem;
    --drm-text-base: 1rem;
    --drm-text-lg: 1.125rem;
    --drm-text-xl: 1.25rem;
    --drm-text-2xl: 1.5rem;
    --drm-text-3xl: 1.875rem;
    --drm-text-4xl: 2.25rem;
    --drm-leading-tight: 1.25;
    --drm-leading-normal: 1.55;
    --drm-leading-relaxed: 1.75;

    /* ── Motion ── */
    --drm-duration-instant: 80ms;
    --drm-duration-fast:    150ms;
    --drm-duration-base:    220ms;
    --drm-duration-slow:    360ms;
    --drm-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --drm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Data-viz palette (colorblind-aware, Oracle-style) ── */
    --drm-viz-1: #2563eb;
    --drm-viz-2: #16a34a;
    --drm-viz-3: #d97706;
    --drm-viz-4: #dc2626;
    --drm-viz-5: #7c3aed;
    --drm-viz-6: #0891b2;
    --drm-viz-7: #be185d;
    --drm-viz-8: #78716c;

    /* ── Backwards-compatible aliases ── */
    --fp-brand-primary:  var(--drm-brand-800);
    --fp-brand-secondary: var(--drm-brand-700);
    --fp-brand-accent:   var(--drm-accent-500);
    --fp-success:        var(--drm-success);
    --fp-warning:        var(--drm-warning);
    --fp-danger:         var(--drm-danger);
    --fp-info:           var(--drm-info);
    --fp-gray-50:  var(--drm-gray-50);
    --fp-gray-100: var(--drm-gray-100);
    --fp-gray-200: var(--drm-gray-200);
    --fp-gray-300: var(--drm-gray-300);
    --fp-gray-400: var(--drm-gray-400);
    --fp-gray-500: var(--drm-gray-500);
    --fp-gray-600: var(--drm-gray-600);
    --fp-gray-700: var(--drm-gray-700);
    --fp-gray-800: var(--drm-gray-800);
    --fp-gray-900: var(--drm-gray-900);
    --primary-500: var(--drm-accent-500);
    --surface-base:    var(--drm-surface);
    --surface-raised:  var(--drm-surface-raised);
    --surface-overlay: var(--drm-surface-overlay);
}

/* ══════════════════════════════ Shared components ══════════════════════════════ */

/* Page Hero */
.drm-hero {
    position: relative;
    background: var(--drm-hero-default);
    color: var(--drm-text-inverse);
    border-radius: var(--drm-radius-xl);
    padding: var(--drm-space-8) var(--drm-space-10);
    box-shadow: var(--drm-shadow-hero);
    overflow: hidden;
    margin-bottom: var(--drm-space-6);
}
.drm-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 360px at 10% -20%, rgba(59, 130, 246, 0.25), transparent 60%);
    pointer-events: none;
}
.drm-hero[data-accent="budget"]   { background: var(--drm-hero-budget); }
.drm-hero[data-accent="revenue"]  { background: var(--drm-hero-revenue); }
.drm-hero[data-accent="energy"]   { background: var(--drm-hero-energy); }
.drm-hero[data-accent="capex"]    { background: var(--drm-hero-capex); }
.drm-hero[data-accent="cost"]     { background: var(--drm-hero-cost); }
.drm-hero[data-accent="fb"]       { background: var(--drm-hero-fb); }
.drm-hero[data-accent="dashboard"]{ background: var(--drm-hero-dashboard); }

.drm-hero__body {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--drm-space-6);
}
.drm-hero__title-wrap {
    display: flex;
    align-items: center;
    gap: var(--drm-space-4);
}
.drm-hero__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--drm-radius-md);
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
}
.drm-hero__title {
    font-size: var(--drm-text-3xl);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: var(--drm-leading-tight);
}
.drm-hero__subtitle {
    font-size: var(--drm-text-sm);
    margin: 4px 0 0;
    opacity: 0.85;
    line-height: var(--drm-leading-normal);
}
.drm-hero__actions {
    display: flex;
    gap: var(--drm-space-2);
    flex-wrap: wrap;
}

/* KPI Card */
.drm-kpi {
    background: var(--drm-surface);
    border: 1px solid var(--drm-border);
    border-radius: var(--drm-radius-lg);
    padding: var(--drm-space-5);
    box-shadow: var(--drm-shadow-sm);
    transition: transform var(--drm-duration-base) var(--drm-ease),
                box-shadow var(--drm-duration-base) var(--drm-ease);
    position: relative;
    overflow: hidden;
}
.drm-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--drm-shadow-md);
}
.drm-kpi__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--drm-space-3);
    margin-bottom: var(--drm-space-3);
}
.drm-kpi__label {
    font-size: var(--drm-text-xs);
    font-weight: 600;
    color: var(--drm-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.drm-kpi__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--drm-radius-md);
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
}
.drm-kpi__icon--blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.drm-kpi__icon--green  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.drm-kpi__icon--amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.drm-kpi__icon--red    { background: linear-gradient(135deg, #ef4444, #dc2626); }
.drm-kpi__icon--violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.drm-kpi__icon--sky    { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.drm-kpi__value {
    font-size: var(--drm-text-2xl);
    font-weight: 700;
    color: var(--drm-text-primary);
    line-height: var(--drm-leading-tight);
    letter-spacing: -0.02em;
    margin: 0;
}
.drm-kpi__value--positive { color: var(--drm-success); }
.drm-kpi__value--negative { color: var(--drm-danger); }
.drm-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--drm-text-xs);
    font-weight: 600;
    margin-top: var(--drm-space-2);
}
.drm-kpi__delta--up   { color: var(--drm-success); }
.drm-kpi__delta--down { color: var(--drm-danger); }
.drm-kpi__sub {
    margin-top: var(--drm-space-2);
    font-size: var(--drm-text-xs);
    color: var(--drm-text-tertiary);
}
.drm-kpi__track {
    margin-top: var(--drm-space-3);
    height: 6px;
    background: var(--drm-gray-100);
    border-radius: var(--drm-radius-full);
    overflow: hidden;
}
.drm-kpi__track > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--drm-accent-500), var(--drm-accent-600));
    border-radius: inherit;
    transition: width var(--drm-duration-slow) var(--drm-ease-out);
}

/* Section card */
.drm-card {
    background: var(--drm-surface);
    border: 1px solid var(--drm-border);
    border-radius: var(--drm-radius-lg);
    box-shadow: var(--drm-shadow-sm);
    padding: var(--drm-space-6);
}
.drm-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--drm-space-4);
    margin-bottom: var(--drm-space-5);
    padding-bottom: var(--drm-space-4);
    border-bottom: 1px solid var(--drm-border-subtle);
}
.drm-card__title {
    font-size: var(--drm-text-lg);
    font-weight: 600;
    color: var(--drm-text-primary);
    margin: 0;
}
.drm-card__subtitle {
    font-size: var(--drm-text-xs);
    color: var(--drm-text-tertiary);
    margin-top: 2px;
}

/* Empty state */
.drm-empty {
    text-align: center;
    padding: var(--drm-space-12) var(--drm-space-6);
    color: var(--drm-text-tertiary);
}
.drm-empty__icon {
    font-size: 3rem;
    color: var(--drm-gray-300);
    margin-bottom: var(--drm-space-4);
}
.drm-empty__title {
    font-size: var(--drm-text-lg);
    font-weight: 600;
    color: var(--drm-text-secondary);
    margin: 0 0 var(--drm-space-2);
}
.drm-empty__message {
    font-size: var(--drm-text-sm);
    margin: 0 auto;
    max-width: 420px;
    line-height: var(--drm-leading-normal);
}
.drm-empty__actions { margin-top: var(--drm-space-5); }

/* Skeleton loader */
@keyframes drm-shimmer {
    0%   { background-position: -420px 0; }
    100% { background-position: 420px 0; }
}
.drm-skeleton {
    position: relative;
    background: linear-gradient(90deg,
        var(--drm-gray-100) 0%,
        var(--drm-gray-200) 50%,
        var(--drm-gray-100) 100%);
    background-size: 840px 100%;
    animation: drm-shimmer 1.4s infinite linear;
    border-radius: var(--drm-radius-md);
}
.drm-skeleton--text   { height: 0.875rem; border-radius: var(--drm-radius-sm); }
.drm-skeleton--title  { height: 1.5rem;   border-radius: var(--drm-radius-sm); }
.drm-skeleton--kpi    { height: 120px; }
.drm-skeleton--block  { height: 240px; }

/* Error alert */
.drm-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--drm-space-3);
    padding: var(--drm-space-4) var(--drm-space-5);
    border-radius: var(--drm-radius-md);
    border: 1px solid transparent;
    font-size: var(--drm-text-sm);
    line-height: var(--drm-leading-normal);
    margin-bottom: var(--drm-space-4);
}
.drm-alert__icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.drm-alert__body { flex: 1; }
.drm-alert__title { font-weight: 600; margin: 0 0 2px; }
.drm-alert__close {
    background: transparent;
    border: 0;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--drm-radius-sm);
    transition: opacity var(--drm-duration-fast) var(--drm-ease);
}
.drm-alert__close:hover { opacity: 1; }
.drm-alert--danger  { background: var(--drm-danger-bg);  color: #7f1d1d; border-color: rgba(220,38,38,.25); }
.drm-alert--warning { background: var(--drm-warning-bg); color: #78350f; border-color: rgba(217,119,6,.25); }
.drm-alert--success { background: var(--drm-success-bg); color: #14532d; border-color: rgba(22,163,74,.25); }
.drm-alert--info    { background: var(--drm-info-bg);    color: #075985; border-color: rgba(2,132,199,.25); }

/* Button kit (minimal; complements Bootstrap) */
.drm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: var(--drm-text-sm);
    font-weight: 600;
    border-radius: var(--drm-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--drm-duration-fast) var(--drm-ease);
    white-space: nowrap;
    background: rgba(255,255,255,0.12);
    color: #fff;
    backdrop-filter: blur(6px);
}
.drm-btn:hover { background: rgba(255,255,255,0.22); transform: translateY(-1px); }
.drm-btn--primary {
    background: var(--drm-accent-500);
    color: #fff;
    box-shadow: var(--drm-shadow-sm);
}
.drm-btn--primary:hover { background: var(--drm-accent-600); }
.drm-btn--ghost {
    background: transparent;
    color: var(--drm-text-primary);
    border-color: var(--drm-border);
    backdrop-filter: none;
}
.drm-btn--ghost:hover { background: var(--drm-gray-50); }

/* Grid primitives */
.drm-grid { display: grid; gap: var(--drm-space-5); }
.drm-grid--cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.drm-grid--cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.drm-grid--cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Responsive */
@media (max-width: 768px) {
    .drm-hero { padding: var(--drm-space-6) var(--drm-space-5); }
    .drm-hero__title { font-size: var(--drm-text-2xl); }
    .drm-hero__body { flex-direction: column; align-items: flex-start; }
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .drm-skeleton { animation: none; }
    .drm-kpi, .drm-btn { transition: none; }
}