/* ===========================
   GLOBAL BASE (both themes)
   =========================== */

:root {
    /* slightly rounder, softer shadows globally */
    --bs-border-radius: .75rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-border-radius-xxl: 2rem;
    --bs-box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    --bs-box-shadow-sm: 0 10px 20px rgba(15, 23, 42, 0.12);
    --bs-box-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.25);
    --bs-focus-ring-color: rgba(99, 102, 241, 0.35);

}

.btn {
    border-radius: 999px;
}

label {
    font-weight: 500;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* ===========================
   MODERN LIGHT THEME
   =========================== */

[data-bs-theme="light"] {
    color-scheme: light;

    /* base surface + text */
    --bs-body-bg: #f3f4f8;
    --bs-body-bg-rgb: 243, 244, 248;
    --bs-body-color: #0f172a;
    --bs-body-color-rgb: 15, 23, 42;

    /* hierarchy surfaces */
    --bs-secondary-bg: #e5e7f0;
    --bs-secondary-bg-rgb: 229, 231, 240;
    --bs-tertiary-bg: #ffffff;
    --bs-tertiary-bg-rgb: 255, 255, 255;

    /* modern indigo primary */
    --bs-primary: #6366f1;
    --bs-primary-rgb: 99, 102, 241;
    --bs-primary-bg-subtle: rgba(99, 102, 241, 0.08);
    --bs-primary-border-subtle: rgba(99, 102, 241, 0.35);

    /* neutral / accent colors */
    --bs-secondary-color: rgba(15, 23, 42, 0.6);
    --bs-tertiary-color: rgba(15, 23, 42, 0.45);
    --bs-emphasis-color: #020617;

    --bs-border-color: #e2e8f0;
    --bs-border-color-translucent: rgba(148, 163, 184, 0.35);

    /* links */
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338ca;
    --bs-link-hover-color-rgb: 67, 56, 202;

    /* code / highlights */
    --bs-code-color: #db2777;
    --bs-highlight-bg: #fef3c7;
    
}

/* light: cards, navbars, dropdowns etc use “glassier” surfaces */

[data-bs-theme="light"] .form-control:disabled,
[data-bs-theme="light"] .form-control[readonly],
[data-bs-theme="light"] .form-select:disabled {
    background-color: #e5e7eb; /* lighter gray */
    color: #9ca3af; /* muted text */
    border-color: #d1d5db;
    box-shadow: none;
}

/* optional: also for input groups, etc. */
[data-bs-theme="light"] .input-group .form-control:disabled {
    background-color: #e5e7eb;
}

[data-bs-theme="light"] .card,
[data-bs-theme="light"] .dropdown-menu,
[data-bs-theme="light"] .modal-content,
[data-bs-theme="light"] .offcanvas,
[data-bs-theme="light"] .toast {
    --bs-card-bg: rgba(255, 255, 255, 0.9);
    --bs-card-border-color: rgba(148, 163, 184, 0.25);
    --bs-card-cap-bg: rgba(248, 250, 252, 0.95);
    --bs-card-color: var(--bs-body-color);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
}

/* navbar: floating, slightly translucent */

[data-bs-theme="light"] .navbar {
    --bs-navbar-bg: rgba(255, 255, 255, 0.9);
    --bs-navbar-color: var(--bs-secondary-color);
    --bs-navbar-brand-color: var(--bs-emphasis-color);
    --bs-navbar-brand-hover-color: var(--bs-emphasis-color);
    --bs-navbar-nav-link-padding-x: .85rem;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

/* buttons */

[data-bs-theme="light"] .btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #4f46e5;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #4338ca;
    --bs-btn-active-border-color: #3730a3;
    --bs-btn-shadow: 0 12px 25px rgba(79, 70, 229, 0.35);
    border-radius: 999px;
    padding-inline: 1.1rem;
}

[data-bs-theme="light"] .btn-secondary {
    --bs-btn-color: #0f172a;
    --bs-btn-bg: rgba(255, 255, 255, 0.85);
    --bs-btn-border-color: rgba(148, 163, 184, 0.45);

    --bs-btn-hover-color: #020617;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.95);
    --bs-btn-hover-border-color: rgba(99, 102, 241, 0.6);

    --bs-btn-active-color: #020617;
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: rgba(99, 102, 241, 0.8);

    --bs-btn-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);

    border-radius: 999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-bs-theme="light"] .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: rgba(99, 102, 241, 0.5);
    --bs-btn-hover-bg: rgba(99, 102, 241, 0.08);
    --bs-btn-hover-border-color: var(--bs-primary);
}

/* form controls */

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
    border-radius: .75rem;
    border-color: rgba(148, 163, 184, 0.6);
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 0 rgba(148, 163, 184, 0.15);
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
    border-color: rgba(99, 102, 241, 0.7);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.05),
    0 0 0 .25rem rgba(99, 102, 241, 0.25);
}

/* ===========================
   MODERN DARK THEME
   =========================== */

[data-bs-theme="dark"] {
    color-scheme: dark;

    --bs-body-bg: #020617; /* slate-950-ish */
    --bs-body-bg-rgb: 2, 6, 23;
    --bs-body-color: #e5e7eb; /* gray-200 */
    --bs-body-color-rgb: 229, 231, 235;

    --bs-secondary-bg: #020617;
    --bs-secondary-bg-rgb: 2, 6, 23;
    --bs-tertiary-bg: #0b1120;
    --bs-tertiary-bg-rgb: 11, 17, 32;

    --bs-emphasis-color: #f9fafb;
    --bs-secondary-color: rgba(148, 163, 184, 0.9);
    --bs-tertiary-color: rgba(148, 163, 184, 0.7);

    --bs-border-color: #1f2937;
    --bs-border-color-translucent: rgba(15, 23, 42, 0.85);

    /* slightly brighter primary for dark */
    --bs-primary: #818cf8;
    --bs-primary-rgb: 129, 140, 248;
    --bs-primary-bg-subtle: rgba(129, 140, 248, 0.12);
    --bs-primary-border-subtle: rgba(129, 140, 248, 0.5);

    --bs-link-color: #a5b4fc;
    --bs-link-color-rgb: 165, 180, 252;
    --bs-link-hover-color: #c7d2fe;
    --bs-link-hover-color-rgb: 199, 210, 254;

    --bs-code-color: #f472b6;
    --bs-highlight-bg: #1e293b;

    --bs-success-bg-subtle: #01381f80;
}

/* dark: glassy surfaces */
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-select:disabled {
    background-color: #111827;
    color: #4b5563;
    border-color: #1f2937;
    box-shadow: none;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .toast {
    --bs-card-bg: rgba(15, 23, 42, 0.9);
    --bs-card-border-color: rgba(15, 23, 42, 0.9);
    --bs-card-cap-bg: rgba(15, 23, 42, 0.95);
    --bs-card-color: var(--bs-body-color);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.75);
}

/* dark navbar */

[data-bs-theme="dark"] .navbar {
    --bs-navbar-bg: rgba(15, 23, 42, 0.95);
    --bs-navbar-color: var(--bs-secondary-color);
    --bs-navbar-brand-color: var(--bs-emphasis-color);
    --bs-navbar-brand-hover-color: var(--bs-emphasis-color);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.9);
}

/* dark buttons */

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #4f46e5;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3;
    --bs-btn-active-border-color: #312e81;
    --bs-btn-shadow: 0 12px 30px rgba(79, 70, 229, 0.55);
    border-radius: 999px;
    padding-inline: 1.1rem;
}

[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-color: #e5e7eb;
    --bs-btn-bg: rgba(15, 23, 42, 0.85);
    --bs-btn-border-color: rgba(148, 163, 184, 0.25);
    --bs-btn-hover-color: #f9fafb;
    --bs-btn-hover-bg: rgba(15, 23, 42, 0.95);
    --bs-btn-hover-border-color: rgba(129, 140, 248, 0.6);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: rgba(15, 23, 42, 1);
    --bs-btn-active-border-color: rgba(129, 140, 248, 0.8);
    --bs-btn-shadow: 0 10px 26px rgba(15, 23, 42, 0.85);
    border-radius: 999px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #c7d2fe;
    --bs-btn-border-color: rgba(129, 140, 248, 0.7);
    --bs-btn-hover-bg: rgba(129, 140, 248, 0.16);
    --bs-btn-hover-border-color: var(--bs-primary);
}

/* dark form controls */

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    border-radius: .75rem;
    border-color: rgba(30, 64, 175, 0.7);
    background-color: rgba(15, 23, 42, 0.95);
    color: var(--bs-body-color);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.9);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: rgba(129, 140, 248, 0.9);
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.25),
    0 0 0 .25rem rgba(129, 140, 248, 0.3);
}

/* LIGHT THEME COLORS */
[data-bs-theme="light"] {
    /* metric cards */
    --metric-card-radius: 1.5rem;

    --metric-complexity-bg: #eef2ff; /* light indigo */
    --metric-effort-bg: #ecfdf3; /* light green */
    --metric-risk-bg: #fffbeb; /* light yellow */
    --metric-card-text: #0f172a;
}

/* DARK THEME COLORS */
[data-bs-theme="dark"] {
    --metric-card-radius: 1.5rem;
    --metric-complexity-bg: #152342; /* dark slate */
    --metric-effort-bg: #022c22; /* dark teal/green */
    --metric-risk-bg: #3f2a04; /* dark amber */
    --metric-risk-border: #854d0e;
    --metric-card-text: #e5e7eb;
}
/* --- Core color hierarchy tuning --- */
[data-bs-theme="dark"] {
    --bs-secondary-color: rgba(148, 163, 184, 0.75);
    --bs-tertiary-color: rgba(148, 163, 184, 0.55);

    --bs-border-color: rgba(148, 163, 184, 0.12);
    --bs-border-color-translucent: rgba(148, 163, 184, 0.08);
}

/* --- Card surfaces: lighter, calmer, more intentional --- */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .toast {
    --bs-card-bg: rgba(17, 25, 40, 0.92);
    --bs-card-border-color: rgba(148, 163, 184, 0.08);

    box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.03),
            0 12px 30px rgba(0, 0, 0, 0.6);
}

/* --- Navbar: darker than cards for vertical hierarchy --- */
[data-bs-theme="dark"] .navbar {
    --bs-navbar-bg: rgba(2, 6, 23, 0.9);
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

/* --- Metric cards: accent overlays instead of heavy fills --- */
[data-bs-theme="dark"] {
    --metric-complexity-bg: rgba(129, 140, 248, 0.08); /* indigo */
    --metric-effort-bg: rgba(34, 197, 94, 0.08);      /* green */
    --metric-risk-bg: rgba(245, 158, 11, 0.08);       /* amber */
}