/* =============================================================================
 * SLAR — Application stylesheet
 * Single source of truth for the "Trust & Authority" navy design system.
 *
 * Layers:
 *   1. @font-face         — self-hosted Plus Jakarta Sans
 *   2. :root tokens       — --slar-* primitives (the design system)
 *   3. Bootstrap remap    — --bs-* variables reference the tokens so existing
 *                           utility classes adopt the palette
 *   4. Components         — sidebar, topnav, auth layout, helpers
 *   5. Accessibility      — focus ring, skip link, reduced motion
 *   6. Dark mode          — stub (future, additive)
 *
 * Loaded after Bootstrap + Bootstrap Icons in both layouts, with a
 * ?v=APP_VERSION cache-buster (nginx serves CSS as immutable).
 * ============================================================================= */

/* 1. ---- Fonts --------------------------------------------------------------- */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/plus-jakarta-sans/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../vendor/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/plus-jakarta-sans/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../vendor/plus-jakarta-sans/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');
}

/* 2. ---- Design tokens (single source of truth) ----------------------------- */
:root {
    /* Palette — Trust & Authority navy. Contrast verified WCAG AA/AAA. */
    --slar-primary:        #0F172A; /* structural / brand navy */
    --slar-primary-hover:  #1E293B;
    --slar-secondary:      #334155; /* slate — muted text, secondary controls */
    --slar-accent:         #0369A1; /* CTA / links (5.93:1 on white) */
    --slar-accent-hover:   #025E8C;
    --slar-bg:             #F8FAFC; /* page background */
    --slar-surface:        #FFFFFF; /* cards / sheets */
    --slar-fg:             #020617; /* body text */
    --slar-muted:          #E8ECF1; /* subtle fills */
    --slar-border:         #E2E8F0;
    --slar-destructive:    #DC2626;
    --slar-on-primary:     #FFFFFF;

    /* Structural composites */
    --slar-sidebar-bg:     linear-gradient(180deg, #1E293B, #0F172A 55%, #020617);
    --slar-sidebar-active:  linear-gradient(90deg, rgba(3, 105, 161, .30), rgba(3, 105, 161, .06));
    --slar-sidebar-width:  250px;
    --slar-topnav-height:  56px;

    /* Type scale (12 → 36) */
    --slar-fs-xs:   .75rem;
    --slar-fs-sm:   .875rem;
    --slar-fs-base: 1rem;
    --slar-fs-lg:   1.125rem;
    --slar-fs-xl:   1.5rem;
    --slar-fs-2xl:  1.875rem;
    --slar-fs-3xl:  2.25rem;

    /* Spacing (4 / 8 rhythm) */
    --slar-space-1: .25rem;
    --slar-space-2: .5rem;
    --slar-space-3: .75rem;
    --slar-space-4: 1rem;
    --slar-space-6: 1.5rem;
    --slar-space-8: 2rem;

    /* Radii */
    --slar-radius-sm: .375rem;
    --slar-radius:    .5rem;
    --slar-radius-lg: .75rem;

    /* Elevation */
    --slar-shadow-sm: 0 1px 2px rgba(2, 6, 23, .06), 0 1px 3px rgba(2, 6, 23, .08);
    --slar-shadow:    0 4px 12px rgba(2, 6, 23, .08);
    --slar-shadow-lg: 0 10px 40px rgba(2, 6, 23, .10);

    /* Font + focus ring */
    --slar-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --slar-ring:       #0369A1;
    --slar-ring-width: 3px;

    /* 3. ---- Bootstrap 5.3 remap (utilities/components pick up the palette) --- */
    --bs-body-bg:              var(--slar-bg);
    --bs-body-color:           var(--slar-fg);
    --bs-body-font-family:     var(--slar-font-sans);
    --bs-emphasis-color:       var(--slar-fg);
    --bs-secondary-color:      var(--slar-secondary);   /* .text-muted -> slate */
    --bs-tertiary-bg:          var(--slar-muted);
    --bs-border-color:         var(--slar-border);

    --bs-primary:              var(--slar-accent);
    --bs-primary-rgb:          3, 105, 161;
    --bs-primary-text-emphasis: #024C75;
    --bs-primary-bg-subtle:    #D6EAF4;
    --bs-primary-border-subtle:#AFD3E8;

    --bs-secondary:            var(--slar-secondary);
    --bs-secondary-rgb:        51, 65, 85;
    --bs-secondary-text-emphasis: #1E293B;
    --bs-secondary-bg-subtle:  #E8ECF1;
    --bs-secondary-border-subtle: #E2E8F0;

    --bs-danger:               var(--slar-destructive);
    --bs-danger-rgb:           220, 38, 38;
    --bs-danger-text-emphasis: #B91C1C;
    --bs-danger-bg-subtle:     #FBE3E3;
    --bs-danger-border-subtle: #F4C2C2;

    --bs-link-color-rgb:       3, 105, 161;
    --bs-link-hover-color-rgb: 2, 76, 117;

    --bs-focus-ring-color:     rgba(3, 105, 161, .35);
}

/* 4. ---- Base + components --------------------------------------------------- */
body {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Navy headings (no headings sit on dark surfaces; sidebar/topnav use .nav-link /
   .navbar-brand, not h-tags) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--slar-primary);
    font-weight: 700;
}

/* Surfaces keep separation from the tinted page background */
.card {
    --bs-card-bg: var(--slar-surface);
    --bs-card-border-color: var(--slar-border);
}

/* Primary button = accent CTA. Bootstrap compiles .btn-primary with hardcoded
   --bs-btn-* values, so they must be overridden explicitly here. */
.btn-primary {
    --bs-btn-bg: var(--slar-accent);
    --bs-btn-border-color: var(--slar-accent);
    --bs-btn-hover-bg: var(--slar-accent-hover);
    --bs-btn-hover-border-color: var(--slar-accent-hover);
    --bs-btn-active-bg: var(--slar-accent-hover);
    --bs-btn-active-border-color: var(--slar-accent-hover);
    --bs-btn-disabled-bg: var(--slar-accent);
    --bs-btn-disabled-border-color: var(--slar-accent);
}

/* Secondary outline aligns to slate (back / export / cancel buttons) */
.btn-outline-secondary {
    --bs-btn-color: var(--slar-secondary);
    --bs-btn-border-color: var(--slar-border);
    --bs-btn-hover-bg: var(--slar-secondary);
    --bs-btn-hover-border-color: var(--slar-secondary);
    --bs-btn-active-bg: var(--slar-secondary);
    --bs-btn-active-border-color: var(--slar-secondary);
}

/* Tables: navy-tinted header */
.table-light {
    --bs-table-bg: var(--slar-muted);
    --bs-table-color: var(--slar-primary);
    --bs-table-border-color: var(--slar-border);
}

/* Form control focus tracks the accent */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--slar-accent);
    box-shadow: 0 0 0 .25rem rgba(3, 105, 161, .25);
}

/* ---- Admin shell (migrated from layouts/admin.php inline <style>) ---- */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--slar-sidebar-width);
    background: var(--slar-sidebar-bg);
    padding-top: var(--slar-topnav-height);
    overflow-y: auto;
    z-index: 1000;
}
.sidebar .nav-link {
    color: rgba(255, 255, 255, .72);
    padding: .75rem 1.25rem;
    font-size: var(--slar-fs-sm);
    border-radius: var(--slar-radius-sm);
    margin: .1rem .5rem;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: #fff;
    background: var(--slar-sidebar-active);
}
.sidebar .nav-link.active {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--slar-accent); /* non-color cue for current item */
}
.sidebar .nav-link .bi { margin-right: .5rem; }
.sidebar-heading {
    padding: .75rem 1.25rem;
    font-size: var(--slar-fs-xs);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
    letter-spacing: .05em;
}
.main-content {
    margin-left: var(--slar-sidebar-width);
    margin-top: var(--slar-topnav-height);
}
.top-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    height: var(--slar-topnav-height);
    background: var(--slar-primary) !important; /* override Bootstrap .bg-dark */
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Topnav user dropdown toggle: blend into the navy bar */
.top-navbar .btn-dark {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .12);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: rgba(255, 255, 255, .18);
    --bs-btn-active-border-color: transparent;
}

/* ---- Language switcher (theme-aware; works on light header + dark topnav) ---- */
.slar-lang {
    font-size: var(--slar-fs-xs);
    color: var(--slar-secondary);
    border: 1px solid var(--slar-border);
    background: transparent;
}
.slar-lang:hover { color: var(--slar-primary); border-color: var(--slar-secondary); }
.slar-lang.active {
    background: var(--slar-primary);
    color: #fff;
    border-color: var(--slar-primary);
}
.top-navbar .slar-lang { color: rgba(255, 255, 255, .75); border-color: rgba(255, 255, 255, .25); }
.top-navbar .slar-lang:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.top-navbar .slar-lang.active { background: #fff; color: var(--slar-primary); border-color: #fff; }

/* ---- Public / auth layout ---- */
.slar-public { background: var(--slar-bg); }
.slar-brand {
    color: var(--slar-primary);
    font-weight: 800;
    text-decoration: none;
}
.slar-brand:hover { color: var(--slar-primary-hover); }
.slar-auth-card {
    border: 0;
    border-radius: var(--slar-radius-lg);
    box-shadow: var(--slar-shadow-lg);
}
.slar-icon-2fa { font-size: 2.5rem; }

/* ---- View-specific helpers (absorbed from inline style="" attributes) ---- */
.slar-avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.slar-avatar-fallback {
    font-size: 2rem;
    font-weight: 700;
    background: var(--slar-primary);
    color: #fff;
}
.slar-avatar-sm {
    width: 24px;
    height: 24px;
    object-fit: cover;
}
.slar-qr svg { width: 220px; height: 220px; }
.slar-secret {
    letter-spacing: 2px;
    font-family: var(--bs-font-monospace);
}
.slar-otp {
    letter-spacing: .5em;
    font-weight: 700;
}
.slar-recovery-codes {
    columns: 2;
    font-family: var(--bs-font-monospace);
    letter-spacing: 2px;
}
.slar-recovery-codes li { margin-bottom: .4rem; }
.slar-filter { max-width: 360px; }

/* ---- Security & compliance document (folded from admin/security/index.php) ---- */
.security-doc h1 { font-size: var(--slar-fs-xl); }
.security-doc h2 {
    font-size: 1.15rem;
    margin-top: 1.5rem;
    border-bottom: 1px solid var(--slar-border);
    padding-bottom: .25rem;
}
.security-doc h3 { font-size: 1rem; margin-top: 1rem; color: var(--slar-secondary); }
.security-doc table { width: 100%; border-collapse: collapse; margin: .75rem 0; }
.security-doc td,
.security-doc th { border: 1px solid var(--slar-border); padding: .4rem .6rem; }
.security-doc code {
    background: var(--slar-muted);
    padding: .1rem .3rem;
    border-radius: .2rem;
}

/* ---- Premium split login (layouts/auth_split.php) ----
 * Two columns: a white form panel with a diagonal right edge, over a
 * full-height navy hero image. Collapses to a centered card on a full-bleed
 * background below the lg breakpoint. */
.slar-split { background: var(--slar-bg); }
.slar-split-wrap {
    position: relative;
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}
.slar-split-media {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 38%;
    background-image:
        linear-gradient(135deg, rgba(2, 6, 23, .35), rgba(2, 6, 23, .62)),
        url('/assets/img/login-hero.jpg');
    background-size: cover;
    background-position: center;
}
.slar-split-media-caption {
    position: absolute;
    right: clamp(1.5rem, 4vw, 3rem);
    bottom: clamp(1.5rem, 4vw, 3rem);
    max-width: 42ch;
    text-align: right;
    color: #fff;
}
.slar-split-mark {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: .01em;
}
.slar-split-media-caption p {
    margin: .35rem 0 0 auto;
    max-width: 34ch;
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
}
.slar-split-form {
    position: relative;
    z-index: 2;
    flex: 0 0 56%;
    max-width: 56%;
    display: flex;
    flex-direction: column;
    padding: clamp(1.75rem, 4vw, 4rem);
    background: var(--slar-surface);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
    filter: drop-shadow(8px 0 36px rgba(2, 6, 23, .18));
    overflow-y: auto;
}
.slar-split-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.slar-split-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0;
}
.slar-split-inner {
    width: 100%;
    max-width: 380px;
}
.slar-welcome {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    margin-bottom: .25rem;
}
.slar-split-foot {
    color: var(--slar-secondary);
    font-size: var(--slar-fs-xs);
}
/* Underline-style inputs for the premium feel */
.slar-split .form-label {
    font-size: var(--slar-fs-xs);
    color: var(--slar-secondary);
    margin-bottom: .15rem;
}
.slar-split .form-control {
    border: 0;
    border-bottom: 1px solid var(--slar-border);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}
.slar-split .form-control:focus {
    border-bottom-color: var(--slar-accent);
    box-shadow: none;
}
/* Navy CTA befitting the high-end look */
.slar-split .btn-primary {
    --bs-btn-bg: var(--slar-primary);
    --bs-btn-border-color: var(--slar-primary);
    --bs-btn-hover-bg: var(--slar-primary-hover);
    --bs-btn-hover-border-color: var(--slar-primary-hover);
    --bs-btn-active-bg: var(--slar-primary-hover);
    --bs-btn-active-border-color: var(--slar-primary-hover);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    padding-top: .7rem;
    padding-bottom: .7rem;
}
@media (max-width: 991.98px) {
    .slar-split-wrap {
        padding: 1.5rem;
        align-items: center;
        justify-content: center;
    }
    .slar-split-media { left: 0; }            /* full-bleed background */
    .slar-split-media-caption { display: none; }
    .slar-split-form {
        flex: 0 1 460px;
        max-width: 460px;
        border-radius: var(--slar-radius-lg);
        box-shadow: var(--slar-shadow-lg);
        clip-path: none;
        filter: none;
        padding: clamp(1.5rem, 6vw, 2.5rem);
        overflow: visible;
    }
    .slar-split-body { padding: 1.5rem 0; }
}

/* 5. ---- Accessibility ------------------------------------------------------- */
/* Visible focus for keyboard users (replaces removed outlines). */
:focus-visible {
    outline: var(--slar-ring-width) solid var(--slar-ring);
    outline-offset: 2px;
}
/* On the dark sidebar a navy ring is invisible — use white. */
.sidebar :focus-visible,
.top-navbar :focus-visible { outline-color: #fff; }

/* Skip-to-content link: off-screen until focused. */
.slar-skip-link {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .5rem .9rem;
    background: var(--slar-primary);
    color: #fff;
    border-radius: var(--slar-radius);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform .15s ease;
}
.slar-skip-link:focus {
    transform: translateY(0);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* 6. ---- Dark mode (FUTURE — additive) --------------------------------------
 * The profile already persists `preferred_theme`; both layouts carry a
 * data-bs-theme hook on <html>. To enable dark mode later, redefine the
 * tokens below — no view changes required. Keep all surface/border/text
 * values token-driven so this block is the only place that changes.
 *
 * [data-bs-theme="dark"] {
 *     --slar-bg:       #0B1220;
 *     --slar-surface:  #111A2B;
 *     --slar-fg:       #E2E8F0;
 *     --slar-border:   #233044;
 *     --slar-muted:    #1B2536;
 *     --slar-ring:     #38BDF8;   // light ring is visible on dark surfaces
 *     --bs-body-bg:    var(--slar-bg);
 *     --bs-body-color: var(--slar-fg);
 *     --bs-border-color: var(--slar-border);
 *     // ...remap subtle/emphasis pairs for dark contrast
 * }
 */