/* prrp_admin 1.15.24 – Mango-design (ägarens bilder showcase_roles/audit/profile, 10-19). Laddas SIST av alla css-filer.
   Typsnitt: Inter (UI) och JetBrains Mono (loggar/kod) ur assets/mango-fonts.css. Inga bilder/avatarfoton, inga blur-filter, inga ständiga animationer.

   GEMENSAMMA KLASSER (för audit.js, profil.js, jail.js m.fl.):
     .mg-card            mörk yta, 1px kant, 10 px hörn.  Innehåll: .mg-card-h (rubrikrad: ikon + <h3> + <small> + .mg-grow + knappar), .mg-card-b (innehåll)
     .mg-btn             liten knapp (30 px). Varianter: .primary (grön), .danger (röd text), .ghost (utan kant), .icon (kvadratisk ikonknapp)
     .mg-pill            liten rund etikett. Varianter: .ok .warn .bad .info .muted .solid-bad (röd bakgrund, t.ex. ”Bannad · 2 d kvar”)
     .mg-tabs > button   flikrad som på profilen (aktiv = .on, ljus yta). En <i> ikon + text.
     .mg-stat            statistikruta: <span class="k">ETIKETT</span><b>värde</b><small>under</small>; ikon uppe till höger via <i class="ic">. Färg på värdet: .ok .warn .bad
     .mg-grid            rutnät för .mg-stat (auto-fill, min 170 px)
     .mg-toggle          knapp som växlar (aria-pressed="true" = på, grön)
     .mg-term            loggterminal: .mg-term-h (tre prickar + titel + räknare), .mg-term-b (rader). Rad = .mg-line > .t (tid) .k (typ, färg via .kill .death .ban .kick .warn .money .spawn .guard .report .session .shoot .info) .who .msg
     .mg-input           sökfält (ikon + input inuti, eller input direkt)
     .mg-list > .mg-row  listrad (namn/under/höger)
     .mg-kv              nyckel/värde-rader (<div><span>Nyckel</span><b>värde</b></div>)
     .mg-filter          vänsterlista med filter (button med ikon, text och <em>antal</em>; aktiv = .on)
     .mg-section         versal grå mellanrubrik (som ”ADMIN TOOLS”)
     .mg-mono            JetBrains Mono
   Tokens: --mg-bg --mg-side --mg-card --mg-card2 --mg-line --mg-line2 --mg-text --mg-text2 --mg-muted --mg-green --mg-red --mg-amber --mg-blue --mg-purple --mg-r */

:root {
  --mg-bg: #0f1012; --mg-side: #121315; --mg-card: #16171a; --mg-card2: #1c1d21; --mg-card3: #24262b;
  --mg-line: rgba(255, 255, 255, .07); --mg-line2: rgba(255, 255, 255, .12);
  --mg-text: #f2f3f5; --mg-text2: #a4a8b0; --mg-muted: #6c7079;
  --mg-green: #22c55e; --mg-green2: #2fd16b; --mg-green-soft: rgba(34, 197, 94, .14);
  --mg-red: #ef4444; --mg-red-soft: rgba(239, 68, 68, .14); --mg-amber: #f5b83d; --mg-amber-soft: rgba(245, 184, 61, .14);
  --mg-blue: #5b9dff; --mg-blue-soft: rgba(91, 157, 255, .14); --mg-purple: #a78bfa; --mg-purple-soft: rgba(167, 139, 250, .14);
  --mg-r: 10px; --mg-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

  /* befintliga variabler pekas om så alla gamla vyer får samma färger */
  --bg: var(--mg-bg); --side: var(--mg-side); --panel: var(--mg-card); --panel2: var(--mg-card2); --panel3: var(--mg-card3);
  --input: #111214; --solid: var(--mg-card); --solid2: var(--mg-card2); --hud: var(--mg-card); --panel-glass: rgba(18, 19, 21, .97);
  --line: var(--mg-line); --line2: var(--mg-line2); --line3: rgba(255, 255, 255, .22);
  --text: var(--mg-text); --text2: var(--mg-text2); --muted: var(--mg-muted);
  --accent: var(--mg-green); --accent-hover: var(--mg-green2); --accent-ink: #04140a; --accent-soft: var(--mg-green-soft); --accent-line: rgba(34, 197, 94, .5);
  --green: var(--mg-green); --red: var(--mg-red); --amber: var(--mg-amber); --blue: var(--mg-blue); --purple: var(--mg-purple);
  --ok-soft: var(--mg-green-soft); --warn-soft: var(--mg-amber-soft); --bad-soft: var(--mg-red-soft); --info-soft: var(--mg-blue-soft); --purple-soft: var(--mg-purple-soft);
  --card: var(--mg-card); --card-sh: none;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 13px; font-feature-settings: 'cv11', 'ss01';
}
body, #root, #callbox, #specbar, #killhint, #toasts, #alerts, #modal { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif, 'Segoe UI Symbol', 'Cambria Math', 'Segoe UI Emoji'; }
.mono, .mg-mono, .cmdname, .ptbl .plate, .lootrow .ser, code, kbd { font-family: var(--mg-mono) !important; }
::selection { background: rgba(34, 197, 94, .3); }

/* ══ RAM ══════════════════════════════════════════════════════════════════════════════════════════ */
body.ui2 .shell.ui2 { background: var(--mg-bg); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); overflow: hidden; }

/* ══ GEMENSAMMA KOMPONENTER ═══════════════════════════════════════════════════════════════════════ */
.mg-card { background: var(--mg-card); border: 1px solid var(--mg-line); border-radius: var(--mg-r); min-width: 0; }
.mg-card-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--mg-line); min-height: 46px; }
.mg-card-h > i:first-child { color: var(--mg-text2); font-size: 14px; width: 18px; text-align: center; }
.mg-card-h h3 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--mg-text); }
.mg-card-h small { display: block; font-size: 11.5px; color: var(--mg-muted); margin-top: 1px; font-weight: 400; }
.mg-card-h .n, .mg-count { margin-left: auto; font-size: 11px; color: var(--mg-muted); background: var(--mg-card2); border-radius: 999px; padding: 1px 8px; }
.mg-card-b { padding: 12px 14px; }
.mg-grow { flex: 1; min-width: 0; }

.mg-btn { height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--mg-line2); background: var(--mg-card2); color: var(--mg-text); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background .12s, border-color .12s; }
.mg-btn i { font-size: 12px; color: var(--mg-text2); }
.mg-btn:hover { background: var(--mg-card3); border-color: rgba(255, 255, 255, .18); }
.mg-btn:disabled { opacity: .45; cursor: default; }
.mg-btn.primary { background: var(--mg-green); border-color: var(--mg-green); color: #fff; }
.mg-btn.primary i { color: #fff; }
.mg-btn.primary:hover { background: var(--mg-green2); border-color: var(--mg-green2); }
.mg-btn.danger { color: #ff8585; }
.mg-btn.danger i { color: #ff8585; }
.mg-btn.danger:hover { background: var(--mg-red-soft); border-color: rgba(239, 68, 68, .45); }
.mg-btn.ghost { background: transparent; border-color: transparent; }
.mg-btn.ghost:hover { background: var(--mg-card2); }
.mg-btn.icon { width: 30px; padding: 0; }
.mg-btn.sm { height: 24px; padding: 0 8px; font-size: 11.5px; border-radius: 6px; }
.mg-btn.sm.icon { width: 24px; padding: 0; }

.mg-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--mg-card2); color: var(--mg-text2); border: 1px solid var(--mg-line); white-space: nowrap; }
.mg-pill i { font-size: 10px; }
.mg-pill.ok { background: var(--mg-green-soft); color: var(--mg-green2); border-color: rgba(34, 197, 94, .25); }
.mg-pill.warn { background: var(--mg-amber-soft); color: var(--mg-amber); border-color: rgba(245, 184, 61, .25); }
.mg-pill.bad { background: var(--mg-red-soft); color: #ff8080; border-color: rgba(239, 68, 68, .25); }
.mg-pill.info { background: var(--mg-blue-soft); color: var(--mg-blue); border-color: rgba(91, 157, 255, .25); }
.mg-pill.muted { background: transparent; color: var(--mg-muted); }
.mg-pill.solid-bad { background: rgba(239, 68, 68, .2); color: #ff8b8b; border-color: rgba(239, 68, 68, .45); }
.mg-pill.tag { height: 18px; padding: 0 6px; border-radius: 4px; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }

.mg-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.mg-tabs > button { height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--mg-text2); font-size: 12.5px; font-weight: 500; }
.mg-tabs > button i { font-size: 12px; }
.mg-tabs > button:hover { color: var(--mg-text); background: var(--mg-card2); }
.mg-tabs > button.on { background: var(--mg-card3); border-color: var(--mg-line2); color: var(--mg-text); font-weight: 600; }

.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mg-stat { position: relative; background: var(--mg-card); border: 1px solid var(--mg-line); border-radius: var(--mg-r); padding: 11px 13px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-stat .k { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--mg-muted); }
.mg-stat b { font-size: 18px; font-weight: 700; color: var(--mg-text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-stat small { font-size: 11px; color: var(--mg-muted); }
.mg-stat .ic { position: absolute; top: 11px; right: 12px; font-size: 12px; color: var(--mg-muted); opacity: .7; }
.mg-stat .ok, .mg-stat b.ok { color: var(--mg-green2); }
.mg-stat .warn, .mg-stat b.warn { color: var(--mg-amber); }
.mg-stat .bad, .mg-stat b.bad { color: #ff7a7a; }

.mg-toggle { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; border: 0; padding: 0; background: #34363c; transition: background .15s; }
.mg-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #d8dade; transition: transform .15s; }
.mg-toggle[aria-pressed="true"] { background: var(--mg-green); }
.mg-toggle[aria-pressed="true"]::after { transform: translateX(16px); background: #fff; }
.mg-toggle:disabled { opacity: .45; }

.mg-term { background: #0b0c0e; border: 1px solid var(--mg-line); border-radius: var(--mg-r); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mg-term-h { flex: none; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--mg-line); font-family: var(--mg-mono); font-size: 11px; color: var(--mg-text2); }
.mg-term-h .dot { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.mg-term-h .dot:nth-child(2) { background: #febc2e; } .mg-term-h .dot:nth-child(3) { background: #28c840; }
.mg-term-h b { margin-left: 8px; font-weight: 600; color: var(--mg-text); }
.mg-term-h em { margin-left: auto; font-style: normal; color: var(--mg-muted); }
.mg-term-b { flex: 1; min-height: 0; overflow: auto; padding: 4px 0; font-family: var(--mg-mono); font-size: 11.5px; line-height: 1.6; }
.mg-line { display: flex; align-items: baseline; gap: 10px; padding: 1px 12px; white-space: nowrap; cursor: pointer; }
.mg-line:hover { background: rgba(255, 255, 255, .035); }
.mg-line.held { background: rgba(245, 184, 61, .05); }
.mg-line.flag { background: rgba(239, 68, 68, .07); }
.mg-line .t { flex: none; color: var(--mg-muted); }
.mg-line .k { flex: none; width: 64px; font-weight: 700; color: var(--mg-text2); text-transform: uppercase; }
.mg-line .who { flex: none; color: var(--mg-text2); }
.mg-line .who .a { color: var(--mg-blue); }
.mg-line .who .s { color: var(--mg-muted); font-style: italic; }
.mg-line .who .arr { color: var(--mg-muted); margin: 0 4px; }
.mg-line .msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--mg-text); }
.mg-line .k.kill, .mg-line .k.ban { color: #ff5c5c; } .mg-line.kill .msg { color: #ff8a8a; }
.mg-line .k.death { color: #c9cbd0; } .mg-line .k.shoot { color: #ff9d5c; }
.mg-line .k.kick { color: #ff7a59; } .mg-line .k.warn { color: var(--mg-amber); }
.mg-line .k.money { color: var(--mg-green2); } .mg-line .k.spawn { color: #e7e9ec; }
.mg-line .k.guard { color: #e7e9ec; } .mg-line .k.report { color: #ff9a6b; }
.mg-line .k.session { color: #c9cbd0; } .mg-line .k.info { color: var(--mg-blue); } .mg-line .k.honey { color: var(--mg-purple); }

.mg-input { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--mg-line); border-radius: 7px; background: #111214; color: var(--mg-muted); min-width: 0; }
.mg-input:focus-within { border-color: rgba(34, 197, 94, .55); }
.mg-input i { font-size: 12px; }
.mg-input input, input.mg-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--mg-text); font-size: 12.5px; }
input.mg-input { padding: 0 10px; border: 1px solid var(--mg-line); }

.mg-list { display: flex; flex-direction: column; }
.mg-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--mg-line); min-width: 0; }
.mg-row:last-child { border-bottom: 0; }
.mg-row:hover { background: rgba(255, 255, 255, .02); }
.mg-row .nm { display: flex; flex-direction: column; min-width: 0; }
.mg-row .nm b { font-size: 12.5px; font-weight: 600; color: var(--mg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-row .nm small { font-size: 10.5px; color: var(--mg-muted); }
.mg-row .r { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }

.mg-kv { display: flex; flex-direction: column; }
.mg-kv > div { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--mg-line); font-size: 12px; }
.mg-kv > div:last-child { border-bottom: 0; }
.mg-kv > div > span { flex: none; width: 140px; color: var(--mg-muted); display: inline-flex; align-items: center; gap: 8px; }
.mg-kv > div > b { flex: 1; min-width: 0; font-weight: 500; color: var(--mg-text); font-family: var(--mg-mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mg-filter { display: flex; flex-direction: column; gap: 1px; padding: 6px; }
.mg-filter > .mg-section { padding: 6px 8px 6px; }
.mg-filter > button { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--mg-text2); font-size: 12.5px; text-align: left; }
.mg-filter > button i { width: 16px; text-align: center; font-size: 12px; }
.mg-filter > button em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--mg-muted); background: var(--mg-card2); border-radius: 999px; padding: 0 7px; line-height: 17px; }
.mg-filter > button:hover { background: var(--mg-card2); color: var(--mg-text); }
.mg-filter > button.on { background: var(--mg-card3); color: var(--mg-text); font-weight: 600; }
.mg-filter > button.on em { background: rgba(255, 255, 255, .12); color: var(--mg-text); }

.mg-section { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mg-muted); }
.mg-empty { padding: 28px 14px; text-align: center; color: var(--mg-muted); font-size: 12.5px; }
.mg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mg-muted); }
.mg-dot.ok { background: var(--mg-green); } .mg-dot.warn { background: var(--mg-amber); } .mg-dot.bad { background: var(--mg-red); }
.mg-ok { color: var(--mg-green2) !important; } .mg-warn { color: var(--mg-amber) !important; } .mg-bad { color: #ff7a7a !important; }

/* ══ SKAL (.shell.mg): sidomeny | kolumn (toppfält, banner, arbetsyta + online spelare) ═══════════════════ */
body.ui2 .shell.mg { flex-direction: column; width: calc(100vw - 48px); height: calc(100vh - 40px); max-width: 2400px; max-height: 1350px; }
@media (max-width: 1500px), (max-height: 800px) { body.ui2 .shell.mg { width: calc(100vw - 16px); height: calc(100vh - 16px); } }
.shell.mg .body2 { flex: 1; min-height: 0; display: flex; padding: 0; gap: 0; }
.shell.mg .sidenav { flex: none; width: 216px; margin: 0; display: flex; flex-direction: column; background: var(--mg-side); border: 0; border-right: 1px solid var(--mg-line); border-radius: 0; }
@media (max-width: 1279px) { .shell.mg .sidenav { display: none; } }
@media (min-width: 1280px) { .shell.mg .topbar2 .menubtn { display: none; } .shell.mg .navpop { display: none !important; } }
.shell.mg .ns { padding: 0 10px 10px; gap: 0; }
.mg-brand { flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 8px; }
.mg-brand b { font-size: 14px; font-weight: 700; color: var(--mg-text); letter-spacing: -.01em; }
.mg-bl { width: 22px; height: 22px; color: #fff; display: inline-flex; }
.mg-bl svg { width: 100%; height: 100%; }
.shell.mg .ns-list { padding-top: 4px; gap: 1px; }
.shell.mg .ns-t { margin: 18px 8px 6px; font-size: 10px; font-weight: 600; letter-spacing: .1em; color: var(--mg-muted); }
.shell.mg .ns-i { height: 30px; gap: 10px; padding: 0 9px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: #c9ccd2; box-shadow: none; }
.shell.mg .ns-i i { width: 16px; font-size: 13px; color: #b5b9c0; }
.shell.mg .ns-i:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.shell.mg .ns-i.on { background: rgba(255, 255, 255, .075); color: #fff; box-shadow: none; }
.shell.mg .ns-i.on i { color: #fff; }
.shell.mg .ns-i .mg-pill { flex: none; height: 15px; padding: 0 5px; font-size: 8.5px; letter-spacing: .08em; }
.shell.mg .ns-i > span:not(.ns-n):not(.mg-pill) { flex: 0 1 auto; }
.shell.mg .ns-i .ns-n, .shell.mg .ns-i .mg-nb { margin-left: auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--mg-red); color: #fff; font-size: 10px; font-weight: 700; }
.shell.mg .ns-foot { padding-top: 8px; border-top: 1px solid var(--mg-line); }
.shell.mg .ns-foot .mg-tail { margin-left: auto; width: auto; font-size: 11px; color: var(--mg-muted); }
.shell.mg .navpop { top: 56px; left: 12px; background: var(--mg-side); }

.mg-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.shell.mg .topbar2.mg-top { flex: none; height: 52px; margin: 0; padding: 0 16px; gap: 6px; border-bottom: 0; background: transparent; }
.shell.mg .mg-top .tbtn { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: #c9ccd2; font-size: 14px; }
.shell.mg .mg-top .tbtn:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.shell.mg .mg-top .tbtn:disabled { opacity: .35; cursor: default; background: transparent; }
.shell.mg .mg-top .tbtn .tb-n { top: 1px; right: 1px; min-width: 8px; height: 8px; padding: 0; font-size: 0; box-shadow: 0 0 0 2px var(--mg-bg); }
.shell.mg .mg-top .gsearch2 { flex: 0 1 340px; }
.shell.mg .mg-top .gsbox { height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--mg-line); font-size: 12px; }
.shell.mg .mg-top .gsbox input { font-size: 12.5px; }
.shell.mg .mg-top .gsbox kbd { font-size: 10px; line-height: 16px; }
.shell.mg .mg-top .mebtn { height: 30px; padding: 0 8px 0 4px; border: 0; background: transparent; }
.shell.mg .mg-top .mebtn .avatar { width: 24px; height: 24px; font-size: 10px; background: var(--mg-card3); }
.shell.mg .mg-top .mebtn .mn { font-size: 12px; }
.shell.mg .mg-top .dutybtn { height: 30px; font-size: 12px; border-radius: 7px; }

/* Banner */
.mg-hero { flex: none; position: relative; margin: 0 16px; padding: 18px 20px 14px; min-height: 150px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; gap: 14px 24px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(90deg, rgba(12, 13, 15, .96) 0%, rgba(12, 13, 15, .78) 24%, rgba(12, 13, 15, .12) 52%, rgba(12, 13, 15, .3) 74%, rgba(12, 13, 15, .9) 100%), url(assets/mango-city.svg) 70% 100% / cover no-repeat, #0f1412; border: 1px solid var(--mg-line); }
.mg-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 90% at 64% 110%, rgba(47, 209, 107, .22), transparent 70%), radial-gradient(ellipse 120% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%); pointer-events: none; z-index: 0; }
.mg-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(0deg, rgba(12, 13, 15, .85), transparent); pointer-events: none; }
.mg-hero { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px rgba(0, 0, 0, .35); contain: layout; }
.mg-hero > * { position: relative; z-index: 1; }
.mg-hero-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mg-logo { flex: none; width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #2fd16b, #15803d); box-shadow: 0 8px 24px rgba(34, 197, 94, .25); }
.mg-logo svg { width: 30px; height: 30px; }
.mg-hero-t h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.mg-hero-t .up { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: var(--mg-text2); }
.mg-hero-t .up i { font-size: 11px; }
.mg-hero-r { grid-row: 1 / span 2; grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(110px, auto)); align-content: start; gap: 14px 28px; }
.mg-hs { display: flex; flex-direction: column; gap: 2px; }
.mg-hs .k, .mg-hm .k { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mg-text2); }
.mg-hs b { font-size: 13px; font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mg-hero-m { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.mg-hm { display: flex; align-items: center; gap: 9px; }
.mg-hm > i { font-size: 15px; color: #c9ccd2; }
.mg-hm > div { display: flex; flex-direction: column; }
.mg-hm b { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; }
.mg-hm b.mg-ok { color: var(--mg-green2); }

/* Arbetsyta + online spelare */
.mg-work { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 14px 16px 16px; }
.mg-col.flat .mg-work { padding-top: 0; }
.shell.mg .mg-work > .main { flex: 1; min-width: 0; background: var(--mg-card); border: 1px solid var(--mg-line); border-radius: 12px; overflow: hidden; }
.shell.mg .mg-work > .main.flat { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.shell.mg .mg-work > .main.flat > .pagehead { display: none; }
.shell.mg .pagehead { padding: 14px 18px 8px; gap: 10px; }
.shell.mg .pagehead .ph-ic { display: grid; place-items: center; width: 22px; height: 22px; font-size: 15px; color: var(--mg-text2); background: none; border: 0; }
.shell.mg .pagehead h1 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.shell.mg .pagehead .ph-t span { font-size: 11.5px; color: var(--mg-muted); }

.mg-online { flex: none; width: 290px; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; }
@media (max-width: 1499px) { .mg-online { display: none !important; } }
.mg-ol-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; }
.mg-ol-h h3 { margin: 0; font-size: 14px; font-weight: 700; color: #fff; }
.mg-ol-h .cnt { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--mg-green2); }
.mg-ol-s { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 0 12px 6px; }
.mg-ol-sort { display: flex; justify-content: flex-end; }
.mg-ol-sort .mg-btn { height: 22px; font-size: 11px; background: rgba(255, 255, 255, .04); border: 1px solid var(--mg-line); }
.mg-ol-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 6px 6px; contain: layout paint; }   /* pinguppdateringar räknas om bara här */
.mg-ol-row { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; border-radius: 7px; cursor: pointer; }
.mg-ol-row:hover, .mg-ol-row:focus-visible { background: rgba(255, 255, 255, .04); }
.mg-ol-row .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mg-ol-row .nm b { font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-ol-row .nm b .st { margin-left: 5px; font-size: 10px; color: var(--mg-amber); }
.mg-ol-row .nm small { font-size: 10px; color: var(--mg-muted); }
.mg-ol-row .png { flex: none; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mg-ol-row .acts { flex: none; display: flex; gap: 2px; }
.mg-ol-row .acts .mg-btn { width: 22px; height: 22px; background: rgba(255, 255, 255, .05); border: 1px solid var(--mg-line); }
.mg-ol-row .acts .mg-btn i { font-size: 10.5px; }
.mg-ol-row .acts .mg-btn:hover { background: rgba(255, 255, 255, .12); }
.mg-ol-row .acts .mg-btn.danger:hover { background: var(--mg-red-soft); }
.mg-ol-all { flex: none; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-top: 1px solid var(--mg-line); background: transparent; color: var(--mg-text2); font-size: 11.5px; text-align: left; }
.mg-ol-all:hover { color: #fff; }
.mg-ol-all i { font-size: 10px; }

/* ══ STARTSIDAN ════════════════════════════════════════════════════════════════════════════════════ */
.shell.mg .home { padding: 4px 18px 18px; gap: 14px; }
.mg-welcome { display: flex; align-items: center; gap: 12px; padding: 4px 2px 0; }
.mg-welcome > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-welcome h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--mg-text2); }
.mg-welcome h2 em { font-style: normal; color: #fff; }
.mg-welcome span { font-size: 12px; color: var(--mg-muted); }
.shell.mg .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.shell.mg .kpi { background: var(--mg-card2); border: 1px solid var(--mg-line); border-radius: var(--mg-r); padding: 12px 14px; box-shadow: none; min-height: 0; }
.shell.mg .kpi.click:hover { border-color: var(--mg-line2); background: var(--mg-card3); }
.shell.mg .kpi .ki { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .05); color: var(--mg-text2); font-size: 13px; }
.shell.mg .kpi .kt b { font-size: 20px; font-weight: 700; }
.shell.mg .kpi .kt span { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--mg-muted); }

/* Mina inställningar: en rad per val, texten bryts under rubriken och valen ligger alltid till höger (eller under på smal yta) */
.hsettings { margin-top: 0 !important; }
.hsets, .mgsets { display: flex !important; flex-direction: column; gap: 0 !important; grid-template-columns: none !important; }
.hset { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 14px !important; padding: 11px 14px !important; border-radius: 0 !important; background: transparent !important; border-bottom: 1px solid var(--mg-line); min-width: 0; }
.hset:last-child { border-bottom: 0; }
.hset .ki { flex: none; width: 30px !important; height: 30px !important; border-radius: 8px !important; background: rgba(255, 255, 255, .05) !important; color: var(--mg-text2); font-size: 13px; display: grid; place-items: center; }
.hset-t { flex: 1 1 220px !important; min-width: 0 !important; display: flex; flex-direction: column; gap: 1px; }
.hset-t b { font-size: 12.5px; font-weight: 600; color: #fff; }
.hset-t span { font-size: 11.5px !important; color: var(--mg-muted) !important; line-height: 1.35; white-space: normal; }
.hset .seg { flex: none; margin-left: auto; padding: 2px; border-radius: 8px; background: #111214; border-color: var(--mg-line); flex-wrap: nowrap; }
.hset .seg button { height: 26px; padding: 0 11px; border-radius: 6px; font-size: 11.5px; white-space: nowrap; }
.hset .seg button.on, .seg button.on { background: var(--mg-card3); color: #fff; box-shadow: none; }
.mgsets .hset { padding: 11px 2px !important; }

/* ══ ALLA ÄLDRE SIDOR: kort, tabeller, formulär, dialoger, menyer, toasts ══════════════════════════════ */
.shell.mg .card, .shell.mg .hcard, .shell.mg .box, .shell.mg .panel { background: var(--mg-card2); border: 1px solid var(--mg-line); border-radius: var(--mg-r); box-shadow: none; }
.shell.mg .hcard .hc-head { padding: 12px 14px; border-bottom: 1px solid var(--mg-line); font-size: 13px; }
.shell.mg .hcard .hc-head b { font-size: 13px; font-weight: 600; }
.shell.mg table.t { font-size: 12.5px; }
.shell.mg table.t th { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mg-muted); background: transparent; border-bottom: 1px solid var(--mg-line); }
.shell.mg table.t td { border-bottom: 1px solid var(--mg-line); }
.shell.mg table.t tr.click:hover td, .shell.mg table.t tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.shell.mg table.t tr.sel td { background: rgba(34, 197, 94, .06); }
.btn { font-weight: 600; border-radius: 7px; }
.btn.primary { background: var(--mg-green); border-color: var(--mg-green); color: #fff; }
.btn.primary:hover { background: var(--mg-green2); border-color: var(--mg-green2); }
.btn.small { height: 28px; font-size: 12px; }
.in, .sel, select.in, textarea.in { background: #111214; border-color: var(--mg-line); border-radius: 7px; font-size: 12.5px; }
.in:focus, .sel:focus, textarea.in:focus { border-color: rgba(34, 197, 94, .55); outline: 0; }
.tag { border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.tag.ok { background: var(--mg-green-soft); color: var(--mg-green2); } .tag.bad { background: var(--mg-red-soft); color: #ff8080; }
.tag.warn { background: var(--mg-amber-soft); color: var(--mg-amber); } .tag.info { background: var(--mg-blue-soft); color: var(--mg-blue); }
#modal .dlg, #modal .dialog { background: var(--mg-card); border: 1px solid var(--mg-line2); border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
#modal .dlg h2, #modal .dlg h3, #modal .dlg .dh { font-size: 15px; font-weight: 600; }
.menu, .gs-pop, .mewrap .pop, .navpop, .fpop, .cmenu2 { background: var(--mg-card) !important; border: 1px solid var(--mg-line2) !important; border-radius: 10px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, .55) !important; }
.menu button, .mewrap .pop button { font-size: 12.5px; border-radius: 6px; }
.menu button:hover, .mewrap .pop button:hover { background: rgba(255, 255, 255, .06); }
#toasts .toast { background: var(--mg-card2); border: 1px solid var(--mg-line2); border-radius: 10px; font-size: 12.5px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
#toasts .toast.ok { border-left: 3px solid var(--mg-green); } #toasts .toast.bad { border-left: 3px solid var(--mg-red); } #toasts .toast.warn { border-left: 3px solid var(--mg-amber); }
.sidepanel { background: var(--mg-card); border-left: 1px solid var(--mg-line2); }
.sc.sc2 .col-list, .sc.sc2 .col-main, .sc.sc2 .col-side { background: var(--mg-card) !important; border-color: var(--mg-line) !important; border-radius: 12px !important; }
.tk2.on { background: rgba(255, 255, 255, .06); box-shadow: inset 2px 0 0 var(--mg-green); }
.ltab.on { border-bottom-color: var(--mg-green); background: rgba(255, 255, 255, .04); }
.ltab.on .n { background: var(--mg-green-soft); color: var(--mg-green2); }

.shell.mg .page > .hint, .shell.mg .page > .msg { margin: 4px 18px 0; }

/* ══ 1.15.24b: tjockare text, djup i korten, Verktyg-rutnätet ════════════════════════════════════════ */
:root { font-weight: 500; }
body, .shell, .shell button, .shell input, .shell select, .shell textarea { font-weight: 500; }
h1, h2, h3, h4, b, strong, .btn, .mg-btn, .mg-tabs > button, .ns-i, .seg button, th, .title { font-weight: 600; }
.mg-hero-t h2, .mg-ol-h h3, .kpi .kt b, .mg-stat b { font-weight: 700; }
.shell.mg .ns-i { font-weight: 500; } .shell.mg .ns-i.on { font-weight: 600; }
.mg-hs .k, .mg-hm .k, .mg-section, .ns-t { font-weight: 700 !important; }
.mg-card, .mg-stat, .shell.mg .kpi, .shell.mg .card, .shell.mg .hcard { background-image: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 6px 18px rgba(0, 0, 0, .22); }
.shell.mg .mg-work > .main { background-image: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0) 240px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.mg-online { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 30px rgba(0, 0, 0, .25); }
.mg-logo { background: linear-gradient(145deg, #3ee07c 0%, #22c55e 45%, #15803d 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 28px rgba(34, 197, 94, .35); }
.mg-hs b .mg-dot.ok, .mg-dot.ok { box-shadow: 0 0 8px rgba(34, 197, 94, .7); }
.mg-dot.warn { box-shadow: 0 0 8px rgba(245, 184, 61, .6); } .mg-dot.bad { box-shadow: 0 0 8px rgba(239, 68, 68, .6); }

.mgt { display: flex; flex-direction: column; gap: 18px; }
.mgt-group { display: flex; flex-direction: column; gap: 10px; }
.mgt-h { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mg-text2); }
.mgt-h i { font-size: 11px; color: var(--mg-green2); }
.mgt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.mgt-grid > .card { margin-top: 0 !important; padding: 14px; border-radius: var(--mg-r); }
.mgt-grid > .card > h4.title { font-size: 13px; }
.mgt-qbtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mgt-qcard h4.title { margin: 0; font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--mg-text2); }

.mgp-legacy .mgt-grid > .card > h4.title, .mgt-grid > .card > h4.title { margin: 0 0 4px; font-size: 13.5px !important; font-weight: 700; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; }
.mgp-legacy .mgt-grid > .mgt-qcard > h4.title, .mgt-grid > .mgt-qcard > h4.title { font-size: 10.5px !important; letter-spacing: .09em !important; text-transform: uppercase !important; color: var(--mg-text2) !important; }
.mgt-grid .row.wrap > div[style*="200px"], .mgt-grid .row.wrap > div[style*="120px"] { width: 100% !important; flex: 1 1 100%; }

/* 1.16.1: Verktyg – korten i samma rad lika höga, knappar i linje */
.mgt-grid { align-items: stretch; }
.mgt-grid > .card { display: flex; flex-direction: column; gap: 10px; }
.mgt-grid > .card > .mgt-foot { margin-top: auto !important; }
.mgt-grid > .card > button.mgt-foot { align-self: stretch; }
.mgt-grid.q { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.mgt-grid.q > .mgt-qcard .mgt-qbtns { margin-top: 0; }
.mgt-grid.q > .mgt-qcard .mgt-qbtns .mg-btn { flex: 1 1 auto; justify-content: center; }
/* 1.16.1: flikrad för menygruppen Verktyg (Häkte/Fängelse, Stashes, Rapport-ID, Kommandon) */
.mg-subtabs { margin: 14px 28px 12px; padding: 4px; border: 1px solid var(--mg-line); border-radius: 10px; background: var(--mg-card); width: fit-content; max-width: 100%; }

/* 1.16.1: Skapa Discord-samtal (web/dcgroup.js) */
.dcg-kpi .ki { background: rgba(88, 101, 242, .16) !important; color: #8b95ff !important; }
.dcg-bar { display: flex; align-items: center; gap: 12px; margin: 18px 24px 0; padding: 12px 14px; border: 1px solid rgba(88, 101, 242, .35); border-radius: 10px; background: rgba(88, 101, 242, .08); }
.dcg-bar > i { color: #8b95ff; font-size: 18px; }
.dcg-bar small { display: block; color: var(--mg-text2); font-size: 12px; }
#modal .dlg.dcg-dlg { width: min(720px, 94vw); max-width: none; }
.dcg { display: flex; flex-direction: column; gap: 12px; }
.dcg .f > span { display: block; font-size: 12px; color: var(--mg-text2); margin-bottom: 5px; }
.dcg-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.dcg-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mg-text); cursor: pointer; }
.dcg-chk input { accent-color: var(--mg-green); width: 15px; height: 15px; }
.dcg-h { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mg-text2); margin-bottom: 6px; }
.dcg-selbox { border: 1px solid var(--mg-line); border-radius: 10px; padding: 10px 12px; background: rgba(0,0,0,.18); }
.dcg-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.dcg-none { font-size: 12px; color: var(--mg-muted); }
.dcg-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 9px; border-radius: 99px; border: 1px solid var(--mg-line2); background: var(--mg-card2); font-size: 12px; color: var(--mg-text); }
.dcg-chip > i { font-size: 10.5px; color: var(--mg-text2); }
.dcg-chip.staff { border-color: rgba(88, 101, 242, .45); } .dcg-chip.staff > i { color: #8b95ff; }
.dcg-chip.gangs > i { color: #f2994a; } .dcg-chip.jobs > i { color: var(--mg-green2); }
.dcg-chip button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: var(--mg-text2); display: grid; place-items: center; font-size: 10px; cursor: pointer; }
.dcg-chip button:hover { background: rgba(255,255,255,.08); color: #fff; }
.dcg-tabs .n { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--mg-green); }
.dcg .search { max-width: none; }
.dcg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; padding-right: 2px; }
.dcg-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--mg-line); border-radius: 8px; background: rgba(255,255,255,.02); color: var(--mg-text); text-align: left; cursor: pointer; min-width: 0; }
.dcg-row:hover { border-color: var(--mg-line2); background: rgba(255,255,255,.05); }
.dcg-row.on { border-color: var(--accent-line); background: var(--accent-soft); }
.dcg-row .cb { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--mg-line2); display: grid; place-items: center; font-size: 9px; color: var(--accent-ink); }
.dcg-row.on .cb { background: var(--mg-green); border-color: var(--mg-green); }
.dcg-row .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dcg-row .nm b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcg-row .nm small { font-size: 11px; color: var(--mg-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcg-empty { grid-column: 1 / -1; padding: 18px; text-align: center; color: var(--mg-muted); font-size: 12.5px; }
.dcg-calls { display: flex; flex-direction: column; gap: 6px; }
.dcg-call { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(88, 101, 242, .35); border-radius: 8px; background: rgba(88, 101, 242, .07); }
.dcg-call > i { color: #8b95ff; }
.dcg-call small { display: block; color: var(--mg-text2); font-size: 11px; }
.shell.mg .kpis.k5 { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(150px, .7fr); }
@media (max-width: 1100px) { .shell.mg .kpis.k5 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.dcg-kpi .dcg-plus { background: rgba(88, 101, 242, .18); color: #aab1ff; border-color: transparent; }
.dcg > .search { flex: 0 0 auto; height: 38px; min-height: 0; display: flex; align-items: center; }
.dcg > .search input { height: 36px; }