/* ============================================================
   once a bounce. Dark Theme — Charcoal & Teal
   Strategy: Limitless data-color-theme="dark" handles ~60% of dark UI.
   This file overrides only what diverges from the once a bounce. design system.
   Design System: ai-governance/coding-standards/design-system-dark-theme.md
   ============================================================ */

/* -- 0. Self-hosted Font Declarations -- */
/* Geologica — brand/heading font. Source: resources/fonts/geologica/webfonts/ */
@font-face {
    font-family: 'Geologica';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/geologica/Geologica-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Geologica';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/geologica/Geologica-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Geologica';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/geologica/Geologica-Bold.woff2') format('woff2');
}

/* Lexend — primary UI font. Source: resources/fonts/lexend/webfonts/ */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/lexend/Lexend-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/lexend/Lexend-Medium.woff2') format('woff2');
}

/* JetBrains Mono - Mono font. Source: resources/fonts/jetbrains-mono/webfonts/ */
@font-face {
    font-family: 'JetBrains-Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
}


/* -- 1. CSS Custom Properties -- */
:root {
    /* Backgrounds */
    --clr-bg-base:       #121214;
    --clr-bg-surface:    #1A1A1F;
    --clr-bg-elevated:   #232328;
    --clr-bg-overlay:    #2D2D35;
    /* Primary: Teal */
    --clr-primary:        #0ABFAD;
    --clr-primary-hover:  #0E8F82;
    --clr-primary-subtle: rgba(10, 191, 173, 0.12);
    --clr-primary-on:     #0A3D37;
    /* Semantic */
    --clr-success:    #4CAF82;  --clr-success-bg:  #142A1F;
    --clr-warning:    #E2A336;  --clr-warning-bg:  #2D2312;
    --clr-danger:     #D45454;  --clr-danger-bg:   #2D1414;
    /* Text */
    --clr-text-primary:   #F0F0F2;
    --clr-text-secondary: #B0B0B8;
    --clr-text-tertiary:  #B0B0B8;
    --clr-text-disabled:  #45454D;
    /* Borders */
    --clr-border-subtle:  rgba(255, 255, 255, 0.06);
    --clr-border-default: rgba(255, 255, 255, 0.10);
    --clr-border-strong:  rgba(255, 255, 255, 0.16);
    /* Typography */
    --font-brand: 'Geologica', system-ui, sans-serif;
    --font-primary: 'Lexend', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains-Mono', mono;
    /* Spacing */
    --space-xs: 4px; --space-sm: 8px;  --space-md: 12px;
    --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px;
    /* Radius */
    --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
    --radius-xl: 12px; --radius-2xl: 16px;
    /* Limitless dark token overrides — diverge from our design system */
    --body-bg:                  #121214;
    --body-color:               #B0B0B8;
    --link-color:               #0ABFAD;
    --link-hover-color:         #0E8F82;
    --border-color:             rgba(255, 255, 255, 0.10);
    --border-color-translucent: rgba(255, 255, 255, 0.06);
    /* DataTables dark overrides — :root vars, always active since theme is always dark */
    --dt-row-hover:       255, 255, 255;
    --dt-row-stripe:      255, 255, 255;
    --dt-column-ordering: 255, 255, 255;
    --dt-html-background: #1A1A1F;
}

/* -- 2. Base Overrides -- */
body { background-color: var(--clr-bg-base); color: var(--clr-text-secondary); }
a { color: var(--clr-primary); }
a:hover { color: var(--clr-primary-hover); }
h1, h2, h3, h4, h5, h6 { color: var(--clr-text-primary); font-weight: 500; }
.text-muted { color: var(--clr-text-tertiary) !important; /* Bootstrap .text-muted uses !important */ }

/* -- 3. Navbar -- */
.navbar-dark { background-color: var(--clr-bg-surface); }
.navbar.border-bottom {
    border-bottom-color: var(--clr-border-subtle) !important;
    /* !important: Bootstrap border-bottom-white utility uses !important */
}
.navbar-dark .navbar-nav .nav-link { color: var(--clr-text-secondary); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: var(--clr-text-primary); }

/* -- 4. Sidebar -- */
.sidebar-dark {
    background-color: var(--clr-bg-surface);
    border-right: 1px solid var(--clr-border-subtle);
}
.sidebar-dark .nav-sidebar .nav-link { color: var(--clr-text-tertiary); }
.sidebar-dark .nav-sidebar .nav-link:hover {
    color: var(--clr-text-secondary);
    background-color: rgba(255, 255, 255, 0.04);
}
.sidebar-dark .nav-sidebar .nav-item-open > .nav-link,
.sidebar-dark .nav-sidebar .nav-link.active {
    color: var(--clr-primary);
    background-color: var(--clr-primary-subtle);
}
.sidebar-dark .nav-group-sub .nav-link { color: var(--clr-text-tertiary); }
.sidebar .btn-flat-white { color: var(--clr-text-tertiary); }
.sidebar .btn-flat-white:hover { color: var(--clr-text-secondary); }

/* -- 5. Page Header -- */
/* Limitless uses --page-header-bg component variable on .page-header-light */
.page-header-light {
    --page-header-bg: var(--clr-bg-surface);
    border-bottom: 1px solid var(--clr-border-subtle);
    box-shadow: none;
}
.page-header-light .page-header-content .page-title { color: var(--clr-text-primary); }
.breadcrumb-item { color: var(--clr-text-tertiary); }
.breadcrumb-item a { color: var(--clr-primary); }
.breadcrumb-item.active { color: var(--clr-text-tertiary); }

/* -- 6. Content Wrapper -- */
.page-content { background-color: var(--clr-bg-base); }
.content-wrapper { background-color: var(--clr-bg-base); }

/* -- 7. Cards -- */
.card {
    background-color: var(--clr-bg-surface);
    border: 0.5px solid var(--clr-border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: none;
}
.card-header {
    background-color: transparent;
    border-bottom-color: var(--clr-border-subtle);
    color: var(--clr-text-primary);
}
.card-body { color: var(--clr-text-secondary); }
.card-footer { background-color: transparent; border-top-color: var(--clr-border-subtle); }

/* -- 8. Buttons -- */
.btn-primary {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
    color: var(--clr-primary-on);
    font-weight: 500;
    border-radius: var(--radius-lg);
    transition: background-color 150ms ease;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--clr-primary-hover);
    border-color: var(--clr-primary-hover);
    color: var(--clr-primary-on);
}
.btn-danger {
    background-color: var(--clr-danger);
    border-color: var(--clr-danger);
    color: #FFFFFF; /* White text on danger bg — only acceptable use of #FFF here */
}
.btn-danger:hover {
    background-color: #B84343; /* Darker danger hover — documented exception */
    border-color: #B84343; /* Darker danger hover — documented exception */
}
.btn-link { color: var(--clr-primary); }
.btn-link:hover { color: var(--clr-primary-hover); }

/* -- 9. Forms -- */
/* Limitless dark mode handles base form styling; override what diverges */
.form-control,
.form-select {
    background-color: var(--clr-bg-base);
    border-color: var(--clr-border-default);
    color: var(--clr-text-primary);
    border-radius: var(--radius-md);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--clr-bg-base);
    border-color: var(--clr-primary);
    color: var(--clr-text-primary);
    box-shadow: 0 0 0 2px rgba(10, 191, 173, 0.15);
}
.form-control::placeholder { color: var(--clr-text-tertiary); }
.form-label, label { color: var(--clr-text-secondary); }
.input-group-text {
    background-color: var(--clr-bg-elevated);
    border-color: var(--clr-border-default);
    color: var(--clr-text-tertiary);
}
.form-check-input:checked { background-color: var(--clr-primary); border-color: var(--clr-primary); }
.form-control-feedback-icon { color: var(--clr-text-tertiary); }

/* -- 10. Tables / DataTables -- */
/* Font sizes use rem for accessibility. Base: 1rem = 16px.
   Minimum: 0.875rem (14px). Below 14px is not used. */
.table > thead > tr > th {
    color: var(--clr-text-tertiary);
    font-size: 0.875rem;  /* was 12px — raised to 14px minimum */
    font-weight: 500;
    text-transform: uppercase;
    border-bottom-color: var(--clr-border-subtle);
}
.table > tbody > tr > td { border-bottom-color: var(--clr-border-subtle); }
.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-info,
.dt-container .dt-paging { color: var(--clr-text-tertiary); }
.dt-container .dt-search input {
    background-color: var(--clr-bg-base);
    border-color: var(--clr-border-default);
    color: var(--clr-text-primary);
}
/* !important needed: DataTables applies inline styles to pagination */
.dt-paging .dt-paging-button { color: var(--clr-text-secondary) !important; }
.dt-paging .dt-paging-button.current {
    background: var(--clr-primary-subtle) !important;
    color: var(--clr-primary) !important;
    border-color: transparent !important;
}
.dt-paging .dt-paging-button:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--clr-text-primary) !important;
    border-color: transparent !important;
}
/* fw-semibold / fw-bold clamp: Bootstrap defines as 600/700, design system max is 500 */
.fw-semibold { font-weight: 500 !important; }
.fw-bold     { font-weight: 500 !important; }

/* -- 11. Badges -- */
/* !important needed: Bootstrap utility classes (bg-success, bg-opacity-10,
   text-success, etc.) use !important internally */
.badge { font-weight: 500; font-size: 0.875rem; /* was 12px — raised to 14px minimum */ padding: 4px 12px; border-radius: 20px; }
.badge.bg-success.bg-opacity-10 { background-color: var(--clr-success-bg) !important; }
.badge.text-success              { color: var(--clr-success) !important; }
.badge.bg-info.bg-opacity-10    { background-color: var(--clr-primary-subtle) !important; }
.badge.text-info                 { color: var(--clr-primary) !important; }
.badge.bg-danger.bg-opacity-10  { background-color: var(--clr-danger-bg) !important; }
.badge.text-danger               { color: var(--clr-danger) !important; }
.badge.bg-warning.bg-opacity-10 { background-color: var(--clr-warning-bg) !important; }
.badge.text-warning              { color: var(--clr-warning) !important; }
.badge.bg-secondary.bg-opacity-10 { background-color: var(--clr-bg-overlay) !important; }
.badge.text-secondary            { color: var(--clr-text-tertiary) !important; }

/* -- 12. Alerts -- */
.alert { border-radius: var(--radius-lg); }
.alert-danger  { background-color: var(--clr-danger-bg);         border-color: var(--clr-danger-bg);         color: var(--clr-danger); }
.alert-success { background-color: var(--clr-success-bg);        border-color: var(--clr-success-bg);        color: var(--clr-success); }
.alert-warning { background-color: var(--clr-warning-bg);        border-color: var(--clr-warning-bg);        color: var(--clr-warning); }
.alert-info    { background-color: var(--clr-primary-subtle);    border-color: var(--clr-primary-subtle);    color: var(--clr-primary); }
.alert-icon    { color: #FFFFFF; /* White text on semantic colored icon bg */ }

/* -- 13. Dropdowns -- */
.dropdown-menu {
    background-color: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border-default);
    box-shadow: none;
}
.dropdown-item { color: var(--clr-text-secondary); }
.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--clr-bg-overlay); color: var(--clr-text-primary); }
.dropdown-divider { border-color: var(--clr-border-subtle); }

/* -- 14. Modals -- */
.modal-content {
    background-color: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border-default);
    color: var(--clr-text-secondary);
}
.modal-header { border-bottom-color: var(--clr-border-subtle); }
.modal-header .modal-title { color: var(--clr-text-primary); }
.modal-footer { border-top-color: var(--clr-border-subtle); }
.modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* -- 15. Footer -- */
.navbar-footer {
    background-color: var(--clr-bg-surface);
    border-top-color: var(--clr-border-subtle) !important; /* override Bootstrap border-top utility */
    color: var(--clr-text-tertiary);
}
.navbar-footer a { color: var(--clr-primary); }

/* -- 16. Scrollbar -- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--clr-bg-base); }
::-webkit-scrollbar-thumb { background: var(--clr-bg-overlay); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-text-disabled); }

/* ============================================
   Typography overrides — Lexend migration
   Design system v1.3 — Sprint 4-01
   ============================================ */
/* Discovery: Limitless does NOT hardcode the previous font in selectors.
   It defines --font-sans-serif in :root with a named font stack, then
   --body-font-family:var(--font-sans-serif). The --btn-font-family and
   --form-select-font-family variables are undefined (inherit from body).
   Overriding --font-sans-serif in :root propagates Lexend to ALL
   Limitless components via the existing CSS variable chain.
   No per-selector overrides needed — Category A is zero.
   Category B: all Limitless components (inherit via --body-font-family).
   Category C: --font-monospace uses SFMono/Consolas stack — no override.
   Category D: .oab-logo — already set to var(--font-brand) in T02. */

/* Override the Limitless/Bootstrap CSS variable chain for font propagation.
   Discovery (T03-FIX): Limitless uses --font-sans-serif (no --bs- prefix).
   Chain: --font-sans-serif → --body-font-family → body { font-family: ... }
   Both chain variables are overridden with a LITERAL font stack (not a nested
   var() reference) to ensure correct resolution in all browsers. */
:root {
    /* Root of the font chain — Limitless :root defines this with the original font stack */
    --font-sans-serif: 'Lexend', system-ui, -apple-system, sans-serif;
    /* Second chain link — explicitly set to the same literal stack */
    --body-font-family: 'Lexend', system-ui, -apple-system, sans-serif;
    /* Body font size — Limitless default is 0.875rem (14px), bumped to 1rem (16px) */
    --body-font-size: 1rem;
}

/* Belt-and-suspenders: explicit body override covers any selector that may
   use font-family or font-size outside the CSS variable chain. */
body {
    font-family: var(--font-primary);
    font-size: 1rem;
}

/* -- 17. Logo Tipográfico — bicolor system -- */
/* Structure: <a class="oab-logo oab-logo-{size}">
     <span class="oab-logo-prefix">once a </span>
     <span class="oab-logo-name">bounce</span>
     <span class="oab-logo-dot">.</span>
   </a> */
.oab-logo {
    font-family: var(--font-brand);
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
}

.oab-logo-prefix {
    color: var(--clr-primary);
    font-weight: 700;
}

.oab-logo-name {
    color: var(--clr-text-primary);
    font-weight: 400;
}

.oab-logo-dot {
    color: var(--clr-primary);
    font-weight: 700;
}

/* Auth/login — large, hero-level */
.oab-logo-lg {
    font-size: 3rem;
}

/* Navbar — compact */
.oab-logo-sm {
    font-size: 2rem;
}

a.oab-logo:hover {
    text-decoration: none;
    opacity: 0.85;
}

/* -- 18. Auth Layout Overrides -- */

/* Auth layout: footer blends with page background */
.page-content > .content-wrapper .navbar-footer {
    background-color: var(--clr-bg-base);
    border-top: none;
}