/* ==========================================================================
   Quotsoft instance — LOGIN PAGE ONLY.
   Self-contained + isolated: this stylesheet is loaded only by app/index.php
   (the login view) and does NOT rely on base.css/reset.css, so it can never
   affect the rest of the app. It reuses the app's own fonts + FontAwesome
   files (css/font/*) — nothing is duplicated. Matches the essence of the
   commercial site / console auth card (brand #666699, Montserrat/Lato).
   ========================================================================== */

/* ---- fonts (reused from the app's existing files) ---- */
@font-face { font-family:'Lato'; font-style:normal; font-weight:300; font-display:swap; src:url('font/lato/lato-300-latin.woff2') format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap; src:url('font/lato/lato-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:100 900; font-display:swap; src:url('font/montserrat/montserrat-latin.woff2') format('woff2'); }
@font-face { font-family:'FontAwesome'; font-weight:normal; font-style:normal; font-display:block;
    src:url('font/fontawesome/fontawesome-webfont.woff2') format('woff2'),
        url('font/fontawesome/fontawesome-webfont.woff') format('woff'),
        url('font/fontawesome/fontawesome-webfont.ttf') format('truetype'); }

/* ---- FontAwesome subset used by the login page + login.js ---- */
.fa { display:inline-block; font:normal normal normal 14px/1 FontAwesome; text-rendering:auto; -webkit-font-smoothing:antialiased; }
.fa-spinner:before { content:"\f110"; }
.fa-warning:before { content:"\f071"; }
.fa-close:before   { content:"\f00d"; }
.fa-spin { animation:qs-fa-spin 1s infinite linear; }
@keyframes qs-fa-spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ---- tokens (brand essence, scoped to this page) ---- */
:root {
    --brand-100:#eeeef5; --brand-300:#9a9ac2; --brand-500:#666699; --brand-700:#4d4d73; --brand-900:#33334d;
    --neutral-500:#8a8aa0; --neutral-600:#6b6b85; --neutral-700:#55556f; --neutral-800:#3d3d54; --neutral-950:#1e1e30;
    --border-default:#d9d9e3; --border-brand:#e2e2ef; --focus-ring:rgba(102,102,153,0.18);
    --radius-sm:8px; --radius-md:10px;
    --font-ui:'Montserrat','Lato',Arial,Helvetica,sans-serif;
    --font-body:'Lato','Montserrat',Arial,Helvetica,sans-serif;
}

/* ---- reset ---- */
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; padding:0; }
body { font-family:var(--font-body); color:var(--neutral-950); -webkit-font-smoothing:antialiased; line-height:1.5; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; }

/* ---- layout ---- */
.auth {
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:40px 24px; gap:20px;
    background:radial-gradient(120% 120% at 50% 0%, var(--brand-500) 0%, var(--brand-700) 60%, var(--brand-900) 100%);
}
.auth-brand { display:flex; align-items:center; gap:2px; }
.auth-brand .logo { width:34px; height:34px; display:block; background:url('../img/logo.png') no-repeat center/contain; }
.auth-brand span { font-family:var(--font-ui); font-weight:600; font-size:21px; letter-spacing:-0.2px; color:#fff; }
.auth-card { width:100%; max-width:440px; background:#fff; border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,0.4); overflow:hidden; }
.auth-accent { height:4px; background:var(--brand-300); }
.auth-body { padding:32px 36px 34px; }

/* ---- titles ---- */
.auth-title { font-family:var(--font-ui); font-weight:800; font-size:25px; letter-spacing:-0.4px; color:var(--neutral-950); margin:0 0 6px; }
.auth-sub { font-family:var(--font-body); font-size:14px; line-height:1.55; color:var(--neutral-600); margin:0 0 22px; }

/* ---- google button ---- */
.auth-google {
    width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
    font-family:var(--font-ui); font-weight:700; font-size:14.5px; color:var(--neutral-800);
    background:#fff; border:1px solid var(--border-default); border-radius:var(--radius-md);
    padding:12px; cursor:pointer; margin-bottom:18px; transition:background .15s, box-shadow .15s;
}
.auth-google:hover { background:var(--brand-100); box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.auth-google svg { display:block; }

/* ---- divider ---- */
.auth-divider { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--border-default); }
.auth-divider span { font-family:var(--font-body); font-size:12px; color:var(--neutral-500); }

/* ---- fields (hooks kept for login.js: .div-login wraps #usr/#pwd, .form-validation-error is its next sibling) ---- */
.auth-field { margin-bottom:15px; }
.auth-field > label { display:block; font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:var(--neutral-700); margin:0 0 6px; }
.div-login { position:relative; }
.input-login {
    width:100%; font-family:var(--font-body); font-size:15px; padding:11px 13px;
    border:1px solid var(--border-default); border-radius:var(--radius-sm); outline:none;
    color:var(--neutral-950); background:#fff; transition:border-color .12s, box-shadow .12s;
}
.input-login:focus { border-color:var(--brand-500); box-shadow:0 0 0 3px var(--focus-ring); }
.form-validation-error { font-family:var(--font-body); font-size:12px; color:#b23838; margin-top:5px; }
.form-validation-error:empty { display:none; }

/* ---- keepme + login button + forgot ---- */
.keepme { display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:13px; color:var(--neutral-600); margin:2px 0 18px; cursor:pointer; }
.keepme input { accent-color:var(--brand-500); }
.btn-login {
    width:100%; font-family:var(--font-ui); font-weight:700; font-size:15px; letter-spacing:0.3px; text-transform:uppercase;
    color:#fff; background:var(--brand-500); border:none; border-radius:var(--radius-md); padding:15px; cursor:pointer;
    box-shadow:inset 0 -2px 0 rgba(0,0,0,0.12); transition:box-shadow .15s, transform .1s;
}
.btn-login:hover { box-shadow:inset 0 -2px 0 rgba(0,0,0,0.12), 0 8px 20px rgba(102,102,153,0.35); }
.btn-login:disabled { opacity:.85; cursor:default; }
.auth-forgot { text-align:center; margin:16px 0 0; }
.auth-forgot a { font-family:var(--font-body); font-size:13.5px; color:var(--brand-500); font-weight:700; }
.auth-forgot a:hover { text-decoration:underline; }

/* ---- error/disabled modal (driven by login.js: .is-visible, qs-modal-warn/error, .modal-close) ---- */
.qs-modal { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(20,20,35,0.5); padding:20px; }
.qs-modal.is-visible { display:flex; }
.qs-modal-container { position:relative; width:100%; max-width:400px; background:#fff; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,0.4); padding:30px 28px 26px; text-align:center; }
.qs-modal-icon { display:none; }
.qs-modal-head { font-family:var(--font-ui); font-weight:800; font-size:18px; color:var(--neutral-950); margin-bottom:8px; }
.qs-modal-warn .qs-modal-head { color:#b8860b; }
.qs-modal-error .qs-modal-head { color:#b23838; }
.qs-modal-description { font-family:var(--font-body); font-size:14px; line-height:1.55; color:var(--neutral-600); margin-bottom:20px; }
.qs-modal-buttons .btn { font-family:var(--font-ui); font-weight:700; font-size:14px; text-transform:uppercase; color:#fff; background:var(--brand-500); border:none; border-radius:var(--radius-md); padding:11px 26px; cursor:pointer; }
.qs-modal-close { position:absolute; top:10px; right:13px; cursor:pointer; color:var(--neutral-500); font-size:16px; }
.qs-modal-close:hover { color:var(--neutral-800); }

@media (max-width:520px) {
    .auth { padding:26px 14px; }
    .auth-body { padding:26px 22px 28px; }
    .auth-title { font-size:22px; }
}