/* ============================================================
   BPA PLATFORM — Design System & Theme Engine
   3 themes: obsidian (dark default) | arctic (light) | slate (soft dark)
   Applied via: html[data-theme="..."]
   ============================================================ */

/* ── FOUC guard: if no data-theme yet, default to obsidian ── */
html { color-scheme: dark; }
html[data-theme="arctic"] { color-scheme: light; }

/* ============================================================
   GLOBAL TEXT SELECTION (High contrast readability)
   ============================================================ */
::selection {
    background-color: #2563eb !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

::-moz-selection {
    background-color: #2563eb !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

[data-theme="obsidian"] ::selection,
[data-bs-theme="dark"] ::selection {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

[data-theme="obsidian"] ::-moz-selection,
[data-bs-theme="dark"] ::-moz-selection {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* ============================================================
   THEME 1 — OBSIDIAN PRO (Dark, Default)
   ============================================================ */
html[data-theme="obsidian"],
html:not([data-theme]) {
    --bg-color:        #080d1a;
    --surface:         #0f172a;
    --surface-2:       #1a2744;
    --surface-3:       #222e4a;
    --sidebar-bg:      linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --sidebar-border:  rgba(59, 130, 246, 0.25);

    --border:          rgba(255, 255, 255, 0.07);
    --border-strong:   rgba(255, 255, 255, 0.13);

    --primary:         #3b82f6;
    --primary-hover:   #60a5fa;
    --primary-glow:    rgba(59, 130, 246, 0.18);
    --primary-dim:     rgba(59, 130, 246, 0.10);
    --primary-color:   #3b82f6;

    --secondary:       #8b5cf6;
    --secondary-hover: #a78bfa;
    --secondary-glow:  rgba(139, 92, 246, 0.15);

    --success:         #10b981;
    --success-bg:      rgba(16, 185, 129, 0.12);
    --success-text:    #10b981;
    --warning:         #f59e0b;
    --warning-bg:      rgba(245, 158, 11, 0.12);
    --warning-text:    #f59e0b;
    --danger:          #ef4444;
    --danger-bg:       rgba(239, 68, 68, 0.12);
    --danger-text:     #ef4444;
    --info:            #06b6d4;
    --info-bg:         rgba(6, 182, 212, 0.12);
    --info-text:       #06b6d4;

    --text-primary:    #f8fafc;
    --text-secondary:  #cbd5e1;
    --text-muted:      #94a3b8;
    --text-disabled:   #64748b;
    --label-color:     #f8fafc;

    /* Bootstrap 5 dark synchronization */
    --bs-body-color:          #f8fafc;
    --bs-body-bg:             #080d1a;
    --bs-secondary-color:     #cbd5e1;
    --bs-secondary-rgb:       203, 213, 225;
    --bs-tertiary-color:      #94a3b8;
    --bs-emphasis-color:      #ffffff;
    --bs-border-color:        rgba(255, 255, 255, 0.07);
    --bs-card-bg:             #0f172a;
    --bs-card-color:          #f8fafc;
    --bs-card-border-color:   rgba(255, 255, 255, 0.07);

    --nav-link-color:  #f8fafc;
    --nav-icon-color:  #60a5fa;
    --nav-active-bg:   rgba(59, 130, 246, 0.25);
    --nav-active-text: #ffffff;
    --nav-active-border: #3b82f6;
    --nav-hover-bg:    rgba(255, 255, 255, 0.12);
    --nav-hover-text:  #ffffff;
    --nav-label-color: #cbd5e1;
    --nav-brand-color: #ffffff;

    --card-bg:         #0f172a;
    --border-color:    rgba(255, 255, 255, 0.07);
    --bg-light:        transparent;

    --glass-bg:        rgba(15, 23, 42, 0.75);
    --glass-border:    rgba(255, 255, 255, 0.08);
    --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.45);

    --body-gradient:
        radial-gradient(ellipse at 0% 0%,    rgba(59, 130, 246, 0.10) 0px, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(139, 92, 246, 0.08) 0px, transparent 55%);

    --scrollbar-thumb: rgba(59, 130, 246, 0.30);
    --scrollbar-hover: rgba(59, 130, 246, 0.55);

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   THEME 2 — ARCTIC LIGHT
   ============================================================ */
html[data-theme="arctic"] {
    --bg-color:        #f0f4f8;
    --surface:         #ffffff;
    --surface-2:       #f1f5f9;
    --surface-3:       #e2e8f0;
    --sidebar-bg:      linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    --sidebar-border:  #cbd5e1;

    --border:          #e2e8f0;
    --border-strong:   #cbd5e1;

    --primary:         #2563eb;
    --primary-hover:   #1d4ed8;
    --primary-glow:    rgba(37, 99, 235, 0.15);
    --primary-dim:     rgba(37, 99, 235, 0.08);
    --primary-color:   #2563eb;

    --secondary:       #7c3aed;
    --secondary-hover: #6d28d9;
    --secondary-glow:  rgba(124, 58, 237, 0.12);

    --success:         #059669;
    --success-bg:      rgba(5, 150, 105, 0.08);
    --success-text:    #059669;
    --warning:         #d97706;
    --warning-bg:      rgba(217, 119, 6, 0.08);
    --warning-text:    #d97706;
    --danger:          #dc2626;
    --danger-bg:       rgba(220, 38, 38, 0.08);
    --danger-text:     #dc2626;
    --info:            #0284c7;
    --info-bg:         rgba(2, 132, 199, 0.08);
    --info-text:       #0284c7;

    --text-primary:    #0f172a;
    --text-secondary:  #475569;
    --text-muted:      #94a3b8;
    --text-disabled:   #cbd5e1;
    --label-color:     #0f172a;

    /* Bootstrap 5 light synchronization */
    --bs-body-color:          #0f172a;
    --bs-body-bg:             #f0f4f8;
    --bs-secondary-color:     #475569;
    --bs-secondary-rgb:       71, 85, 105;
    --bs-tertiary-color:      #94a3b8;
    --bs-emphasis-color:      #0f172a;
    --bs-border-color:        #e2e8f0;
    --bs-card-bg:             #ffffff;
    --bs-card-color:          #0f172a;
    --bs-card-border-color:   #e2e8f0;

    --nav-link-color:  #1e293b;
    --nav-icon-color:  #2563eb;
    --nav-active-bg:   #dbeafe;
    --nav-active-text: #1d4ed8;
    --nav-active-border: #2563eb;
    --nav-hover-bg:    #e2e8f0;
    --nav-hover-text:  #0f172a;
    --nav-label-color: #64748b;
    --nav-brand-color: #0f172a;

    --card-bg:         #ffffff;
    --border-color:    #e2e8f0;
    --bg-light:        #f0f4f8;

    --glass-bg:        rgba(255, 255, 255, 0.85);
    --glass-border:    #e2e8f0;
    --glass-shadow:    0 4px 24px rgba(0, 0, 0, 0.08);

    --body-gradient: none;

    --scrollbar-thumb: rgba(37, 99, 235, 0.25);
    --scrollbar-hover: rgba(37, 99, 235, 0.45);

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   THEME 3 — SLATE TEAL (Vibrant Teal Gradient Sidebar)
   ============================================================ */
html[data-theme="slate"] {
    --bg-color:        #0f2923;
    --surface:         #134e4a;
    --surface-2:       #115e59;
    --surface-3:       #0f766e;
    --sidebar-bg:      linear-gradient(180deg, #0f766e 0%, #134e4a 100%);
    --sidebar-border:  rgba(45, 212, 191, 0.35);

    --border:          rgba(45, 212, 191, 0.18);
    --border-strong:   rgba(45, 212, 191, 0.35);

    --primary:         #14b8a6;
    --primary-hover:   #2dd4bf;
    --primary-glow:    rgba(20, 184, 166, 0.35);
    --primary-dim:     rgba(20, 184, 166, 0.20);
    --primary-color:   #14b8a6;

    --secondary:       #6366f1;
    --secondary-hover: #818cf8;
    --secondary-glow:  rgba(99, 102, 241, 0.18);

    --success:         #22c55e;
    --success-bg:      rgba(34, 197, 94, 0.20);
    --success-text:    #4ade80;
    --warning:         #f59e0b;
    --warning-bg:      rgba(245, 158, 11, 0.20);
    --warning-text:    #fbbf24;
    --danger:          #f43f5e;
    --danger-bg:       rgba(244, 63, 94, 0.20);
    --danger-text:     #fb7185;
    --info:            #38bdf8;
    --info-bg:         rgba(56, 189, 248, 0.20);
    --info-text:       #38bdf8;

    --text-primary:    #f0fdfa;
    --text-secondary:  #ccfbf1;
    --text-muted:      #99f6e4;
    --text-disabled:   #2dd4bf;
    --label-color:     #f0fdfa;

    /* Bootstrap 5 dark synchronization */
    --bs-body-color:          #f0fdfa;
    --bs-body-bg:             #0f2923;
    --bs-secondary-color:     #ccfbf1;
    --bs-secondary-rgb:       204, 251, 241;
    --bs-tertiary-color:      #99f6e4;
    --bs-emphasis-color:      #ffffff;
    --bs-border-color:        rgba(45, 212, 191, 0.18);
    --bs-card-bg:             #134e4a;
    --bs-card-color:          #f0fdfa;
    --bs-card-border-color:   rgba(45, 212, 191, 0.18);

    --nav-link-color:  #ccfbf1;
    --nav-icon-color:  #2dd4bf;
    --nav-active-bg:   rgba(255, 255, 255, 0.22);
    --nav-active-text: #ffffff;
    --nav-active-border: #2dd4bf;
    --nav-hover-bg:    rgba(255, 255, 255, 0.12);
    --nav-hover-text:  #ffffff;
    --nav-label-color: #99f6e4;
    --nav-brand-color: #ffffff;

    --card-bg:         #134e4a;
    --border-color:    rgba(45, 212, 191, 0.18);
    --bg-light:        transparent;

    --glass-bg:        rgba(19, 78, 74, 0.85);
    --glass-border:    rgba(45, 212, 191, 0.25);
    --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.45);

    --body-gradient:
        radial-gradient(ellipse at 0% 0%,    rgba(20, 184, 166, 0.20) 0px, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(45, 212, 191, 0.12) 0px, transparent 55%);

    --scrollbar-thumb: rgba(45, 212, 191, 0.40);
    --scrollbar-hover: rgba(45, 212, 191, 0.70);

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   THEME 4 — EMERALD EXECUTIVE (Vibrant Emerald Green Gradient Sidebar)
   ============================================================ */
html[data-theme="emerald"] {
    --bg-color:        #062017;
    --surface:         #064e3b;
    --surface-2:       #047857;
    --surface-3:       #059669;
    --sidebar-bg:      linear-gradient(180deg, #047857 0%, #064e3b 100%);
    --sidebar-border:  rgba(52, 211, 153, 0.40);

    --border:          rgba(52, 211, 153, 0.20);
    --border-strong:   rgba(52, 211, 153, 0.40);

    --primary:         #10b981;
    --primary-hover:   #34d399;
    --primary-glow:    rgba(16, 185, 129, 0.40);
    --primary-dim:     rgba(16, 185, 129, 0.25);
    --primary-color:   #10b981;

    --secondary:       #34d399;
    --secondary-hover: #6ee7b7;
    --secondary-glow:  rgba(52, 211, 153, 0.30);

    --success:         #10b981;
    --success-bg:      rgba(16, 185, 129, 0.25);
    --success-text:    #34d399;
    --warning:         #f59e0b;
    --warning-bg:      rgba(245, 158, 11, 0.25);
    --warning-text:    #fbbf24;
    --danger:          #ef4444;
    --danger-bg:       rgba(239, 68, 68, 0.25);
    --danger-text:     #f87171;
    --info:            #06b6d4;
    --info-bg:         rgba(6, 182, 212, 0.25);
    --info-text:       #38bdf8;

    --text-primary:    #ecfdf5;
    --text-secondary:  #d1fae5;
    --text-muted:      #a7f3d0;
    --text-disabled:   #34d399;
    --label-color:     #ecfdf5;

    /* Bootstrap 5 dark synchronization */
    --bs-body-color:          #ecfdf5;
    --bs-body-bg:             #062017;
    --bs-secondary-color:     #d1fae5;
    --bs-secondary-rgb:       209, 250, 229;
    --bs-tertiary-color:      #a7f3d0;
    --bs-emphasis-color:      #ffffff;
    --bs-border-color:        rgba(52, 211, 153, 0.20);
    --bs-card-bg:             #064e3b;
    --bs-card-color:          #ecfdf5;
    --bs-card-border-color:   rgba(52, 211, 153, 0.20);

    --nav-link-color:  #ecfdf5;
    --nav-icon-color:  #a7f3d0;
    --nav-active-bg:   rgba(255, 255, 255, 0.25);
    --nav-active-text: #ffffff;
    --nav-active-border: #34d399;
    --nav-hover-bg:    rgba(255, 255, 255, 0.15);
    --nav-hover-text:  #ffffff;
    --nav-label-color: #a7f3d0;
    --nav-brand-color: #ffffff;

    --card-bg:         #064e3b;
    --border-color:    rgba(52, 211, 153, 0.20);
    --bg-light:        transparent;

    --glass-bg:        rgba(6, 78, 59, 0.88);
    --glass-border:    rgba(52, 211, 153, 0.30);
    --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.45);

    --body-gradient:
        radial-gradient(ellipse at 0% 0%,    rgba(16, 185, 129, 0.25) 0px, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(52, 211, 153, 0.15) 0px, transparent 55%);

    --scrollbar-thumb: rgba(52, 211, 153, 0.45);
    --scrollbar-hover: rgba(52, 211, 153, 0.75);

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   THEME 5 — TITANIUM MINIMAL (Warm Swiss Ceramic Light)
   ============================================================ */
html[data-theme="titanium"] {
    --bg-color:        #f4f4f6;
    --surface:         #ffffff;
    --surface-2:       #e4e4e7;
    --surface-3:       #d4d4d8;
    --sidebar-bg:      linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    --sidebar-border:  #cbd5e1;

    --border:          #e4e4e7;
    --border-strong:   #d4d4d8;

    --primary:         #1d4ed8;
    --primary-hover:   #1e40af;
    --primary-glow:    rgba(29, 78, 216, 0.15);
    --primary-dim:     rgba(29, 78, 216, 0.08);
    --primary-color:   #1d4ed8;

    --secondary:       #6366f1;
    --secondary-hover: #4f46e5;
    --secondary-glow:  rgba(99, 102, 241, 0.12);

    --success:         #16a34a;
    --success-bg:      rgba(22, 163, 74, 0.08);
    --success-text:    #16a34a;
    --warning:         #ca8a04;
    --warning-bg:      rgba(202, 138, 4, 0.08);
    --warning-text:    #ca8a04;
    --danger:          #dc2626;
    --danger-bg:       rgba(220, 38, 38, 0.08);
    --danger-text:     #dc2626;
    --info:            #0284c7;
    --info-bg:         rgba(2, 132, 199, 0.08);
    --info-text:       #0284c7;

    --text-primary:    #09090b;
    --text-secondary:  #52525b;
    --text-muted:      #71717a;
    --text-disabled:   #a1a1aa;
    --label-color:     #09090b;

    /* Bootstrap 5 light synchronization */
    --bs-body-color:          #09090b;
    --bs-body-bg:             #f4f4f6;
    --bs-secondary-color:     #52525b;
    --bs-secondary-rgb:       82, 82, 91;
    --bs-tertiary-color:      #71717a;
    --bs-emphasis-color:      #09090b;
    --bs-border-color:        #e4e4e7;
    --bs-card-bg:             #ffffff;
    --bs-card-color:          #09090b;
    --bs-card-border-color:   #e4e4e7;

    --nav-link-color:  #0f172a;
    --nav-icon-color:  #1d4ed8;
    --nav-active-bg:   rgba(29, 78, 216, 0.16);
    --nav-active-text: #1d4ed8;
    --nav-active-border: #1d4ed8;
    --nav-hover-bg:    #cbd5e1;
    --nav-hover-text:  #09090b;
    --nav-label-color: #475569;
    --nav-brand-color: #09090b;

    --card-bg:         #ffffff;
    --border-color:    #e4e4e7;
    --bg-light:        #f4f4f6;

    --glass-bg:        rgba(255, 255, 255, 0.90);
    --glass-border:    #e4e4e7;
    --glass-shadow:    0 4px 24px rgba(0, 0, 0, 0.06);

    --body-gradient: none;

    --scrollbar-thumb: rgba(29, 78, 216, 0.25);
    --scrollbar-hover: rgba(29, 78, 216, 0.45);

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   THEME 6 — CYBER MIDNIGHT (Vibrant Electric Violet Sidebar)
   ============================================================ */
html[data-theme="cyber"] {
    --bg-color:        #0c0a1d;
    --surface:         #1e1b4b;
    --surface-2:       #312e81;
    --surface-3:       #3730a3;
    --sidebar-bg:      linear-gradient(180deg, #4338ca 0%, #1e1b4b 100%);
    --sidebar-border:  rgba(165, 180, 252, 0.35);

    --border:          rgba(129, 140, 248, 0.18);
    --border-strong:   rgba(129, 140, 248, 0.35);

    --primary:         #6366f1;
    --primary-hover:   #818cf8;
    --primary-glow:    rgba(99, 102, 241, 0.35);
    --primary-dim:     rgba(99, 102, 241, 0.20);
    --primary-color:   #6366f1;

    --secondary:       #06b6d4;
    --secondary-hover: #22d3ee;
    --secondary-glow:  rgba(6, 182, 212, 0.20);

    --success:         #10b981;
    --success-bg:      rgba(16, 185, 129, 0.20);
    --success-text:    #34d399;
    --warning:         #f59e0b;
    --warning-bg:      rgba(245, 158, 11, 0.20);
    --warning-text:    #fbbf24;
    --danger:          #f43f5e;
    --danger-bg:       rgba(244, 63, 94, 0.20);
    --danger-text:     #fb7185;
    --info:            #06b6d4;
    --info-bg:         rgba(6, 182, 212, 0.20);
    --info-text:       #22d3ee;

    --text-primary:    #f5f3ff;
    --text-secondary:  #e0e7ff;
    --text-muted:      #c7d2fe;
    --text-disabled:   #818cf8;
    --label-color:     #f5f3ff;

    /* Bootstrap 5 dark synchronization */
    --bs-body-color:          #f5f3ff;
    --bs-body-bg:             #0c0a1d;
    --bs-secondary-color:     #e0e7ff;
    --bs-secondary-rgb:       224, 231, 255;
    --bs-tertiary-color:      #c7d2fe;
    --bs-emphasis-color:      #ffffff;
    --bs-border-color:        rgba(129, 140, 248, 0.18);
    --bs-card-bg:             #1e1b4b;
    --bs-card-color:          #f5f3ff;
    --bs-card-border-color:   rgba(129, 140, 248, 0.18);

    --nav-link-color:  #e0e7ff;
    --nav-icon-color:  #a5b4fc;
    --nav-active-bg:   rgba(255, 255, 255, 0.25);
    --nav-active-text: #ffffff;
    --nav-active-border: #a5b4fc;
    --nav-hover-bg:    rgba(255, 255, 255, 0.15);
    --nav-hover-text:  #ffffff;
    --nav-label-color: #c7d2fe;
    --nav-brand-color: #ffffff;

    --card-bg:         #1e1b4b;
    --border-color:    rgba(129, 140, 248, 0.18);
    --bg-light:        transparent;

    --glass-bg:        rgba(30, 27, 75, 0.88);
    --glass-border:    rgba(165, 180, 252, 0.25);
    --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.50);

    --body-gradient:
        radial-gradient(ellipse at 0% 0%,    rgba(99, 102, 241, 0.25) 0px, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(6, 182, 212, 0.18) 0px, transparent 55%);

    --scrollbar-thumb: rgba(129, 140, 248, 0.45);
    --scrollbar-hover: rgba(129, 140, 248, 0.75);

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color) !important;
    color: var(--text-primary) !important;
}

body {
    background-image: var(--body-gradient);
    background-attachment: fixed;
    min-height: 100vh;
    line-height: 1.6;
    color: var(--text-primary) !important;
}

h1:focus { outline: none; }

a, .btn-link { color: var(--primary); }

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--text-primary) !important;
    line-height: 1.3;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
    color: #fff;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    font-weight: 500;
    transition: var(--transition);
}
.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--primary-glow);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-primary:hover {
    background-color: var(--primary);
    color: white;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--primary-dim);
}

/* ============================================================
   FORMS & CONTROLS
   ============================================================ */

/* High-contrast, crystal-clear labels for all controls */
label,
.form-label,
.field-label,
.prop-label,
.cf-label,
.bpa-field-label,
.control-label,
.col-form-label,
.form-check-label,
.form-group > label,
.prop-group > label {
    color: var(--label-color, var(--text-primary)) !important;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    display: inline-block;
    letter-spacing: 0.01em;
}

/* Ensure labels don't get washed out even if utility classes are attached */
label.text-muted,
label.text-secondary,
.form-label.text-muted,
.form-label.text-secondary {
    color: var(--label-color, var(--text-primary)) !important;
}

.form-group {
    margin-bottom: 1.1rem;
}

.form-control, .form-select {
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.form-control::placeholder, .form-select::placeholder { color: var(--text-muted); }
.form-control:focus, .form-select:focus {
    background-color: var(--surface-3) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-dim) !important;
    color: var(--text-primary) !important;
}
select.form-control option, select.form-select option {
    background: var(--surface-2);
    color: var(--text-primary);
}

.form-text,
.field-help,
.pf-help {
    color: var(--text-secondary) !important;
    font-size: 0.78rem;
    margin-top: 0.3rem;
}

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); font-size: 0.8rem; }

/* ============================================================
   CARDS
   ============================================================ */

.bpa-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    margin-bottom: 1.5rem;
    transition: var(--transition);
}
.bpa-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   TABLES
   ============================================================ */

.bpa-table {
    width: 100%;
    margin-bottom: 0;
    color: var(--text-primary);
    border-collapse: separate;
    border-spacing: 0;
}
.bpa-table th {
    background-color: var(--surface-2);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border-strong);
}
.bpa-table td {
    padding: 0.85rem 1.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
    background-color: transparent;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.bpa-table tr:last-child td { border-bottom: none; }
.bpa-table tr:hover td { background-color: var(--surface-2); }

/* ============================================================
   BADGES
   ============================================================ */

.badge-priority {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.22rem 0.6rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-priority.high   { background: var(--danger-bg);   color: var(--danger-text); }
.badge-priority.urgent { background: var(--danger-bg);   color: var(--danger-text); }
.badge-priority.medium { background: var(--warning-bg);  color: var(--warning-text); }
.badge-priority.low    { background: var(--surface-2);   color: var(--text-muted); }

.badge-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
}
.badge-status.pending     { background: var(--warning-bg); color: var(--warning-text); }
.badge-status.in-progress { background: var(--primary-dim); color: var(--primary-hover); }
.badge-status.approved, .badge-status.auto-approved, .badge-status.completed { background: var(--success-bg); color: var(--success-text); }
.badge-status.rejected    { background: var(--danger-bg);  color: var(--danger-text); }

/* ── Action ID Badges (High-contrast, theme-adaptive) ── */
.action-id-badge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.25 !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="obsidian"] .action-id-badge,
[data-theme="slate"] .action-id-badge,
[data-theme="emerald"] .action-id-badge,
[data-theme="cyber"] .action-id-badge,
[data-bs-theme="dark"] .action-id-badge {
    background: rgba(37, 99, 235, 0.25) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(147, 197, 253, 0.45) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="arctic"] .action-id-badge,
[data-theme="titanium"] .action-id-badge,
[data-bs-theme="light"] .action-id-badge {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.action-row-closed {
    background: transparent;
}

.action-row-closed td {
    color: var(--text-secondary);
}

/* ============================================================
   SEARCH
   ============================================================ */

.bpa-search-wrapper { position: relative; display: inline-flex; align-items: center; }
.bpa-search-input {
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background-color: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
    width: 250px;
}
.bpa-search-input::placeholder { color: var(--text-muted); }
.bpa-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.bpa-search-icon { position: absolute; left: 0.8rem; color: var(--text-muted); pointer-events: none; }

/* ============================================================
   PAGE HEADERS
   ============================================================ */

.bpa-header-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}
.bpa-header-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* ============================================================
   LAYOUT — PAGE + SIDEBAR
   (nav-specific tokens consumed by NavMenu.razor.css)
   ============================================================ */

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

.sidebar {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-border);
}

.top-row {
    background: var(--sidebar-bg) !important;
    height: 3.75rem;
    min-height: 3.75rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--sidebar-border);
}

/* ── Global Sidebar Nav Link Overrides ───────────────────── */
.sidebar .nav-link,
.sidebar a.nav-link,
.nav-scrollable .nav-link,
.nav-scrollable a {
    color: var(--nav-link-color) !important;
}

.sidebar .nav-link .nav-icon,
.sidebar a.nav-link .nav-icon,
.nav-scrollable .nav-link .nav-icon,
.nav-scrollable a .nav-icon {
    color: var(--nav-icon-color) !important;
}

.sidebar .nav-link:hover,
.sidebar a.nav-link:hover,
.nav-scrollable .nav-link:hover,
.nav-scrollable a:hover {
    background-color: var(--nav-hover-bg) !important;
    color: var(--nav-hover-text) !important;
}

.sidebar .nav-link:hover .nav-icon,
.sidebar a.nav-link:hover .nav-icon,
.nav-scrollable .nav-link:hover .nav-icon {
    color: var(--nav-hover-text) !important;
}

.sidebar .nav-link.active,
.sidebar a.nav-link.active,
.nav-scrollable .nav-link.active,
.nav-scrollable a.active {
    background: var(--nav-active-bg) !important;
    color: var(--nav-active-text) !important;
    border-left: 3px solid var(--nav-active-border) !important;
}

.sidebar .nav-link.active .nav-icon,
.sidebar a.nav-link.active .nav-icon,
.nav-scrollable .nav-link.active .nav-icon {
    color: var(--nav-active-text) !important;
}

.content { padding-top: 1.1rem; }

@media (min-width: 641px) {
    .page { flex-direction: row !important; }

    .sidebar {
        width: 240px !important;
        min-width: 240px !important;
        height: 100vh !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        flex-shrink: 0 !important;
        box-shadow: 1px 0 0 var(--sidebar-border), 4px 0 20px rgba(0,0,0,0.2) !important;
    }

    .nav-scrollable {
        display: flex !important;
        flex-direction: column;
        height: calc(100vh - 3.75rem) !important;
        overflow-y: auto !important;
    }

    .navbar-toggler { display: none !important; }
}

/* ============================================================
   DEBUG / UTILS
   ============================================================ */

.debug-message.success { background: var(--success-bg); color: var(--success-text); padding: 0.5rem; border-radius: 4px; margin-top: 0.5rem; }
.debug-message.error   { background: var(--danger-bg);  color: var(--danger-text);  padding: 0.5rem; border-radius: 4px; margin-top: 0.5rem; }
.debug-panel { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 1rem; margin-top: 1rem; }

code { color: var(--secondary-hover); }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder { color: var(--text-muted); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* ============================================================
   GLASS PANEL
   ============================================================ */

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */

.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: var(--primary-dim); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--primary); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: 600; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; color: var(--text-secondary); }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading..."); }

/* ============================================================
   BLAZOR ERROR UI
   ============================================================ */

#blazor-error-ui {
    background: var(--surface);
    border: 1px solid var(--danger);
    border-radius: 10px;
    bottom: 1.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    color: var(--text-primary);
    display: none;
    left: 50%;
    transform: translateX(-50%);
    max-width: 42rem;
    padding: 0.9rem 1.25rem;
    position: fixed;
    width: calc(100% - 3rem);
    z-index: 9999;
    font-size: 0.875rem;
    align-items: center;
    gap: 0.75rem;
}
#blazor-error-ui.blazor-error-boundary { display: flex; }
#blazor-error-ui .reload { color: var(--primary); text-decoration: underline; cursor: pointer; }
#blazor-error-ui .dismiss { margin-left: auto; cursor: pointer; color: var(--text-muted); }
#blazor-error-ui .dismiss:hover { color: var(--text-primary); }
.blazor-error-boundary { background: var(--danger-bg); border: 1px solid var(--danger); padding: 1rem 1rem 1rem 3.7rem; color: var(--text-primary); border-radius: 8px; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ============================================================
   HELP TRIGGER BUTTON
   ============================================================ */

.bpa-help-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    height: 38px;
    white-space: nowrap;
    text-decoration: none;
}

.bpa-help-trigger-btn:hover {
    background: var(--surface-3);
    border-color: var(--primary);
    color: var(--primary-hover);
    box-shadow: 0 0 12px var(--primary-dim);
}

.bpa-help-trigger-btn.compact {
    padding: 0.35rem 0.5rem;
    width: 38px;
    justify-content: center;
}

.bpa-help-trigger-btn .help-btn-icon {
    font-size: 0.95rem;
}

.bpa-help-trigger-btn .help-btn-label {
    font-size: 0.82rem;
    font-weight: 600;
}

/* ============================================================
   MINIMALIST REDESIGN — Shared Utilities
   All colours reference existing CSS vars so all themes work.
   ============================================================ */

/* ── Page header block ─────────────────────────────────────── */
.bpa-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.bpa-page-header-left h1 {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 0.15rem;
    color: var(--text-primary);
}
.bpa-page-header-left .bpa-page-date {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
}
.bpa-page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Stat cards with trend indicators ──────────────────────── */
.bpa-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.bpa-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.4rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.bpa-stat-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
.bpa-stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}
.bpa-stat-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bpa-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bpa-stat-icon.blue   { background: var(--primary-dim);    color: var(--primary); }
.bpa-stat-icon.green  { background: var(--success-bg);     color: var(--success); }
.bpa-stat-icon.orange { background: var(--warning-bg);     color: var(--warning); }
.bpa-stat-icon.red    { background: var(--danger-bg);      color: var(--danger); }
.bpa-stat-icon.purple { background: var(--secondary-glow); color: var(--secondary); }

.bpa-stat-value {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.bpa-stat-footer {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.bpa-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}
.bpa-trend.up   { background: var(--success-bg); color: var(--success-text); }
.bpa-trend.down { background: var(--danger-bg);  color: var(--danger-text); }
.bpa-trend.flat { background: var(--surface-2);  color: var(--text-muted); }
.bpa-trend-label { font-size: 0.75rem; color: var(--text-muted); }

/* ── Filter pill tabs ──────────────────────────────────────── */
.bpa-filter-tabs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.bpa-filter-tab {
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    font-family: inherit;
}
.bpa-filter-tab:hover {
    background: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--primary);
}
.bpa-filter-tab.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* ── Process catalogue card (Submit Request) ───────────────── */
.bpa-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.bpa-process-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.4rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-decoration: none !important;
    color: inherit !important;
}
.bpa-process-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 24px rgba(0,0,0,0.14);
    transform: translateY(-2px);
}
.bpa-process-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.bpa-process-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bpa-process-icon-circle.hr        { background: rgba(59,130,246,0.12);  color: #3b82f6; }
.bpa-process-icon-circle.finance   { background: rgba(99,102,241,0.12);  color: #6366f1; }
.bpa-process-icon-circle.it        { background: rgba(139,92,246,0.12);  color: #8b5cf6; }
.bpa-process-icon-circle.operations{ background: rgba(245,158,11,0.12);  color: #f59e0b; }
.bpa-process-icon-circle.legal     { background: rgba(239,68,68,0.12);   color: #ef4444; }
.bpa-process-icon-circle.general   { background: var(--surface-2);       color: var(--text-muted); }

.bpa-process-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.bpa-process-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bpa-process-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}
.bpa-process-duration {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.bpa-process-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}
.bpa-process-card:hover .bpa-process-arrow {
    background: var(--primary-hover);
    transform: translateX(2px);
}

/* ── Category badges ───────────────────────────────────────── */
.bpa-category-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.bpa-category-badge.hr         { background: rgba(59,130,246,0.12);  color: #3b82f6; }
.bpa-category-badge.finance    { background: rgba(99,102,241,0.12);  color: #6366f1; }
.bpa-category-badge.it         { background: rgba(139,92,246,0.12);  color: #8b5cf6; }
.bpa-category-badge.operations { background: rgba(245,158,11,0.12);  color: #f59e0b; }
.bpa-category-badge.legal      { background: rgba(239,68,68,0.12);   color: #ef4444; }
.bpa-category-badge.onboarding { background: rgba(16,185,129,0.12);  color: #10b981; }
.bpa-category-badge.general    { background: var(--surface-2);       color: var(--text-muted); }

/* ── Avatar ────────────────────────────────────────────────── */
.bpa-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    text-transform: uppercase;
}
.bpa-avatar.sm { width: 28px; height: 28px; font-size: 0.68rem; }

/* ── Sidebar user profile block ────────────────────────────── */
.bpa-nav-user-profile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}
.bpa-nav-user-info { overflow: hidden; min-width: 0; }
.bpa-nav-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--nav-brand-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bpa-nav-user-role {
    font-size: 0.7rem;
    color: var(--nav-label-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Nav badge ─────────────────────────────────────────────── */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--primary);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9999px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Search bar (full-width variant) ───────────────────────── */
.bpa-search-full {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.bpa-search-full input {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
}
.bpa-search-full input::placeholder { color: var(--text-muted); }
.bpa-search-full input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-dim);
    background: var(--surface);
}
.bpa-search-full .search-icon {
    position: absolute;
    left: 0.8rem;
    color: var(--text-muted);
    pointer-events: none;
}

/* ── Horizontal bar chart ──────────────────────────────────── */
.bpa-hbar-chart { display: flex; flex-direction: column; gap: 0.85rem; }
.bpa-hbar-row   { display: flex; align-items: center; gap: 0.75rem; }
.bpa-hbar-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    width: 90px;
    flex-shrink: 0;
    font-weight: 500;
}
.bpa-hbar-track {
    flex: 1;
    height: 8px;
    background: var(--surface-2);
    border-radius: 99px;
    overflow: hidden;
}
.bpa-hbar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.bpa-hbar-fill.blue   { background: var(--primary); }
.bpa-hbar-fill.orange { background: var(--warning); }
.bpa-hbar-fill.green  { background: var(--success); }
.bpa-hbar-fill.red    { background: var(--danger); }
.bpa-hbar-fill.grey   { background: var(--text-disabled); }
.bpa-hbar-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Login split layout ─────────────────────────────────────── */
.bpa-login-split { display: flex; min-height: 100vh; width: 100%; }
.bpa-login-left {
    display: none;
    flex: 1;
    background: #0d1117;
    padding: 3rem;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.bpa-login-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(59,130,246,0.12) 0, transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(139,92,246,0.08) 0, transparent 55%);
    pointer-events: none;
}
.bpa-login-left-content { position: relative; z-index: 1; max-width: 420px; }
.bpa-login-headline,
h1.bpa-login-headline {
    font-size: 2.6rem;
    font-weight: 800;
    color: #ffffff !important;
    line-height: 1.15;
    letter-spacing: -0.04em;
    margin: 0 0 0.75rem;
}
.bpa-login-subline {
    font-size: 1rem;
    color: #94a3b8 !important;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}
.bpa-login-features { display: flex; flex-direction: column; gap: 1rem; }
.bpa-login-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #cbd5e1 !important;
}
.bpa-login-feature-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    flex-shrink: 0;
}
.bpa-login-right {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    background: var(--surface);
}
.bpa-login-form-inner { width: 100%; max-width: 360px; margin: 0 auto; }
.bpa-login-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2.25rem;
    text-decoration: none !important;
}
.bpa-login-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bpa-login-logo-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.bpa-login-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    letter-spacing: -0.025em;
}
.bpa-login-subtitle { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem; }
.bpa-field-group { margin-bottom: 1.25rem; }
.bpa-field-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}
.bpa-field-label { font-size: 0.83rem; font-weight: 500; color: var(--text-secondary); }
.bpa-field-forgot {
    font-size: 0.8rem;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s;
}
.bpa-field-forgot:hover { color: var(--primary-hover); text-decoration: underline; }
.bpa-field-input {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
}
.bpa-field-input::placeholder { color: var(--text-muted); }
.bpa-field-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-dim);
    background: var(--surface);
}
.bpa-login-btn {
    width: 100%;
    padding: 0.7rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.bpa-login-btn:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--primary-glow);
}
.bpa-login-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.bpa-login-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.bpa-login-divider::before, .bpa-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-strong);
}
.bpa-sso-btn {
    width: 100%;
    padding: 0.65rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.bpa-sso-btn:hover { background: var(--surface-2); border-color: var(--primary); }
.bpa-login-demo {
    padding: 0.9rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.bpa-login-demo-title {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bpa-login-demo code { color: var(--primary); background: transparent; font-size: 0.78rem; }
.bpa-login-error {
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    background: var(--danger-bg);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 8px;
    color: var(--danger-text);
    font-size: 0.83rem;
}
.bpa-login-expired {
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    background: var(--warning-bg);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 8px;
    color: var(--warning-text);
    font-size: 0.83rem;
}
.bpa-login-spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: bpa-spin 0.7s linear infinite;
}
@keyframes bpa-spin { to { transform: rotate(360deg); } }

@media (min-width: 900px) {
    .bpa-login-split { flex-direction: row; }
    .bpa-login-left  { display: flex; }
    .bpa-login-right { flex-shrink: 0; box-shadow: -1px 0 0 var(--border); }
}

/* ============================================================
   BOOTSTRAP UTILITY COLOR OVERRIDES (Fix Dark Mode Contrast)
   ============================================================ */

.text-muted,
.form-text.text-muted,
small.text-muted,
span.text-muted,
p.text-muted,
div.text-muted {
    color: var(--text-secondary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-primary {
    color: var(--text-primary) !important;
}

.text-body-secondary {
    color: var(--text-secondary) !important;
}

.text-body-tertiary {
    color: var(--text-secondary) !important;
}

/* Enhanced visibility for card metrics, subtitles, and tables in dark themes */
.bpa-card small,
.bpa-card .text-uppercase,
.metric-label,
.bpa-stat-label {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

/* Bootstrap table high-contrast dark synchronization */
.table {
    --bs-table-color: var(--text-primary) !important;
    --bs-table-bg: transparent !important;
    --bs-table-border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border) !important;
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
}
.table th {
    color: var(--text-secondary) !important;
    font-weight: 700 !important;
}

/* ============================================================
   GLOBAL BOOTSTRAP COMPONENT THEME INTEGRATION
   Ensures cards, modals, dropdowns, list groups, badges, and alerts
   dynamically reflect the active theme (obsidian, arctic, slate,
   emerald, titanium, cyber).
   ============================================================ */

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
}
.card-header {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border) !important;
}
.card-footer {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-top: 1px solid var(--border) !important;
}

/* ── Modals ────────────────────────────────────────────────── */
.modal-content {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}
.modal-header {
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}
.modal-footer {
    border-top: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

/* ── Dropdowns ─────────────────────────────────────────────── */
.dropdown-menu {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
.dropdown-item {
    color: var(--text-primary) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--surface-2) !important;
    color: var(--primary) !important;
}

/* ── List Groups ───────────────────────────────────────────── */
.list-group-item {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}
.list-group-item:hover {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
}
.list-group-item-action {
    color: var(--text-primary) !important;
}

/* Modal dark cards contrast safety */
.xml-modal .list-group-item,
.json-modal .list-group-item,
.modal-wf-card {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}
.xml-modal .list-group-item:hover,
.json-modal .list-group-item:hover,
.modal-wf-card:hover {
    background-color: #3e4f68 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

/* ── Buttons & Controls Contrast ───────────────────────────── */
.btn-outline-secondary {
    color: var(--text-secondary) !important;
    border-color: var(--border-strong) !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover {
    color: var(--text-primary) !important;
    background-color: var(--surface-2) !important;
    border-color: var(--primary) !important;
}

.form-control:disabled, .form-select:disabled, textarea:disabled {
    background-color: var(--surface-3) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
    cursor: not-allowed;
    opacity: 0.85;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge.bg-light {
    background-color: var(--surface-2) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
}
.badge.bg-secondary-subtle {
    background-color: var(--surface-2) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
}
.badge.bg-info-subtle {
    background-color: var(--info-bg) !important;
    color: var(--info-text) !important;
    border: 1px solid var(--info) !important;
}
.badge.bg-success-subtle {
    background-color: var(--success-bg) !important;
    color: var(--success-text) !important;
    border: 1px solid var(--success) !important;
}
.badge.bg-warning-subtle {
    background-color: var(--warning-bg) !important;
    color: var(--warning-text) !important;
    border: 1px solid var(--warning) !important;
}
.badge.bg-danger-subtle {
    background-color: var(--danger-bg) !important;
    color: var(--danger-text) !important;
    border: 1px solid var(--danger) !important;
}

/* ── Alerts ────────────────────────────────────────────────── */
.alert-success {
    background-color: var(--success-bg) !important;
    color: var(--success-text) !important;
    border-color: var(--success) !important;
}
.alert-danger {
    background-color: var(--danger-bg) !important;
    color: var(--danger-text) !important;
    border-color: var(--danger) !important;
}
.alert-warning {
    background-color: var(--warning-bg) !important;
    color: var(--warning-text) !important;
    border-color: var(--warning) !important;
}
.alert-info {
    background-color: var(--info-bg) !important;
    color: var(--info-text) !important;
    border-color: var(--info) !important;
}

/* ── Dark Mode Contrast Guard ──────────────────────────────── */
[data-theme="obsidian"] .bg-light,
[data-theme="slate"] .bg-light,
[data-theme="emerald"] .bg-light,
[data-theme="cyber"] .bg-light,
[data-bs-theme="dark"] .bg-light {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

[data-theme="obsidian"] .bg-white,
[data-theme="slate"] .bg-white,
[data-theme="emerald"] .bg-white,
[data-theme="cyber"] .bg-white,
[data-bs-theme="dark"] .bg-white {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
}

[data-theme="obsidian"] .text-dark,
[data-theme="slate"] .text-dark,
[data-theme="emerald"] .text-dark,
[data-theme="cyber"] .text-dark,
[data-bs-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

[data-theme="obsidian"] .table-light,
[data-theme="slate"] .table-light,
[data-theme="emerald"] .table-light,
[data-theme="cyber"] .table-light,
[data-bs-theme="dark"] .table-light,
[data-theme="obsidian"] .table-light > th,
[data-theme="slate"] .table-light > th,
[data-theme="emerald"] .table-light > th,
[data-theme="cyber"] .table-light > th,
[data-bs-theme="dark"] .table-light > th {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

[data-theme="obsidian"] .btn-close,
[data-theme="slate"] .btn-close,
[data-theme="emerald"] .btn-close,
[data-theme="cyber"] .btn-close,
[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}