/* REPAN — BBS-stil: tunna linjer, monospace (VT323).
   Färger via tokens: natt (default, svart/vit) och dag (inverterat) —
   html[data-theme=day] byter hela paletten. Inverterade ytor (rubriker,
   aktiva knappar) använder --fg som bakgrund och --bg som text, så de
   följer med automatiskt vid temabyte. */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#000;
  --fg:#fff;
  --dim:rgba(255,255,255,.55);    /* sekundär text */
  --faint:rgba(255,255,255,.3);   /* ramar */
  --ghost:rgba(255,255,255,.12);  /* hårlinjer */
  --mute:rgba(255,255,255,.38);   /* hints, tomlägen */
  --wash:rgba(255,255,255,.06);   /* radbakgrunder, hover */
  --shadow:rgba(255,255,255,.2);  /* boxskuggor */
  --inv-dim:rgba(0,0,0,.55);      /* sekundär text på inverterad yta */
  --scrim:rgba(0,0,0,.82);        /* modal-bakgrund */
  --accent:#55aaff;               /* blå accent: meddelanden från admin */
  --accent-contrast:#000;         /* text ovanpå accentfärgen */
  --accent-soft:rgba(85,170,255,.25);
}
html[data-theme="day"] {
  --bg:#fff;
  --fg:#000;
  --dim:rgba(0,0,0,.6);
  --faint:rgba(0,0,0,.34);
  --ghost:rgba(0,0,0,.14);
  --mute:rgba(0,0,0,.45);
  --wash:rgba(0,0,0,.05);
  --shadow:rgba(0,0,0,.18);
  --inv-dim:rgba(255,255,255,.65);
  --scrim:rgba(255,255,255,.85);
  --accent:#0057d2;
  --accent-contrast:#fff;
  --accent-soft:rgba(0,87,210,.22);
}
html { background:var(--bg); color-scheme:dark; }
html[data-theme="day"] { color-scheme:light; }
body {
  background:var(--bg); color:var(--fg);
  font-family:"VT323", ui-monospace, Menlo, monospace;
  font-size:20px; line-height:1.35;
  min-height:100vh; display:flex; flex-direction:column;
}
button, input, textarea { font:inherit; color:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }

#demobar, #errbar {
  text-align:center; padding:4px 10px; font-size:17px; letter-spacing:1px;
  background:var(--fg); color:var(--bg);
}
#errbar { background:var(--bg); color:var(--fg); border-bottom:2px solid var(--fg); }
.hide { display:none !important; }

/* ── Header ─────────────────────────────── */
header { max-width:980px; width:100%; margin:0 auto; padding:16px 12px 0; overflow:hidden; }
/* Samma ASCII-logga på alla skärmar — skalas med viewporten (~14px på mobil).
   pre bevarar mellanslag, så logovindens tomfas kan aldrig kollapsa höjden. */
pre.logo { line-height:1.05; font-size:clamp(9px,3.6vw,16px); text-align:left; font-family:ui-monospace,Menlo,monospace; }
/* Logovinden är ren glyfsubstitution i textrutnätet (█→▓→▒→░→·→borta),
   driven från app.js — inga transforms, inget som lämnar sidflödet. */
.marq {
  border-top:2px solid var(--fg); border-bottom:2px solid var(--fg);
  text-align:left; padding:3px 0; margin:10px 0 14px;
  letter-spacing:1px; font-size:17px; color:var(--dim);
  overflow:hidden; white-space:nowrap;
}
.marq b { color:var(--fg); font-weight:400; }
.marq-track { display:inline-flex; }
.marq-track span { padding-right:64px; }
#marq2 { display:none; }
/* BBS-marquee på alla skärmar: teckenstegande rullning (steps sätts i JS) */
@media (prefers-reduced-motion: no-preference) {
  #marq2 { display:inline; }
  .marq-track { animation:marq 16s linear infinite; will-change:transform; }
  @keyframes marq { to { transform:translateX(-50%); } }
}
/* Menyn: ikon + text på desktop, bara ikon (kvadrat) på mobil — menyraden
   ska ta minsta möjliga skärmyta på telefonen. aria-label/title bär namnen. */
.menu { display:flex; justify-content:flex-start; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.menu button {
  background:var(--bg); color:var(--fg); border:1px solid var(--faint);
  padding:9px 16px; min-height:44px; letter-spacing:1px; font-size:19px;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.menu button svg { width:22px; height:22px; fill:currentColor; flex-shrink:0; }
.menu button.on { background:var(--fg); color:var(--bg); }
@media (max-width:699px) {
  .menu button .lbl { display:none; }
  .menu button { width:46px; height:46px; padding:0; }
  .menu button svg { width:24px; height:24px; }
}

/* ── Layout ─────────────────────────────── */
main { max-width:980px; width:100%; margin:0 auto; padding:0 12px; flex:1; }
section { display:none; } section.on { display:block; }
.hd {
  background:var(--fg); color:var(--bg); padding:2px 12px; letter-spacing:3px;
  margin:6px 0 12px; display:flex; justify-content:space-between; align-items:center;
  font-size:19px; min-height:34px; flex-wrap:wrap;
}
.hint { color:var(--mute); font-size:16px; margin:10px 2px 26px; }
.frame { border:1px solid var(--fg); padding:12px 14px; margin:10px 0; }
.cta {
  display:block; width:100%; background:var(--fg); color:var(--bg); border:none;
  padding:12px; font-size:22px; letter-spacing:4px; margin-top:12px; min-height:52px;
}

/* ── Veckonavigering ────────────────────── */
.weeknav { display:flex; align-items:center; gap:6px; letter-spacing:0; }
.weeknav button {
  background:var(--fg); color:var(--bg); border:1px solid var(--inv-dim);
  min-width:44px; min-height:30px; font-size:17px; padding:0 8px;
}
.weeknav #wLabel { min-width:56px; text-align:center; }

/* ── Dagremsa (mobil) ───────────────────── */
.daystrip { display:none; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:8px; }
.daystrip button {
  background:var(--bg); border:1px solid var(--faint); color:var(--dim);
  min-height:52px; font-size:16px; line-height:1.1; padding:4px 0;
}
.daystrip button small { display:block; font-size:20px; color:var(--fg); }
.daystrip button.sel { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.daystrip button.sel small { color:var(--bg); }
.daystrip button.today:not(.sel) { border-color:var(--fg); }

/* ── Kalender (Google Calendar-boxar, BBS-skinn) ── */
.cal { border:1px solid var(--fg); overflow:hidden; }
.cal-head { display:grid; border-bottom:1px solid var(--fg); }
.cal-head .gut { border-right:1px solid var(--faint); }
.cal-head .dh {
  text-align:center; padding:4px 2px; font-size:16px; color:var(--dim);
  border-right:1px solid var(--faint); letter-spacing:1px;
}
.cal-head .dh:last-child { border-right:none; }
.cal-head .dh.today { background:var(--fg); color:var(--bg); }
.cal-body { display:grid; position:relative; }
.gutter { position:relative; border-right:1px solid var(--faint); }
.gutter .hh {
  position:absolute; right:5px; transform:translateY(-55%);
  font-size:14px; color:var(--dim);
}
.daycol { position:relative; border-right:1px solid var(--faint); }
.daycol:last-child { border-right:none; }
.daycol .hline { position:absolute; left:0; right:0; height:1px; background:var(--ghost); pointer-events:none; }
.daycol.today { background:var(--wash); }
.booking {
  position:absolute;
  background:var(--bg); border:1px solid var(--fg);
  padding:2px 5px; overflow:hidden; text-align:left;
  font-size:16px; line-height:1.15; min-height:20px;
  box-shadow:3px 3px 0 var(--shadow);
}
.booking .bnd { display:block; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.booking .tid { color:var(--dim); font-size:14px; }
.booking.now { background:var(--fg); color:var(--bg); }
.booking.now .tid { color:var(--inv-dim); }
.booking.gcal { border-style:dashed; box-shadow:none; }
.nowline {
  position:absolute; left:0; right:0; height:0;
  border-top:2px dashed var(--fg); pointer-events:none; z-index:3;
}
.nowline:before {
  content:"◄"; position:absolute; right:-2px; top:-11px; font-size:14px;
}

/* Gearkod-grinden: när servern låst gear-datan göms listytan */
#gear.locked .searchrow, #gear.locked #invList,
#gear.locked .lockhint, #gear.locked #invForm { display:none !important; }
#gearGate { margin-top:0; }

/* ── Sökfält (gear) ─────────────────────── */
.searchrow { display:flex; align-items:center; gap:8px; border:1px solid var(--faint); padding:4px 10px; margin-bottom:10px; }
.searchrow:focus-within { border-color:var(--fg); }
.searchrow .sk { color:var(--dim); letter-spacing:2px; font-size:16px; }
.searchrow input { flex:1; background:transparent; border:none; font-size:20px; min-height:40px; }
.searchrow input:focus { outline:none; }
.searchrow input::-webkit-search-cancel-button { display:none; }
.searchrow button { background:var(--bg); color:var(--dim); border:1px solid var(--faint); min-width:36px; min-height:36px; font-size:16px; }
.searchrow button:hover { color:var(--fg); border-color:var(--fg); }

/* ── Listor (gear + lån) ──────────── */
.trow {
  display:flex; gap:10px; padding:8px 8px; align-items:baseline;
  border-bottom:1px solid var(--ghost); flex-wrap:wrap;
}
.trow:nth-child(odd) { background:var(--wash); }
.trow .fx { flex:1 1 200px; font-size:21px; }
.trow .meta { color:var(--dim); font-size:16px; flex:0 1 auto; }
.trow .st {
  border:1px solid var(--fg); font-size:15px; padding:1px 8px; letter-spacing:2px;
  background:var(--bg); color:var(--fg); min-height:32px;
}
.trow .st.out { background:var(--fg); color:var(--bg); }
.trow button.rowact {
  background:var(--bg); color:var(--dim); border:1px solid var(--faint);
  font-size:15px; padding:2px 10px; min-height:32px; letter-spacing:1px;
}
.trow button.rowact:hover { color:var(--fg); border-color:var(--fg); }
.trow.done .fx, .trow.done .meta { color:var(--mute); }
.empty { color:var(--mute); padding:14px 8px; font-size:18px; }

/* ── Formulär ───────────────────────────── */
.addform { margin-top:22px; }
.formtitle { letter-spacing:3px; color:var(--dim); font-size:16px; margin-bottom:10px; }
.addform label { display:block; margin:10px 0 2px; color:var(--dim); font-size:17px; }
.addform input, .addform textarea, .addform select {
  display:block; width:100%; background:var(--bg); border:1px solid var(--faint);
  padding:9px 10px; margin-top:3px; font-size:20px; min-height:44px;
}
.addform input:focus, .addform textarea:focus, .addform select:focus { outline:none; border-color:var(--fg); }
.addform select { appearance:none; border-radius:0; }
.addform textarea { min-height:96px; resize:vertical; }
.addform button[type=submit] {
  margin-top:16px; background:var(--fg); color:var(--bg); border:none;
  padding:10px 26px; letter-spacing:3px; font-size:20px; min-height:48px; width:100%;
}
.addform .warn { border:1px dashed var(--fg); padding:8px 10px; margin-top:12px; font-size:17px; }
.formrow { display:flex; gap:10px; }
.formrow label { flex:1; }

/* ── Info ───────────────────────────────── */
.infoblock { padding:14px 16px 18px; }
.infolabel {
  display:flex; justify-content:space-between; align-items:center;
  letter-spacing:3px; color:var(--dim); font-size:16px; margin-bottom:6px;
}
.editbtn {
  background:var(--bg); color:var(--dim); border:1px solid var(--faint);
  font-size:14px; padding:2px 10px; letter-spacing:2px; min-height:32px;
}
.editbtn:hover { color:var(--fg); border-color:var(--fg); }
.infolabel .btns { display:flex; gap:6px; }
#newBoxBtn { margin-top:14px; }
.bigcode { text-align:center; font-size:72px; letter-spacing:22px; text-indent:22px; line-height:1.1; }
.infotext { white-space:pre-wrap; font-size:21px; }
.infotext .mut { color:var(--dim); }

/* ── Footer ─────────────────────────────── */
footer { border-top:2px solid var(--fg); margin-top:34px; }
.fkeys {
  max-width:980px; margin:0 auto; display:flex; flex-wrap:wrap; gap:4px 18px;
  padding:6px 12px 10px; font-size:16px; color:var(--dim); justify-content:center; align-items:center;
}
.fkeys b { background:var(--fg); color:var(--bg); padding:0 6px; font-weight:400; margin-right:5px; }
#whoami button { background:none; border:none; color:var(--dim); text-decoration:underline; font-size:16px; padding:0; }
#themeBtn, #adminBtn, #notifBtn {
  background:var(--bg); color:var(--dim); border:1px solid var(--faint);
  font-size:15px; padding:2px 12px; min-height:32px; letter-spacing:2px;
}
#themeBtn:hover, #adminBtn:hover, #notifBtn:hover { color:var(--fg); border-color:var(--fg); }
#notifBtn.on { color:var(--accent); border-color:var(--accent); }
body.admin #adminBtn { background:var(--fg); color:var(--bg); border-color:var(--fg); }

/* Behörighet: utan adminläge döljs alla redigeringsytor utom bokning */
body:not(.admin) .adminonly { display:none !important; }
body.admin .lockhint { display:none; }

/* ── Meddelande från admin (blå accent) ── */
.msgbanner {
  border:1px solid var(--accent); padding:12px 14px; margin:6px 0 16px;
  box-shadow:3px 3px 0 var(--accent-soft);
}
.msgbanner .mlabel {
  color:var(--accent); letter-spacing:3px; font-size:15px; margin-bottom:6px;
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.msgbanner .mby { color:var(--dim); letter-spacing:0; font-size:14px; }
.msgbanner .mtext { white-space:pre-wrap; font-size:21px; }
.msgbanner .mok {
  margin-top:12px; background:var(--accent); color:var(--accent-contrast);
  border:none; padding:8px 22px; letter-spacing:3px; font-size:17px; min-height:44px;
}
.msgadmin { border-color:var(--accent); }
.msgadmin .formtitle { color:var(--accent); }
.msgadmin button[type=submit] { background:var(--accent); color:var(--accent-contrast); }
.checkrow { display:flex; align-items:center; gap:10px; cursor:pointer; }
.checkrow input { accent-color:var(--accent); width:22px; height:22px; min-height:0; margin:0; }
#msgActive .trow { border-bottom:none; }

/* ── Adminpanel ─────────────────────────── */
.monthnav { display:flex; align-items:center; gap:10px; margin:4px 0 10px; }
.monthnav span { min-width:150px; text-align:center; letter-spacing:2px; }
.stattab { width:100%; border-collapse:collapse; }
.stattab th {
  text-align:left; color:var(--dim); font-size:14px; letter-spacing:1px;
  border-bottom:1px solid var(--faint); padding:4px 6px; font-weight:400;
}
.stattab td { padding:6px; border-bottom:1px solid var(--ghost); font-size:18px; }
.stattab .num { text-align:right; font-variant-numeric:tabular-nums; }

/* ── Refreshknapp (alltid synlig) ───────── */
#refreshBtn {
  position:fixed; right:14px; bottom:14px; z-index:40;
  width:54px; height:54px;
  background:var(--bg); color:var(--fg); border:1px solid var(--fg);
  font-size:28px; line-height:1;
  box-shadow:3px 3px 0 var(--shadow);
}
#refreshBtn.busy { background:var(--fg); color:var(--bg); pointer-events:none; }
@media (prefers-reduced-motion: no-preference) {
  #refreshBtn.busy { animation:spin 0.8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
}

/* ── Modal ──────────────────────────────── */
.overlay {
  position:fixed; inset:0; background:var(--scrim);
  display:flex; align-items:center; justify-content:center; z-index:50; padding:14px;
}
.modal {
  background:var(--bg); border:2px solid var(--fg); width:100%; max-width:460px;
  max-height:92vh; overflow:auto; box-shadow:6px 6px 0 var(--shadow);
}
.modalhd {
  background:var(--fg); color:var(--bg); padding:4px 12px; letter-spacing:3px;
  display:flex; justify-content:space-between; align-items:center; font-size:19px;
}
.modalhd button { background:none; border:none; color:var(--bg); font-size:22px; min-width:44px; min-height:36px; }
.modal .addform, .modal .detail { padding:8px 16px 18px; margin-top:0; }
.detail p { margin:8px 0; font-size:21px; }
.detail p .lbl { color:var(--dim); font-size:16px; display:block; letter-spacing:2px; }
.detail .danger {
  margin-top:18px; width:100%; background:var(--bg); color:var(--fg);
  border:1px dashed var(--fg); padding:10px; letter-spacing:3px; font-size:18px; min-height:48px;
}
.detail .danger.armed { background:var(--fg); color:var(--bg); border-style:solid; }

/* ── Mobil ──────────────────────────────── */
@media (max-width:699px) {
  .daystrip { display:grid; }
  body { font-size:19px; }
  .hd { letter-spacing:2px; font-size:18px; }
  .bigcode { font-size:56px; letter-spacing:16px; text-indent:16px; }
  .formrow { flex-direction:row; } /* tid-fälten får plats sida vid sida även på mobil */
}
@media (prefers-reduced-motion: no-preference) {
  .blink { animation:bl 1s steps(1) infinite; }
  @keyframes bl { 50% { opacity:0; } }
}