/* =====================================================================
   Login pages (admin + staff) - "CCTV Management & Monitoring" look:
   a dark control-room panel with a live video wall, and the sign-in card.
   ===================================================================== */
:root {
    --lg-bg: #060b14;
    --lg-panel: #0b1322;
    --lg-line: rgba(120, 170, 255, .10);
    --lg-text: #e6edf7;
    --lg-muted: #8a9ab3;
    --lg-accent: #2f80ff;
    --lg-accent-2: #22d3ee;
    --lg-rec: #ff3b4e;
    --lg-ok: #22c55e;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body.login-page {
    margin: 0;
    background: var(--lg-bg);
    color: var(--lg-text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.lg-wrap { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 100vh; }
.lg-room { order: 1; }
.lg-side { order: 2; }   /* the form comes first in the page source, but sits on the right */

/* ---------- left: control room ---------- */
.lg-room {
    position: relative; overflow: hidden;
    padding: 48px 56px;
    display: flex; flex-direction: column; justify-content: space-between;
    background:
        radial-gradient(1200px 600px at -10% -10%, rgba(47,128,255,.18), transparent 60%),
        radial-gradient(800px 500px at 110% 110%, rgba(34,211,238,.10), transparent 60%),
        linear-gradient(var(--lg-line) 1px, transparent 1px) 0 0 / 100% 32px,
        linear-gradient(90deg, var(--lg-line) 1px, transparent 1px) 0 0 / 32px 100%,
        var(--lg-panel);
    border-right: 1px solid rgba(255,255,255,.06);
}
.lg-brand { display: flex; align-items: center; gap: 14px; }
.lg-logo {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; font-size: 1.6rem; color: #fff;
    background: linear-gradient(135deg, var(--lg-accent), var(--lg-accent-2));
    box-shadow: 0 0 0 6px rgba(47,128,255,.12), 0 12px 30px rgba(47,128,255,.35);
}
.lg-brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; }
.lg-brand-sub { color: var(--lg-muted); font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; }

.lg-hero h1 { font-size: 2.15rem; line-height: 1.15; font-weight: 800; margin: 0 0 12px; letter-spacing: -.5px; }
.lg-hero h1 span { background: linear-gradient(90deg, #7fb2ff, var(--lg-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-hero p { color: var(--lg-muted); margin: 0; max-width: 520px; font-size: .98rem; }

/* video wall */
.lg-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 620px; margin: 28px 0 22px; }
.lg-cam {
    position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(160deg, #142036, #0a111e 70%);
}
.lg-cam::before {          /* scene: floor + horizon */
    content: ""; position: absolute; inset: 55% 0 0 0;
    background: linear-gradient(180deg, rgba(120,150,190,.18), rgba(40,60,90,.05));
    clip-path: polygon(0 100%, 30% 0, 70% 0, 100% 100%);
}
.lg-cam::after {           /* scan lines */
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
    animation: lg-scan 6s linear infinite;
}
.lg-cam.alt::before { inset: 40% 10% 0 10%; clip-path: polygon(0 100%, 0 30%, 40% 0, 100% 30%, 100% 100%); background: linear-gradient(180deg, rgba(110,160,210,.16), rgba(20,40,70,.05)); }
.lg-cam.dim { background: linear-gradient(160deg, #101a2b, #070c16 70%); }
.lg-cam-label { position: absolute; left: 8px; bottom: 6px; font: 600 .62rem/1 ui-monospace, Consolas, monospace; color: #cfe0ff; text-shadow: 0 1px 2px #000; z-index: 1; }
.lg-cam-time { position: absolute; right: 8px; top: 6px; font: 500 .58rem/1 ui-monospace, Consolas, monospace; color: #cfe0ff; opacity: .85; z-index: 1; }
.lg-rec { position: absolute; left: 8px; top: 6px; display: flex; align-items: center; gap: 4px; font: 700 .55rem/1 ui-monospace, Consolas, monospace; color: #fff; z-index: 1; }
.lg-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--lg-rec); box-shadow: 0 0 8px var(--lg-rec); animation: lg-blink 1.2s steps(2, start) infinite; }
.lg-cam.offline .lg-rec i { background: #64748b; box-shadow: none; animation: none; }
.lg-cam.offline .lg-nosig { position: absolute; inset: 0; display: grid; place-items: center; font: 700 .62rem ui-monospace, Consolas, monospace; color: #94a3b8; letter-spacing: 2px; z-index: 1; }

.lg-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 620px; }
.lg-feat { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--lg-muted); }
.lg-feat i { color: var(--lg-accent-2); font-size: 1.1rem; line-height: 1; margin-top: 1px; }
.lg-feat b { display: block; color: var(--lg-text); font-weight: 600; font-size: .86rem; margin-bottom: 2px; }
.lg-foot { color: #5f6f88; font-size: .75rem; display: flex; gap: 18px; flex-wrap: wrap; }
.lg-foot .dot { color: var(--lg-ok); }

/* ---------- right: sign in ---------- */
.lg-side { display: grid; place-items: center; padding: 40px 24px; background: radial-gradient(700px 500px at 50% 0%, rgba(47,128,255,.10), transparent 70%), var(--lg-bg); }
.lg-card {
    width: 100%; max-width: 400px; padding: 34px 32px 28px;
    border-radius: 18px; background: rgba(13, 22, 38, .92);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.lg-card h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 4px; }
.lg-card .lg-lead { color: var(--lg-muted); font-size: .86rem; margin: 0 0 22px; }
.lg-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lg-accent-2); background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.25); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.lg-field { margin-bottom: 16px; }
.lg-field label { display: block; font-size: .78rem; font-weight: 600; color: #b9c6db; margin-bottom: 6px; }
.lg-input { position: relative; }
.lg-input i.bi { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #6b7c97; }
.lg-input input {
    width: 100%; height: 46px; padding: 0 44px 0 40px; border-radius: 10px;
    background: #0a1220; color: var(--lg-text); border: 1px solid #22314a; outline: none; font-size: .95rem;
    transition: border-color .15s, box-shadow .15s;
}
.lg-input input::placeholder { color: #55647d; }
.lg-input input:focus { border-color: var(--lg-accent); box-shadow: 0 0 0 4px rgba(47,128,255,.18); }
.lg-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #6b7c97; padding: 6px 8px; cursor: pointer; }
.lg-eye:hover { color: var(--lg-text); }
.lg-row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 20px; font-size: .82rem; color: var(--lg-muted); }
.lg-row input[type=checkbox] { accent-color: var(--lg-accent); margin-right: 6px; }
.lg-btn {
    width: 100%; height: 46px; border: 0; border-radius: 10px; font-weight: 700; font-size: .95rem; color: #fff; cursor: pointer;
    background: linear-gradient(90deg, var(--lg-accent), #3b9bff); box-shadow: 0 10px 24px rgba(47,128,255,.35);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .08s, filter .15s;
}
.lg-btn:hover { filter: brightness(1.08); }
.lg-btn:active { transform: translateY(1px); }
.lg-alt { text-align: center; margin-top: 18px; font-size: .82rem; color: var(--lg-muted); }
.lg-alt a { color: #7fb2ff; text-decoration: none; font-weight: 600; }
.lg-alt a:hover { text-decoration: underline; }
.lg-alert { border-radius: 10px; padding: 10px 12px; font-size: .84rem; margin-bottom: 16px; display: flex; gap: 8px; }
.lg-alert.error { background: rgba(255,59,78,.10); border: 1px solid rgba(255,59,78,.35); color: #ffb3bb; }
.lg-alert.success { background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.35); color: #a7f3c4; }
.lg-secure { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); font-size: .72rem; color: #5f6f88; display: flex; align-items: center; gap: 6px; justify-content: center; }

@keyframes lg-blink { to { visibility: hidden; } }
@keyframes lg-scan { from { background-position: 0 0; } to { background-position: 0 60px; } }

/* ---------- small screens: sign-in first, compact header ---------- */
@media (max-width: 991px) {
    .lg-wrap { grid-template-columns: 1fr; }
    .lg-room { padding: 22px 20px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
    .lg-hero h1 { font-size: 1.4rem; margin-top: 14px; }
    .lg-hero p, .lg-wall, .lg-feats, .lg-foot { display: none; }
    .lg-side { padding: 24px 16px 40px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) { .lg-cam::after, .lg-rec i { animation: none; } }