/* prrp_admin 2.0 – "Komplett adminpanel": svart, ren och luftig (ägarens designbild 10-12).
   Nästan ogenomskinlig svart ram, kort med svag ljus överkant, vita huvudknappar, färg ENDAST för status
   (grön = online/klar, röd = fel/öppen, gul = väntar, blå = pågår). 8/12 px hörn, 8/16/24 px avstånd.
   Lokala fonter/ikoner, inga blur-filter (CEF-kostnad). Överlägg använder --solid så inget syns igenom. */

:root {
  --bg: rgba(8,8,9,.93); --side: rgba(255,255,255,.014); --panel: rgba(255,255,255,.026); --panel2: rgba(255,255,255,.05); --panel3: rgba(255,255,255,.08);
  --input: rgba(255,255,255,.03); --solid: #0e0e10; --solid2: #151517; --hud: rgba(10,10,11,.92);
  --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.12); --line3: rgba(255,255,255,.24);
  --text: #F4F4F5; --text2: #A1A1AA; --muted: #6E6E76;
  --accent: #FFFFFF; --accent-hover: #FFFFFF; --accent-ink: #0A0A0A; --accent-soft: rgba(255,255,255,.08); --accent-line: rgba(255,255,255,.3);
  --green: #4ADE80; --red: #F87171; --amber: #FBBF24; --blue: #60A5FA;
  --ok: var(--green); --warn: var(--amber); --bad: var(--red); --info: var(--blue);
  --ok-soft: rgba(74,222,128,.1); --warn-soft: rgba(251,191,36,.1); --bad-soft: rgba(248,113,113,.1); --info-soft: rgba(96,165,250,.1);
  --card: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
  --card-sh: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.22);
  --r: 8px; --r2: 12px; --s1: 8px; --s2: 16px; --s3: 24px; --ctl: 38px; --panelw: 400px;
  /* äldre namn som används i inline-stilar i JS */
  --card2: var(--panel2); --content: var(--bg); --frame: var(--side); --row: var(--panel2); --gold: var(--warn); --accent2: var(--accent);
  --bg2: var(--panel); --accent-ink2: var(--accent-ink);
  font-family: 'Poppins', 'Segoe UI', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--text);
}
* { box-sizing: border-box; font-family: inherit; }
html, body { margin: 0; height: 100%; background: transparent; overflow: hidden; }
/* PRRP 2026-10-12: color-scheme: dark på :root gjorde HELA NUI-ramen ogenomskinligt svart i FiveM (svart skärm för alla).
   Dokumentet ska ha normalt färgschema; det mörka schemat (mörka rullister/fält) gäller bara panelens innehåll. */
html, :root { color-scheme: normal !important; }
body > * { color-scheme: dark; }
.hidden { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
i.fa-solid, i.fa-regular { font-family: 'Font Awesome 6 Free'; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(255,255,255,.25); }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }

#root { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.22); }
@keyframes fadein { from { opacity: 0; transform: scale(.995); } to { opacity: 1; transform: none; } }

/* ── Ram ─────────────────────────────────────────────────────────── */
.shell {
  position: relative; display: flex; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
  background: radial-gradient(1200px 500px at 0% 0%, rgba(255,255,255,.035), transparent 60%), var(--bg);
  width: min(1760px, calc(100vw - 24px)); height: min(990px, calc(100vh - 24px));
  animation: fadein .18s ease-out; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07); transition: opacity .18s ease;
}
body.away .shell { opacity: .25; }

/* ── Vänstermeny ─────────────────────────────────────────────────── */
.side { flex: none; width: clamp(214px, 14.5vw, 248px); background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.brand { flex: none; display: flex; align-items: center; gap: 12px; height: 72px; padding: 0 20px; }
.brand .logo { flex: none; width: 38px; height: 38px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.brand .logo svg { display: block; width: 100%; height: 100%; }
.brand .bw { min-width: 0; line-height: 1.05; }
.brand .wm { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: #fff; white-space: nowrap; }
.brand .wm em { font-style: normal; }
.brand .bt { margin-top: 4px; font-size: 9.5px; font-weight: 600; letter-spacing: .42em; color: var(--text2); text-transform: uppercase; white-space: nowrap; }
.navs { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 12px; }
.navsep { height: 1px; margin: 10px 10px; background: var(--line); }
.navgroup { margin: 14px 0 4px; padding: 0 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.nav { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; margin-bottom: 2px; padding: 0 12px; border: 0; border-radius: var(--r); background: transparent; color: var(--text2); font-size: 13.5px; font-weight: 500; text-align: left; white-space: nowrap; transition: background .12s, color .12s; }
.nav i { width: 18px; text-align: center; font-size: 14px; flex: none; color: var(--muted); transition: color .12s; }
.nav .l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav:hover { background: rgba(255,255,255,.045); color: var(--text); }
.nav:hover i { color: var(--text2); }
.nav.on { background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.nav.on i { color: #fff; }
.nav.on::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: #fff; }
.nav .badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sidefoot { flex: none; position: relative; display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); }
.sidefoot .who { flex: 1; min-width: 0; line-height: 1.25; }
.sidefoot .who b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidefoot .who span { display: block; font-size: 11.5px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { flex: none; display: grid; place-items: center; border-radius: 50%; position: relative; text-transform: uppercase; width: 36px; height: 36px; font-size: 13px; font-weight: 600; color: #fff;
  background: radial-gradient(circle at 30% 25%, #3d3d42, #161618 72%); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.avatar.sm { width: 32px; height: 32px; font-size: 11.5px; }
.avatar.xs { width: 26px; height: 26px; font-size: 10px; }
.avatar .pip { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px #0b0b0c; }
.pop { position: absolute; z-index: 40; min-width: 230px; background: var(--solid2); border: 1px solid var(--line2); border-radius: var(--r2); padding: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.6); animation: pop .12s ease-out; }
.sidefoot .pop { left: 0; right: 0; bottom: calc(100% + 6px); }
.pop button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 13.5px; text-align: left; }
.pop button:hover { background: rgba(255,255,255,.06); }
.pop button i { width: 18px; text-align: center; color: var(--text2); }
.pop button.danger, .pop button.danger i { color: var(--red); }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.pop .pophead { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.pop .pophead b { display: block; font-size: 13.5px; } .pop .pophead span { display: block; font-size: 11.5px; color: var(--text2); }

/* ── Huvudyta: topprad + sidhuvud ────────────────────────────────── */
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.topbar { flex: none; height: 72px; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 28px; border-bottom: 1px solid var(--line); }
.gsearch { flex: 0 1 440px; min-width: 200px; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--input); transition: border-color .12s, background .12s; }
.gsearch:hover { border-color: var(--line2); }
.gsearch:focus-within { border-color: var(--line3); background: rgba(255,255,255,.05); }
.gsearch i { color: var(--muted); font-size: 13px; }
.gsearch input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font-size: 13.5px; }
.gsearch input::placeholder { color: var(--muted); }
.gsearch kbd { font-family: inherit; font-size: 11px; color: var(--muted); border: 1px solid var(--line2); border-radius: 5px; padding: 0 6px; line-height: 18px; }
.topbar .ttl { display: none; }
.topbar .stat { flex: 1; min-width: 0; }
.spill { flex: none; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); line-height: 1.15; }
.spill .sd { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(74,222,128,.15), 0 0 10px rgba(74,222,128,.6); }
.spill b { display: block; font-size: 12.5px; font-weight: 600; }
.spill .sp2 { display: block; font-size: 11px; color: var(--text2); white-space: nowrap; }
.tbtn { flex: none; position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--text2); font-size: 15px; transition: background .12s, color .12s, border-color .12s; }
.tbtn:hover { background: var(--panel2); color: #fff; border-color: var(--line2); }
.tbtn .tb-n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #0b0b0c; }
.clock { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock i { color: var(--muted); font-size: 13px; }
.clock .ct { color: var(--text2); }
.mebtn { flex: none; position: relative; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 4px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); color: var(--text); }
.mebtn:hover { background: var(--panel2); border-color: var(--line2); }
.mebtn .avatar { width: 32px; height: 32px; font-size: 11.5px; }
.mebtn .mn { font-size: 13px; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mebtn > i { font-size: 10px; color: var(--muted); }
.mewrap { position: relative; flex: none; }
.mewrap .pop { right: 0; top: calc(100% + 8px); }
.xbtn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r); background: transparent; color: var(--text2); font-size: 18px; }
.xbtn:hover { background: rgba(255,255,255,.06); color: #fff; }
.pagehead { flex: none; display: flex; align-items: center; gap: 16px; padding: 22px 28px 18px; }
.pagehead.hidden { display: none; }
.ph-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r2); border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); color: #fff; font-size: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 16px rgba(0,0,0,.35); }
.ph-t { flex: 1; min-width: 0; line-height: 1.25; }
.ph-t h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.ph-t span { display: block; margin-top: 2px; font-size: 13px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.page-title { display: none; }

/* sidopanel (Ge föremål, loggdetaljer) – docked när det finns plats, annars överlagring */
.sidepanel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; width: var(--panelw); max-width: 100%; display: flex; flex-direction: column; background: linear-gradient(180deg, #18181a, #0f0f11); border-left: 1px solid var(--line2); box-shadow: -18px 0 40px rgba(0,0,0,.5); animation: slidein .16s ease-out; }
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-head { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 18px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.sp-head .ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line2); background: var(--panel2); font-size: 16px; color: #fff; }
.sp-head .tt { flex: 1; min-width: 0; }
.sp-head .tt b { display: block; font-size: 17px; font-weight: 700; color: #fff; }
.sp-head .tt span { display: block; font-size: 12.5px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.sp-foot { flex: none; padding: 16px 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.sp-foot .btns { display: flex; gap: 8px; }
.sp-foot .btns .btn { flex: 1; }
@media (min-width: 1560px) { .shell.has-panel .main { margin-right: var(--panelw); } .shell.has-panel .sidepanel { box-shadow: none; } }

/* ── Allmänt ─────────────────────────────────────────────────────── */
.title { font-size: 15px; font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; color: #fff; }
h3.title { font-size: 17px; }
h4.title { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; margin-bottom: 10px; }
h4.title i { font-size: 12px; color: var(--muted); }
.sub { color: var(--text2); font-size: 13px; }
.hint { color: var(--text2); font-size: 12.5px; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack.tight { gap: 8px; }
.mono { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
.pos { color: var(--green); } .neg { color: var(--red); }
.main, .col, .card, .item, .note, .msg, .toast, .dlg, .kv dd, .sub { min-width: 0; overflow-wrap: anywhere; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* listor */
.list { display: flex; flex-direction: column; gap: 8px; }
.item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r2); padding: 12px 14px; text-align: left; width: 100%; display: flex; gap: 12px; align-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: background .12s, border-color .12s; }
button.item:hover, .item.click:hover { background: var(--panel2); border-color: var(--line2); }
.item.on { border-color: var(--accent-line); background: var(--panel3); box-shadow: inset 3px 0 0 #fff; }
.item .main1 { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .main2 { color: var(--text2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; display: inline-block; }
.dot.on { background: var(--green); box-shadow: 0 0 8px rgba(74,222,128,.55); }
.dot.off { background: var(--red); }

/* etiketter: neutral grå, färgade bara för status */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); color: var(--text2); white-space: nowrap; line-height: 1.6; }
.tag.ok { color: var(--green); border-color: rgba(74,222,128,.28); background: var(--ok-soft); }
.tag.warn { color: var(--amber); border-color: rgba(251,191,36,.3); background: var(--warn-soft); }
.tag.bad { color: var(--red); border-color: rgba(248,113,113,.3); background: var(--bad-soft); }
.tag.info { color: var(--blue); border-color: rgba(96,165,250,.3); background: var(--info-soft); }
.tag.acc { color: #fff; border-color: var(--accent-line); background: var(--accent-soft); }
.tag.ok::before, .tag.warn::before, .tag.bad::before, .tag.info::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.prio.hog { color: var(--red); border-color: rgba(248,113,113,.3); background: var(--bad-soft); }
.tag.prio.medel { color: var(--amber); border-color: rgba(251,191,36,.3); background: var(--warn-soft); }
.tag.prio.lag { color: var(--text2); border-color: var(--line2); background: transparent; }
.tag.stafftag { background: #fff; color: #0a0a0a; border-color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; padding: 0 6px; line-height: 1.6; }
/* status med prick (Online/Offline i tabeller) */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--text2); }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status.on { color: var(--green); } .status.on::before { background: var(--green); box-shadow: 0 0 8px rgba(74,222,128,.6); }
.status.off { color: var(--red); } .status.off::before { background: var(--red); }
.status.idle::before { background: var(--muted); }

/* knappar och formulär */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ctl); padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--r); background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: background .12s, border-color .12s, color .12s, transform .06s; }
.btn:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); border-color: var(--line3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn i { font-size: 12.5px; }
.btn.primary { background: linear-gradient(180deg, #FFFFFF, #E4E4E7); border-color: #fff; color: var(--accent-ink); box-shadow: 0 4px 14px rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.12); }
.btn.primary:hover:not(:disabled) { background: #fff; }
.btn.danger { background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.35); color: var(--red); }
.btn.danger:hover:not(:disabled) { background: var(--bad-soft); border-color: var(--red); }
.btn.danger.solid { background: var(--red); border-color: var(--red); color: #1a0606; }
.btn.danger.solid:hover:not(:disabled) { background: #FC9C9C; }
.btn.small { height: 30px; padding: 0 11px; font-size: 12px; }
.btn.icon { width: var(--ctl); padding: 0; }
.btn.small.icon { width: 30px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text2); box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: rgba(255,255,255,.06); color: var(--text); border-color: transparent; }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: sp .7s linear infinite; }
.btn.primary.busy::after { border-color: rgba(0,0,0,.2); border-top-color: var(--accent-ink); }
.btn.armed { background: var(--warn-soft); border-color: var(--amber); color: var(--amber); }
.f { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text2); min-width: 0; }
.f .flab { font-size: 12.5px; font-weight: 500; color: var(--text2); }
.f .req { color: var(--text2); }
.ferr { color: var(--red); font-size: 12px; font-weight: 400; min-height: 0; }
.f.err .in, .f.err .combo { border-color: var(--red); }
.fcount { align-self: flex-end; color: var(--muted); font-size: 12px; font-weight: 400; }
input.in, select.in, textarea.in { background: var(--input); border: 1px solid var(--line2); border-radius: var(--r); padding: 0 12px; height: var(--ctl); color: var(--text); width: 100%; min-width: 0; font-size: 13.5px; outline: none; transition: border-color .12s, box-shadow .12s, background .12s; }
textarea.in { padding: 9px 12px; height: auto; min-height: 84px; resize: vertical; line-height: 1.45; }
input.in::placeholder, textarea.in::placeholder { color: var(--muted); }
input.in:hover, select.in:hover, textarea.in:hover { border-color: var(--line3); }
input.in:focus, select.in:focus, textarea.in:focus, .search:focus-within, .combo:focus-within { border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 3px rgba(255,255,255,.07); background: rgba(255,255,255,.05); }
input.in:disabled, select.in:disabled, textarea.in:disabled { opacity: .5; cursor: not-allowed; }
select.in { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #A1A1AA 50%), linear-gradient(135deg, #A1A1AA 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
select.in option { background: #161618; }
input[type=checkbox] { accent-color: #fff; width: 15px; height: 15px; }
.search { display: flex; align-items: center; gap: 10px; background: var(--input); border: 1px solid var(--line2); border-radius: var(--r); padding: 0 12px; height: var(--ctl); flex: 1 1 240px; min-width: 160px; max-width: 520px; transition: border-color .12s, background .12s; }
.search:hover { border-color: var(--line3); }
.search i { color: var(--muted); font-size: 13px; }
.search input { background: none; border: 0; outline: 0; flex: 1; min-width: 0; height: 100%; font-size: 13.5px; }
.search input::placeholder { color: var(--muted); }
.search .clr { background: none; border: 0; color: var(--muted); padding: 0 2px; font-size: 13px; }
.search .clr:hover { color: var(--text); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.25); }
.seg button { height: 30px; padding: 0 13px; border: 0; border-radius: 7px; background: transparent; color: var(--text2); font-size: 12.5px; font-weight: 600; transition: background .12s, color .12s; }
.seg button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.seg button.on { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.35); }
.seg.full { display: flex; } .seg.full button { flex: 1; }
.tabs { display: flex; align-items: stretch; gap: 4px; padding: 0 8px; border-bottom: 1px solid var(--line); flex: none; position: relative; }
.tab { position: relative; height: 42px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--text2); font-size: 13.5px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--text); }
.tab.on { color: #fff; border-bottom-color: #fff; }
.tab .fa-chevron-down { font-size: 10px; }
.cmenu2 { position: absolute; top: calc(100% + 6px); z-index: 20; min-width: 200px; padding: 6px; background: var(--solid2); border: 1px solid var(--line2); border-radius: var(--r2); box-shadow: 0 16px 40px rgba(0,0,0,.6); animation: pop .12s ease-out; }
.cmenu2 button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left; font-size: 13.5px; }
.cmenu2 button:hover { background: rgba(255,255,255,.06); }
.cmenu2 button.on { color: #fff; background: rgba(255,255,255,.08); }
.cmenu2 button i { width: 16px; text-align: center; color: var(--text2); }
.cmenu2 button.danger, .cmenu2 button.danger i { color: var(--red); }
.cmenu2 button:disabled { opacity: .4; cursor: not-allowed; }
.cmenu2 hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r2); padding: 18px; box-shadow: var(--card-sh); }
.card.flat { background: transparent; box-shadow: none; }
.kv { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); gap: 10px 16px; margin: 0; }
.kv dt { color: var(--text2); font-size: 13px; } .kv dd { margin: 0; font-weight: 500; font-size: 13.5px; }
.det { border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.det > summary { list-style: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; cursor: pointer; color: var(--text); font-weight: 600; font-size: 13.5px; border-radius: var(--r2); }
.det > summary::-webkit-details-marker { display: none; }
.det > summary:hover { background: rgba(255,255,255,.03); }
.det > summary i.lead { color: var(--text2); width: 18px; text-align: center; }
.det > summary .chev { margin-left: auto; color: var(--muted); font-size: 11px; transition: transform .15s; }
.det[open] > summary .chev { transform: rotate(180deg); }
.det > .detb { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; }

/* tabeller */
.tablewrap { border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); overflow: auto; box-shadow: var(--card-sh); }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 0 14px; height: 40px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #111113; z-index: 1; white-space: nowrap; }
table.t td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; color: var(--text); font-size: 13.5px; }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: rgba(255,255,255,.03); }
table.t tr.click { cursor: pointer; }
table.t tr.sel td { background: var(--accent-soft); }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.t td.dim, table.t td.ts { color: var(--text2); font-size: 13px; }
table.t td.mono { color: var(--text2); }
.t tbody tr { content-visibility: auto; contain-intrinsic-size: auto 49px; }
.cellname { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cellname b { display: block; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cellname small { display: block; font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowbtn { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--text2); }
.rowbtn:hover { background: var(--panel2); color: #fff; border-color: var(--line2); }

/* tillstånd */
.state { color: var(--text2); padding: 36px 16px; text-align: center; }
.state.err { color: var(--red); }
.state .big { display: block; font-size: 30px; color: rgba(255,255,255,.18); margin-bottom: 12px; }
.state b { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; font-size: 15px; }
.spin { width: 16px; height: 16px; border: 2px solid var(--line2); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: sp .8s linear infinite; vertical-align: middle; margin-right: 8px; }
@keyframes sp { to { transform: rotate(360deg); } }
.msg { padding: 11px 14px; border-radius: var(--r); border: 1px solid var(--line2); font-size: 13px; }
.msg.ok { border-color: rgba(74,222,128,.3); color: #C9F5D9; background: var(--ok-soft); }
.msg.bad { border-color: rgba(248,113,113,.35); color: #F8CACA; background: var(--bad-soft); }
.msg.warn { border-color: rgba(251,191,36,.3); color: #F3E2B0; background: var(--warn-soft); }
.msg.info { border-color: var(--line2); color: var(--text); background: var(--panel2); }
.result { margin-top: 8px; }

/* dialog och notiser */
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 12px; }
.dlg { background: linear-gradient(180deg, #1a1a1c, #101012); border: 1px solid var(--line2); border-radius: 14px; width: min(480px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); animation: pop .14s ease-out; }
.dlg.wide { width: min(1120px, 100%); max-height: 94vh; }
.dlg h3 { margin: 0; padding: 18px 22px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 700; color: #fff; }
.dlg .db { padding: 18px 22px; overflow: auto; }
.dlg .df { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: 380px; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--solid2); border: 1px solid var(--line2); border-radius: var(--r2); padding: 12px 16px; font-size: 13px; font-weight: 500; animation: pop .14s ease-out; box-shadow: 0 14px 36px rgba(0,0,0,.55); }
.toast::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.toast.ok::before { background: var(--green); } .toast.bad::before { background: var(--red); } .toast.warn::before { background: var(--amber); }
.summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); }
.summary .st { min-width: 0; line-height: 1.35; }
.summary .st b { display: block; font-weight: 600; font-size: 14px; }
.summary .st span { display: block; font-size: 12.5px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* sidindelning */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; flex-wrap: wrap; }
.pager .pg { color: var(--text2); font-size: 12.5px; }
.pager .pgb { display: flex; gap: 8px; align-items: center; }
.pager.top { display: none; }

/* ── Verktygsrad + innehåll (alla listsidor) ─────────────────────── */
.top { flex: none; display: flex; align-items: center; gap: 10px 12px; padding: 0 28px 16px; flex-wrap: wrap; }
.top:empty { display: none; }
.body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); border-top: 1px solid var(--line); }
.body.single { grid-template-columns: minmax(0, 1fr); }
.col { min-height: 0; overflow: auto; padding: 20px 28px; }
.col + .col { border-left: 1px solid var(--line); }
.body > .col:first-child:not(:last-child) { padding: 20px 14px 20px 28px; }
.chips { display: none; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 16px; }
.perm-grid label { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.perm-grid label.dis { opacity: .45; }
.savebar { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 16px -8px 0; border: 1px solid var(--line2); border-radius: var(--r2); background: var(--solid2); box-shadow: 0 -10px 24px rgba(0,0,0,.35); }
.savebar .dirty { color: var(--amber); font-size: 13px; }
.savebar .clean { color: var(--muted); font-size: 13px; }
.thread { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.note { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px; }
.note.pub { border-color: var(--accent-line); }
.note small { color: var(--text2); }
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat .log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.scrollbox { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); padding: 8px; }
.formwrap { max-width: 720px; width: 100%; }
.chipx { display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px 2px 10px; font-size: 12.5px; }
.chipx .x { background: transparent; border: 0; color: inherit; font-size: 16px; line-height: 1; padding: 0 6px; border-radius: 4px; }
.chipx .x:hover { background: rgba(255,255,255,.12); }

/* ── Spelare / Fordon / Stashes: tabell → detaljvy ───────────────── */
.plv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pltools { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 28px 16px; }
.pltools .search { flex: 1 1 320px; max-width: 560px; }
.pltools .cnt { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--text2); white-space: nowrap; }
.pltools .cnt .dot { width: 7px; height: 7px; }
.pltools select.in { width: auto; min-width: 200px; }
.plscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px 24px; }
.plscroll .tablewrap { overflow: visible; }
.plscroll .hint { margin: 12px 2px 0; }
.ptbl td { padding-top: 9px; padding-bottom: 9px; }
.ptbl .c-id { width: 76px; color: var(--text2); font-variant-numeric: tabular-nums; font-weight: 500; }
.ptbl .c-act { width: 52px; text-align: right; }
.ptbl tr.grp td { background: rgba(255,255,255,.02); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding-top: 8px; padding-bottom: 8px; cursor: default; }
.ptbl tr.grp:hover td { background: rgba(255,255,255,.02); }
.ptbl .plate { display: inline-block; font-family: 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 8px; border-radius: 5px; background: rgba(255,255,255,.08); border: 1px solid var(--line2); color: #fff; }
.pdv { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 28px; }
.pback { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 30px; margin: 0 0 12px -4px; padding: 0 10px 0 6px; border: 0; border-radius: 7px; background: transparent; color: var(--text2); font-size: 12.5px; font-weight: 500; }
.pback:hover { color: #fff; background: rgba(255,255,255,.05); }
.pl-detail { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pl-empty { margin: auto; text-align: center; color: var(--text2); max-width: 320px; }
.pl-empty i { font-size: 36px; color: rgba(255,255,255,.18); margin-bottom: 12px; display: block; }
.pl-empty b { display: block; color: var(--text); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
/* profilhuvud */
.phead { flex: none; position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r2) var(--r2) 0 0; border-bottom: 0;
  background: radial-gradient(120% 160% at 0% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 55%), var(--card); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.phead .avatar.lg { width: 68px; height: 68px; border-radius: 16px; font-size: 23px; border-color: rgba(255,255,255,.2); box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15); }
.phead .avatar.lg .pip { width: 14px; height: 14px; right: -3px; bottom: -3px; }
.phead .who { flex: 1 1 260px; min-width: 0; }
.phead .who h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; line-height: 1.2; color: #fff; flex-wrap: wrap; }
.phead .who h2 > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.phead .who h2 .idc { font-size: 11.5px; font-weight: 600; color: var(--text2); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); letter-spacing: 0; }
.phead .who .meta { margin-top: 6px; font-size: 12.5px; color: var(--text2); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.phead .who .meta b { color: var(--text); font-weight: 500; }
.phead .who .meta .on { color: var(--green); } .phead .who .meta .off { color: var(--muted); }
.phead .meta .sep { display: none; }
.phead .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.phead .acts .btn { height: 36px; }
.phead.solo { border-bottom: 1px solid var(--line); border-radius: var(--r2); margin-bottom: 16px; }
.plist { display: flex; flex-direction: column; gap: 2px; }
.ptabs { flex: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 14px; border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 0 0 var(--r2) var(--r2); background: rgba(0,0,0,.18); margin-bottom: 18px; }
.ptabs.tabs { padding: 10px 14px; }
.ptabs .tab { height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; margin: 0; font-size: 13px; }
.ptabs .tab:hover { background: rgba(255,255,255,.05); }
.ptabs .tab.on { background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.07)); border-color: var(--line2); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.pnote { flex: none; margin-bottom: 12px; }
.pbody { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px; padding-right: 4px; margin-right: -4px; }
.pbody > .stack { padding-top: 0; }
.pbody .card .title, .pbody h4.title { letter-spacing: .1em; }
/* översikt: brickor + kort */
.ptiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.ptile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); box-shadow: var(--card-sh); min-width: 0; }
.ptile .pti { flex: none; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; color: #fff; border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.ptile .ptt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ptile .ptt span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.ptile .ptt b { font-size: 19px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ptile .ptt small { font-size: 12px; font-weight: 500; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.povgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.povgrid > .card { min-width: 0; }
.povgrid .wide { grid-column: span 2; }
@media (max-width: 1500px) { .povgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .povgrid .wide { grid-column: auto; } }
.mrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mrow:last-child { border-bottom: 0; padding-bottom: 0; }
.mrow:first-of-type { padding-top: 2px; }
.mrow .mi { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text); font-size: 13px; }
.mrow .mt { flex: 1; min-width: 0; line-height: 1.25; }
.mrow .mt span { display: block; font-size: 11.5px; color: var(--text2); }
.mrow .mt b { display: block; font-size: 15px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.vbars { display: flex; flex-direction: column; gap: 12px; }
.vbar { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 4px 10px; }
.vbar i { color: var(--text2); font-size: 12.5px; text-align: center; }
.vbar .vl { font-size: 12.5px; font-weight: 500; color: var(--text); }
.vbar .vv { font-size: 12.5px; font-weight: 600; color: var(--text2); font-variant-numeric: tabular-nums; }
.vbar .vt { grid-column: 2 / 4; height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.vbar .vt > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #d4d4d8, #fff); }
.vbar.low .vt > span { background: var(--red); } .vbar.mid .vt > span { background: var(--amber); }
.posbox { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: center; }
.posbox .pc { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text2); font-variant-numeric: tabular-nums; }
.posbox .pc b { color: var(--text); font-weight: 600; }
.minimap { position: relative; height: 96px; border-radius: 10px; border: 1px solid var(--line2); overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.1), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 16px), #0c0c0e; }
.minimap::before { content: ''; position: absolute; left: -10%; right: -10%; top: 58%; height: 2px; background: rgba(255,255,255,.14); transform: rotate(-14deg); }
.minimap::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: 38%; width: 2px; background: rgba(255,255,255,.12); transform: rotate(8deg); }
.minimap i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -80%); font-size: 22px; color: #fff; filter: drop-shadow(0 3px 6px rgba(0,0,0,.7)); z-index: 1; }

/* Inventory */
.invcard { border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); box-shadow: var(--card-sh); }
.invtop { position: sticky; top: 0; z-index: 3; background: linear-gradient(180deg, #19191b, #131315); border-radius: var(--r2) var(--r2) 0 0; border-bottom: 1px solid var(--line); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.invhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.invhead .ttl { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; color: #fff; }
.invhead .ttl i { font-size: 17px; color: var(--text2); }
.invhead .wt { color: var(--text2); font-size: 13px; white-space: nowrap; }
.wbar { flex: 1 1 140px; min-width: 100px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.wbar i { display: block; height: 100%; background: linear-gradient(90deg, #d4d4d8, #fff); border-radius: 3px; }
.wbar.high i { background: var(--amber); } .wbar.full i { background: var(--red); }
.wpct { color: var(--text2); font-size: 12.5px; min-width: 36px; text-align: right; }
.invtools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.invtools .search { flex: 1 1 200px; max-width: none; }
.invtbl td { padding: 8px 14px; }
.invtbl th:first-child, .invtbl td:first-child { width: 68px; padding-right: 0; }
.invtbl .nm { font-weight: 600; }
.invtbl .sm { font-size: 12px; color: var(--muted); }
.invtbl tr.detrow td { background: rgba(0,0,0,.22); padding: 12px 14px 14px 82px; }
.invtbl tr.detrow:hover td { background: rgba(0,0,0,.22); }
table.t.invtbl th.num, table.t.invtbl td.num { text-align: left; width: 110px; }
table.t.invtbl th:last-child, table.t.invtbl td:last-child { text-align: right; width: 90px; }
.iimg { width: 46px; height: 40px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; flex: none; border: 1px solid var(--line2);
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.1), rgba(0,0,0,.3) 75%); }
.iimg img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.iimg i { color: var(--muted); font-size: 15px; }
.iimg.sm { width: 32px; height: 32px; border-radius: 7px; } .iimg.sm img { width: 24px; height: 24px; }
.iimg.lg { width: 50px; height: 50px; } .iimg.lg img { width: 38px; height: 38px; }
.trash { color: var(--red); }
.trash:hover:not(:disabled) { background: var(--bad-soft) !important; color: var(--red) !important; }

/* sökbart föremålsval */
.combo { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 10px; background: var(--input); border: 1px solid var(--line2); border-radius: var(--r); }
.combo input { flex: 1; min-width: 0; height: 42px; background: none; border: 0; outline: 0; font-size: 13.5px; }
.combo .pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.combo .pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo .cx { background: none; border: 0; color: var(--muted); padding: 4px 6px; border-radius: 6px; }
.combo .cx:hover { color: var(--text); background: rgba(255,255,255,.06); }
.combo .menu { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 10; max-height: 280px; overflow-y: auto; background: var(--solid2); border: 1px solid var(--line2); border-radius: var(--r2); box-shadow: 0 16px 40px rgba(0,0,0,.6); padding: 6px; }
.combo .opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; text-align: left; }
.combo .opt:hover, .combo .opt.act { background: rgba(255,255,255,.07); }
.combo .opt .t1 { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo .opt .t2 { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ekonomi */
.balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.balance { padding: 18px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); box-shadow: var(--card-sh); }
.balance small { display: block; color: var(--text2); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.balance b { display: block; margin-top: 6px; font-size: 24px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }

/* ── Loggar ──────────────────────────────────────────────────────── */
.lgbar { flex: none; padding: 0 28px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.lgbar .r1 { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.lgbar .more { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); }
.lgbar .more .live { grid-column: 1 / -1; }
.lgbody { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 28px; }
.lgtbl td { padding: 9px 14px; }
.lgtbl .ts { color: var(--text2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lgtbl tr.bad td:first-child { box-shadow: inset 3px 0 0 var(--red); } .lgtbl tr.warn td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.lgtbl tr.bad td { background: rgba(248,113,113,.05); } .lgtbl tr.warn td { background: rgba(251,191,36,.04); }
.res { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.res.ok { color: var(--text2); } .res.ok .dot { background: var(--green); }
.res.bad { color: var(--red); } .res.bad .dot { background: var(--red); }
.res.warn { color: var(--amber); } .res.warn .dot { background: var(--amber); }
@media (max-width: 1500px) { .c-reason { display: none; } }
.sumcard { border-left: 3px solid #fff; }
.sumcard.bad { border-left-color: var(--red); } .sumcard.warn { border-left-color: var(--amber); }
.rawpre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; margin: 6px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(0,0,0,.3); }

/* Refunds, kommandon */
.rcard { display: flex; flex-direction: column; gap: 10px; }
.rname { font-size: 16px; font-weight: 700; color: #fff; }
.chipwrap { display: flex; flex-wrap: wrap; gap: 6px; }
.ichip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.05); border: 1px solid var(--line2); color: var(--text); border-radius: 7px; padding: 3px 10px; font-size: 12.5px; font-weight: 500; }
.ichip b { color: #fff; font-weight: 700; }
button.ichip.click { cursor: pointer; font: inherit; font-size: 12.5px; line-height: inherit; }
button.ichip.click:hover { border-color: var(--line3); background: rgba(255,255,255,.1); }
button.ichip.click:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.cmdh { margin: 26px 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.cmdh:first-child { margin-top: 0; }
.cmdgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.cmd { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.cmd.locked { opacity: .5; }
.cmdname { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255,255,255,.08); border: 1px solid var(--line2); border-radius: 6px; padding: 1px 8px; align-self: flex-start; }
.cmddesc { font-size: 13px; line-height: 1.5; color: var(--text2); }
.rgrid, .evgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.evgrid { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
.rgrid .rcard { height: 100%; }
.rcard .rfoot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.rcard .rfoot .row .btn { flex: 1; }
.rsearch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; }
.rsearch > i { color: #fff; }
.evcard { margin: 0; }
.evcard .row.wrap { align-items: center; }
@media (max-width: 1500px) { .rgrid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .evgrid { grid-template-columns: minmax(0, 1fr); } }

/* Fordonsdetalj */
.vdetail { gap: 16px; }
.vhead { gap: 16px; align-items: center; }
.vplate { font-size: 17px; font-weight: 700; letter-spacing: .12em; padding: 4px 14px; border-radius: 6px; background: #f3f0d0; color: #11131a; border: 2px solid #11131a; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.vmodel { font-size: 18px; font-weight: 700; text-transform: capitalize; color: #fff; }
.vgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.vsec { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.vsec .title { margin: 0 0 4px; }
.vcoords { padding: 9px 12px; border-radius: var(--r); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.holdrow, .modrow { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(0,0,0,.2); }
.modrow .mlabel { min-width: 150px; } .modrow .mval { color: var(--text2); }
.addmod { margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--line2); }
.addmod select.in { min-width: 220px; }

/* Statistik */
.stbar { padding: 0 28px 16px; gap: 12px; flex: none; border-bottom: 1px solid var(--line); }
.chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 12.5px; }
.chip small { color: var(--text2); font-size: 11.5px; font-weight: 500; }
.chip b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip b.pos { color: var(--green); } .chip b.neg { color: var(--red); }
.stnote { flex: 1 1 320px; font-size: 13px; }
.stabs { flex: none; padding: 14px 28px 14px; }
.stats { padding-top: 0; }
.slist { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; }
.srow { --c: #fff; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.srow:hover { border-color: var(--line2); }
.srow.top3 { border-color: rgba(255,255,255,.18); }
.rank { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--text2); background: var(--panel2); border: 1px solid var(--line2); }
.medal { position: relative; display: grid; place-items: center; width: 36px; height: 36px; font-size: 28px; }
.medal b { position: absolute; font-size: 11px; font-weight: 700; color: #1a1200; top: 8px; }
.medal.m1 { color: #F5D06F; } .medal.m2 { color: #D4D4D8; } .medal.m3 { color: #C98B5A; }
.sbody { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sname { font-size: 14.5px; font-weight: 600; }
.bar { display: flex; height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.bar i { display: block; height: 100%; }
.src { display: contents; }
.sval { font-size: 17px; font-weight: 700; color: var(--c); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.sact { display: flex; gap: 8px; }
/* Statistik → Platser */
.qreason { gap: 4px; margin-top: 6px; }
.loccard { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); }
.lochead { display: flex; align-items: flex-start; gap: 10px; }
.lochead .ic { color: #fff; width: 18px; text-align: center; margin-top: 2px; }
.lochead .tt { flex: 1; min-width: 0; line-height: 1.35; }
.lochead .tt b { display: block; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.lochead .tt span { display: block; font-size: 12px; color: var(--text2); overflow-wrap: anywhere; }
.locrow { display: grid; grid-template-columns: auto minmax(0, 1fr) 76px auto auto; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.locrow .st { min-width: 0; line-height: 1.3; }
.locrow .st b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locrow .st span { display: block; font-size: 12px; color: var(--text2); }
.locrow input.in { height: 30px; padding: 0 8px; min-width: 0; }
.stack > .search { flex: none; }

/* ── Rapportchatt ────────────────────────────────────────────────── */
.rchat { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; border-top: 1px solid var(--line); }
.rchat .rhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.015); }
.rchat .rbody { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 420px); flex: 1; min-height: 0; }
.rchat .rchatcol { display: flex; flex-direction: column; min-height: 0; padding: 14px 16px 16px 28px; }
.rchat .rchatcol .thread { flex: 1; max-height: none; overflow-y: auto; padding-right: 4px; }
.rchat .rcompose { display: flex; gap: 8px; align-items: flex-end; padding-top: 8px; }
.rchat .rcompose textarea { flex: 1; resize: none; }
.rchat .rside { overflow-y: auto; padding: 18px 28px 18px 18px; border-left: 1px solid var(--line); min-height: 0; }
.rchat .rsearch { max-width: 220px; }
@media (max-width: 1100px) { .rchat .rbody { grid-template-columns: minmax(0, 1fr); overflow-y: auto; } .rchat .rside { border-left: 0; border-top: 1px solid var(--line); } }
.rquick { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-bottom: 10px; }
.rquick .rq-head { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.rquick .rq-head b { font-weight: 600; }
.rquick .rq-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
.rquick .rq-who { display: flex; flex-direction: column; min-width: 140px; flex: 1 1 180px; }
.rquick .rq-who small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.rquick .rq-who .ell { font-weight: 600; }
.rquick .rq-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.rquick .btn[disabled] { opacity: .4; cursor: not-allowed; }
.pl-list .rq-back, .rq-back { align-self: flex-start; }
.clocked { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; margin-top: 8px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); color: var(--text2); }
.chatx { display: flex; flex-direction: column; min-height: 0; flex: 1; position: relative; }
.chatx .thread { max-height: 360px; }
.rchat .chatx .thread { flex: 1; max-height: none; }
.cthread { gap: 10px; padding: 4px 8px 4px 0; }
.cmsg { position: relative; display: flex; gap: 8px; align-items: flex-end; max-width: 72%; }
.cmsg.mine { margin-left: auto; flex-direction: row-reverse; }
.cmsg.other { margin-right: auto; }
.cmsg .cav { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 12px; background: radial-gradient(circle at 30% 25%, #3d3d42, #161618 72%); border: 1px solid var(--line2); color: #fff; overflow: hidden; }
.cmsg.mine .cav { border-color: var(--accent-line); }
.cmsg .cbub { position: relative; background: rgba(255,255,255,.055); border: 1px solid var(--line2); border-radius: 14px; padding: 9px 13px; min-width: 0; }
.cmsg.mine .cbub { background: #F4F4F5; border-color: #F4F4F5; color: #0a0a0a; border-bottom-right-radius: 4px; }
.cmsg.mine .cbub .cdate, .cmsg.mine .cbub .cauthor { color: #3f3f46; }
.cmsg.mine .creply { background: rgba(0,0,0,.07); color: #3f3f46; border-left-color: #0a0a0a; }
.cmsg.mine .clink, .cmsg.mine .cattachchip { background: rgba(0,0,0,.07); }
.cmsg.mine .cdots:hover { background: rgba(0,0,0,.08); }
.cmsg.other .cbub { border-bottom-left-radius: 4px; }
.cmsg .cauthor { font-weight: 600; font-size: 12px; opacity: .95; }
.cmsg .ctext { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }
.cmsg .cdate { margin-top: 4px; font-size: 10.5px; opacity: .65; text-align: right; }
@keyframes cin-r { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cin-l { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cmsg.mine.new-msg { animation: cin-r .2s ease-out; } .cmsg.other.new-msg { animation: cin-l .2s ease-out; }
.cmsg .chead { display: flex; align-items: center; gap: 6px; } .cmsg .chead .cauthor { flex: 1; }
.cmsg .cdots { opacity: 0; background: none; border: 0; color: inherit; padding: 2px 6px; border-radius: 6px; }
.cmsg:hover .cdots, .cmsg .cdots:focus-visible { opacity: .75; }
.cmsg .cdots:hover { opacity: 1; background: rgba(255,255,255,.1); }
.cmenu { position: absolute; top: 28px; right: 6px; z-index: 5; min-width: 150px; padding: 6px; border-radius: var(--r2); background: var(--solid2); border: 1px solid var(--line2); box-shadow: 0 12px 30px rgba(0,0,0,.55); color: var(--text); }
.cmenu-i { padding: 7px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; font-size: 13px; }
.cmenu-i:hover { background: rgba(255,255,255,.07); }
.creply { margin: 6px 0 2px; padding: 4px 8px; border-left: 3px solid #fff; border-radius: 4px; background: rgba(255,255,255,.06); font-size: 12px; color: var(--text2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creply.gone { opacity: .6; font-style: italic; cursor: default; }
.cmsg.flash .cbub { animation: cflash 1.1s ease; }
@keyframes cflash { 0%, 60% { box-shadow: 0 0 0 2px var(--blue); } 100% { box-shadow: 0 0 0 0 transparent; } }
.cmsg.deleting { animation: cdel .25s ease forwards; pointer-events: none; }
@keyframes cdel { to { opacity: 0; transform: scale(.9); } }
.cimg { display: block; max-width: 100%; max-height: 220px; margin-top: 6px; border-radius: var(--r); cursor: zoom-in; }
.cvid { display: block; max-width: 100%; max-height: 220px; margin-top: 6px; border-radius: var(--r); }
.clink { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,.06); font-size: 12px; overflow-wrap: anywhere; }
.clink span { flex: 1; min-width: 0; }
.ceditwrap { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.cedit { width: 100%; resize: none; }
.ctyping { min-height: 20px; padding: 2px 4px; font-size: 12px; opacity: .8; display: flex; align-items: center; gap: 6px; }
.tdots { display: inline-flex; gap: 3px; }
.tdots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: tdot 1s infinite ease-in-out; }
.tdots i:nth-child(2) { animation-delay: .15s; } .tdots i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.creplybar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-top: 8px; border-left: 3px solid #fff; border-radius: 6px; background: rgba(255,255,255,.05); font-size: 12px; }
.creplybar .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cattachrow { display: flex; gap: 8px; margin-top: 8px; } .cattachrow input { flex: 1; }
.cattachchip { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-top: 8px; border-radius: 6px; background: rgba(255,255,255,.06); font-size: 12px; }
.cattachchip .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cemoji { position: absolute; bottom: 64px; left: 8px; z-index: 6; width: 320px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; border-radius: var(--r2); background: var(--solid2); border: 1px solid var(--line2); box-shadow: 0 12px 30px rgba(0,0,0,.55); }
.cemo { background: none; border: 0; font-size: 20px; padding: 4px; border-radius: 6px; line-height: 1; }
.cemo:hover { background: rgba(255,255,255,.1); }
.ccompose { display: flex; align-items: flex-end; gap: 8px; padding-top: 10px; }
.cinputbox { flex: 1; display: flex; align-items: flex-end; gap: 4px; padding: 2px 6px 2px 10px; border-radius: var(--r2); background: var(--input); border: 1px solid var(--line2); }
.cinputbox:focus-within { border-color: rgba(255,255,255,.45); }
.cicons { display: flex; align-items: center; gap: 2px; padding-bottom: 6px; }
.cicon { background: none; border: 0; color: var(--text2); font-size: 14px; padding: 4px 6px; border-radius: 6px; }
.cicon:hover { background: rgba(255,255,255,.08); color: var(--text); }
.cinput { flex: 1; resize: none; border: 0; background: transparent; padding: 9px 6px; min-height: 38px; outline: none; font-size: 13.5px; }
.csend { height: 42px; min-width: 46px; }
.lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.85); display: grid; place-items: center; cursor: zoom-out; }
.lightbox img, .lightbox video { max-width: 90vw; max-height: 88vh; border-radius: var(--r); }

/* ── Skärmnotiser (visas i spelet, aldrig fokus) ─────────────────── */
#alerts { position: fixed; top: 16px; right: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.alert { position: relative; display: flex; gap: 12px; align-items: flex-start; overflow: hidden; padding: 13px 15px 15px 16px; border-radius: 12px; border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(26,26,28,.94), rgba(8,8,9,.94)); box-shadow: 0 14px 34px rgba(0,0,0,.55); animation: alert-in .25s ease-out both; }
.alert.out { animation: alert-out .25s ease-in both; }
.alert::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ac, #fff); }
.alert .ai { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; color: var(--ac, #fff); background: color-mix(in srgb, var(--ac, #fff) 13%, #111); border: 1px solid color-mix(in srgb, var(--ac, #fff) 25%, transparent); }
.alert .at { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert .at b { font-size: 14px; font-weight: 700; color: #fff; }
.alert .at span { font-size: 13px; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.alert .at .from { color: var(--ac, #fff); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.alert .at .hintkey { margin-top: 4px; display: inline-block; align-self: flex-start; padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--ac, #fff); border: 1px dashed color-mix(in srgb, var(--ac, #fff) 55%, transparent); }
.alert .abar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ac, #fff); transform-origin: left; animation: alert-bar linear forwards; opacity: .8; }
.alert.report { --ac: #FFFFFF; } .alert.report .ai { animation: ring 1.2s ease-in-out 2; }
.alert.vip { --ac: #F5D06F; } .alert.ok { --ac: var(--green); } .alert.bad { --ac: var(--red); } .alert.warn { --ac: var(--amber); } .alert.info { --ac: var(--blue); }
@keyframes alert-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes alert-out { to { transform: translateX(40px); opacity: 0; } }
@keyframes alert-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ring { 0%,100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } }

/* Streamer-läge */
.streamer-tag { display: none; }
body.streamer .streamer-tag { display: inline-flex; }

/* ── Startsida ───────────────────────────────────────────────────── */
.home { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 16px; }
.hero { position: relative; flex: none; min-height: 236px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line2); background: #050505 url('assets/skyline.svg') center bottom / cover no-repeat; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,0) 62%), linear-gradient(0deg, rgba(0,0,0,.5), transparent 45%); }
.hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%; min-height: 236px; padding: 30px 34px; max-width: 640px; }
.hero-in .hl { font-size: 15px; font-weight: 500; color: var(--text2); }
.hero-in h2 { margin: 0; font-size: 44px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,.6); }
.hero-in .hb { margin-top: 10px; font-size: 15px; font-weight: 600; color: #fff; }
.hero-in .hsub { font-size: 13px; color: var(--text2); }
.hero-meta { position: absolute; z-index: 1; right: 24px; top: 22px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.hero-meta b { font-size: 11px; font-weight: 600; letter-spacing: .32em; color: rgba(255,255,255,.75); text-transform: uppercase; }
.hero-meta span { font-size: 10.5px; letter-spacing: .26em; color: rgba(255,255,255,.45); text-transform: uppercase; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.kpi { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); box-shadow: var(--card-sh); color: var(--text); text-align: left; font: inherit; overflow: hidden; }
.kpi.click { cursor: pointer; } .kpi.click:hover { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border-color: var(--line2); }
.kpi .ki { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); font-size: 18px; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.kpi .kt { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.kpi .kt b { font-size: 28px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.kpi .kt span { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .kx { position: absolute; top: 12px; right: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.kpi .kx:empty { display: none; }
.kpi .kx .tag { font-size: 11px; }
.hgrid3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.hgrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.hleft, .hright { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); box-shadow: var(--card-sh); min-width: 0; }
.hc-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 18px; }
.hc-head > i { font-size: 14px; width: 18px; text-align: center; color: var(--text2); }
.hc-head > b { flex: 1; font-size: 14.5px; font-weight: 700; color: #fff; }
.hc-head .btn.small { height: 28px; font-size: 11.5px; }
.hc-body { flex: 1; padding: 0 10px 10px; }
.hc-body table.t th { background: transparent; position: static; height: 34px; }
.hc-body table.t td { padding-top: 9px; padding-bottom: 9px; }
.hc-body .state { padding: 22px 12px; }
.qgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 8px 8px; }
.qbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--r2); background: rgba(255,255,255,.025); color: var(--text); font: inherit; text-align: center; transition: background .12s, border-color .12s, transform .06s; }
.qbtn:hover { background: rgba(255,255,255,.07); border-color: var(--line2); }
.qbtn:active { transform: translateY(1px); }
.qbtn i { font-size: 20px; color: #fff; }
.qbtn b { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.qbtn small { font-size: 10.5px; color: var(--muted); line-height: 1.25; }
.evlist { display: flex; flex-direction: column; padding: 0 8px 4px; }
.ev { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev .et { flex: 1; min-width: 0; line-height: 1.3; }
.ev .et b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev .et span { display: block; font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev .ew { flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ev.bad .et span { color: var(--red); } .ev.warn .et span { color: var(--amber); }
.svlist { display: flex; flex-direction: column; padding: 0 12px 8px; }
.sv { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.sv:last-child { border-bottom: 0; }
.sv > i { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text2); font-size: 13px; }
.sv .svt { flex: 1; min-width: 0; }
.sv .svt .svr { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sv .svt b { font-size: 13px; font-weight: 600; }
.sv .svt span { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv .svt span.ok { color: var(--green); }
.sv .svbar { margin-top: 7px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.sv .svbar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #d4d4d8, #fff); }
.sv .svbar.high > i { background: var(--amber); }
.hstaff { display: flex; flex-direction: column; padding: 0 4px; }
.hs { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.hs:last-child { border-bottom: 0; }
.hs-t { flex: 1; min-width: 0; line-height: 1.3; }
.hs-t b { font-weight: 600; font-size: 13px; } .hs-t > span { display: block; font-size: 12px; color: var(--text2); }
.hs-on { font-size: 12px; color: var(--text2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.hlinks { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.hlink { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r2); background: rgba(255,255,255,.025); color: var(--text); text-align: left; font: inherit; }
.hlink:hover { background: rgba(255,255,255,.06); border-color: var(--line2); }
.hlink > i:first-child { font-size: 16px; width: 22px; text-align: center; }
.hlink > div { flex: 1; min-width: 0; line-height: 1.3; }
.hlink b { display: block; font-weight: 600; font-size: 13.5px; } .hlink span { display: block; font-size: 12px; color: var(--text2); }
.hlink > i:last-child { color: var(--text2); font-size: 11px; }
@media (max-width: 1400px) { .hgrid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hgrid3 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 1300px) { .hgrid { grid-template-columns: minmax(0, 1fr); } }

/* Ge föremål: flera föremål i samma bekräftelse */
.gcart { display: flex; flex-direction: column; gap: 6px; }
.gempty { padding: 10px 12px; border: 1px dashed var(--line2); border-radius: var(--r); }
.grow-item { display: flex; flex-direction: column; gap: 6px; padding: 9px 9px 9px 11px; border: 1px solid var(--line2); border-radius: var(--r); background: rgba(255,255,255,.03); }
.grow-item.bad { border-color: rgba(248,113,113,.5); } .grow-item.warn { border-color: rgba(251,191,36,.5); }
.gline { display: flex; align-items: center; gap: 8px; }
.gline .st { flex: 1; min-width: 0; line-height: 1.3; }
.gline .st b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gline .st span { display: block; font-size: 11.5px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gline input.in { width: 76px; flex: none; height: 30px; padding: 0 8px; }
.gmeta { display: flex; flex-direction: column; gap: 4px; }
.gmeta textarea.in { min-height: 56px; }

/* ── Anpassning till upplösning ──────────────────────────────────── */
@media (max-width: 1500px) {
  .shell { width: calc(100vw - 16px); height: calc(100vh - 16px); }
  .topbar { padding-left: 18px; } .clock .ct { display: none; }
  .pagehead { padding: 18px 18px 14px; } .top, .pltools, .lgbar, .stbar, .stabs { padding-left: 18px; padding-right: 18px; }
  .plscroll, .pdv { padding-left: 18px; padding-right: 18px; } .lgbody, .col { padding-left: 18px; padding-right: 18px; }
  .body > .col:first-child:not(:last-child) { padding-left: 18px; }
  .home { padding: 18px; } .rchat .rhead { padding: 12px 18px; } .rchat .rchatcol { padding-left: 18px; }
  .mebtn .mn { display: none; }
}
@media (max-width: 1250px) { .spill .sp2 { display: none; } .gsearch kbd { display: none; } }
@media (max-width: 1100px), (max-height: 640px) {
  .body { grid-template-columns: minmax(0, 1fr); }
  .col + .col { border-left: 0; border-top: 1px solid var(--line); }
  .cmdgrid { grid-template-columns: minmax(0, 1fr); }
  .vgrid { grid-template-columns: minmax(0, 1fr); }
  .clock { display: none; }
}
@media (max-height: 760px) { .hero, .hero-in { min-height: 180px; } .hero-in h2 { font-size: 36px; } .pagehead { padding-top: 14px; padding-bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { .shell, .dlg, .toast, .spin, .sidepanel, .alert, .alert .ai, .pop, .cmenu2 { animation: none; } .alert .abar { animation-duration: 1ms; } }

/* 1.16.1: inventory som rutnät (ikon + namn + antal) i stället för tabell */
.invbody { padding: 14px 16px 16px; }
.invgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.invtile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 18px 6px 8px; min-height: 108px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); cursor: pointer; outline: none; transition: border-color .12s, background .12s; }
.invtile:hover { border-color: var(--line2); background: rgba(255,255,255,.05); }
.invtile:focus-visible { border-color: var(--accent-line); }
.invtile.on { border-color: var(--accent-line); background: var(--accent-soft); }
.invtile .iimg { width: 52px; height: 48px; border: 0; background: none; }
.invtile .iimg img { width: 44px; height: 44px; }
.invtile .lbl { font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--text); width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.invtile .slot { position: absolute; top: 5px; left: 7px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.invtile .cnt { position: absolute; top: 4px; right: 6px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.45); border-radius: 6px; padding: 1px 5px; font-variant-numeric: tabular-nums; }
.invtile .tdel { position: absolute; bottom: 4px; right: 4px; width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(248,113,113,.35); background: #1b1214; color: var(--red);
  display: grid; place-items: center; font-size: 11px; opacity: 0; cursor: pointer; transition: opacity .12s; }
.invtile:hover .tdel, .invtile:focus-within .tdel, .invtile.on .tdel { opacity: 1; }
.invdet { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.22); padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.invdet-h { display: flex; align-items: center; gap: 12px; }
.invdet-h .st { display: flex; flex-direction: column; min-width: 0; } .invdet-h .st span { color: var(--text2); font-size: 12.5px; }