/* ═══════════════════════════════════════════════════════════════════════
   THEME — light (default) and dark
   ═══════════════════════════════════════════════════════════════════════
   Selected by a data-theme attribute on <html>, written by config/theme.php
   before first paint so there is no flash of the wrong theme. "auto" follows
   the operating system.

   HOW IT WORKS
   The pages used to hardcode their palette (#fff, #0f2942, #e2e8f0 …) inside
   their own <style> blocks, where no amount of overriding could reach them.
   Those literals are now semantic tokens, so a theme is just a different set
   of values for the same eight names:

       --surface / --surface-2 / --surface-3   page and card backgrounds
       --ink / --ink-body / --ink-muted / --ink-faint   text, strongest first
       --line                                  borders and dividers

   Two things are deliberately NOT tokenised, because they must look the same
   in both themes: brand panels (background:#0f2942 and the navy gradients)
   and the white text that sits on them (color:#fff). The gold #c9a84c also
   stays put — it reads well on light and dark alike.
   ══════════════════════════════════════════════════════════════════════ */

/* ── light (default) ─────────────────────────────────────────────────── */
:root {
    --surface:    #ffffff;
    --surface-2:  #f8fafc;
    --surface-3:  #f1f4f8;

    --ink:        #0f2942;
    --ink-body:   #2d3748;
    --ink-muted:  #64748b;
    --ink-faint:  #94a3b8;

    --line:       #e2e8f0;

    --elev-1: 0 2px 10px rgba(15,41,66,.07);
    --elev-2: 0 8px 32px rgba(15,41,66,.12);
}

/* ── dark ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
    --surface:    #151d27;   /* cards sit slightly above the page */
    --surface-2:  #111821;
    --surface-3:  #0d131a;   /* page background */

    --ink:        #eaf0f7;
    --ink-body:   #dae3ee;
    --ink-muted:  #a7b8cc;
    --ink-faint:  #7e91a8;

    --line:       #27323f;

    /* --primary is now used ONLY as a brand surface (hero gradients, nav bars,
       solid buttons). It deliberately stays navy on dark: those panels are
       meant to look the same in both themes, and the white text sitting on
       them would be unreadable if the navy flipped to a light tint.
       Anything that used --primary as *text* was rewritten to --ink. */
    --primary:       #0f2942;
    --primary-light: #1a4068;

    --accent:        #d9b962;
    --accent-light:  #f0d891;
    --gray-100: #111821;
    --gray-200: #27323f;
    --gray-400: #7e91a8;
    --gray-600: #a7b8cc;
    --text:     #eaf0f7;
    /* --white is text-on-brand-surface only (its background uses were rewritten
       to --surface), so it must stay white or the navbar logo and outline
       buttons go invisible against the navy. */
    --white:    #ffffff;
    --success:  #34d399;
    --danger:   #f87171;

    --elev-1: 0 2px 10px rgba(0,0,0,.5);
    --elev-2: 0 8px 32px rgba(0,0,0,.6);
    --shadow-sm: 0 2px 10px rgba(0,0,0,.5);
    --shadow-md: 0 8px 32px rgba(0,0,0,.6);

    color-scheme: dark;
}

html[data-theme="dark"] body {
    background: var(--surface-3);
    color: var(--ink-body);
}

/* ── things the token swap alone cannot reach ────────────────────────── */

/* Pale status tints would glow on a dark page; restate them as washes. */
html[data-theme="dark"] {
    --tint-danger:  rgba(248,113,113,.13);
    --tint-success: rgba(52,211,153,.13);
    --tint-warn:    rgba(245,158,11,.13);
    --tint-info:    rgba(59,130,246,.13);
}
html[data-theme="dark"] [style*="#fff5f5"],
html[data-theme="dark"] [style*="#fed7d7"] { background: var(--tint-danger) !important; color: #fca5a5 !important; }
html[data-theme="dark"] [style*="#f0fff4"] { background: var(--tint-success) !important; color: #6ee7b7 !important; }
html[data-theme="dark"] [style*="#fffbeb"],
html[data-theme="dark"] [style*="#fde68a"] { background: var(--tint-warn)    !important; color: var(--accent-light) !important; }

html[data-theme="dark"] .alert-error   { background: var(--tint-danger);  border-color: rgba(248,113,113,.35); color: #fca5a5; }
html[data-theme="dark"] .alert-success { background: var(--tint-success); border-color: rgba(52,211,153,.35);  color: #6ee7b7; }
html[data-theme="dark"] .bk-note       { background: var(--tint-warn);    border-left-color: var(--accent); color: var(--accent-light); }
html[data-theme="dark"] .bk-pending    { background: rgba(217,185,98,.07); border-color: rgba(217,185,98,.28); }
html[data-theme="dark"] .role-hint     { background: var(--surface-2); border-color: var(--line); color: var(--ink-muted); }
html[data-theme="dark"] .role-hint strong,
html[data-theme="dark"] .role-card-body strong { color: var(--ink); }
html[data-theme="dark"] .role-card     { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .role-card:hover { border-color: var(--accent); }

/* Form controls: browsers do not inherit these reliably. */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--ink-faint); }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus { border-color: var(--accent); }
/* Chrome paints autofilled fields a hard yellow-white; mask it. */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
    caret-color: var(--ink);
}
html[data-theme="dark"] select option { background: var(--surface-2); color: var(--ink); }

/* Tables. */
html[data-theme="dark"] th { background: var(--surface-2); color: var(--ink-muted); border-color: var(--line); }
html[data-theme="dark"] td { border-color: var(--line); }
html[data-theme="dark"] tr:hover td { background: rgba(255,255,255,.035); }

/* Shadows built for a white page read as smudges on a dark one. */
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] [class*="panel"],
html[data-theme="dark"] .modal-box { box-shadow: var(--elev-2); }

/* Photographs are harsh at full brightness against dark chrome. */
html[data-theme="dark"] .room-card img,
html[data-theme="dark"] .bk-img,
html[data-theme="dark"] .mosaic-item img,
html[data-theme="dark"] .room-thumb { filter: brightness(.9) saturate(.95); }

/* Scrollbars. */
html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-3); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: 8px; border: 3px solid var(--surface-3);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #38465a; }

/* Navy buttons vanish against a dark page — the brand navy and the dark
   surface are only a few steps apart. Primary actions switch to the gold,
   which carries the brand and passes contrast on both themes. */
html[data-theme="dark"] .btn-primary-full,
html[data-theme="dark"] .btn-primary-lg,
html[data-theme="dark"] .btn-primary-sm,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-gold-lg,
html[data-theme="dark"] .btn-save,
html[data-theme="dark"] button[type="submit"].btn-full {
    background: linear-gradient(135deg, #d9b962, #b9963f) !important;
    color: #10161d !important;
    border-color: transparent;
}
html[data-theme="dark"] .btn-primary-full:hover,
html[data-theme="dark"] .btn-primary-lg:hover,
html[data-theme="dark"] .btn-primary-sm:hover,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-gold-lg:hover,
html[data-theme="dark"] .btn-save:hover {
    box-shadow: 0 6px 20px rgba(217,185,98,.28);
}
/* Secondary/outline buttons need a visible edge on dark. */
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-outline-sm,
html[data-theme="dark"] .btn-sm.btn-outline-sm {
    background: transparent; border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] .btn-ghost:hover { background: var(--ink); color: var(--surface-3); border-color: var(--ink); }

/* Divider rules were a literal #e2e8f0 background, not a border. */
html[data-theme="dark"] .auth-divider::before,
html[data-theme="dark"] .auth-divider::after { background: var(--line); }
html[data-theme="dark"] .auth-divider { color: var(--ink-faint); }

/* ── the toggle control ──────────────────────────────────────────────── */
.theme-toggle {
    position: fixed; right: 18px; bottom: 18px; z-index: 9999;
    width: 46px; height: 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(15,41,66,.12);
    background: #fff; color: #0f2942;
    box-shadow: 0 6px 22px rgba(15,41,66,.20);
    cursor: pointer; font-size: 17px; line-height: 1;
    transition: transform .2s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.theme-toggle:hover { transform: translateY(-2px) scale(1.05); }
.theme-toggle:focus-visible { outline: 2px solid #c9a84c; outline-offset: 3px; }
html[data-theme="dark"] .theme-toggle {
    background: var(--surface); color: var(--accent-light);
    border-color: var(--line); box-shadow: 0 6px 22px rgba(0,0,0,.6);
}
.theme-toggle .ico-dark { display: none; }
html[data-theme="dark"] .theme-toggle .ico-dark  { display: inline; }
html[data-theme="dark"] .theme-toggle .ico-light { display: none; }

/* ── floating "back to admin" pill ───────────────────────────────────── */
/* Sits bottom-left, opposite the theme toggle, so the two never collide. */
.admin-return {
    position: fixed; left: 18px; bottom: 18px; z-index: 9998;
    display: inline-flex; align-items: center; gap: 11px;
    padding: 9px 15px 9px 10px; border-radius: 100px;
    background: linear-gradient(135deg, #0f2942, #1a4068);
    color: #fff; text-decoration: none;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 8px 26px rgba(15,41,66,.34);
    font-size: 13px; line-height: 1.25;
    transition: transform .2s ease, box-shadow .25s ease;
}
.admin-return:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,41,66,.42); }
.admin-return:focus-visible { outline: 2px solid #c9a84c; outline-offset: 3px; }
.admin-return-icon {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(201,168,76,.9); color: #0f2942; font-size: 13px;
}
.admin-return-text { display: flex; flex-direction: column; min-width: 0; }
.admin-return-text strong { font-weight: 800; font-size: 13px; letter-spacing: .01em; }
.admin-return-text span {
    font-size: 11px; color: rgba(255,255,255,.62); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
}
.admin-return-go { font-size: 11px; color: rgba(255,255,255,.5); flex-shrink: 0; }

/* The pill is also rendered as a form button when switching roles. */
.admin-return-form { position: fixed; left: 18px; bottom: 18px; z-index: 9998; margin: 0; }
/* The admin sidebar owns the bottom-left corner (its Sign Out link sits there),
   and it can be collapsed, so the resident switch is anchored bottom-RIGHT and
   stacked above the theme toggle instead. */
.role-switch { position: fixed; right: 18px; bottom: 76px; z-index: 9998; margin: 0; }
.admin-return-form .admin-return, .role-switch .role-switch-btn { position: static; }
.admin-return-form .admin-return { border: 1px solid rgba(255,255,255,.14); cursor: pointer; font-family: inherit; }

/* "View as Resident" — shown inside the admin panel. Gold, to read as a step
   sideways rather than the navy "back to admin" step. */
.role-switch-btn {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 9px 15px 9px 10px; border-radius: 100px;
    background: linear-gradient(135deg, #c9a84c, #a8873a);
    color: #10161d; border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 8px 26px rgba(201,168,76,.34);
    font-size: 13px; line-height: 1.25; cursor: pointer; font-family: inherit;
    transition: transform .2s ease, box-shadow .25s ease;
}
.role-switch-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(201,168,76,.44); }
.role-switch-btn:focus-visible { outline: 2px solid #0f2942; outline-offset: 3px; }
.role-switch-icon {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(15,41,66,.88); color: #f0d891; font-size: 13px;
}
.role-switch-text { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.role-switch-text strong { font-weight: 800; font-size: 13px; }
.role-switch-text span { font-size: 11px; color: rgba(16,22,29,.62); font-weight: 600; white-space: nowrap; }
.role-switch-go { font-size: 11px; color: rgba(16,22,29,.5); flex-shrink: 0; }

@media (max-width: 640px) {
    .role-switch { right: 18px; bottom: 74px; }
    .role-switch-btn { padding: 9px; gap: 0; }
    .role-switch-text, .role-switch-go { display: none; }
}
@media print { .role-switch, .admin-return-form { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .role-switch-btn { transition: none; }
    .role-switch-btn:hover { transform: none; }
}

/* The pill is already brand-navy, so on dark it only needs a stronger edge. */
html[data-theme="dark"] .admin-return {
    border-color: rgba(217,185,98,.3);
    box-shadow: 0 8px 26px rgba(0,0,0,.6);
}

/* On phones collapse to just the shield so it never covers content. */
@media (max-width: 640px) {
    .admin-return { padding: 9px; gap: 0; }
    .admin-return-text, .admin-return-go { display: none; }
}
@media print { .admin-return { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .admin-return { transition: none; }
    .admin-return:hover { transform: none; }
}

@media print { .theme-toggle { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
    .theme-toggle:hover { transform: none; }
}