/* css/style.css */

/* ============================================================
   DESIGN TOKENS — Enterprise Business & Formal UI
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --color-brand: #18181B;
  --color-brand-light: #F4F4F5;
  --color-brand-dark: #000000;
  --color-accent: #16A34A;
  --color-accent-bg: #DCFCE7;
  --color-canvas: #F9F9F9;
  --color-surface: #FFFFFF;
  --color-overlay: #f1f5f9;
  --color-background: #ffffff;
  --color-sidebar: #F4F3EF;
  --color-sidebar-hover: #EAE9E4;
  --color-text-primary: #171717;
  --color-text-secondary: #525252;
  --color-text-muted: #A3A3A3;
  --color-text-sidebar: #171717;
  --color-text-sidebar-muted: #737373;
  --color-border: #E5E5E5;
  --color-border-strong: #D4D4D4;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.06);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --text-xs:   .75rem;    /* 12px @16px base — 75% */
  --text-sm:   .875rem;   /* 14px — 87.5% */
  --text-base: .9375rem;  /* 15px — 93.75% */
  --text-md:   1.125rem;  /* 18px — 112.5% */
  --text-lg:   1.375rem;  /* 22px — 137.5% */
  --text-xl:   1.75rem;   /* 28px — 175% */
  --text-2xl:  2.25rem;   /* 36px — 225% */
  
  --transition-fast: 150ms ease-in-out;
}

/* Fluid responsive type (pilot: DML pages) — rem-based text scales with viewport.
   html gets role-dml / role-cmo / role-cgso from includes/header.php */
html.role-dml { font-size: 100%; }
@media (max-width: 768px) { html.role-dml { font-size: 93.75%; } }
@media (max-width: 480px) { html.role-dml { font-size: 87.5%; } }
@media (min-width: 1600px) { html.role-dml { font-size: 112.5%; } }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-canvas);
    color: var(--color-text-primary);
    line-height: 1.5;
    font-size: var(--text-base);
    -webkit-font-smoothing: antialiased;
}

/* Stable gutter prevents 7px viewport jump between light/dark scrollbars */
html { scrollbar-gutter: stable; }
html ::-webkit-scrollbar { width: 10px; height: 10px; }
html ::-webkit-scrollbar-track { background: #f1f5f9; }
html ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }

/* Animations — color-only so theme toggle doesn't animate layout */
button, a, input, select, .nav-link, tr {
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
}

/* Components */
.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-brand);
    color: #ffffff;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}
.btn:hover {
    background-color: var(--color-brand-dark);
}
.btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
    background-color: #F1F5F9;
}

.input-field {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
}
.input-field:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow:  0 0 0 1px var(--color-brand);
}

/* ============================================================
   GLOBAL FORM CONTROLS & BROWSER AUTOFILL NORMALIZATION
   Fixes browser autofill / autocomplete suggestion dropdowns
   from changing the input fill color into bright white or yellow.
   ============================================================ */
input, select, textarea, .input-field, .field-input, .form-control, .modal-input {
    color: var(--color-text-primary);
}

/* Universal Autofill Fix - Light Mode */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface, #ffffff) inset !important;
    -webkit-text-fill-color: var(--color-text-primary, #171717) !important;
    caret-color: var(--color-text-primary, #171717) !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s !important;
}

input:autofill,
textarea:autofill,
select:autofill {
    box-shadow: 0 0 0 1000px var(--color-surface, #ffffff) inset !important;
    -webkit-text-fill-color: var(--color-text-primary, #171717) !important;
    caret-color: var(--color-text-primary, #171717) !important;
}

/* Universal Autofill Fix - Dark Mode */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover, 
html[data-theme="dark"] input:-webkit-autofill:focus, 
html[data-theme="dark"] input:-webkit-autofill:active,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill:hover,
html[data-theme="dark"] textarea:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill:active,
html[data-theme="dark"] select:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill:hover,
html[data-theme="dark"] select:-webkit-autofill:focus,
html[data-theme="dark"] select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #0f0f0f inset !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    caret-color: #f0f0f0 !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s !important;
}

html[data-theme="dark"] input:autofill,
html[data-theme="dark"] textarea:autofill,
html[data-theme="dark"] select:autofill {
    box-shadow: 0 0 0 1000px #0f0f0f inset !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    caret-color: #f0f0f0 !important;
}
label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge-blue { background-color: var(--color-brand-light); color: var(--color-brand-dark); border: 1px solid #A5F3FC; }
.badge-green { background-color: var(--color-accent-bg); color: var(--color-accent); border: 1px solid #BBF7D0; }
.badge-yellow { background-color: #FEF9C3; color: #A16207; border: 1px solid #FEF08A; }
.badge-slate { background-color: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; }

/* Tables - Formal Data Grid */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
th {
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background-color: #F8FAFC;
    border-bottom: 2px solid var(--color-border);
    text-align: left;
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
}
td {
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}
tbody tr:hover {
    background-color: #F1F5F9;
}

/* App Layout - Enterprise Dashboard */
.app-layout {
    --role-accent: var(--color-brand);
    --role-accent-soft: var(--color-brand-light);
    display: flex;
    min-height: 100vh;
    background: linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 100%);
}
.app-layout.role-cmo { --role-accent: #CA8A04; --role-accent-soft: #FEF3C7; }
.app-layout.role-dml { --role-accent: #16A34A; --role-accent-soft: #DCFCE7; }
.app-layout.role-admin { --role-accent: #2563EB; --role-accent-soft: #DBEAFE; }
/* Light-mode: primary buttons must be dark green (system-wide) */
.btn,
.header-primary-action.btn,
.login-card-inner button[style*="var(--color-brand)"],
.app-layout.role-dml .btn,
.app-layout.role-cmo .btn,
.app-layout.role-admin .btn {
  background: #14532d !important;
  border-color: #14532d !important;
  color: #ffffff !important;
}
.btn:hover,
.header-primary-action.btn:hover,
.login-card-inner button[style*="var(--color-brand)"]:hover,
.app-layout.role-dml .btn:hover,
.app-layout.role-cmo .btn:hover,
.app-layout.role-admin .btn:hover {
  background: #0f3d21 !important;
  border-color: #0f3d21 !important;
}
html:not([data-theme="dark"]) a[style*="color: var(--color-brand)"] { color: #14532d !important; }
html[data-theme="dark"] a[style*="color: var(--color-brand)"] { color: #4ade80 !important; }
/* CMO light: darker grey instead of dark green */
.app-layout.role-cmo .btn,
.app-layout.role-cmo .header-primary-action.btn { background: #383838 !important; border-color: #383838 !important; color: #ffffff !important; }
.app-layout.role-cmo .btn:hover,
.app-layout.role-cmo .header-primary-action.btn:hover { background: #262626 !important; border-color: #262626 !important; }
.app-layout.role-cmo a[style*="color: var(--color-brand)"] { color: #383838 !important; }
/* Login light: ensure inputs have light border/bg */
.login-card-inner input[style*="#cbd5e1"] { border-color:#cbd5e1 !important; }
.login-card-inner input[style*="#f8fafc"] { background-color:#f8fafc !important; }
.app-sidebar {
    width: 260px;
    background: var(--color-sidebar);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    z-index: 30;
    box-shadow: 8px 0 24px rgb(15 23 42 / 0.12);
}
.sidebar-header {
    padding: 0.75rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}
.sidebar-brand { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.brand-mark {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    align-self: center;
    margin: 0;
    padding: 2px;
    box-sizing: border-box;
}
.brand-mark img { 
    width: 100%; 
    height: 100%; 
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    display: block;
    margin: 0 auto;
}
.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    min-width: 0;
    flex: 1;
    margin: 0;
    padding: 0;
}
.sidebar-brand-text h1,
.sidebar-brand h1 {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-sidebar);
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-brand-text p,
.sidebar-brand p {
    color: var(--color-text-sidebar-muted);
    font-size: 11px;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.role-chip {
    display: inline-flex;
    align-items: center;
    margin-top: 1rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sidebar-nav {
    flex: 1;
    padding: .5rem 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-y: auto;
}
.nav-section-label {
    padding: 0 0.65rem 0.35rem;
    color: #64748B;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 42px;
    padding: 0.62rem 0.75rem;
    color: var(--color-text-sidebar-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-sm);
    border-radius: 12px;
    border: 1px solid transparent;
    position: relative;
}
.nav-link span { flex: 1; }

/* Admin-only Sidebar Navigation Font (CGSO role) */
.role-cgso .app-sidebar,
.role-cgso .app-sidebar .nav-link,
.role-cgso .app-sidebar .sidebar-brand h1,
.role-cgso .app-sidebar .nav-section-label,
.role-cgso .app-sidebar .user-info span,
.app-layout.role-admin .app-sidebar,
.app-layout.role-admin .app-sidebar .nav-link,
.app-layout.role-admin .app-sidebar .sidebar-brand h1,
.app-layout.role-admin .app-sidebar .nav-section-label {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}
.nav-link small {
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-full);
    background: var(--role-accent-soft);
    color: var(--role-accent);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.nav-link svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; }
.nav-link:hover { background-color: var(--color-sidebar-hover); color: var(--color-text-sidebar); transform: none; }
.nav-link.active { background: #ffffff; color: var(--color-text-primary); border: 1px solid var(--color-border); box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.nav-link.active::before { display: none; }
/* DML navigation highlighting — dark green in light, light green in dark (close to black) */
.app-layout.role-dml .nav-link.active { background: #14532d !important; color: #ffffff !important; border-color: #14532d !important; box-shadow: 0 2px 8px rgba(20,83,45,.22) !important; }
.app-layout.role-dml .nav-link:hover { background: #dcfce7 !important; color: #14532d !important; border-color: #bbf7d0 !important; }
html[data-theme="dark"] .app-layout.role-dml .nav-link.active { background: #4ade80 !important; color: #052e16 !important; border-color: #22c55e !important; box-shadow: 0 2px 10px rgba(74,222,128,.18) !important; }
html[data-theme="dark"] .app-layout.role-dml .nav-link:hover { background: rgba(74,222,128,0.12) !important; color: #4ade80 !important; border-color: rgba(74,222,128,0.22) !important; }
/* CMO navigation highlighting — grey in light, dark yellow in dark */
.app-layout.role-cmo .nav-link.active { background: #383838 !important; color: #ffffff !important; border-color: #383838 !important; box-shadow: 0 2px 8px rgba(0,0,0,.18) !important; }
.app-layout.role-cmo .nav-link:hover { background: #e5e7eb !important; color: #383838 !important; border-color: #d1d5db !important; }
html[data-theme="dark"] .app-layout.role-cmo .nav-link.active { background: #a16207 !important; color: #fef3c7 !important; border-color: #854d0f !important; box-shadow: 0 2px 10px rgba(161,98,7,.20) !important; }
html[data-theme="dark"] .app-layout.role-cmo .nav-link:hover { background: rgba(161,98,7,0.14) !important; color: #facc15 !important; border-color: rgba(161,98,7,0.28) !important; }
.sidebar-footer { padding: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--role-accent-soft);
    color: var(--role-accent);
    font-weight: 800;
}
.user-meta { min-width: 0; }
.user-meta strong, .user-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta strong { color: #ffffff; font-size: var(--text-sm); }
.user-meta span { color: var(--color-text-sidebar-muted); font-size: var(--text-xs); }
.sidebar-footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }
.utility-link { justify-content: center; min-height: 38px; padding-inline: 0.5rem; background: rgba(255, 255, 255, 0.04); }
.logout-link { color: #FCA5A5; }
.logout-link:hover { background: rgba(239, 68, 68, 0.12); color: #FECACA; }
.app-main { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; min-width: 0; }
.app-header {
    background: var(--color-surface);
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--color-border);
}
.header-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}
.header-title-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
}
.header-page-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.25;
}
.breadcrumb-kicker {
    color: var(--role-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 2px;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.header-primary-action svg, .header-status-pill svg, .sidebar-toggle svg { width: 17px; height: 17px; }
.header-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.75rem;
    border-radius: var(--radius-full);
    background: var(--role-accent-soft);
    color: var(--role-accent);
    font-size: var(--text-xs);
    font-weight: 800;
    white-space: nowrap;
}
.header-user-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--color-canvas);
    padding: 0.3rem 0.6rem 0.3rem 0.3rem;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    transition: border-color 0.2s ease;
}
.header-user-menu .user-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    font-weight: 800;
    background: var(--color-brand);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.header-user-menu .user-avatar.has-custom-photo {
    background: transparent;
    border: 1px solid var(--color-border);
}
.header-user-menu .user-avatar img,
.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}
.header-user-menu .user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    padding-right: 0.25rem;
}
.header-user-menu .user-meta strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text-primary);
    text-transform: capitalize;
    white-space: nowrap;
}
.header-user-menu .user-meta span {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.gear-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 0.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.gear-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text-primary);
}
.user-dropdown-card {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: max-content;
    min-width: 175px;
    max-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    flex-direction: column;
    overflow: hidden;
}
.user-dropdown-link {
    padding: 0.6rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.15s ease;
    white-space: nowrap;
}
.user-dropdown-link:last-child { border-bottom: none; }
.user-dropdown-link:hover { background: var(--color-canvas); }
.user-dropdown-link.danger { color: #ef4444; }
.user-dropdown-link.danger:hover { background: #fef2f2; }

.sidebar-toggle, .sidebar-backdrop { display: none; }
.app-content { padding: 2rem; flex: 1; overflow-y: auto; }
@media (max-width: 900px) {
    .app-sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform 220ms ease; }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.46); z-index: 25; }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .sidebar-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        border: 1px solid var(--color-border) !important;
        background: var(--color-surface) !important;
        color: var(--color-text-primary) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
        flex-shrink: 0 !important;
    }
    .app-header {
        padding: 0.55rem 0.85rem !important;
        gap: 0.6rem !important;
        align-items: center !important;
        min-height: 54px !important;
    }
    .header-title-group {
        flex: 1 !important;
        min-width: 0 !important;
        gap: 0.6rem !important;
        align-items: center !important;
    }
    .header-title-text {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .breadcrumb-kicker {
        display: none !important;
    }
    .header-page-title {
        font-size: 1.02rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
    }
    .header-actions {
        gap: 0.35rem !important;
        flex-shrink: 0 !important;
        align-items: center !important;
    }
    .header-user-menu {
        padding: 0.2rem 0.35rem 0.2rem 0.2rem !important;
        gap: 0.35rem !important;
        margin-left: 0 !important;
        background: var(--color-surface) !important;
        border-radius: 9999px !important;
        border: 1px solid var(--color-border) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }
    .header-user-menu .user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
    }
    .header-user-menu .user-meta {
        display: none !important;
    }
    .gear-btn {
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .app-main {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
    }
    .app-content {
        padding: 0.85rem !important;
        overflow-y: auto !important;
    }
    .header-primary-action, .header-status-pill { display: none !important; }
}
@media (max-width: 480px) {
    .app-header {
        padding: 0.5rem 0.75rem !important;
    }
    .header-page-title {
        font-size: 0.95rem !important;
    }
}
/* Utilities */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.font-semibold { font-weight: 600; }
.text-muted { color: var(--color-text-secondary); }

/* Animation for loading spinner */
@keyframes spin {
    100% { transform: rotate(360deg); }
}
.lucide-spin {
    animation: spin 1s linear infinite;
}

/* ============================================================
    DML DARK MODE — close to black + light-green accents
    Toggle via <html data-theme="dark">. Light mode buttons are
    dark green (see .role-dml .btn above), dark mode buttons
    switch to light green.
    ============================================================ */
html[data-theme="dark"] {
  --color-brand: #4ade80;
  --color-brand-light: #14532d;
  --color-brand-dark: #22c55e;
  --color-accent: #4ade80;
  --color-accent-bg: #052e16;
  --color-canvas: #070707;
  --color-surface: #141414;
  --color-overlay: #1a1a1a;
  --color-background: #070707;
  --color-sidebar: #0a0a0a;
  --color-sidebar-hover: #1a1a1a;
  --color-text-primary: #f0f0f0;
  --color-text-secondary: #a3a3a3;
  --color-text-muted: #737373;
  --color-text-sidebar: #e5e5e5;
  --color-text-sidebar-muted: #8a8a8a;
  --color-border: #262626;
  --color-border-strong: #333333;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.55);
  --shadow-md: 0 6px 22px rgba(0,0,0,.65);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.75);
}

html[data-theme="dark"] body {
  background: var(--color-canvas);
  color: var(--color-text-primary);
}

/* Layout shells — close to black (inspo dashd.png charcoal) */
html[data-theme="dark"] .app-layout {
  background: #070707;
}
html[data-theme="dark"] .app-sidebar {
  background: #0a0a0a;
  border-right-color: #1f1f1f;
  box-shadow: 8px 0 28px rgba(0,0,0,.65);
}
html[data-theme="dark"] .sidebar-header { border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .brand-mark { background:#141414; border-color:#262626; }
html[data-theme="dark"] .nav-section-label { color:#737373; }
html[data-theme="dark"] .nav-link { color: var(--color-text-sidebar-muted); }
html[data-theme="dark"] .nav-link:hover { background: var(--color-sidebar-hover); color: var(--color-text-sidebar); }
html[data-theme="dark"] .nav-link.active {
  background: #1a1a1a;
  color: #f0f0f0;
  border-color: #333333;
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
}
html[data-theme="dark"] .role-chip {
  background: rgba(74,222,128,.14);
  border-color: rgba(74,222,128,.28);
  color: #bbf7d0;
}

html[data-theme="dark"] .app-main { background: transparent; }
html[data-theme="dark"] .app-header {
  background: rgba(10,10,10,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #1f1f1f;
}
html[data-theme="dark"] .breadcrumb-kicker { color:#4ade80; }
html[data-theme="dark"] .header-title-group h1 { color:#f0f0f0; }
html[data-theme="dark"] .header-title-group p { color:#a3a3a3; }
html[data-theme="dark"] .header-user-menu {
  background: #141414 !important;
  border-color:#262626 !important;
}
html[data-theme="dark"] .header-user-menu .user-meta strong { color:#f0f0f0 !important; }
html[data-theme="dark"] .header-user-menu .user-meta span { color:#a3a3a3 !important; }
html[data-theme="dark"] #sidebar-live-datetime { color:#737373 !important; border-top-color:#262626 !important; }

/* Cards / surfaces — close to black panels */
html[data-theme="dark"] .card {
  background: #141414;
  border-color:#262626;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
html[data-theme="dark"] .kpi-card {
  background: #141414 !important;
  border-color:#262626 !important;
}
html[data-theme="dark"] .kpi-title, html[data-theme="dark"] .kpi-icon-box + div .kpi-title,
html[data-theme="dark"] .kpi-label { color:#a3a3a3 !important; }
html[data-theme="dark"] .kpi-value,
html[data-theme="dark"] .kpi-val { color:#f0f0f0 !important; }
html[data-theme="dark"] .kpi-foot { color:#737373 !important; }
html[data-theme="dark"] .kpi-foot span,
html[data-theme="dark"] .kpi-foot strong,
html[data-theme="dark"] .kpi-foot a { color:#a3a3a3 !important; }
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .panel-head { color:#f0f0f0 !important; border-color:#262626 !important; }

/* Buttons — light green in dark mode (dark green in light mode defined above) — system-wide */
html[data-theme="dark"] .btn,
html[data-theme="dark"] .header-primary-action.btn,
html[data-theme="dark"] .app-layout .btn { background:#4ade80 !important; color:#052e16 !important; border: 1px solid #22c55e !important; }
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .header-primary-action.btn:hover,
html[data-theme="dark"] .app-layout .btn:hover { background:#22c55e !important; border-color:#16a34a !important; color:#052e16 !important; }
/* CMO dark: dark yellow instead of light green */
html[data-theme="dark"] .app-layout.role-cmo .btn,
html[data-theme="dark"] .app-layout.role-cmo .header-primary-action.btn { background:#a16207 !important; border-color:#854d0f !important; color:#fef3c7 !important; }
html[data-theme="dark"] .app-layout.role-cmo .btn:hover,
html[data-theme="dark"] .app-layout.role-cmo .header-primary-action.btn:hover { background:#854d0f !important; border-color:#78350f !important; color:#fef3c7 !important; }
html[data-theme="dark"] .app-layout.role-cmo a[style*="color: var(--color-brand)"] { color:#facc15 !important; }
html[data-theme="dark"] .app-layout.role-cmo { --color-brand:#facc15; --color-brand-dark:#a16207; }
html[data-theme="dark"] .app-layout.role-cmo .breadcrumb-kicker { color:#facc15 !important; }
html[data-theme="dark"] .app-layout.role-cmo .input-field:focus,
html[data-theme="dark"] .app-layout.role-cmo .modal-input:focus { border-color:#facc15 !important; box-shadow:0 0 0 1px #facc15 !important; }
html[data-theme="dark"] .app-layout.role-cmo .category-pill-btn.active { color:#facc15 !important; }
html[data-theme="dark"] .app-layout.role-cmo .category-pill-btn.active .category-pill-badge { background:#a16207 !important; color:#fef3c7 !important; }
html[data-theme="dark"] .app-layout.role-cmo [style*="color: #16a34a"],
html[data-theme="dark"] .app-layout.role-cmo [style*="#15803d" i] { color:#facc15 !important; }
html[data-theme="dark"] .app-layout.role-cmo .role-chip { background:rgba(161,98,7,.18) !important; border-color:rgba(161,98,7,.32) !important; color:#fde68a !important; }
html[data-theme="dark"] .app-layout.role-cmo .status-pill-btn.active { color:#facc15 !important; }
html[data-theme="dark"] .app-layout.role-cmo .status-pill-btn.active .status-pill-badge { background:#a16207 !important; color:#fef3c7 !important; }
/* CMO lifecycle — border-only pills grey→yellow */
html[data-theme="dark"] .app-layout.role-cmo [style*="background: transparent"][style*="#047857" i],
html[data-theme="dark"] .app-layout.role-cmo [style*="background: transparent"][style*="#15803d" i] { border-color:#facc15 !important; color:#facc15 !important; }
html[data-theme="dark"] .app-layout.role-cmo [style*="#047857" i],
html[data-theme="dark"] .app-layout.role-cmo [style*="#15803d" i] { color:#facc15 !important; }
html[data-theme="dark"] .app-layout.role-cmo [style*="border: 1px solid #047857" i],
html[data-theme="dark"] .app-layout.role-cmo [style*="border: 1px solid #15803d" i] { border-color:#facc15 !important; }
html[data-theme="dark"] .btn-secondary {
  background:#141414 !important; color:#e5e5e5 !important; border-color:#333333 !important;
}
html[data-theme="dark"] .btn-secondary:hover { background:#1a1a1a !important; }

/* Forms — close to black */
html[data-theme="dark"] .input-field,
html[data-theme="dark"] input.input-field, html[data-theme="dark"] select.input-field,
html[data-theme="dark"] .modal-input {
  background:#0f0f0f !important; border-color:#333333 !important; color:#f0f0f0 !important;
}
html[data-theme="dark"] .input-field:focus,
html[data-theme="dark"] .modal-input:focus { border-color:#4ade80 !important; box-shadow: 0 0 0 1px #4ade80 !important; }
html[data-theme="dark"] label, html[data-theme="dark"] .modal-label { color:#a3a3a3 !important; }
html[data-theme="dark"] .filter-toolbar,
html[data-theme="dark"] .category-pills-group,
html[data-theme="dark"] .status-pills-group { background:#0f0f0f !important; border-color:#262626 !important; }
html[data-theme="dark"] .category-pill-btn,
html[data-theme="dark"] .status-pill-btn { color:#737373; }
html[data-theme="dark"] .category-pill-btn.active,
html[data-theme="dark"] .status-pill-btn.active { background:#1a1a1a !important; color:#4ade80 !important; box-shadow: 0 1px 6px rgba(0,0,0,.5) !important; border:1px solid #333 !important; }
html[data-theme="dark"] .category-pill-badge,
html[data-theme="dark"] .status-pill-badge { background:#1a1a1a !important; color:#a3a3a3 !important; }
html[data-theme="dark"] .category-pill-btn.active .category-pill-badge,
html[data-theme="dark"] .status-pill-btn.active .status-pill-badge { background:#4ade80 !important; color:#052e16 !important; }
html[data-theme="dark"] .filter-card { background:#141414 !important; border-color:#262626 !important; }
html[data-theme="dark"] #assistance-list-container { border-color:#262626 !important; }

/* Tables — close to black grid */
html[data-theme="dark"] table th {
  background:#0f0f0f !important; color:#737373 !important; border-color:#262626 !important;
}
html[data-theme="dark"] table td { border-color: rgba(38,38,38,.95) !important; color:#e5e5e5 !important; }
html[data-theme="dark"] tbody tr:hover, html[data-theme="dark"] .service-row:hover { background:#1a1a1a !important; }
html[data-theme="dark"] .services-table-wrapper th { background:#0f0f0f !important; }

/* Hardcoded inline surfaces that appear in DML pages — override for dark (close to black) */
html[data-theme="dark"] .services-kpi-grid + .card,
html[data-theme="dark"] #services-container { border-color:#262626 !important; }
html[data-theme="dark"] div[style*="background: #ffffff"],
html[data-theme="dark"] div[style*="background:#ffffff"],
html[data-theme="dark"] div[style*="background-color: #ffffff"],
html[data-theme="dark"] div[style*="background: #fff"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background-color: #f8fafc"],
html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background-color: #f1f5f9"],
html[data-theme="dark"] [style*="background: #F8FAFC"],
html[data-theme="dark"] [style*="background: #F1F5F9"] { background:#0f0f0f !important; border-color:#262626 !important; }
html[data-theme="dark"] [style*="background-color: #fff"] { background-color:#0f0f0f !important; }
html[data-theme="dark"] [style*="background-color: #f8fafc"] { background-color:#0f0f0f !important; }
html[data-theme="dark"] [style*="background-color: #f1f5f9"] { background-color:#0f0f0f !important; }
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background: rgb(248"] { background:#0f0f0f !important; }

/* Search / filter inputs — must stay dark (were #fff / #cbd5e1 hardcoded) */
html[data-theme="dark"] #search-input,
html[data-theme="dark"] #soaSearchInput,
html[data-theme="dark"] #filter-subcat,
html[data-theme="dark"] input[id*="search"],
html[data-theme="dark"] input[type="text"][style*="#cbd5e1"],
html[data-theme="dark"] select[style*="#cbd5e1"],
html[data-theme="dark"] input[style*="border: 1px solid #cbd5e1"],
html[data-theme="dark"] select[style*="border: 1px solid #cbd5e1"] {
  background:#0f0f0f !important;
  background-color:#0f0f0f !important;
  border-color:#333333 !important;
  color:#f0f0f0 !important;
  -webkit-text-fill-color:#f0f0f0 !important;
}
html[data-theme="dark"] #search-input::placeholder,
html[data-theme="dark"] #soaSearchInput::placeholder,
html[data-theme="dark"] input::placeholder { color:#737373 !important; opacity:1 !important; }
html[data-theme="dark"] #search-input:focus,
html[data-theme="dark"] #soaSearchInput:focus { border-color:#4ade80 !important; box-shadow: 0 0 0 1px #4ade80 !important; }
html[data-theme="dark"] [style*="color: #94a3b8"][data-lucide="search"],
html[data-theme="dark"] i[style*="color: #94a3b8"] { color:#737373 !important; }
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] select[style*="background: #fff"] { background:#0f0f0f !important; background-color:#0f0f0f !important; }

/* KPI icon boxes — green-tinted for dark */
html[data-theme="dark"] .kpi-icon-box { filter: brightness(.9) saturate(1.05); border:1px solid rgba(255,255,255,.08); }
html[data-theme="dark"] [style*="background: #e0f2fe"],
html[data-theme="dark"] [style*="background:#e0f2fe"],
html[data-theme="dark"] [style*="background-color: #e0f2fe"] { background:#141414 !important; color:#4ade80 !important; border-color:#262626 !important; }
html[data-theme="dark"] [style*="background: #ecfdf5"],
html[data-theme="dark"] [style*="background:#ecfdf5"] { background:#141414 !important; color:#4ade80 !important; border-color:#262626 !important; }
html[data-theme="dark"] [style*="background: #dbeafe"] { background:#141414 !important; color:#4ade80 !important; border-color:#262626 !important; }
html[data-theme="dark"] [style*="background: #fef3c7"] { background:#141414 !important; color:#4ade80 !important; border-color:#262626 !important; }

/* Text colors hardcoded — map blue/gray to neutral/green (both spaced and compact) */
html[data-theme="dark"] [style*="color: #0f172a" i],
html[data-theme="dark"] [style*="color:#0f172a" i],
html[data-theme="dark"] [style*="0f172a" i] { color:#f0f0f0 !important; }
html[data-theme="dark"] [style*="color: #334155" i],
html[data-theme="dark"] [style*="color:#334155" i],
html[data-theme="dark"] [style*="334155" i] { color:#d4d4d4 !important; }
html[data-theme="dark"] [style*="color: #1e293b" i],
html[data-theme="dark"] [style*="color:#1e293b" i],
html[data-theme="dark"] [style*="1e293b" i] { color:#d4d4d4 !important; }
html[data-theme="dark"] [style*="color: #475569" i],
html[data-theme="dark"] [style*="color:#475569" i],
html[data-theme="dark"] [style*="475569" i] { color:#a3a3a3 !important; }
html[data-theme="dark"] [style*="color: #171717" i],
html[data-theme="dark"] [style*="color:#171717" i] { color:#f0f0f0 !important; }
html[data-theme="dark"] [style*="color: #64748b" i],
html[data-theme="dark"] [style*="color:#64748b" i] { color:#737373 !important; }
html[data-theme="dark"] [style*="color: #94a3b8" i],
html[data-theme="dark"] [style*="color:#94a3b8" i] { color:#737373 !important; }
html[data-theme="dark"] [style*="color: #3b82f6" i],
html[data-theme="dark"] [style*="color:#3b82f6" i],
html[data-theme="dark"] [style*="color: #2563eb" i],
html[data-theme="dark"] [style*="color:#2563eb" i],
html[data-theme="dark"] [style*="color: #1d4ed8" i],
html[data-theme="dark"] [style*="color:#1d4ed8" i] { color:#4ade80 !important; }

/* Progress track in dml_dashboard (was #f1f5f9) + CMO lifecycle empty bar #e2e8f0 */
html[data-theme="dark"] div[style*="background: #f1f5f9"] { background:#0f0f0f !important; }
html[data-theme="dark"] [style*="background: #e2e8f0"] { background:#262626 !important; }
html[data-theme="dark"] [style*="background:#e2e8f0"] { background:#262626 !important; }

/* Comprehensive inline-color overrides — makes every DML structure responsive */
html[data-theme="dark"] [style*="#dcfce7"],
html[data-theme="dark"] [style*="#DCFCE7"],
html[data-theme="dark"] [style*="background-color: #dcfce7"],
html[data-theme="dark"] [style*="background: #dcfce7"] { background-color:#0f1f0f !important; border-color:#14532d !important; color:#4ade80 !important; }
html[data-theme="dark"] [style*="#fee2e2"],
html[data-theme="dark"] [style*="#FEE2E2"],
html[data-theme="dark"] [style*="background-color: #fee2e2"] { background-color:#1a0a0a !important; border-color:#7f1d1d !important; color:#fca5a5 !important; }
html[data-theme="dark"] [style*="#F0FDF4"],
html[data-theme="dark"] [style*="background-color: #F0FDF4"] { background-color:#0a1a0f !important; border-color:#14532d !important; color:#4ade80 !important; }
html[data-theme="dark"] [style*="#86EFAC"],
html[data-theme="dark"] [style*="#86efac"] { border-color:#14532d !important; }
html[data-theme="dark"] [style*="color: #16A34A"],
html[data-theme="dark"] [style*="color: #16a34a"],
html[data-theme="dark"] [style*="color: #15803d"],
html[data-theme="dark"] [style*="color:#15803d"] { color:#4ade80 !important; }
html[data-theme="dark"] [style*="color: #15803d"] { color:#4ade80 !important; }
html[data-theme="dark"] [style*="#f1f5f9"][style*="color: #334155"],
html[data-theme="dark"] [style*="background: #f1f5f9"] { color:#737373 !important; }
html[data-theme="dark"] [style*="border-left: 4px solid #16a34a"],
html[data-theme="dark"] [style*="border-left: 4px solid #0284c7"],
html[data-theme="dark"] [style*="border-left: 4px solid #8b5cf6"] { border-left-color:#262626 !important; }
html[data-theme="dark"] [style*="background: rgba(15, 118, 110"],
html[data-theme="dark"] [style*="background: rgba(22, 163, 74"],
html[data-theme="dark"] [style*="background: rgba(2, 132, 199"],
html[data-theme="dark"] [style*="background: rgba(139, 92, 246"] { background:rgba(20,20,20,.9) !important; }
html[data-theme="dark"] [style*="color: #16a34a"][style*="font-weight: 700"],
html[data-theme="dark"] [style*="color:#16a34a"] { color:#4ade80 !important; }
html[data-theme="dark"] [style*="color: #0284c7"],
html[data-theme="dark"] [style*="color:#0284c7"] { color:#4ade80 !important; }
html[data-theme="dark"] [style*="color: #8b5cf6"] { color:#a3a3a3 !important; }
html[data-theme="dark"] [style*="color: #6366f1"],
html[data-theme="dark"] [style*="#6366f1"] { color:#4ade80 !important; }
html[data-theme="dark"] [style*="#818cf8"],
html[data-theme="dark"] [style*="linear-gradient(90deg, #6366f1"] { background: linear-gradient(90deg, #14532d 0%, #4ade80 100%) !important; }
html[data-theme="dark"] [style*="linear-gradient(90deg, var(--color-brand) 0%, #38bdf8"] { background: linear-gradient(90deg, #14532d 0%, #4ade80 100%) !important; }
html[data-theme="dark"] [style*="background: #6366f1"] { background:#14532d !important; }
html[data-theme="dark"] [style*="#fef3c7"] { background-color:#1a1a0a !important; color:#fca5a5 !important; border-color:#333 !important; }
html[data-theme="dark"] .avail-yes { background:#0f1f0f !important; color:#4ade80 !important; border:1px solid #14532d !important; }
html[data-theme="dark"] .avail-no { background:#1a0a0a !important; color:#fca5a5 !important; border:1px solid #7f1d1d !important; }
html[data-theme="dark"] [style*="color: #ef4444"],
html[data-theme="dark"] [style*="color:#ef4444"] { color:#fca5a5 !important; }
html[data-theme="dark"] [style*="border: 1px solid #ef4444"] { border-color:#7f1d1d !important; }
html[data-theme="dark"] [style*="border: 1px solid #22c55e"] { border-color:#14532d !important; }
html[data-theme="dark"] [style*="background: #ffffff"][style*="border-radius"] { background:#141414 !important; }
html[data-theme="dark"] [style*="background-color: var(--color-canvas)"],
html[data-theme="dark"] [style*="background: var(--color-canvas)"] { background-color:#0f0f0f !important; }
html[data-theme="dark"] [style*="background-color: var(--color-overlay)"],
html[data-theme="dark"] [style*="background: var(--color-overlay)"] { background-color:#1a1a1a !important; }

/* Rendered Services — Status / SOA pills — border-only (no fill) */
html[data-theme="dark"] [style*="background: transparent"][style*="#15803d" i] { background: transparent !important; border-color:#4ade80 !important; color:#4ade80 !important; }
html[data-theme="dark"] [style*="background: transparent"][style*="#b45309" i] { background: transparent !important; border-color:#fbbf24 !important; color:#fbbf24 !important; }
html[data-theme="dark"] [style*="border: 1px solid #15803d" i] { border-color:#4ade80 !important; }
html[data-theme="dark"] [style*="border: 1px solid #b45309" i] { border-color:#fbbf24 !important; }
/* legacy filled pills (kept for any older markup) */
html[data-theme="dark"] [style*="#f0fdf4" i],
html[data-theme="dark"] [style*="f0fdf4" i] { background:#052e16 !important; color:#4ade80 !important; border-color:#14532d !important; }
html[data-theme="dark"] [style*="#bbf7d0" i] { border-color:#14532d !important; }
html[data-theme="dark"] [style*="#fffbeb" i],
html[data-theme="dark"] [style*="fffbeb" i] { background:#1a1205 !important; color:#fbbf24 !important; border-color:#78350f !important; }
html[data-theme="dark"] [style*="#fde68a" i] { border-color:#78350f !important; }
html[data-theme="dark"] [style*="#b45309" i] { color:#fbbf24 !important; }
html[data-theme="dark"] [style*="#15803d" i] { color:#4ade80 !important; }
html[data-theme="dark"] [style*="#f0f9ff" i] { background:#0a141e !important; border-color:#1e3a4a !important; color:#38bdf8 !important; }
html[data-theme="dark"] [style*="#bae6fd" i] { border-color:#1e3a4a !important; }
html[data-theme="dark"] [style*="#0284c7" i] { color:#38bdf8 !important; }

/* Smooth transition when toggling — color-only */
html[data-theme="dark"] .card, html[data-theme="dark"] .app-sidebar, html[data-theme="dark"] .app-header,
html[data-theme="dark"] .kpi-card, html[data-theme="dark"] table th, html[data-theme="dark"] table td,
html[data-theme="dark"] div, html[data-theme="dark"] span, html[data-theme="dark"] p, html[data-theme="dark"] h3 {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

/* Login dark — close to black (full coverage) */
html[data-theme="dark"] .login-bg { background:#070707 !important; }
html[data-theme="dark"] .login-bg__grid {
  opacity:.28 !important;
  background-image: radial-gradient(circle at 1px 1px, rgba(74,222,128,0.08) 1.2px, transparent 0) !important;
}
html[data-theme="dark"] .login-bg__orb--1 { background: radial-gradient(circle at 32% 32%, rgba(20,83,45,0.22), transparent 68%) !important; }
html[data-theme="dark"] .login-bg__orb--2 { background: radial-gradient(circle at 68% 68%, rgba(16,185,129,0.14), transparent 70%) !important; }
html[data-theme="dark"] .login-card-inner { background:#141414 !important; border:1px solid #262626 !important; }
html[data-theme="dark"] .login-animated-wrap { background:#141414 !important; box-shadow:0 24px 48px rgba(0,0,0,.70) !important; border:1px solid #262626 !important; }
/* Two-logo panel — was gradient white (#f8fafc) — now flat near-black */
html[data-theme="dark"] .login-card-inner div[style*="linear-gradient"] {
  background: #141414 !important;
  background-image: none !important;
  border-right-color: #262626 !important;
  border-color: #262626 !important;
}
html[data-theme="dark"] .login-card-inner div[style*="border-right"] { border-right-color:#262626 !important; border-color:#262626 !important; }
html[data-theme="dark"] .login-card-inner h2[style*="#1e293b"],
html[data-theme="dark"] .login-card-inner h3[style*="#1e293b"] { color:#f0f0f0 !important; }
html[data-theme="dark"] .login-card-inner p[style*="#64748b"] { color:#a3a3a3 !important; }
html[data-theme="dark"] .login-card-inner label[style*="#334155"] { color:#a3a3a3 !important; }
html[data-theme="dark"] .login-card-inner input[style*="#cbd5e1"],
html[data-theme="dark"] .login-card-inner input[style*="#f8fafc"] { background-color:#0f0f0f !important; border-color:#333333 !important; color:#f0f0f0 !important; }
html[data-theme="dark"] .login-card-inner input::placeholder { color:#737373 !important; }
html[data-theme="dark"] .login-card-inner i[style*="#94a3b8"] { color:#737373 !important; }
html[data-theme="dark"] .login-card-inner a[style*="var(--color-brand)"] { color:#4ade80 !important; }
html[data-theme="dark"] .login-card-inner button[style*="var(--color-brand)"] { background:#4ade80 !important; border-color:#22c55e !important; color:#052e16 !important; }
html[data-theme="dark"] .login-card-inner button[style*="var(--color-brand)"]:hover { background:#22c55e !important; }
html[data-theme="dark"] .login-card-inner div[style*="background-color: #f8fafc"][style*="border-top"] { background-color:#0f0f0f !important; border-top-color:#262626 !important; }
html[data-theme="dark"] .login-card-inner div[style*="background-color: #f8fafc"][style*="color: #94a3b8"] { color:#737373 !important; }
html[data-theme="dark"] #loginPopup [style*="background: #ffffff"] { background:#141414 !important; border-color:#262626 !important; }
html[data-theme="dark"] .login-animated-wrap + div { border-color:#262626 !important; }

/* Modal dark — close to black */
html[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.62) !important; }
html[data-theme="dark"] .modal-dialog { background:#141414 !important; border-color:#262626 !important; }
html[data-theme="dark"] .modal-header { background:#141414 !important; border-color:#262626 !important; }
html[data-theme="dark"] .modal-body { background:#141414; }
html[data-theme="dark"] .modal-footer { border-color:#262626 !important; }
html[data-theme="dark"] .modal-close-btn { background:#0f0f0f; border-color:#262626; color:#a3a3a3; }

/* Alerts / badges adapt */
html[data-theme="dark"] .badge { border-color: #333333; }
/* Admin blue preservation — keep CGSO blue in dark instead of DML green */
html[data-theme="dark"] .app-layout.role-admin [style*="#2563eb" i],
html[data-theme="dark"] .app-layout.role-admin [style*="#1d4ed8" i],
html[data-theme="dark"] .app-layout.role-admin [style*="#0284c7" i],
html[data-theme="dark"] .app-layout.role-admin [style*="#0ea5e9" i] { color:#60a5fa !important; border-color:#1e3a5f !important; }
html[data-theme="dark"] .app-layout.role-admin [style*="background: #2563eb" i] { background:#1e3a5f !important; }

/* ============================================================
   ADMIN (CGSO) — make all admin elements responsive
   Panels, KPI, filter, tables, settings toggle rows
   Admin keeps blue accent in dark (not DML green)
   ============================================================ */
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .op-card,
html[data-theme="dark"] .table-panel,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .filter-card { background:#141414 !important; border-color:#262626 !important; }
html[data-theme="dark"] .panel-head,
html[data-theme="dark"] .admin-card-head { background:transparent !important; border-bottom-color:#262626 !important; }
html[data-theme="dark"] .kpi-card.k1::after,
html[data-theme="dark"] .kpi-card.k2::after,
html[data-theme="dark"] .kpi-card.k3::after,
html[data-theme="dark"] .kpi-card.k4::after { opacity:.9; }
html[data-theme="dark"] .progress-track,
html[data-theme="dark"] div[style*="background:#f1f5f9"][style*="border-radius:9999px"] { background:#0f0f0f !important; }
html[data-theme="dark"] [style*="linear-gradient(90deg,#0ea5e9"] { background: linear-gradient(90deg,#1e40af,#60a5fa) !important; }
html[data-theme="dark"] [style*="linear-gradient(90deg,#f59e0b"] { background: linear-gradient(90deg,#92400e,#f59e0b) !important; }
/* Admin icon BGs — keep blue/yellow/purple but darkened (not forced green) */
html[data-theme="dark"] [style*="#eff6ff" i] { background: rgba(37,99,235,.14) !important; border-color:#1e3a5f !important; color:#60a5fa !important; }
html[data-theme="dark"] [style*="#fefce8" i] { background:#1a1205 !important; border-color:#78350f !important; color:#fbbf24 !important; }
html[data-theme="dark"] [style*="#faf5ff" i] { background: rgba(139,92,246,.13) !important; border-color:#3a2a5a !important; color:#a78bfa !important; }
html[data-theme="dark"] [style*="#f0fdf4" i]:not([style*="background: transparent"]) { background:#052e16 !important; border-color:#14532d !important; color:#4ade80 !important; }
html[data-theme="dark"] [style*="#fef2f2" i] { background:#1a0a0a !important; border-color:#7f1d1d !important; color:#fca5a5 !important; }
html[data-theme="dark"] [style*="#fecaca" i] { border-color:#7f1d1d !important; }
html[data-theme="dark"] [style*="#bfdbfe" i] { border-color:#1e3a5f !important; background:rgba(37,99,235,.12) !important; }
html[data-theme="dark"] [style*="#fef08a" i] { border-color:#78350f !important; background:#1a1205 !important; }
html[data-theme="dark"] .admin-input,
html[data-theme="dark"] .search-wrap input { background:#0f0f0f !important; border-color:#333333 !important; color:#f0f0f0 !important; }
html[data-theme="dark"] .search-wrap input::placeholder { color:#737373 !important; }
html[data-theme="dark"] .chip { background:#1a1a1a !important; border-color:#333 !important; color:#a3a3a3 !important; }
html[data-theme="dark"] .chip.active { background:#f0f0f0 !important; color:#070707 !important; border-color:#f0f0f0 !important; }
html[data-theme="dark"] .app-layout.role-admin .chip.active { background:#2563eb !important; color:#fff !important; border-color:#2563eb !important; }
html[data-theme="dark"] .toggle-row { background:#141414 !important; border-color:#262626 !important; }
html[data-theme="dark"] .toggle-row.active { background: linear-gradient(180deg,#0f172a,#141414) !important; border-color:#2563eb !important; }
html[data-theme="dark"] .toggle-row.warn.active { background: linear-gradient(180deg,#1a1205,#141414) !important; border-color:#a16207 !important; }
html[data-theme="dark"] .info-item { background:#0f0f0f !important; border-color:#262626 !important; }
html[data-theme="dark"] .faux-table th { background:#0f0f0f !important; color:#737373 !important; border-color:#262626 !important; }
html[data-theme="dark"] .faux-table td { border-color:#262626 !important; }
html[data-theme="dark"] .faux-table tbody tr:hover td { background:#1a1a1a !important; }
html[data-theme="dark"] .timeline-item { border-bottom-color:#262626 !important; }
html[data-theme="dark"] .quick-card { background:#141414 !important; border-color:#262626 !important; }
html[data-theme="dark"] .quick-card:hover { border-color:#333 !important; }
html[data-theme="dark"] .admin-hero,
html[data-theme="dark"] .reports-hero,
html[data-theme="dark"] .logs-hero,
html[data-theme="dark"] .settings-hero { filter: brightness(.92) saturate(1.05); }
html[data-theme="dark"] .app-layout.role-admin { --color-brand:#60a5fa; --color-brand-dark:#2563eb; }

/* Scrollbar for dark — width stays 10px (same as light above), only colors switch */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0a0a0a; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #262626; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#262626; border-radius:8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background:#0a0a0a; }

/* Toggle button */
.dml-theme-toggle {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.44rem .7rem; border-radius:9999px;
  border:1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-secondary); font-size:.78rem; font-weight:700;
  cursor:pointer; transition: all 150ms ease;
}
html[data-theme="dark"] .dml-theme-toggle {
  background:#1a1a1a; border-color:#262626; color:#4ade80;
}
.dml-theme-toggle:hover { border-color: var(--color-border-strong); }
html[data-theme="dark"] .dml-theme-toggle:hover { background:#1f1f1f; }
.dml-theme-toggle svg { width:15px; height:15px; }

/* OTP send-button loading state (shared by all OTP-sending forms) */
.btn.is-loading, button.is-loading { pointer-events: none; opacity: .92; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.otp-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(128,128,128,.4); border-top-color: currentColor; animation: otp-spin .7s linear infinite; flex-shrink: 0; }
.btn:not(.btn-secondary) .otp-spinner { border-color: rgba(255,255,255,.45); border-top-color: #fff; }
@keyframes otp-spin { to { transform: rotate(360deg); } }

/* DML Content Area Watermark Background */
html.role-dml .app-content {
    position: relative;
}

html.role-dml .app-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(300px, 65vw, 720px);
    height: clamp(300px, 65vw, 720px);
    max-width: 88%;
    max-height: 88%;
    background-image: url('../assets/images/dml.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: grayscale(100%) opacity(0.06);
    pointer-events: none;
    z-index: 0;
}

html[data-theme="dark"].role-dml .app-content::before {
    filter: grayscale(100%) invert(100%) opacity(0.05);
}

/* CMO Watermark (Grey Cadiz Seal) */
html.role-cmo .app-content,
.app-layout.role-cmo .app-content {
    position: relative;
}

html.role-cmo .app-content::before,
.app-layout.role-cmo .app-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(300px, 65vw, 720px);
    height: clamp(300px, 65vw, 720px);
    max-width: 88%;
    max-height: 88%;
    background-image: url('../assets/images/cadiz.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: grayscale(100%) opacity(0.06);
    pointer-events: none;
    z-index: 0;
}

html[data-theme="dark"].role-cmo .app-content::before,
html[data-theme="dark"] .app-layout.role-cmo .app-content::before {
    filter: grayscale(100%) invert(100%) opacity(0.05);
}