/* =====================================================================
   Drizline God: the identity layer over the admin's theme.css.
   theme.css is a copy of the admin's tokens; this file only re-declares what makes God read as God, and only with
   the Drizline brand palette (navy #2d3a8b of the logo, periwinkle #6f94f7, bright blue #469cd6):
   - the admin leads with its bright blue; God leads with the logo's navy: buttons, the active menu item,
     checkboxes, the heading tile and the badge are solid navy, with no gradients;
   - in dark mode, where navy sinks into the navy surfaces, the accent turns to the brand periwinkle;
   - the "GOD" badge next to the wordmark and a 3px navy-to-periwinkle strip along the top edge of the window.
   Ground, surfaces, text and every other token stay the admin's, so the console is plainly Drizline.
   Contrast (WCAG): white on the navy 10:1 and on its hover 12.5:1; navy on --dz-accent-soft 8.5:1; menu group
   labels 4.7:1 on white. Dark: white on the periwinkle fill 4.6:1; --dz-accent-text on the cards 8.4:1.
   ===================================================================== */

:root {
    /* --- Accent: the logo's navy, solid --- */
    --dz-accent: #2d3a8b;
    --dz-accent-rgb: 45, 58, 139;
    --dz-accent-hover: #232d70;
    --dz-accent-soft: #e9ecf8;        /* navy tints (the admin's "info" family), not the admin's sky tints */
    --dz-accent-soft-2: #dde1f4;
    --dz-accent-soft-3: #cfd5ef;
    --dz-accent-line: #b9c1e6;
    --dz-accent-faint: #8f9bd6;
    --dz-gradient-brand: #2d3a8b;     /* flat on purpose: God has no gradients */
    --dz-gradient-brand-hover: #232d70;

    /* --- Side menu: navy marker and tint --- */
    --sidebar-accent: #2d3a8b;
    --dz-side-active-bg: #e9ecf8;
    --dz-side-group: #6b7390;         /* group labels of the menu: 4.7:1 on white */

    /* --- God identity --- */
    /* the strip: one viewport-wide tile that starts and ends on the same color, so it can slide forever without a
       seam. Navy into the brand periwinkle and back: the drift reads as a quiet sheen */
    --god-strip: linear-gradient(90deg, #2d3a8b 0%, #6f94f7 50%, #2d3a8b 100%);
}

html[data-theme="dark"] {
    /* the navy disappears on navy surfaces: the brand periwinkle takes the accent */
    --dz-accent: #5570cc;             /* white on it 4.6:1; 3.4:1 against the cards, as a control */
    --dz-accent-rgb: 85, 112, 204;
    --dz-accent-hover: #4a63bd;
    --dz-accent-text: #a9bcf8;        /* 8.4:1 on the cards */
    --dz-accent-text-strong: #c3d0fb;
    --dz-accent-fill-strong: #5570cc;
    --dz-accent-soft: #232b4d;
    --dz-accent-soft-2: #2a3360;
    --dz-accent-soft-3: #313b70;
    --dz-accent-line: #3c4a85;
    --dz-accent-faint: #6f84c9;
    --dz-gradient-brand: #5570cc;
    --dz-gradient-brand-hover: #4a63bd;

    --sidebar-accent: #8fa9fa;        /* 6.9:1 on the menu panel */
    --dz-side-active-bg: rgba(111, 148, 247, 0.16);
    --dz-side-group: #8a93ad;         /* 5.1:1 on the menu panel */

    --god-strip: linear-gradient(90deg, #5570cc 0%, #8fa9fa 50%, #5570cc 100%);
}

/* Text selection, caret and the page scrollbars carry the accent too */
::selection {
    background: rgba(var(--dz-accent-rgb), 0.24);
}
input, textarea {
    caret-color: var(--dz-accent);
}

/* ===== Identity: the strip and the badge =====
   A 3px strip of light runs along the top edge of every God page (shell and login), the cue that stays even when
   the header scrolls or the menu is closed. Its navy and periwinkle drift slowly and endlessly (still with reduced motion); the
   loader's bar draws over it while a request runs. */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1031;                    /* above the frosted header (1030), under modals and the loader */
    height: 3px;
    background: var(--god-strip) 0 0 / 100vw 100% repeat-x;
    pointer-events: none;
    animation: god-strip-flow 24s linear infinite;
}

/* one tile per cycle at constant speed: the last frame equals the first */
@keyframes god-strip-flow {
    from { background-position: 0 0; }
    to { background-position: 100vw 0; }
}

@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none;
    }
}

/* "GOD" next to the wordmark: a small solid navy pill (periwinkle in dark mode), set in tracked capitals */
.god-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--dz-gradient-brand);
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(var(--dz-accent-rgb), 0.28);
    -webkit-user-select: none;
    user-select: none;
}

/* ===== Login (views/index.ejs over login.css) ===== */
/* the badge stacked over the wordmark, both centered over the card */
.page-lock .page-logo .god-login-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
/* "Entrar": on hover the arrow of the log-in icon slides into the door (the frame stays put) */
.page-lock .btn.lock-btn-primary .lucide-log-in path:nth-child(-n+2) {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-lock .btn.lock-btn-primary:hover .lucide-log-in path:nth-child(-n+2),
.page-lock .btn.lock-btn-primary:focus-visible .lucide-log-in path:nth-child(-n+2) {
    transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
    .page-lock .btn.lock-btn-primary .lucide-log-in path:nth-child(-n+2) {
        transition: none;
    }
}
html:not([data-theme="dark"]) .page-lock .page-logo img {
    filter: brightness(0) saturate(100%) invert(22%) sepia(25%) saturate(4220%) hue-rotate(215deg) brightness(86%) contrast(93%);
}
.page-lock .page-logo .god-badge {
    height: 22px;
    padding: 0 8px;
    font-size: 11.5px;
}

/* ===== The network on the ground (public/javascripts/god-network.js) =====
   A fixed canvas under everything: first in <body>, at z-index 0, so the page that follows it (positioned, with no
   z-index of its own, so dialogs are not trapped in a new stacking context) paints over it. It shows through the
   translucent header, side menu and content frame; cards cover it. */
#god-network {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}
.wrapper,
.page-lock {
    position: relative;
}
/* dark mode: the content frame and the side-menu frame are solid in the admin's theme; with the network behind
   them they turn slightly translucent (as the light frames already are), so the network reads through them */
html[data-theme="dark"] body:has(#god-network) #master-content.page-content {
    background-color: rgba(17, 26, 46, 0.78);   /* --dz-content-bg (#111a2e) */
}
@media (min-width: 769px) {
    html[data-theme="dark"] body:has(#god-network) .app-sidebar {
        background-color: rgba(17, 26, 46, 0.78);
    }
}