@charset "UTF-8";
/*!
 * SOS Tasker — Galaxy Auth Skin
 * ------------------------------------------------------------------
 * Deep-space layer for the authentication surfaces (login card and
 * the password-recovery modal). It rides ON TOP of glass-theme.css:
 * every liquid-glass recipe (refraction, liquid edge, raised inputs)
 * is reused — this file only retunes the palette to a security-grade
 * deep-space look and adds the auth-specific chrome.
 *
 * Rules:
 *   - Scoped entirely under body.auth-galaxy; nothing leaks into the
 *     authenticated app shell.
 *   - The galaxy itself is a <canvas> (public/js/galaxy-auth.js).
 *     Its colors are read from the --gx-* tokens below, so the JS
 *     never hardcodes a color.
 *   - Fixed dark appearance regardless of the stored color mode
 *     (welcome.blade.php pins data-coreui-theme="dark"): a galaxy
 *     over a light aurora would be incoherent.
 *   - Honors prefers-reduced-motion / prefers-reduced-transparency;
 *     the JS renders one static starfield frame in that case.
 */

/* ==================================================================
 * 1. TOKENS
 * ================================================================ */

body.auth-galaxy {
    /* Type — retro-futurist display face for brand/headings only;
       Chakra Petch keeps UI copy technical but readable. */
    --gx-font-display: "Orbitron", "Segoe UI", system-ui, sans-serif;
    --gx-font-body: "Chakra Petch", "Segoe UI", system-ui, sans-serif;

    /* Security palette: emerald/teal watch-floor + gold authority,
       matching the emerald/gold identity in glass-theme.css. */
    --gx-teal: #5eead4;
    --gx-emerald: #10b981;
    --gx-teal-deep: #0d9488;
    --gx-gold: #e9c96d;
    --gx-ink: #e8f4f2;
    --gx-ink-dim: rgba(167, 205, 195, .72);
    --gx-ink-faint: rgba(150, 185, 176, .5);

    /* Deep-space aurora overrides (consumed by glass-theme's
       body::before nebula layer — custom properties inherit). */
    --aurora-base: #040810;
    --aurora-1: rgba(13, 148, 136, .16);
    --aurora-2: rgba(16, 185, 129, .1);
    --aurora-3: rgba(212, 175, 55, .06);
    --aurora-4: rgba(2, 44, 34, .55);

    /* Galaxy canvas palette (read by galaxy-auth.js) */
    --gx-star-white: #e8f4ff;
    --gx-star-teal: #7ef0dd;
    --gx-star-ice: #9cc8ff;
    --gx-star-gold: #e9c96d;
    --gx-link-rgb: 94, 234, 212;
    --gx-wave-rgb: 148, 240, 224;

    font-family: var(--gx-font-body);
    color-scheme: dark;
    letter-spacing: .015em;
}

/* ==================================================================
 * 2. GALAXY CANVAS LAYER
 *    Paints above the aurora (body::before, z -1, earlier in tree)
 *    and below the auth shell. Never intercepts the pointer — the
 *    JS listens on window so the form stays fully operable.
 * ================================================================ */

.galaxy-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* ==================================================================
 * 3. SHELL LAYOUT
 * ================================================================ */

.auth-shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2.5rem 1rem;
}

.auth-panel {
    width: 100%;
    max-width: 27rem;
}

@media (prefers-reduced-motion: no-preference) {
    .auth-panel {
        animation: auth-enter .7s cubic-bezier(.22, 1, .36, 1) both;
    }

    @keyframes auth-enter {
        from {
            opacity: 0;
            transform: translateY(14px) scale(.985);
        }
    }
}

/* ==================================================================
 * 4. BRAND
 * ================================================================ */

.auth-brand {
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-brand-icon {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 auto .9rem;
    border: 1px solid rgba(233, 201, 109, .4);
    border-radius: 50%;
    color: var(--gx-gold);
    background: radial-gradient(circle at 30% 25%, rgba(94, 234, 212, .16), rgba(4, 8, 16, .4) 72%);
    box-shadow:
        0 0 26px rgba(233, 201, 109, .2),
        inset 0 0 14px rgba(94, 234, 212, .16);
}

.auth-brand-icon .icon {
    width: 1.55rem;
    height: 1.55rem;
}

.auth-brand-name {
    margin: 0;
    font-family: var(--gx-font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .38em;
    margin-left: .38em; /* optically re-center trailing letter-spacing */
    text-transform: uppercase;
    color: var(--gx-ink);
}

.auth-brand-sub {
    margin: .35rem 0 0;
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .3em;
    margin-left: .3em;
    text-transform: uppercase;
    color: var(--gx-ink-faint);
}

/* ==================================================================
 * 5. CARD + FORM (liquid glass panel per glass-theme §3/§5)
 * ================================================================ */

.auth-card {
    border-radius: var(--glass-radius-xl);
}

.auth-head {
    margin-bottom: 1.4rem;
}

.auth-title {
    margin: 0;
    font-family: var(--gx-font-display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gx-ink);
}

.auth-title::after {
    content: "";
    display: block;
    width: 2.6rem;
    height: 2px;
    margin-top: .55rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gx-gold), transparent);
}

.auth-subtitle {
    margin: .5rem 0 0;
    font-size: .84rem;
    color: var(--gx-ink-dim);
}

.auth-card .form-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gx-ink-faint);
    margin-bottom: .35rem;
}

.auth-card .input-group {
    border-radius: var(--glass-radius-sm);
}

.auth-card .input-group-text {
    color: rgba(94, 234, 212, .85);
    background-color: rgba(94, 234, 212, .07);
    border-color: var(--glass-border);
}

.auth-card .input-group-text .icon {
    width: 1rem;
    height: 1rem;
}

.auth-card .form-control {
    letter-spacing: .03em;
}

.auth-card .form-control:focus {
    border-color: rgba(94, 234, 212, .55);
    box-shadow: 0 0 0 .2rem rgba(45, 212, 191, .16);
}

/* Inline validation stays inside the card (the toast system is
   scoped to #alert-component only — see welcome.blade.php). */
.auth-card .alert-danger {
    padding: .65rem .9rem;
    font-size: .84rem;
    color: #ffb4ae;
    background-color: rgba(220, 53, 69, .13);
    border: 1px solid rgba(220, 53, 69, .4);
    border-radius: var(--glass-radius-md);
}

.auth-card .form-check-input {
    background-color: rgba(255, 255, 255, .08);
    border-color: var(--glass-border);
}

.auth-card .form-check-input:checked {
    background-color: var(--gx-emerald);
    border-color: var(--gx-emerald);
}

.auth-card .form-check-input:focus-visible {
    outline: 2px solid rgba(94, 234, 212, .6);
    outline-offset: 2px;
    box-shadow: none;
}

.auth-card .form-check-label {
    font-size: .84rem;
    color: var(--gx-ink-dim);
}

/* Password visibility toggle — lock/unlock glyphs from the bundled
   CoreUI free set (no eye icon exists in it). */
.btn-auth-reveal {
    display: grid;
    place-items: center;
    padding: 0 .9rem;
    border: 1px solid var(--glass-border);
    border-left: 0;
    background-color: rgba(94, 234, 212, .07);
    color: var(--gx-ink-dim);
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

.btn-auth-reveal .icon {
    width: 1rem;
    height: 1rem;
}

.btn-auth-reveal .icon-reveal-on {
    display: none;
}

.btn-auth-reveal[aria-pressed="true"] .icon-reveal-on {
    display: block;
}

.btn-auth-reveal[aria-pressed="true"] .icon-reveal-off {
    display: none;
}

.btn-auth-reveal:hover,
.btn-auth-reveal[aria-pressed="true"] {
    color: var(--gx-gold);
    background-color: rgba(233, 201, 109, .12);
}

.btn-auth-reveal:focus-visible {
    outline: 2px solid rgba(94, 234, 212, .6);
    outline-offset: -2px;
    z-index: 4;
}

/* ==================================================================
 * 6. BUTTONS
 * ================================================================ */

.btn-auth-primary {
    display: block;
    width: 100%;
    padding: .8rem 1rem;
    font-family: var(--gx-font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #052018;
    background: linear-gradient(135deg, var(--gx-teal) 0%, var(--gx-emerald) 55%, var(--gx-teal-deep) 100%);
    border: 1px solid rgba(94, 234, 212, .55);
    border-radius: var(--glass-radius-md);
    box-shadow:
        0 0 22px rgba(16, 185, 129, .28),
        inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-auth-primary:hover,
.btn-auth-primary:focus {
    color: #052018;
    filter: brightness(1.09);
    box-shadow:
        0 0 32px rgba(16, 185, 129, .45),
        inset 0 1px 0 rgba(255, 255, 255, .45);
}

.btn-auth-primary:hover {
    transform: translateY(-1px);
}

.btn-auth-primary:active {
    transform: translateY(0);
    filter: brightness(.97);
}

.btn-auth-primary:focus-visible {
    outline: 2px solid rgba(233, 201, 109, .85);
    outline-offset: 2px;
}

.btn-auth-primary:disabled {
    opacity: .65;
}

.btn-auth-ghost {
    padding: .25rem 0;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(167, 243, 208, .85);
    background: none;
    border: 0;
    border-bottom: 1px dashed rgba(94, 234, 212, .35);
    border-radius: 0;
    transition: color .15s ease-in-out, border-color .15s ease-in-out;
}

.btn-auth-ghost:hover,
.btn-auth-ghost:focus {
    color: var(--gx-gold);
    border-color: rgba(233, 201, 109, .5);
}

.btn-auth-ghost:focus-visible {
    outline: 2px solid rgba(94, 234, 212, .6);
    outline-offset: 3px;
}

/* ==================================================================
 * 7. FOOTER — compliance line (security posture)
 * ================================================================ */

.auth-footer {
    margin-top: 1.5rem;
    text-align: center;
}

.auth-footer-line {
    margin: 0 0 .3rem;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .3em;
    margin-left: .3em;
    text-transform: uppercase;
    color: var(--gx-ink-faint);
}

.auth-footer-line--soft {
    letter-spacing: .16em;
    margin-left: .16em;
    color: rgba(150, 185, 176, .36);
}

/* ==================================================================
 * 8. RECOVERY MODAL (forgot password — Livewire)
 *    .modal-content keeps the glass refraction from glass-theme;
 *    here we only deepen the fill so it reads over the galaxy.
 * ================================================================ */

#passwordResetModal .modal-content {
    background-color: rgba(7, 13, 26, .82);
}

#passwordResetModal .modal-dialog {
    max-width: 24rem;
}

.auth-modal-panel {
    position: relative;
    padding: 1.5rem;
}

.auth-modal-close {
    position: absolute;
    top: .85rem;
    right: .85rem;
    z-index: 2;
}

.auth-modal-panel .auth-title {
    font-size: 1.05rem;
    padding-right: 1.5rem;
}

.auth-modal-panel .auth-subtitle {
    font-size: .8rem;
}

.auth-modal-panel .form-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gx-ink-faint);
    margin-bottom: .35rem;
}

.auth-modal-panel .alert {
    padding: .6rem .85rem;
    font-size: .82rem;
}

.auth-modal-panel .alert-success {
    color: #a7f3d0;
    background-color: rgba(16, 185, 129, .14);
    border: 1px solid rgba(16, 185, 129, .4);
}

.auth-modal-panel .alert-danger {
    color: #ffb4ae;
    background-color: rgba(220, 53, 69, .13);
    border: 1px solid rgba(220, 53, 69, .4);
}

/* ==================================================================
 * 9. TOAST SYSTEM (welcome page alert helper)
 *    Fixed positioning applies ONLY to the JS-injected toast —
 *    inline validation alerts stay in-flow inside the card.
 * ================================================================ */

#alert-component.alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1080;
    min-width: 18rem;
    max-width: calc(100vw - 2.5rem);
    font-size: .86rem;
    border-radius: var(--glass-radius-md);
    opacity: 0;
    transform: translateY(-20px);
    transition: transform .5s ease, opacity .5s ease;
}

#alert-component.alert.alert-animation {
    opacity: 1;
    transform: translateY(0);
}

/* ==================================================================
 * 10. DEGRADATION + PRINT
 * ================================================================ */

@media (prefers-reduced-transparency: reduce) {
    body.auth-galaxy {
        --aurora-1: transparent;
        --aurora-2: transparent;
        --aurora-3: transparent;
        --aurora-4: transparent;
    }
}

@media print {
    .galaxy-canvas {
        display: none !important;
    }
}