/* =====================================================================
   ZIQSY CMS — VIEW GROUP: "Auth & Entry"
   ---------------------------------------------------------------------
   Scope: login / register / change-password / welcome pages (all extend
   layouts.app, so this file is loaded in <head>) + the global top header,
   navigation bar and flash alerts rendered by partials.
   ---------------------------------------------------------------------
   Strategy ("Elevate Bootstrap"): CSS ONLY. No markup / class / JS
   changes. Builds on the tokens in css/design-system.css (--zq-*).

   IMPORTANT load-order note: the auth blade files (login, register) and
   the navbar partial ship their own inline <style> blocks in the page
   <body>, which the browser applies AFTER this linked stylesheet. So for
   anything those inline rules already set, this file either (a) raises
   specificity with a body-class / compound scope to win cleanly, or
   (b) refines properties the inline CSS leaves untouched. We avoid broad
   element selectors so nothing leaks into other view groups.
   ===================================================================== */


/* ------------------------------------------------------------------ *
 * 1. SHARED AUTH-CARD POLISH (login + register cards)
 *    The inline styles paint the card body; we deepen the elevation,
 *    smooth the corners and add a tasteful entrance — scoped to the
 *    specific card containers so nothing else is affected.
 * ------------------------------------------------------------------ */
body .login-card,
body .register-card {
    /* Layered, brand-tinted elevation that reads as "premium" */
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 12px 32px rgba(15, 23, 42, .12),
        0 24px 64px rgba(0, 174, 239, .10);
    border: 1px solid rgba(255, 255, 255, .7);
    animation: zq-auth-rise .55s var(--zq-ease, cubic-bezier(.4, 0, .2, 1)) both;
}

/* Refined brand accent strip along the top of each card */
body .login-card::before,
body .register-card::before {
    background: linear-gradient(90deg,
        var(--zq-brand-400, #21bcee) 0%,
        var(--zq-brand-500, #00aeef) 45%,
        var(--zq-brand-700, #00719e) 100%) !important;
    height: 4px !important;
}

@keyframes zq-auth-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ------------------------------------------------------------------ *
 * 2. AUTH HEADINGS & SUBTITLES
 *    Tighten the typographic rhythm; the inline rules size them, we add
 *    letter-spacing + a muted, balanced subtitle.
 * ------------------------------------------------------------------ */
body .login-card h3,
body .register-card h3 {
    letter-spacing: -.015em;
    line-height: 1.2;
}
body .login-subtitle {
    color: var(--zq-text-muted, #64748b);
    letter-spacing: .1px;
}


/* ------------------------------------------------------------------ *
 * 3. AUTH INPUTS  (.login-input / .reg-input)
 *    The inline CSS owns the resting + focus look (2px border, soft
 *    cyan ring). We add the finishing touches it omits: hover feedback,
 *    consistent placeholder colour and a tidy invalid state.
 * ------------------------------------------------------------------ */
body .login-input:hover:not(:focus),
body .register-card .reg-input:hover:not(:focus) {
    border-color: var(--zq-brand-300, #54cdf2);
}
body .login-input::placeholder,
body .register-card .reg-input::placeholder {
    color: var(--zq-slate-400, #94a3b8);
    opacity: 1;
}
/* Invalid fields get a clear, accessible danger cue + matching ring */
body .login-input.is-invalid,
body .register-card .reg-input.is-invalid {
    border-color: var(--zq-danger, #ef4444);
}
body .login-input.is-invalid:focus,
body .register-card .reg-input.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .14);
}
body .invalid-feedback {
    color: var(--zq-danger, #ef4444);
    font-weight: 500;
}

/* Password show/hide affordance — a touch more obvious on hover */
body .login-card .toggle-password,
body .register-card .toggle-password {
    transition: color var(--zq-dur, 180ms) var(--zq-ease, ease);
}


/* ------------------------------------------------------------------ *
 * 4. AUTH PRIMARY BUTTONS  (.login-btn / .reg-btn)
 *    Confident, on-brand CTA. Inline rules set the gradient + lift; we
 *    sharpen the shadow, add an active/pressed state and a focus ring
 *    for keyboard users (which the inline CSS lacks).
 * ------------------------------------------------------------------ */
body .login-btn,
body .register-card .reg-btn {
    letter-spacing: .2px;
    box-shadow: 0 4px 14px rgba(0, 174, 239, .28);
}
body .login-btn:active,
body .register-card .reg-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 174, 239, .26);
}
body .login-btn:focus-visible,
body .register-card .reg-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 174, 239, .35);
}


/* ------------------------------------------------------------------ *
 * 5. AUTH FOOTER LINKS  (register / login / forgot)
 *    Subtle, brand-consistent link affordances.
 * ------------------------------------------------------------------ */
body .forgot-link,
body .register-link,
body .register-card .login-link {
    transition: color var(--zq-dur, 180ms) var(--zq-ease, ease),
                text-decoration-color var(--zq-dur, 180ms) var(--zq-ease, ease);
    text-underline-offset: 3px;
}


/* ------------------------------------------------------------------ *
 * 6. CARD-BASED AUTH PAGES on layouts.app
 *    change-password.blade.php uses plain Bootstrap .card + .card-header
 *    .bg-primary. design-system.css already styles .card; here we just
 *    make the primary header read on-brand and give the requirements/
 *    info alert a softer, scoped treatment.
 *    Scoped via .password-requirements (unique to this view).
 * ------------------------------------------------------------------ */
.card-header.bg-primary {
    background: linear-gradient(135deg,
        var(--zq-brand-500, #00aeef) 0%,
        var(--zq-brand-700, #00719e) 100%) !important;
    border-bottom: none;
}
.password-requirements {
    border-radius: var(--zq-radius, .75rem);
}
.password-requirements .requirement-met { color: var(--zq-success-strong, #059669); }
/* Strength meter inherits Bootstrap .progress-bar bg-* utilities — leave as-is */


/* ============================================================== *
 *  GLOBAL CHROME (top header + nav bar + dropdown + alerts)
 *  These come from partials/navbar.blade.php whose inline <style>
 *  loads AFTER this file, so to win cleanly we raise specificity
 *  with the <body> element or compound selectors, and otherwise
 *  refine only what the inline CSS leaves open.
 * ============================================================== */

/* ------------------------------------------------------------------ *
 * 7. TOP HEADER — elevate the slate bar into a confident brand band
 * ------------------------------------------------------------------ */
body .top-header {
    /* Subtle brand-tinted gradient over the existing slate, plus a
       crisper shadow and a hairline brand underline. */
    background:
        linear-gradient(180deg, rgba(0, 174, 239, .10) 0%, rgba(0, 174, 239, 0) 100%),
        var(--primary-dark, #4a5568);
    box-shadow:
        0 1px 0 rgba(0, 174, 239, .35),
        0 4px 16px rgba(15, 23, 42, .16);
    transition: box-shadow var(--zq-dur, 180ms) var(--zq-ease, ease),
                background var(--zq-dur, 180ms) var(--zq-ease, ease);
}
/* welcome.blade.php toggles .scrolled on scroll — give it a denser look */
body .top-header.scrolled {
    box-shadow:
        0 1px 0 rgba(0, 174, 239, .5),
        0 6px 22px rgba(15, 23, 42, .26);
}

/* Search field — slightly larger hit area, smoother focus glow */
body .header-search input {
    border-radius: var(--zq-radius-sm, .5rem);
}
body .header-search input:focus {
    box-shadow: 0 0 0 3px rgba(0, 174, 239, .25);
}

/* Avatar button — rounder, with a gentle brand-tinted hover */
body .header-right .user-avatar {
    border-radius: var(--zq-radius-sm, .5rem);
}
body .header-right .user-avatar:hover {
    background: rgba(0, 174, 239, .16);
}
body .header-right .user-avatar-img {
    box-shadow: 0 0 0 2px rgba(0, 174, 239, .35);
    border-color: #fff;
}


/* ------------------------------------------------------------------ *
 * 8. NAVIGATION BAR — clean secondary bar
 *    The inline CSS uses a minty --accent-cyan (#64ffda) for the Home
 *    link / nav buttons that clashes with the azure brand. Re-tone the
 *    interactive accents to brand azure for a cohesive system.
 * ------------------------------------------------------------------ */
body .navigation-bar {
    border-bottom: 1px solid var(--zq-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
/* History prev/next buttons: brand-azure hover instead of mint */
body .nav-controls .nav-btn:hover:not(:disabled) {
    background: var(--zq-brand-50, #e6f7fd);
    color: var(--zq-brand-700, #00719e);
    box-shadow: 0 4px 8px rgba(0, 174, 239, .22);
}
/* Home link: brand-azure pill rather than mint */
body .nav-controls .home-link {
    background: var(--zq-brand-500, #00aeef);
    color: #fff;
}
body .nav-controls .home-link:hover {
    background: var(--zq-brand-600, #008fc7);
    box-shadow: 0 4px 12px rgba(0, 174, 239, .32);
}


/* ------------------------------------------------------------------ *
 * 9. USER DROPDOWN MENU (header)
 *    The inline CSS paints the menu on a slate (#5a6b7d) surface with
 *    mint hover. Refine spacing + give items a smooth brand hover that
 *    matches the rest of the app, without changing the dark surface.
 * ------------------------------------------------------------------ */
body .user-profile .dropdown-menu {
    padding: .375rem;
    border-radius: var(--zq-radius, .75rem);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .30);
}
body .user-profile .dropdown-menu .dropdown-item {
    border-radius: var(--zq-radius-sm, .5rem);
    padding: 10px 14px;
}
body .user-profile .dropdown-menu .dropdown-item:hover,
body .user-profile .dropdown-menu .dropdown-item:focus {
    background: rgba(0, 174, 239, .22);
    color: #fff;
}
/* Logout submit button sits inside a <form> as a .dropdown-item — keep
   it full-width and visually identical to the anchor items */
body .user-profile .dropdown-menu form .dropdown-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
}


/* ------------------------------------------------------------------ *
 * 10. GUEST LOGIN/REGISTER BUTTONS in the header (logged-out state)
 *     .btn-outline-light / .btn-light shown to anonymous visitors.
 *     Re-tone the solid one to brand azure to match the CTA language.
 * ------------------------------------------------------------------ */
body .header-right .btn-light {
    background: var(--zq-brand-500, #00aeef);
    color: #fff;
}
body .header-right .btn-light:hover {
    background: var(--zq-brand-600, #008fc7);
    box-shadow: 0 4px 12px rgba(0, 174, 239, .32);
}
body .header-right .btn-outline-light:hover {
    background: #fff;
    color: var(--primary-dark, #4a5568);
}


/* ------------------------------------------------------------------ *
 * 11. WELCOME PAGE (body.is-welcome-page → .welcome-page-wrapper)
 *     welcome.blade.php extends layouts.app and adds .is-welcome-page.
 *     It ships almost no styling of its own, so we build a polished,
 *     scoped hero here. Everything is namespaced under the body class.
 * ------------------------------------------------------------------ */
body.is-welcome-page .welcome-page-wrapper {
    min-height: calc(100vh - 125px); /* header (70) + nav (55) offsets */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}
body.is-welcome-page .content-box {
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    background: var(--zq-surface, #fff);
    border: 1px solid var(--zq-border, #e2e8f0);
    border-radius: var(--zq-radius-lg, 1rem);
    box-shadow: var(--zq-shadow-lg, 0 8px 24px rgba(15, 23, 42, .10));
    padding: 3rem 2.5rem;
    text-align: center;
    animation: zq-auth-rise .55s var(--zq-ease, ease) both;
}
body.is-welcome-page .welcome-title {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--zq-text, #1e293b);
    margin-bottom: .5rem;
}
body.is-welcome-page .welcome-subtitle {
    color: var(--zq-text-muted, #64748b);
    font-size: var(--zq-fs-lg, 1.0625rem);
    margin-bottom: 2.5rem;
}
body.is-welcome-page .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
body.is-welcome-page .feature-card {
    background: var(--zq-surface-2, #f8fafc);
    border: 1px solid var(--zq-border, #e2e8f0);
    border-radius: var(--zq-radius, .75rem);
    padding: 1.75rem 1.25rem;
    text-align: center;
    transition: transform var(--zq-dur, 180ms) var(--zq-ease, ease),
                box-shadow var(--zq-dur, 180ms) var(--zq-ease, ease),
                border-color var(--zq-dur, 180ms) var(--zq-ease, ease);
}
body.is-welcome-page .feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--zq-brand-300, #54cdf2);
    box-shadow: var(--zq-shadow-md, 0 6px 16px rgba(15, 23, 42, .08));
}
body.is-welcome-page .feature-icon {
    font-size: 2.25rem;
    line-height: 1;
    color: var(--zq-brand-500, #00aeef);
    margin-bottom: .85rem;
    display: inline-block;
}
body.is-welcome-page .feature-title {
    font-weight: 600;
    color: var(--zq-text, #1e293b);
    margin-bottom: .35rem;
}
body.is-welcome-page .feature-text {
    color: var(--zq-text-muted, #64748b);
    font-size: var(--zq-fs-sm, .8125rem);
    margin-bottom: 0;
}
body.is-welcome-page .welcome-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
/* Build the welcome CTAs from scratch (markup uses .btn-welcome-primary) */
body.is-welcome-page .btn-welcome-primary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 2rem;
    border-radius: var(--zq-radius-sm, .5rem);
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(135deg,
        var(--zq-brand-500, #00aeef) 0%,
        var(--zq-brand-700, #00719e) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 174, 239, .28);
    transition: transform var(--zq-dur, 180ms) var(--zq-ease, ease),
                box-shadow var(--zq-dur, 180ms) var(--zq-ease, ease);
}
body.is-welcome-page .btn-welcome-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 174, 239, .38);
    color: #fff;
}
body.is-welcome-page .btn-welcome-primary:active { transform: translateY(0); }
body.is-welcome-page .btn-welcome-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 174, 239, .35);
}
/* Second button reads as a quieter, outlined variant */
body.is-welcome-page .btn-welcome-primary:last-child {
    background: var(--zq-surface, #fff);
    color: var(--zq-brand-600, #008fc7);
    border: 1.5px solid var(--zq-brand-500, #00aeef);
    box-shadow: none;
}
body.is-welcome-page .btn-welcome-primary:last-child:hover {
    background: var(--zq-brand-50, #e6f7fd);
    color: var(--zq-brand-700, #00719e);
}


/* ------------------------------------------------------------------ *
 * 12. FLASH ALERTS (partials/alerts.blade.php)
 *     Bootstrap .alert variants. design-system.css gives them radius +
 *     border; here we add a refined left accent, an entrance, and align
 *     the leading icon. Scoped to dismissible flash alerts so we don't
 *     touch the static info/help alerts inside forms.
 * ------------------------------------------------------------------ */
.container-fluid > .alert.alert-dismissible {
    border-left-width: 4px;
    box-shadow: var(--zq-shadow-sm, 0 1px 2px rgba(15, 23, 42, .05));
    animation: zq-alert-in .35s var(--zq-ease, ease) both;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.container-fluid > .alert.alert-dismissible .btn-close {
    margin-left: auto;
}
.container-fluid > .alert-success { border-left-color: var(--zq-success, #10b981); }
.container-fluid > .alert-danger  { border-left-color: var(--zq-danger, #ef4444); }
.container-fluid > .alert-warning { border-left-color: var(--zq-warning, #f59e0b); }
.container-fluid > .alert-info    { border-left-color: var(--zq-info, #0ea5e9); }

@keyframes zq-alert-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ------------------------------------------------------------------ *
 * 13. DARK MODE — keep welcome hero + dropdown legible when the app
 *     flips to [data-bs-theme="dark"]. The auth login/register cards
 *     keep their own bright treatment (intentional, brand gradient bg),
 *     so we only adjust the token-driven surfaces we introduced.
 * ------------------------------------------------------------------ */
[data-bs-theme="dark"] body.is-welcome-page .content-box {
    background: var(--zq-surface, #1e293b);
    border-color: var(--zq-border, #2c3a4d);
}
[data-bs-theme="dark"] body.is-welcome-page .feature-card {
    background: var(--zq-surface-2, #243140);
    border-color: var(--zq-border, #2c3a4d);
}
[data-bs-theme="dark"] body.is-welcome-page .welcome-title { color: var(--zq-text, #f1f5f9); }
[data-bs-theme="dark"] body.is-welcome-page .feature-title { color: var(--zq-text, #f1f5f9); }
[data-bs-theme="dark"] body.is-welcome-page .btn-welcome-primary:last-child {
    background: transparent;
    color: var(--zq-brand-300, #54cdf2);
}


/* ------------------------------------------------------------------ *
 * 14. MOTION-REDUCE SAFETY
 *     Disable the entrance + lift animations we added for users who
 *     request reduced motion (design-system.css also has a global guard,
 *     but we scope ours explicitly for safety).
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    body .login-card,
    body .register-card,
    body.is-welcome-page .content-box,
    body.is-welcome-page .feature-card,
    .container-fluid > .alert.alert-dismissible {
        animation: none !important;
        transition: none !important;
    }
    body.is-welcome-page .feature-card:hover,
    body.is-welcome-page .btn-welcome-primary:hover {
        transform: none !important;
    }
}
