/**
 * portal.css — project-wide UI foundation (UI overhaul Phase 1).
 *
 * Loaded AFTER assets/css/style.css on every live page. The vendor
 * style.css (Adomx template, 15k+ lines) is never edited; every fix
 * here is an override. Cache-busted via ?v= (Cloudflare caches 4h).
 *
 * Contents:
 *   1. Design tokens (:root custom properties)
 *   2. Z-index normalization
 *   3. Header / logo fixes (style.css 7195-7293 overrides)
 *   4. Container width fixes (style.css 270-280 overrides)
 *   5. Drawer scrim + scroll-lock (used by js/shell.js from Phase 2)
 *   6. Elevation / contrast layer (Phase 4)
 */

/* ------------------------------------------------------------------ */
/* 1. Design tokens                                                    */
/* ------------------------------------------------------------------ */
:root {
    /* Surfaces — 3 elevation tiers (page / card / input) */
    --surface-page: #202334;
    --surface-card: #1a1a2e;
    --surface-input: #12121f;
    --surface-raised: #232742;   /* hovers, active rows */

    /* Borders & lines */
    --border: #2e3350;
    --border-strong: #3d4368;

    /* Text */
    --text: #e8eaf0;
    --text-muted: #9aa5b1;
    --text-faint: #6c7583;

    /* Accent family (single source of truth) */
    --accent: #007bff;
    --accent-bright: #4da3ff;
    --accent-soft: rgba(0, 123, 255, 0.15);

    /* Status */
    --success: #2ecc71;
    --warning: #f0ad4e;
    --danger: #e74c3c;

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(0, 123, 255, 0.35);

    /* Spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* Radii */
    --radius: 8px;
    --radius-sm: 5px;

    /* Z-index scale */
    --z-header: 1090;
    --z-scrim: 1095;
    --z-drawer: 1100;
    --z-dropdown: 1110;
    --z-modal: 1200;
}

/* ------------------------------------------------------------------ */
/* 2. Z-index normalization                                            */
/* ------------------------------------------------------------------ */
.side-header {
    z-index: var(--z-drawer);
}

.header-section {
    z-index: var(--z-header);
}

.adomx-dropdown .adomx-dropdown-menu {
    z-index: var(--z-dropdown);
}

.modal {
    z-index: var(--z-modal);
}

.modal-backdrop {
    z-index: calc(var(--z-modal) - 5);
}

/* ------------------------------------------------------------------ */
/* 3. Header / logo fixes                                              */
/*    style.css @ ≤575px sets .header-logo { flex: 0 0 100%;           */
/*    height:auto; border-bottom: 1px solid #eeeeee } which makes the  */
/*    logo take the full row (the "suddenly massive logo") and paints  */
/*    a light border on the dark theme.                                */
/* ------------------------------------------------------------------ */
.header-logo a img {
    max-height: 56px;
    width: auto;
}

@media only screen and (max-width: 767px) {
    .header-logo a img,
    .header-logo a img.logo-light {
        max-height: 44px;
        max-width: 180px;
        width: auto;
        height: auto;
    }
}

@media only screen and (max-width: 575px) {
    .header-logo {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        padding: 10px 15px;
        height: 64px;
        border-bottom: none;
    }
    .header-logo a img,
    .header-logo a img.logo-light {
        max-height: 40px;
        max-width: 160px;
    }
}

/* ------------------------------------------------------------------ */
/* 4. Container width fixes                                            */
/*    style.css forces .container to fixed 450px (≤575px) and 300px    */
/*    (≤479px) — 450px overflows most phone viewports.                 */
/* ------------------------------------------------------------------ */
@media only screen and (max-width: 575px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media only screen and (max-width: 479px) {
    .container {
        width: 100%;
        max-width: 100%;
    }
}

/* Belt-and-braces: nothing should ever cause sideways page scroll */
html,
body {
    overflow-x: hidden;
}

/* ------------------------------------------------------------------ */
/* 5. Drawer scrim + scroll lock (consumed by js/shell.js, Phase 2)    */
/* ------------------------------------------------------------------ */
.portal-scrim {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 24, 0.6);
    z-index: var(--z-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.portal-scrim.is-visible {
    opacity: 1;
    visibility: visible;
}

body.portal-drawer-open {
    overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* 6. Elevation / contrast layer (Phase 4)                             */
/*    Fixes "dark on dark": 3 surface tiers (page / card / input),     */
/*    visible 1px borders, AA-passing body text. Vendor baseline:      */
/*    body.skin-dark { background #202334; color #8b8d9b (~3.9:1) }.   */
/* ------------------------------------------------------------------ */

/* 6.1 Text contrast */
body.skin-dark {
    color: var(--text-muted); /* #9aa5b1 ≥ 4.5:1 on #202334 */
}

body.skin-dark .text-body {
    color: var(--text-muted) !important; /* vendor uses !important */
}

body.skin-dark h1,
body.skin-dark h2,
body.skin-dark h3,
body.skin-dark h4,
body.skin-dark h5,
body.skin-dark h6 {
    color: var(--text);
}

body.skin-dark label,
body.skin-dark .form-label {
    color: var(--text-muted);
}

/* 6.2 Cards / panels — card tier + visible border */
body.skin-dark .box,
body.skin-dark .card,
body.skin-dark .dashboard-card,
body.skin-dark .stat-card,
body.skin-dark .stats-card,
body.skin-dark .feature-card,
body.skin-dark .choice-card,
body.skin-dark .field-card,
body.skin-dark .download-card,
body.skin-dark .welcome-card,
body.skin-dark .status-card {
    background-color: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
}

body.skin-dark .box .box-head,
body.skin-dark .card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border);
}

body.skin-dark .box .box-head .title,
body.skin-dark .card .card-header,
body.skin-dark .card-title {
    color: var(--text);
}

/* 6.3 Inputs — input tier + accent focus ring */
body.skin-dark .form-control,
body.skin-dark select.form-control,
body.skin-dark textarea.form-control {
    background-color: var(--surface-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
}

body.skin-dark .form-control::placeholder {
    color: var(--text-faint);
    opacity: 1;
}

body.skin-dark .form-control:focus {
    background-color: var(--surface-input);
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    color: var(--text);
    outline: none;
}

/* 6.4 Tables */
body.skin-dark .table {
    color: var(--text-muted);
    border-color: var(--border);
}

body.skin-dark .table thead tr th {
    color: var(--text);
    border-color: var(--border-strong);
    background-color: var(--surface-card);
}

body.skin-dark .table tbody tr th,
body.skin-dark .table tbody tr td,
body.skin-dark .table tfoot tr th,
body.skin-dark .table tfoot tr td {
    border-color: var(--border);
}

body.skin-dark .table-hover tbody tr:hover,
body.skin-dark .table tbody tr:hover {
    background-color: var(--surface-raised);
    color: var(--text);
}

/* 6.5 Buttons — one filled primary, outline secondary */
body.skin-dark .btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

body.skin-dark .btn-primary:hover,
body.skin-dark .btn-primary:focus {
    background-color: var(--accent-bright);
    border-color: var(--accent-bright);
    color: #fff;
}

body.skin-dark .btn-secondary,
body.skin-dark .btn-outline-secondary {
    background-color: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
}

body.skin-dark .btn-secondary:hover,
body.skin-dark .btn-outline-secondary:hover {
    background-color: var(--surface-raised);
    border-color: var(--border-strong);
    color: var(--text);
}

body.skin-dark .btn:focus {
    box-shadow: var(--focus-ring);
}

/* Consolidate the fragmented info/teal accent onto the accent family */
body.skin-dark .btn-info {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

body.skin-dark .btn-info:hover,
body.skin-dark .btn-info:focus {
    background-color: var(--accent-bright);
    border-color: var(--accent-bright);
    color: #fff;
}

/* 6.6 Modals — dark */
body.skin-dark .modal-content {
    background-color: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
}

body.skin-dark .modal-header,
body.skin-dark .modal-footer {
    border-color: var(--border);
}

body.skin-dark .modal-title {
    color: var(--text);
}

body.skin-dark .modal-header .close {
    color: var(--text-muted);
    text-shadow: none;
    opacity: 1;
}

body.skin-dark .modal-header .close:hover {
    color: var(--text);
}

/* 6.7 Misc surfaces */
body.skin-dark .alert {
    border-radius: var(--radius-sm);
}

body.skin-dark hr {
    border-color: var(--border);
}

body.skin-dark ::selection {
    background: var(--accent);
    color: #fff;
}

/* ------------------------------------------------------------------ */
/* 7. Auth pages (login / register / password_reset / verify /         */
/*    resend_confirmation) — Phase 5 batch 1                           */
/* ------------------------------------------------------------------ */

/* Shared status notice (was duplicated inline on register/verify/resend) */
#notice {
    text-align: center;
    padding: 50px;
    font-size: 1.5rem;
}

.hidden {
    display: none;
}

.msg {
    box-shadow: 0 0.5882rem 2.353rem 0 #202020;
}

/* Touch targets ≥44px on auth forms */
.login-register-form .form-control {
    min-height: 44px;
}

.login-register-form .button,
.login-register-form button[type="submit"] {
    min-height: 44px;
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
}

/* Map the vendor outline button on auth forms to the accent family */
body.skin-dark .login-register-form .button-primary {
    border-color: var(--accent);
    color: var(--accent-bright);
}

body.skin-dark .login-register-form .button-primary:hover,
body.skin-dark .login-register-form .button-primary:focus {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

body.skin-dark .login-register-form-wrap .content h1 {
    color: var(--text);
}

body.skin-dark .login-register-form-wrap .content p {
    color: var(--text-muted);
}

/* ============================================================
   8. Utilities (inline style attribute replacements)
   ============================================================ */

.u-muted {
    color: var(--text-muted);
}

.u-accent {
    color: var(--accent);
}