/* Selfium WiFi Management — admin panel visual identity.
   Uses the official Selfium Tech logo (assets/selfium-logo.png, copied from
   the project's own assets/app_icon.png — white artwork, so it always sits
   on the fixed-dark brand header/topbar regardless of the page theme).
   Every class/id already referenced by admin.js or a page's own JS is kept
   exactly as-is; only appearance changed.
   Theme: light / dark / auto (see theme.js) — dark is the base :root
   palette below; [data-theme="light"] overrides it explicitly, and
   [data-theme="auto"] overrides it only when the OS/browser itself prefers
   light. Direction (RTL/LTR) is driven entirely by the <html dir> attribute
   (see i18n.js) rather than a hardcoded CSS direction, so it can follow the
   selected language. */

:root {
  --bg: #090e1a;
  --surface: #131c30;
  --surface-2: #1a2540;
  --border: #263356;
  --text: #e7ecf6;
  --text-muted: #92a1c2;
  --brand: #22d3ee;
  --brand-dark: #0891b2;
  --brand-soft: rgba(34, 211, 238, 0.12);
  --success: #34d399;
  --success-bg: #062821;
  --danger: #f87171;
  --danger-bg: #331014;
  --amber: #fbbf24;
  --amber-bg: #2e2205;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.6);
  /* The brand header/topbar keep a fixed dark ground in every theme, so the
     white logo artwork is always legible. */
  --brand-surface: #0c1220;
  --brand-surface-border: #1c2740;
  --brand-text: #e7ecf6;
}

:root[data-theme="light"] {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eef1f8;
  --border: #dbe1ee;
  --text: #101627;
  --text-muted: #5c6784;
  --brand: #0891b2;
  --brand-dark: #0e7490;
  --brand-soft: rgba(8, 145, 178, 0.1);
  --success: #059669;
  --success-bg: #e3fbf1;
  --danger: #dc2626;
  --danger-bg: #fdecec;
  --amber: #b45309;
  --amber-bg: #fef3d9;
  --shadow: 0 12px 28px -16px rgba(16, 22, 39, 0.25);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #f4f6fb;
    --surface: #ffffff;
    --surface-2: #eef1f8;
    --border: #dbe1ee;
    --text: #101627;
    --text-muted: #5c6784;
    --brand: #0891b2;
    --brand-dark: #0e7490;
    --brand-soft: rgba(8, 145, 178, 0.1);
    --success: #059669;
    --success-bg: #e3fbf1;
    --danger: #dc2626;
    --danger-bg: #fdecec;
    --amber: #b45309;
    --amber-bg: #fef3d9;
    --shadow: 0 12px 28px -16px rgba(16, 22, 39, 0.25);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background:
    radial-gradient(1100px 480px at 15% -10%, var(--brand-soft), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color .15s, color .15s;
}
a { color: var(--brand); }
.container { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
.narrow { max-width: 440px; }

/* ─── Brand header (pre-auth pages: login / totp / forgot-password) ─── */
.brand-header {
  text-align: center; margin-bottom: 28px; padding: 22px 16px 20px;
  background: var(--brand-surface); border: 1px solid var(--brand-surface-border);
  border-radius: var(--radius); color: var(--brand-text);
}
.brand-header .brand-controls { justify-content: center; margin-bottom: 12px; }
.brand-header .logo { height: 40px; width: auto; display: block; margin: 0 auto 10px; }
.brand-mark { font-size: 26px; font-weight: 800; letter-spacing: 0.3px; }
.brand-mark .brand-accent { color: var(--brand); }
.brand-mark .brand-suffix { color: var(--brand-text); font-weight: 600; }
.brand-tagline { color: #92a1c2; font-size: 14px; margin-top: 4px; }

/* ─── Language / theme toggles — used both in the pre-auth brand header
   and the authenticated topbar. ─── */
.brand-controls { display: flex; gap: 8px; align-items: center; }
.lang-toggle, .theme-toggle {
  display: inline-flex; border: 1px solid var(--brand-surface-border); border-radius: 999px; overflow: hidden;
}
.lang-btn, .theme-btn {
  background: transparent; color: #92a1c2; border: none; border-radius: 0; padding: 5px 10px;
  font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1;
}
.lang-btn.active, .theme-btn.active { background: var(--brand); color: #04202a; }
.lang-btn:not(.active):hover, .theme-btn:not(.active):hover { color: #e7ecf6; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  margin-bottom: 16px;
}
h1 { font-size: 21px; margin: 0 0 4px; font-weight: 700; letter-spacing: 0.2px; }
h2 { font-size: 17px; margin: 0 0 16px; font-weight: 700; }
p.subtitle { color: var(--text-muted); margin: 0 0 20px; font-size: 14px; }
label { display: block; margin: 14px 0 6px; font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
button {
  cursor: pointer; border: none; border-radius: var(--radius-sm); padding: 11px 20px;
  font-size: 15px; font-weight: 700; transition: transform .1s, box-shadow .15s, background .15s, opacity .15s;
}
button.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #04202a;
  box-shadow: 0 6px 18px -8px rgba(34, 211, 238, 0.55);
}
button.primary:hover { filter: brightness(1.08); }
button.primary:active { transform: translateY(1px); }
button.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
button.secondary:hover { background: #223058; }
button.danger { background: #7f1d1d; color: #fecaca; }
button.danger:hover { background: #991b1b; }
button:disabled { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.error { color: #fca5a5; background: var(--danger-bg); border: 1px solid #5c1a1a; border-radius: var(--radius-sm); padding: 10px 14px; margin: 12px 0; font-size: 14px; }
.success { color: #6ee7b7; background: var(--success-bg); border: 1px solid #0d4a3a; border-radius: var(--radius-sm); padding: 10px 14px; margin: 12px 0; font-size: 14px; font-weight: 600; }
.hint { color: var(--text-muted); font-size: 13px; margin-top: 6px; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { text-align: start; padding: 11px 8px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--text-muted); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.4px; }
tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.active { background: var(--success-bg); color: var(--success); }
.badge.inactive { background: var(--danger-bg); color: var(--danger); }
.badge.role-ADMIN { background: var(--amber-bg); color: var(--amber); }
.badge.role-EDITOR { background: var(--brand-soft); color: var(--brand); }
.badge.role-READ_ONLY { background: var(--surface-2); color: var(--text-muted); }

nav.topbar { background: var(--brand-surface); border-bottom: 1px solid var(--brand-surface-border); padding: 10px 16px; color: var(--brand-text); }
nav.topbar .container { display: flex; justify-content: space-between; align-items: center; padding: 0; max-width: 1100px; flex-wrap: wrap; gap: 8px; }
nav.topbar .row.brand-row { gap: 20px; }
nav.topbar .brand { display: flex; align-items: center; gap: 14px; }
nav.topbar .brand img.logo { height: 56px; width: auto; display: block; }
nav.topbar .brand strong { font-size: 17px; font-weight: 800; color: var(--brand-text); }
nav.topbar .brand strong .brand-accent { color: var(--brand); }
nav.topbar .brand small { color: #92a1c2; font-size: 12px; font-weight: 600; }
nav.topbar a { color: var(--brand-text); text-decoration: none; margin-inline-start: 18px; font-size: 14px; font-weight: 600; padding-bottom: 3px; border-bottom: 2px solid transparent; }
nav.topbar a:hover { color: var(--brand); }
nav.topbar a.active-link { color: var(--brand); border-bottom-color: var(--brand); }
nav.topbar .row.controls-row { gap: 14px; }
/* Badges sit on the topbar's fixed-dark ground in every theme — give them
   fixed-dark-friendly colors instead of the theme-variable ones (which
   would be pale/low-contrast against that dark bar in light mode). */
nav.topbar .badge.role-ADMIN { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
nav.topbar .badge.role-EDITOR { background: rgba(34, 211, 238, 0.15); color: #22d3ee; }
nav.topbar .badge.role-READ_ONLY { background: rgba(255, 255, 255, 0.08); color: #92a1c2; }

.recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-family: monospace; font-size: 16px; background: var(--bg); padding: 16px; border-radius: var(--radius-sm); margin: 16px 0; border: 1px solid var(--border); }
.qr-box { background: white; padding: 16px; border-radius: var(--radius-sm); display: inline-block; margin: 12px 0; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 16, 0.72); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(2px); }
.modal { background: var(--surface); border-radius: var(--radius); padding: 26px; width: 100%; max-width: 480px; border: 1px solid var(--border); box-shadow: var(--shadow); }
select {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 15px;
}
.hidden { display: none; }
.pt-40 { padding-top: 40px; }
.pt-60 { padding-top: 60px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.full-width { width: 100%; }
.inline-checkbox { width: auto; display: inline-block; }
.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.manual-secret { font-family: monospace; font-size: 16px; user-select: all; color: var(--brand); }
.action-btn { margin-inline-end: 6px; margin-bottom: 4px; }
.setting-title { font-weight: 700; }
.hint.tight { margin-top: 2px; }
@media (max-width: 640px) {
  .container { padding: 16px 10px; }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; padding: 8px; }
  td { border: none; padding: 6px 4px; }
  td::before { content: attr(data-label); color: var(--text-muted); font-size: 12px; display: block; }
}