/* ═══════════════════════════════════════════════════════════════════
   Umbra Network — Global tokens, reset, base, /login page

   Sections:
     1. Design tokens (:root vars)
     2. Reset + base (html/body/typography/selection)
     3. Auth page (/login)
     4. Auth responsive (iPad / iPhone portrait / iPhone landscape)

   Primary layout breakpoints (shell + pages):
     - 480px   = micro / very small phones
     - 768px   = mobile portrait
     - 1024px  = tablet portrait (settings landscape 2-col triggers here)
     - 1025px  = tablet landscape grid mode (app shell, dashboard, alias)
     - 1366px  = desktop ceiling for tablet-ish rules
     - landscape compact = max-width:932 + max-height:500 + orientation:landscape
   A few component-local breakpoints sit on top of these (600px mail-tracker
   counters, 900px rspamd/filter reflow, 1280px alias table); the 1281–1365
   band falls back to the base rules by design.
   ─────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ─────────────────────────────────────────────────────────────────── */

:root {
    /* ─── Surface palette ─ */
    --umbra-bg:                 #050505;  
    --umbra-bg-card:            #131316;  
    --umbra-bg-input:           #0d0d10;  

    /* ─── Foreground palette — greys warmed toward red ─────────── */
    --umbra-fg:                 #f0f0f2;  
    --umbra-fg-dim:             #82828c;  
    --umbra-fg-label:           #a1a1ab;  

    /* ─── Semantic ink scale (title/value/label hierarchy) ───
       Single source: nudge one notch here → it propagates everywhere.
         strong = values, body, page title (the hero, by size + brightness)
         title  = card / section titles (recedes, reads as a heading)
         faint  = labels, captions, timestamps, meta */
    --ink-strong: var(--umbra-fg);        /* #f0f0f2 */
    --ink-title:  var(--umbra-fg-label);  /* #a1a1ab */
    --ink-faint:  var(--umbra-fg-dim);    /* #82828c — AA floors faint here, so title moved up
                                               by the same amount to keep the step it always had */

    /* ─── Accent + status colors ──────────────────────────────── */
    /* AA: this red is also TEXT in six places; at #e63946 it measured 4.45 on the card, just
       under. Two units per channel is invisible and clears it. */
    --umbra-accent:             #e83b48;
    --umbra-accent-bright:      #ff4757;
    /* The same red cannot carry white text — #e83b48 under white is 4.08. Backgrounds that do
       use this one: 4.78. Never use it as text, it reads 3.88 on the card. */
    --umbra-accent-deep:        #d92d3b;
    --umbra-success:            #4ade80;
    --umbra-warning:            #f59e0b;
    --umbra-error:              #ff6b6b;
    --umbra-info:               #3b82f6;
    --umbra-ban:                #ff1744;
    --umbra-on-accent:          #ffffff;

    /* ─── Structural ──────────────────────────────────────────── */
    --umbra-border:             #2a2a30;
    --umbra-btn-secondary:      #1f1f24;
    --umbra-btn-secondary-hover:#2a2a30;

    /* ─── Status label (donut center, etc) ────────────────────── */
    --umbra-status-label-bg:    #f0f0f2;
    --umbra-status-label-fg:    #0a0a0a;

    /* ─── Semantic transparent variants (color-mix) ───────────── */
    --umbra-accent-glow: color-mix(in srgb, var(--umbra-accent)  50%, transparent);
    --accent-soft:         color-mix(in srgb, var(--umbra-accent)   8%, transparent);
    --accent-hover:        color-mix(in srgb, var(--umbra-accent)  18%, transparent);
    --success-glow:        color-mix(in srgb, var(--umbra-success) 60%, transparent);
    --warning-glow:        color-mix(in srgb, var(--umbra-warning) 60%, transparent);
    --error-glow:          color-mix(in srgb, var(--umbra-error)   60%, transparent);
    --info-glow:           color-mix(in srgb, var(--umbra-info)    50%, transparent);
    --ban-glow:            color-mix(in srgb, var(--umbra-ban)     70%, transparent);

    /* ─── Elevation / shadow tokens (repeated roles → DRY) ──────────
       card  = subtle red hairline on cards (×4 pages)
       modal = elevation of the .modal-dialog / .umbra-modal-dialog dialogs (×2, identical)
       One-off glows (dots, CTA, divider) stay inline. */
    --shadow-card:  0 0 0 1px var(--accent-soft);
    --shadow-modal: 0 0 0 1px var(--accent-soft),
                    0 20px 60px rgba(0, 0, 0, 0.6),
                    0 0 80px var(--accent-soft);

    /* ─── Spacing scale (4px base) ────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;

    /* ─── Radius scale (0 = the DS's crisp default; deliberate exceptions) ─ */
    --radius-sm:   2px;    /* datepicker calendar icon */
    --radius-md:   3px;    /* soft pills: viewall, progress bars, role-badge */
    --radius-full: 50%;    /* status dots, spinners */

    /* ─── Layout ──────────────────────────────────────────────── */
    --sidebar-width: 240px;

    /* ─── Z-index scale (deco 0-2 · structure 10-100 · overlay 999+) ─ */
    --z-below:        -1;     /* decorative halo behind a card */
    --z-deco:          0;     /* grids / glows in ::before/::after */
    --z-base:          1;     /* content (main, page, modal sticky header) */
    --z-raised:        2;     /* brackets, modal sticky bar */
    --z-sidebar:      10;     /* anchored sidebar (desktop) */
    --z-header:      100;     /* header app, menu kebab */
    --z-backdrop:    999;     /* scrim behind the mobile drawer */
    --z-modal:      1000;     /* overlay modal / drawer */
    --z-above-modal: 1001;    /* header kept above an open modal */
    --z-popover:    1100;     /* datepicker popup (above the modal) */
    --z-skiplink:   2000;     /* skip-link — above every overlay */

    /* ─── Font-size scale (rem → follows the browser font size, a11y) ─
       Values in rem (base 16px); the reference px is in the comment. */
    --text-xs:   0.5625rem;  /*  9px — footers, micro labels */
    --text-sm:   0.6875rem;  /* 11px — labels, small body */
    --text-base: 0.75rem;    /* 12px — default mono */
    --text-md:   0.875rem;   /* 14px — inputs, overview values */
    --text-ml:   1rem;       /* 16px — card metric values */
    --text-lg:   1.125rem;   /* 18px — card titles */
    --text-xl:   1.375rem;   /* 22px — page title, sidebar brand */
    --text-2xl:  1.875rem;   /* 30px — auth title */

    /* ─── Line-height scale (off-scale one-shots kept inline: 1.05/1.1/1.4) ─ */
    --leading-none:   1;
    --leading-snug:   1.2;
    --leading-normal: 1.5;
    --leading-loose:  1.6;

    /* ─── Transitions ─────────────────────────────────────────── */
    --t-fast:    0.15s;
    --t-med:     0.25s;
    --t-slow:    0.4s;

    /* ─── Font families ───────────────────────────────────────── */
    --umbra-font-display: "Futura", "Futura PT", "Futura Std", "Jost", "Avenir Next", sans-serif;
    --umbra-font-body:    "Futura", "Futura PT", "Jost", "Avenir Next", -apple-system, sans-serif;
    --umbra-mono:         "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
}

/* ═══════════════════════════════════════════════════════════════════
   2. RESET + BASE
   ─────────────────────────────────────────────────────────────────── */

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

html {
    height: 100%;
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
}

body {
    height: 100%;
    font-family: var(--umbra-font-body);
    background: var(--umbra-bg);
    color: var(--umbra-fg);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--umbra-accent);
    color: var(--umbra-bg);
}

/* ─── Keyboard focus — consistent ring everywhere (a11y) ─────────
   :focus-visible only matches via keyboard → buttons/links/triggers get
   a visible ring; the mouse does not trigger it. Text fields
   keep their own indicator (accent border/glow). */
:focus-visible {
    outline: 2px solid var(--umbra-accent);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   3. AUTH PAGE — /login

   Structure HTML:
     body.auth-page
       main.auth-container
         div.auth-window
           span.bracket.bracket-tl/tr/bl/br × 4
           h1.auth-title
           p.auth-subtitle
           div.auth-error (optional)
           form.auth-form
             label.auth-label > span + input
             ...
             button.auth-button
           div.auth-footer
   ─────────────────────────────────────────────────────────────────── */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-5);
    position: relative;
    overflow: hidden;

    /* Background grid (shared rule below) is turned up for the login —
       nothing competes with it here */
    --bg-grid-bright: 0.4;
    --bg-grid-dim: 0.22;
    --bg-grid-blur: 3px;

    /* Ambient glow */
    &::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: var(--z-deco);
        pointer-events: none;
        background:
            radial-gradient(circle at 20% 30%, rgba(230, 57, 70, 0.06) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(230, 57, 70, 0.04) 0%, transparent 50%);
    }
}

/* Fragmented red grid — shared by the login (.auth-page) and the app shell
   (.app-page). Per-surface intensity comes from the --bg-grid-* custom
   properties; the fallbacks here are the app shell's subtler values. */
.auth-page::before,
.app-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-deco);
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 90, 100, var(--bg-grid-bright, 0.34)) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(255, 90, 100, var(--bg-grid-bright, 0.34)) 1.5px, transparent 1.5px),
        linear-gradient(rgba(230, 57, 70, var(--bg-grid-dim, 0.18)) 1px, transparent 1px),
        linear-gradient(90deg, rgba(230, 57, 70, var(--bg-grid-dim, 0.18)) 1px, transparent 1px);
    background-size:
        100% 220px,
        220px 100%,
        55px 55px,
        55px 55px;
    background-position:
        0 165px,
        330px 0,
        0 0,
        0 0;
    background-repeat: repeat-x, repeat-y, repeat, repeat;
    filter: drop-shadow(0 0 var(--bg-grid-blur, 2px) rgba(255, 90, 100, 0.25));
    mask-image:
        radial-gradient(circle 80px  at 8%  12%, black 30%, transparent 100%),
        radial-gradient(circle 30px  at 23% 6%,  black 40%, transparent 100%),
        radial-gradient(circle 55px  at 41% 18%, black 25%, transparent 100%),
        radial-gradient(circle 110px at 67% 9%,  black 15%, transparent 100%),
        radial-gradient(circle 25px  at 84% 21%, black 50%, transparent 100%),
        radial-gradient(circle 70px  at 95% 14%, black 20%, transparent 100%),
        radial-gradient(circle 45px  at 14% 34%, black 30%, transparent 100%),
        radial-gradient(circle 90px  at 38% 41%, black 18%, transparent 100%),
        radial-gradient(circle 35px  at 56% 29%, black 35%, transparent 100%),
        radial-gradient(circle 60px  at 78% 38%, black 25%, transparent 100%),
        radial-gradient(circle 20px  at 4%  48%, black 60%, transparent 100%),
        radial-gradient(circle 100px at 28% 56%, black 18%, transparent 100%),
        radial-gradient(circle 40px  at 49% 63%, black 30%, transparent 100%),
        radial-gradient(circle 75px  at 71% 51%, black 22%, transparent 100%),
        radial-gradient(circle 30px  at 89% 59%, black 40%, transparent 100%),
        radial-gradient(circle 65px  at 11% 72%, black 25%, transparent 100%),
        radial-gradient(circle 25px  at 32% 81%, black 45%, transparent 100%),
        radial-gradient(circle 95px  at 54% 76%, black 18%, transparent 100%),
        radial-gradient(circle 50px  at 76% 84%, black 28%, transparent 100%),
        radial-gradient(circle 35px  at 92% 78%, black 35%, transparent 100%),
        radial-gradient(circle 80px  at 17% 92%, black 22%, transparent 100%),
        radial-gradient(circle 45px  at 44% 96%, black 30%, transparent 100%),
        radial-gradient(circle 60px  at 68% 91%, black 25%, transparent 100%);
}

.auth-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Auth window (login card with brackets) ─────────────────── */

.auth-window {
    position: relative;
    z-index: var(--z-base);
    width: 100%;
    max-width: 480px;
    padding: 36px 36px var(--space-6);
    background: var(--umbra-bg-card);
    border: 1px solid var(--umbra-border);
    box-shadow:
        var(--shadow-card),
        0 30px 80px rgba(0, 0, 0, 0.7),
        0 0 100px color-mix(in srgb, var(--umbra-accent) 10%, transparent);
}

/* Corner brackets (reused on other cards via equivalent classes) */
.bracket {
    position: absolute;
    z-index: var(--z-raised);
    width: 22px;
    height: 22px;
    pointer-events: none;
    filter: drop-shadow(0 0 4px var(--umbra-accent-glow));
    box-sizing: border-box;

    &.bracket-tl { top:    -10px; left:  -10px; border-top:    2px solid var(--umbra-accent); border-left:  2px solid var(--umbra-accent); }
    &.bracket-tr { top:    -10px; right: -10px; border-top:    2px solid var(--umbra-accent); border-right: 2px solid var(--umbra-accent); }
    &.bracket-bl { bottom: -10px; left:  -10px; border-bottom: 2px solid var(--umbra-accent); border-left:  2px solid var(--umbra-accent); }
    &.bracket-br { bottom: -10px; right: -10px; border-bottom: 2px solid var(--umbra-accent); border-right: 2px solid var(--umbra-accent); }
}

/* ─── Auth title + subtitle ──────────────────────────────────── */

.auth-title {
    font-family: var(--umbra-font-display);
    font-size: 34px;
    font-weight: 700;
    line-height: var(--leading-none);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--umbra-accent);
    text-align: center;
    margin-bottom: var(--space-2);
    white-space: nowrap;
}

.auth-subtitle {
    color: var(--umbra-fg-dim);
    font-family: var(--umbra-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: var(--space-8);
}

/* ─── Auth error banner ──────────────────────────────────────── */

.auth-error {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--umbra-error) 18%, transparent),
        color-mix(in srgb, var(--umbra-error)  8%, transparent) 40%,
        color-mix(in srgb, var(--umbra-error)  0%, transparent) 100%
    );
    border-left: 2px solid var(--umbra-error);
    color: var(--umbra-error);
    padding: var(--space-3) 14px;
    margin-bottom: 22px;
    font-family: var(--umbra-mono);
    font-size: var(--text-base);
    letter-spacing: 0.05em;
}

/* ─── Auth form ──────────────────────────────────────────────── */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    > span {
        font-family: var(--umbra-font-display);
        font-size: var(--text-sm);
        color: var(--umbra-fg-label);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.18em;
    }

    input {
        width: 100%;
        background: var(--umbra-bg-input);
        border: 1px solid var(--umbra-border);
        border-radius: 0;
        padding: 14px var(--space-4);
        font-size: var(--text-md);
        font-family: var(--umbra-mono);
        color: var(--umbra-fg);
        outline: none;
        letter-spacing: 0.05em;
        appearance: none;
        -webkit-appearance: none;
        transition: border-color var(--t-fast), box-shadow var(--t-fast);

        &:focus {
            border-color: var(--umbra-accent);
            box-shadow:
                0 0 0 1px var(--umbra-accent),
                0 0 16px color-mix(in srgb, var(--umbra-accent) 20%, transparent);
        }

        &::placeholder {
            color: var(--umbra-fg-dim);
            letter-spacing: 0.15em;
        }

        /* Autofill: preserve the dark theme */
        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--umbra-fg);
            -webkit-box-shadow: 0 0 0 1000px var(--umbra-bg-input) inset;
            transition: background-color 5000s ease-in-out 0s;
        }
    }
}

.auth-button {
    margin-top: var(--space-2);
    padding: 14px var(--space-3);
    border: 1px solid var(--umbra-accent);
    border-radius: 0;
    font-size: var(--text-base);
    font-family: var(--umbra-font-display);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--umbra-bg-card);
    color: var(--umbra-accent);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: all var(--t-fast) ease;

    &:hover:not(:disabled),
    &:focus:not(:disabled) {
        background: var(--umbra-accent);
        color: var(--umbra-on-accent);
        border-color: var(--umbra-accent-bright);
        box-shadow: 0 0 24px var(--umbra-accent-glow);
        outline: none;
    }

    &:active {
        transform: translateY(1px);
    }

    &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: none;
    }
}

/* ─── Auth footer (version) ──────────────────────────────────── */

.auth-footer {
    margin-top: var(--space-6);
    padding-top: 14px;
    border-top: 1px dashed var(--umbra-border);
    text-align: center;
    color: var(--umbra-fg-dim);
    font-family: var(--umbra-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   4. AUTH RESPONSIVE
   ─────────────────────────────────────────────────────────────────── */

/* iPad portrait — reduced padding */
@media (min-width: 769px) and (max-width: 1366px) {
    .auth-page {
        padding: var(--space-5);
    }
}

/* iPhone portrait — normal flow (no scroll-lock).
   iOS handles the keyboard natively and anchors Safari's URL bubble
   correctly against the keyboard without forcing its hand. */
@media (max-width: 768px) {
    body.auth-page {
        overscroll-behavior: contain;
    }

    .auth-page {
        padding: 0;
        background: var(--umbra-bg-card);
        min-height: 100dvh;

        &::before,
        &::after {
            display: none;
        }
    }

    .auth-container {
        width: 100%;
        min-height: 100dvh;
    }

    .auth-window {
        max-width: none;
        width: 100%;
        min-height: 100dvh;
        border: none;
        box-shadow: none;
        padding:
            calc(var(--space-12) + env(safe-area-inset-top))
            var(--space-7)
            calc(var(--space-7) + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
    }

    .bracket {
        display: none;
    }

    .auth-title {
        font-size: var(--text-2xl);
    }

    .auth-subtitle {
        margin-bottom: var(--space-7);
    }

    .auth-footer {
        margin-top: auto;
    }
}

/* iPhone landscape — split layout 38% / 62% */
@media (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
    :root {
        --pad-l: calc(22px + env(safe-area-inset-left));
        --pad-r: calc(22px + env(safe-area-inset-right));
        --pad-t: calc(14px + env(safe-area-inset-top));
        --pad-b: env(safe-area-inset-bottom);
        --split: 38%;
        --gap-split: var(--space-6);
    }

    html:has(body.auth-page),
    body.auth-page {
        overflow: hidden;
        height: var(--app-height, 100dvh);
    }

    .auth-page {
        padding: 0;
        background: var(--umbra-bg-card);

        &::before,
        &::after {
            display: none;
        }
    }

    .bracket {
        display: none;
    }

    .auth-window {
        position: relative;
        width: 100%;
        height: 100%;
        max-width: none;
        border: none;
        box-shadow: none;
        padding: 0;
        overflow: hidden;
    }

    .auth-title {
        position: absolute;
        top: var(--pad-t);
        left: var(--pad-l);
        width: calc(var(--split) - var(--pad-l));
        bottom: calc(46px + var(--pad-b));
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-3);
        margin: 0;
        padding: 0;
        white-space: normal;
        font-size: 26px;
        letter-spacing: 0.08em;
        line-height: var(--leading-none);
        text-align: center;
        border-right: 1px solid var(--umbra-accent);
        box-shadow: none;
    }

    .auth-subtitle {
        display: none;
    }

    .auth-error {
        margin-bottom: 10px;
        padding: 6px 10px;
        font-size: 10px;
        background: linear-gradient(
            to right,
            color-mix(in srgb, var(--umbra-error) 35%, transparent) 0%,
            color-mix(in srgb, var(--umbra-error)  0%, transparent) var(--split)
        );
    }

    .auth-form {
        position: absolute;
        top: var(--pad-t);
        left: calc(var(--split) + var(--gap-split));
        right: var(--pad-r);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .auth-label input {
        padding: 10px 14px;
    }

    .auth-button {
        padding: var(--space-3);
        margin-top: 10px;
    }

    .auth-footer {
        position: absolute;
        bottom: calc(6px + var(--pad-b));
        left: var(--pad-l);
        right: var(--pad-r);
        margin: 0;
        padding-top: 6px;
        font-size: 8px;
        text-align: center;
        border-top: 1px dashed var(--umbra-border);
    }
}