/* ===========================================================================
   Coliseum — shared design system (Roman monochrome/editorial)
   Themes:  data-theme = black | obsidian | marble
   Accents: data-accent = blue | mono | gold        (defaults: black + blue)
   Applied on <html>. theme.js sets the attributes (persisted in localStorage).
   =========================================================================== */

/* ---- Skins (surface tokens) ---- */
:root,
:root[data-theme="black"]{
  color-scheme:dark;
  --ground:#0A0A0A; --panel:#131313; --panel-2:#1A1A19; --ink:#F4F2EC;
  --muted:#8C887E; --line:#242423; --field:#0E0E0E; --row:#121211; --row-alt:#161615;
  --ok:#5FB47C; --warn:#D69B3E; --off:#7C776C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
}
:root[data-theme="obsidian"]{
  color-scheme:dark;
  --ground:#17140E; --panel:#1E1B14; --panel-2:#242017; --ink:#F1ECE1;
  --muted:#958C7D; --line:#2C2820; --field:#151109; --row:#1E1B14; --row-alt:#221E16;
  --ok:#5FB47C; --warn:#D69B3E; --off:#867C6B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
}
:root[data-theme="marble"]{
  color-scheme:light;
  --ground:#FAF9F6; --panel:#FFFFFF; --panel-2:#F2F0EA; --ink:#15120D;
  --muted:#6C665B; --line:#E4E1D8; --field:#FFFFFF; --row:#FFFFFF; --row-alt:#FAFAF7;
  --ok:#3E8E5A; --warn:#B77F27; --off:#9A917C;
  --shadow:0 1px 2px rgba(30,24,14,.05), 0 12px 30px rgba(30,24,14,.08);
}

/* ---- Accents ---- */
:root,
:root[data-accent="blue"]{ --accent:#2C4676; --accent-2:#4E70AC; --on-accent:#F3F6FB; }
:root[data-accent="mono"]{ --accent:var(--ink); --accent-2:var(--muted); --on-accent:var(--ground); }
:root[data-accent="gold"]{ --accent:#9C7A2E; --accent-2:#C6A047; --on-accent:#1B1305; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
a{color:var(--accent-2)}
::selection{background:color-mix(in srgb,var(--accent) 40%, transparent)}

/* ---- Typography helpers ---- */
.cinzel{font-family:"Cinzel",Georgia,serif}
.muted{color:var(--muted)}
.wordmark{font-family:"Cinzel",Georgia,serif; font-weight:700; letter-spacing:.16em; color:var(--ink)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* ---- Brand marks (via #ic-colosseum / #ic-column / #ic-laurel from brand.js) ---- */
.mark{color:var(--ink); display:inline-block}
.mark.accent{color:var(--accent)}

/* ---- Layout ---- */
.center{min-height:100dvh; display:grid; place-items:center; padding:24px}

/* ---- Card ---- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow)}

/* ---- Buttons ---- */
.btn{
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; border-radius:6px; padding:10px 16px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; letter-spacing:.01em;
  transition:filter .12s, box-shadow .12s;
}
.btn:hover{filter:brightness(1.06)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.ghost{background:transparent}
.btn.danger{background:transparent; color:#C0503F; border-color:color-mix(in srgb,#C0503F 45%,var(--line))}
.btn.small{padding:7px 11px; font-size:13px}
.btn.block{width:100%}
button:disabled,.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---- Inputs ---- */
label.field{display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:12px}
input,select,textarea{
  width:100%; margin-top:6px; padding:10px 12px; font:inherit; font-size:14px;
  background:var(--field); border:1px solid var(--line); border-radius:6px; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent)}
input::placeholder{color:var(--muted)}
.error{color:#E06C5A; font-size:13px; margin-top:10px}

/* ---- Auth card ---- */
.auth{width:min(360px,100%); padding:28px 26px; display:flex; flex-direction:column; gap:6px; text-align:center}
.auth .crest{width:118px; height:118px; margin:0 auto 4px; color:var(--ink)}
.auth h1{margin:0; font-family:"Cinzel",Georgia,serif; font-weight:700; letter-spacing:.22em; font-size:23px; color:var(--ink)}
.auth .tag{color:var(--muted); font-size:13px; margin:0 0 12px}
.auth form{display:flex; flex-direction:column; gap:0; text-align:left}
.auth .btn{margin-top:6px}

/* ---- Segmented code input (operator access code) ---- */
.code{display:flex; gap:5px; justify-content:center; margin:4px 0 8px}
.code input{
  width:33px; height:46px; margin:0; padding:0; text-align:center; flex:none;
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:19px; text-transform:uppercase;
  border-radius:7px; caret-color:var(--accent);
}
.code input:focus{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}

/* ---- Pills / status dots (device lists) ---- */
.pill{font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.pill.line{color:var(--muted); border:1px solid var(--line)}
.status{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink)}
.status .d{width:9px; height:9px; border-radius:50%; flex:none}
.status.ok .d{background:var(--ok)}
.status.repair .d{background:transparent; border:2px solid var(--warn); width:7px; height:7px}
.status.offline{color:var(--muted)} .status.offline .d{background:var(--off)}

/* ---- Badges ---- */
.badge{font-size:11px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted)}
.badge.online{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}

/* ---- Compact theme button + popover ---- */
.theme-wrap{position:relative; display:inline-block}
.theme-wrap.corner{position:fixed; top:14px; right:16px; z-index:50}
.theme-btn{width:34px; height:34px; padding:0; border-radius:8px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--ink); cursor:pointer; display:inline-grid; place-items:center}
.theme-btn:hover{filter:brightness(1.1)}
.theme-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.theme-btn svg{width:18px; height:18px; transform:rotate(-20deg)}
.theme-pop{position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:210px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  padding:12px; display:flex; flex-direction:column; gap:11px}
.theme-pop .grp{display:flex; flex-direction:column; gap:7px}
.theme-pop .lbl{font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:600}
.theme-pop .opts{display:flex; gap:6px; flex-wrap:wrap}
.theme-pop button{font:inherit; font-size:12px; font-weight:600; cursor:pointer; border:1px solid var(--line);
  background:var(--panel-2); color:var(--ink); padding:6px 10px; border-radius:6px; display:inline-flex; align-items:center; gap:6px}
.theme-pop button[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.theme-pop .sw-dot{width:11px; height:11px; border-radius:50%; display:inline-block; border:1px solid rgba(128,120,100,.35)}

/* ---- Theme switcher (inline chips — legacy/optional) ---- */
.theme-switch{display:inline-flex; gap:6px; align-items:center}
.theme-switch .tsg{display:inline-flex; gap:4px; background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:3px}
.theme-switch button{
  font:inherit; font-size:12px; font-weight:600; cursor:pointer; border:0; background:transparent; color:var(--muted);
  padding:5px 10px; border-radius:999px; line-height:1;
}
.theme-switch button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
.theme-switch .sw-dot{width:11px; height:11px; border-radius:50%; display:inline-block; vertical-align:-1px; margin-right:5px; border:1px solid rgba(128,120,100,.35)}
.theme-switch.corner{position:fixed; top:14px; right:16px; z-index:40}

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }