/* Direktsupport Mobile help - graphite + orange (same look as the app's graphite theme). */
:root { --bg:#16181b; --card:#212429; --card2:#2a2d33; --text:#eceef1; --muted:#a3a8b0; --dim:#6c7280; --line:#33373e;
        --accent:#f08a24; --accent2:#d97614; --green:#22c55e; --red:#ef4444; --yellow:#facc15; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg:#f4f5f7; --card:#ffffff; --card2:#eef0f3; --text:#16181d; --muted:#545c69; --dim:#8a909b; --line:#dde0e6; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color:var(--accent); }
.top { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:12px 22px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:17px; display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; }
.brand .logo { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#3a3d44,#23252a); border:1px solid #4a4e57;
               color:var(--accent); font-size:13px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; letter-spacing:-.5px; }
.muted { color:var(--muted); font-weight:400; }
nav { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-left:auto; font-size:14px; }
nav a { color:var(--muted); text-decoration:none; padding:4px 2px; border-bottom:2px solid transparent; }
nav a.on, nav a:hover { color:var(--text); border-bottom-color:var(--accent); }
nav .logout { color:var(--red); }
nav .langs { color:var(--dim); font-size:13px; }
nav .langs a { color:var(--dim); border:0; }
main { max-width:1000px; margin:0 auto; padding:22px 16px 60px; }
h1 { font-size:24px; margin:0 0 4px; }
h2 { font-size:17px; margin:0 0 8px; }
.sub { color:var(--muted); margin:0 0 18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:16px; }
.grid .card { margin:0; }
.feature p { color:var(--muted); font-size:14px; margin:0; }
.feature .icon { font-size:22px; color:var(--accent); margin-bottom:6px; line-height:1; }
.field { display:flex; flex-direction:column; gap:4px; margin:0 0 12px; }
.field label, .field .lbl { color:var(--muted); font-size:13px; }
.radios { display:flex; gap:20px; flex-wrap:wrap; }
.radios label { color:var(--text); font-size:15px; display:flex; align-items:center; gap:6px; cursor:pointer; }
.radios input { accent-color:var(--accent); width:16px; height:16px; margin:0; }
input[type=text], input[type=password], input[type=email], input[type=tel] {
  width:100%; background:var(--card2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font:15px "Segoe UI", sans-serif; }
input:focus { outline:none; border-color:var(--accent); }
.btn { background:var(--accent); color:#1a1a1a; border:0; border-radius:8px; padding:10px 18px; font:700 15px "Segoe UI", sans-serif; cursor:pointer; text-decoration:none; display:inline-block; text-align:center; }
.btn:hover { background:var(--accent2); }
.btn.wide { width:100%; margin-top:4px; }
.msg { border-radius:10px; padding:10px 14px; margin:0 0 16px; border-left:4px solid var(--accent); background:var(--card2); font-size:14px; }
.msg.ok { border-left-color:var(--green); } .msg.err { border-left-color:var(--red); } .msg.warn { border-left-color:var(--yellow); }
.tag { display:inline-block; font-size:11px; font-weight:700; border-radius:999px; padding:1px 8px; vertical-align:2px; }
.tag.soon { background:rgba(240,138,36,.18); color:var(--accent); }
.login { max-width:400px; margin:50px auto; }
.center { text-align:center; margin:14px 0 0; font-size:14px; }
/* step 2: camera sessions */
a.card.link { display:block; color:inherit; text-decoration:none; } a.card.link:hover { border-color:var(--accent); }
.step { display:inline-flex; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#1a1a1a; font-size:13px; font-weight:800; align-items:center; justify-content:center; margin-right:8px; vertical-align:1px; }
.small { font-size:13px; } #camState { margin-left:10px; }
.bigcode { font:800 44px/1.1 Consolas, "Segoe UI", monospace; letter-spacing:6px; color:var(--accent); margin:6px 0 12px; }
.codein { text-align:center; font-size:28px !important; letter-spacing:6px; }
.tblwrap { overflow-x:auto; scrollbar-color:var(--line) transparent; }
.tbl { width:100%; border-collapse:collapse; font-size:14px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.tbl th, .tbl td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl th { color:var(--muted); font-weight:600; font-size:13px; }
.mono { font-family:Consolas, monospace; }
.tag.ok { background:rgba(34,197,94,.16); color:var(--green); } .tag.bad { background:rgba(239,68,68,.16); color:var(--red); }
@media (max-width:640px) { .top { padding:10px 16px; } .btn { max-width:100%; white-space:normal; } nav { margin-left:0; } .login { margin:24px auto; } }
/* SMS phone page */
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
a.danger { color:var(--red); }
.steps { margin:0 0 14px; padding-left:20px; color:var(--muted); } .steps li { margin:0 0 4px; }
input.num { width:90px; padding:6px 8px; } td.nowrap { white-space:nowrap; }
/* input check (js/check.js) + admin pages (foretag, priser) + order page (bestall) */
.btn:disabled, .btn.off { opacity:.45; cursor:not-allowed; } .btn:disabled:hover { background:var(--accent); }
.btn.ghost:disabled:hover { background:transparent; }
input.bad, select.bad, textarea.bad { border-color:var(--red) !important; }
input[type=radio].bad, input[type=checkbox].bad { outline:2px solid var(--red); outline-offset:1px; }
.checkhint { color:var(--yellow); font-size:13px; margin:8px 0 0; }
select, textarea { width:100%; background:var(--card2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font:15px "Segoe UI", sans-serif; }
textarea { resize:vertical; } select:focus, textarea:focus { outline:none; border-color:var(--accent); }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } .cols.four { grid-template-columns:repeat(4,1fr); }
@media (max-width:760px) { .cols.four { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .cols, .cols.four { grid-template-columns:1fr; } }
label.check { display:flex; align-items:flex-start; gap:8px; color:var(--text); font-size:14px; cursor:pointer; }
label.check input { accent-color:var(--accent); width:16px; height:16px; margin:2px 0 0; flex:none; }
.tbl td.wrap { white-space:normal; min-width:160px; max-width:280px; }
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:14px; margin:0 0 8px; }
.plan { position:relative; display:flex; flex-direction:column; gap:6px; background:var(--card); border:2px solid var(--line); border-radius:12px; padding:16px 18px 16px 44px; cursor:pointer; }
.plan:hover { border-color:var(--dim); } .plan:has(input:checked) { border-color:var(--accent); }
.plan input { position:absolute; left:16px; top:20px; accent-color:var(--accent); width:18px; height:18px; margin:0; }
.plan .pname { font-weight:700; font-size:17px; } .plan .price { font-size:24px; font-weight:800; color:var(--accent); }
.plan .price small { font-size:13px; color:var(--muted); font-weight:400; }
.plan .pdesc { color:var(--muted); font-size:14px; } .plan .pinc { font-size:13px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* small buttons in tables (/foretag orders) + red "delete" button */
.btn.small { padding:6px 12px; font-size:13px; }
.btn.danger { background:transparent; color:var(--red); border:1px solid var(--red); } .btn.danger:hover { background:var(--card2); }
.tbl td { vertical-align:top; }
.tbl td.actions { white-space:nowrap; width:1%; } .tbl td.actions .btn { display:block; margin:0 0 6px; }
/* history: many columns - text columns wrap narrow, status tags stack, so the table fits a laptop screen */
.tbl.hist td.wrap { min-width:90px; max-width:220px; }
.tbl.hist td.wrap .tag { display:inline-block; margin:1px 0; white-space:nowrap; }
/* history: filter (GET form) + pager, 10 rows per page */
.filter { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr)); gap:0 14px; align-items:end; padding:14px 16px 10px; }
.filter .field { margin:0 0 10px; }
.filter .factions { display:flex; gap:8px; margin:0 0 10px; }
.filter .factions .btn { padding:9px 16px; }
.filter .quick { grid-column:1 / -1; margin:0 0 4px; }
.filter .quick a { text-decoration:none; } .filter .quick a:hover { text-decoration:underline; }
input[type=date] { width:100%; background:var(--card2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:9px 12px; font:15px "Segoe UI", sans-serif; color-scheme:dark; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) input[type=date] { color-scheme:light; } }
.pager { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin:14px 0 0; }
span.btn.off { opacity:.4; cursor:default; }