/* Shared styles for login.html and admin.html - same design tokens as the
   dashboard itself (public/app.html) so the three pages read as one product,
   not as a design system bolted onto another. Mobile-first: a phone is the
   most likely place someone logs in or opens their account for the first time. */
:root{
  color-scheme: dark;
  --plane:#0b0d11; --surface:#16181d; --surface-2:#1c1f26; --surface-3:#23262e;
  --ink:#f2f3f5; --ink-2:#a8adb8; --ink-3:#787e8a;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.055);
  --accent:#3987e5; --good:#0ca30c; --crit:#d03b3b;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.28);
}
@media (prefers-color-scheme: light){
  :root:not([data-force-dark]){
    color-scheme: light;
    --plane:#f2f3f5; --surface:#ffffff; --surface-2:#f7f8fa; --surface-3:#eceef1;
    --ink:#0b0b0b; --ink-2:#52514e; --ink-3:#7c7b76;
    --border:rgba(11,11,11,.10); --border-2:rgba(11,11,11,.06);
    --accent:#2a78d6; --good:#0ca30c; --crit:#d03b3b;
    --shadow:0 1px 2px rgba(11,11,11,.05), 0 8px 24px rgba(11,11,11,.05);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--plane); color:var(--ink);
  font-family:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  direction:rtl;
}
h1,h2,h3{margin:0 0 4px; font-weight:650; letter-spacing:-.01em}
p{margin:0 0 10px}
a{color:var(--accent)}
.muted{color:var(--ink-3)}
.sm{font-size:13px}

.wrap{max-width:420px; margin:0 auto; padding:40px 20px 60px; min-height:100dvh; display:flex; flex-direction:column; justify-content:center}
.wrap.wide{max-width:900px; justify-content:flex-start; padding-top:28px}
.center{text-align:center}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px 22px; box-shadow:var(--shadow); margin-bottom:16px;
}
.hidden,[hidden]{display:none!important}

label{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin:14px 0 6px}
label:first-child{margin-top:0}
input, select{
  width:100%; font:inherit; font-size:16px; /* 16px avoids iOS auto-zoom on focus */
  padding:13px 14px; border-radius:11px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--ink); min-height:48px;
}
input:focus, select:focus{outline:none; border-color:var(--accent)}

button{font:inherit; cursor:pointer}
.btn{
  display:block; width:100%; min-height:50px; padding:13px 18px; margin-top:18px;
  background:var(--accent); color:#fff; border:none; border-radius:12px;
  font-size:16px; font-weight:650; text-align:center; transition:.12s;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55; cursor:default}
.btn-ghost{
  background:var(--surface-2); color:var(--ink); border:1px solid var(--border);
}
.btn-small{width:auto; min-height:38px; padding:8px 14px; font-size:13.5px; border-radius:9px; margin-top:0}
.btn-danger{background:var(--crit); color:#fff}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.between{justify-content:space-between}
.spacer{flex:1}

.toast{
  position:fixed; bottom:20px; left:16px; right:16px; max-width:420px; margin:0 auto;
  background:var(--ink); color:var(--plane); border-radius:12px; padding:12px 18px;
  text-align:center; font-weight:600; z-index:50; box-shadow:var(--shadow);
}

.pill{display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 11px; font-size:12.5px; font-weight:700}
.pill.good{background:color-mix(in srgb, var(--good) 18%, transparent); color:var(--good)}
.pill.off{background:var(--surface-3); color:var(--ink-3)}
.pill.admin{background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent)}

/* ---------- admin: user table ---------- */
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:right; font-weight:600; color:var(--ink-3); font-size:12px; text-transform:uppercase;
  letter-spacing:.03em; padding:10px 8px; border-bottom:1px solid var(--border)}
td{padding:10px 8px; border-bottom:1px solid var(--border-2); vertical-align:middle}
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

.top{display:flex; align-items:center; gap:10px; margin-bottom:20px}
.top .logo{font-size:26px}
.top h1{font-size:19px}

@media(max-width:480px){
  .wrap{padding:24px 14px 48px}
  .card{padding:18px 16px}
}