/* =====================================================================
   Gang dashboard — design system
   Dark, premium, minimal. Green is the working accent, yellow is reserved
   for the few things that must stand out, blue is informational.
===================================================================== */
:root{
  --bg:#07090B;
  --bg2:#0D1114;
  --card:#12171A;
  --card2:#171D21;
  --card3:#1C2327;
  --line:rgba(255,255,255,.06);
  --line2:rgba(255,255,255,.10);
  --line3:rgba(255,255,255,.16);

  --green:#009C3B;
  --green2:#19C963;
  --green-hover:#0FB04A;
  --yellow:#F6D600;
  --blue:#173F8A;
  --blue2:#4A7BE0;
  --danger:#D94A4A;
  --ok:#19C963;

  --ink:#F4F5F5;
  --ink2:#899197;
  --mute:#535B60;

  --green-a:rgba(25,201,99,.12);
  --green-b:rgba(25,201,99,.25);
  --yellow-a:rgba(246,214,0,.10);
  --yellow-b:rgba(246,214,0,.28);
  --blue-a:rgba(74,123,224,.14);
  --blue-b:rgba(74,123,224,.35);
  --orange:#F08A24;
  --orange-a:rgba(240,138,36,.12);
  --orange-b:rgba(240,138,36,.32);
  --danger-a:rgba(217,74,74,.12);
  --danger-b:rgba(217,74,74,.35);

  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px;
  --shadow:0 30px 80px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.02) inset;
  --shadow-sm:0 12px 32px rgba(0,0,0,.45);

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Bebas Neue","Oswald","Arial Narrow",var(--sans);
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* the floating-app ground: a faint green cast top-left, nothing loud */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(0,156,59,.07), transparent 60%),
    radial-gradient(700px 420px at 100% 110%, rgba(23,63,138,.08), transparent 55%);
}
::selection{background:rgba(25,201,99,.3)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:var(--sans);font-size:inherit;color:inherit}
svg.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.hidden{display:none!important}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16);border:3px solid transparent;background-clip:padding-box}

/* =====================================================================
   Shell — floating NUI window
===================================================================== */
.shell{
  position:relative;z-index:1;
  width:min(92vw,1880px);height:92vh;
  display:grid;grid-template-columns:252px minmax(0,1fr);
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow);
}
@media (max-width:1100px){
  .shell{width:100vw;height:100vh;border-radius:0;grid-template-columns:220px minmax(0,1fr)}
}

/* ---------- sidebar ---------- */
.sidebar{
  display:flex;flex-direction:column;min-height:0;
  background:#090C0F;
  border-right:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;padding:22px 20px 16px;cursor:default;min-width:0}
.brand.editable{cursor:pointer}
.brand.editable:hover .crest{border-color:var(--green-b)}
.crest{
  width:44px;height:44px;flex:none;border-radius:12px;
  background:linear-gradient(160deg,#0F2A1B 0%,#0B1912 100%);
  border:1px solid rgba(25,201,99,.28);
  color:var(--green2);
  font-family:var(--display);font-size:19px;letter-spacing:1px;line-height:1;
  display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 8px 20px rgba(0,156,59,.10);
  transition:border-color .15s var(--ease);
}
.brand-txt{min-width:0}
.brand h1{
  margin:0;font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:1.4px;line-height:1.02;
  color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;
}
.brand p{margin:4px 0 0;font-size:11px;color:var(--ink2);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tricolor{
  height:2px;margin:0 20px 10px;border-radius:2px;opacity:.55;
  background:linear-gradient(90deg,var(--green) 0 50%,var(--yellow) 50% 76%,var(--blue2) 76% 100%);
}

.nav{flex:1;min-height:0;overflow:auto;padding:6px 12px 10px;display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--mute);padding:14px 10px 6px;font-weight:600}
.nav a{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:10px;
  color:var(--ink2);font-weight:500;font-size:13.5px;cursor:pointer;
  border:1px solid transparent;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
  user-select:none;
}
.nav a svg.ic{width:18px;height:18px;opacity:.75;transition:.15s}
.nav a:hover{color:var(--ink);background:rgba(255,255,255,.03)}
.nav a:hover svg.ic{opacity:1}
.nav a.active{color:var(--ink);background:var(--green-a);border-color:rgba(25,201,99,.16)}
.nav a.active svg.ic{color:var(--green2);opacity:1}
.nav a:focus-visible{outline:2px solid rgba(25,201,99,.55);outline-offset:-2px}
.nav a.active::before{
  content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--green2);
}
.nav .badge{
  margin-left:auto;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;
  background:rgba(255,255,255,.06);color:var(--ink2);font-variant-numeric:tabular-nums;line-height:1.4;
}
.nav .badge:empty{display:none}
.nav a.active .badge{background:rgba(25,201,99,.16);color:var(--green2)}
.nav .badge.hot{background:var(--yellow-a);color:var(--yellow)}

.sidebar-foot{padding:14px 16px 16px;border-top:1px solid var(--line)}
.user-chip{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{
  position:relative;width:36px;height:36px;flex:none;border-radius:10px;
  background:var(--card2);border:1px solid var(--line2);
  display:grid;place-items:center;font-weight:700;font-size:12.5px;color:var(--ink);letter-spacing:.5px;
}
.avatar .dot{
  position:absolute;right:-4px;bottom:-4px;width:11px;height:11px;border-radius:50%;
  background:var(--green2);border:2px solid var(--bg);
  box-shadow:0 0 0 1px rgba(25,201,99,.2);
}
.who-id{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
#whoName{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-role{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mute);font-weight:600;margin-top:2px}
.who-role.admin{color:var(--green2)}

/* ---------- main column ---------- */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg2)}
.topbar{
  flex:none;display:flex;align-items:center;gap:18px;
  height:66px;padding:0 28px;
  border-bottom:1px solid var(--line);
  background:var(--bg2);
}
.topbar .title{display:flex;align-items:baseline;gap:14px;min-width:0}
.topbar h2{margin:0;font-family:var(--display);font-weight:400;font-size:27px;letter-spacing:1.6px;line-height:1;white-space:nowrap}
.topbar .sub{font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.page-actions{display:flex;gap:8px}
.page-actions:empty,.page-actions:empty + .vsep{display:none}
.online-pill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums;
}
.online-pill i{width:7px;height:7px;border-radius:50%;background:var(--green2);box-shadow:0 0 0 3px var(--green-a)}
.clock{font-family:var(--mono);font-size:12.5px;color:var(--ink2);letter-spacing:.3px;padding-left:4px}
.clock b{color:var(--ink);font-weight:500}
.vsep{width:1px;height:22px;background:var(--line2);margin:0 4px}

.content{flex:1;min-height:0;overflow:auto;padding:26px 28px 40px}
.page{display:none}
.page.active{display:block;animation:fade .22s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* =====================================================================
   Primitives
===================================================================== */
.section{margin-bottom:28px}
.section:last-child{margin-bottom:0}
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.section-head h3{margin:0;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink2);font-weight:600;white-space:nowrap}
.section-head .line{flex:1;height:1px;background:var(--line)}
.section-head .meta{font-size:12px;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.section-head .actions{display:flex;gap:8px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card.elev{background:var(--card2)}

.grid-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1300px){.grid-2{grid-template-columns:1fr}}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px;border-radius:9px;
  border:1px solid var(--line2);background:var(--card2);color:var(--ink);
  font-weight:600;font-size:13px;line-height:1.2;cursor:pointer;white-space:nowrap;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .1s var(--ease);
}
.btn svg.ic{width:15px;height:15px}
.btn:hover{border-color:var(--line3);background:var(--card3)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--green);border-color:rgba(25,201,99,.45);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.btn.primary:hover{background:var(--green-hover);border-color:var(--green2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink2)}
.btn.ghost:hover{color:var(--ink);background:rgba(255,255,255,.04);border-color:transparent}
.btn.danger{color:var(--danger)}
.btn.danger:hover{border-color:var(--danger-b);background:var(--danger-a);color:#F08A8A}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:7px;gap:5px}
.btn.sm svg.ic{width:13px;height:13px}
.btn.icon{padding:0;width:32px;height:32px}
.btn.icon.sm{width:28px;height:28px}
.btn.icon svg.ic{width:15px;height:15px}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn:disabled:hover{border-color:var(--line2);background:var(--card2);color:var(--ink)}
.btn.primary:disabled:hover{background:var(--green);color:#fff}
.btn.ghost:disabled:hover{background:transparent;border-color:transparent;color:var(--ink2)}
.btn.danger:disabled:hover{color:var(--danger)}
.btn:focus-visible,.ctl:focus-visible{outline:2px solid rgba(25,201,99,.55);outline-offset:2px}

/* controls */
.ctl{
  width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--ink);
  border-radius:9px;padding:10px 12px;font-size:13.5px;line-height:1.3;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.ctl::placeholder{color:var(--mute)}
.ctl:hover{border-color:var(--line3)}
.ctl:focus{outline:none;border-color:rgba(25,201,99,.55);box-shadow:0 0 0 3px rgba(25,201,99,.12)}
.ctl:disabled{opacity:.5;cursor:not-allowed}
textarea.ctl{resize:vertical;min-height:64px}
select.ctl{
  appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23899197' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}
select.ctl option{background:var(--card2);color:var(--ink)}
.ctl.sm{padding:7px 10px;font-size:12.5px;border-radius:7px}
select.ctl.sm{padding-right:30px;background-position:right 8px center}
input[type=number].ctl{font-variant-numeric:tabular-nums}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:11.5px;color:var(--ink2);margin-bottom:6px;font-weight:600;letter-spacing:.3px}
.field-row{display:flex;gap:12px}
.field-row .field{flex:1;min-width:0}
.field .hint{font-size:11.5px;color:var(--mute);margin-top:6px}

/* toolbar (search + filters) */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.search{position:relative;width:280px;max-width:100%}
.search svg.ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.search .ctl{padding-left:34px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  background:transparent;border:1px solid var(--line2);color:var(--ink2);
  border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;
  transition:.15s var(--ease);display:inline-flex;align-items:center;gap:6px;
}
.chip:hover{color:var(--ink);border-color:var(--line3)}
.chip.on{background:var(--green-a);border-color:var(--green-b);color:var(--green2)}
.chip .n{color:var(--mute);font-weight:500;font-variant-numeric:tabular-nums}
.chip.on .n{color:inherit;opacity:.8}
.toolbar .spacer{flex:1}

/* pills */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.3px;white-space:nowrap;line-height:1.5;
  border:1px solid var(--line2);color:var(--ink2);background:rgba(255,255,255,.03);
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{color:var(--green2);border-color:var(--green-b);background:var(--green-a)}
.pill.warn{color:var(--yellow);border-color:var(--yellow-b);background:var(--yellow-a)}
.pill.info{color:var(--blue2);border-color:var(--blue-b);background:var(--blue-a)}
.pill.bad{color:var(--danger);border-color:var(--danger-b);background:var(--danger-a)}
.pill.orange{color:var(--orange);border-color:var(--orange-b);background:var(--orange-a)}
.pill.mute{color:var(--ink2)}

.tag{
  display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.3px;
  border:1px solid var(--line2);color:var(--ink2);background:rgba(255,255,255,.03);white-space:nowrap;
}
.tag.green{color:var(--green2);border-color:var(--green-b);background:var(--green-a)}
.tag.yellow{color:var(--yellow);border-color:var(--yellow-b);background:var(--yellow-a)}
.tag.blue{color:var(--blue2);border-color:var(--blue-b);background:var(--blue-a)}
.tag.red{color:var(--danger);border-color:var(--danger-b);background:var(--danger-a)}

.muted{color:var(--ink2)}
.dim{color:var(--mute)}
.mono{font-family:var(--mono);font-size:12px}
.num,.tnum{font-variant-numeric:tabular-nums}
.ink{color:var(--ink)}
.good{color:var(--green2)}
.bad{color:var(--danger)}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:22px}
.tiles.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.tiles.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1300px){.tiles.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.tiles.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* a tile holding several small counts side by side (Witwas lobbies per state) */
.tile .tri{display:flex;gap:18px;margin-top:8px}
.tile .tri div{display:flex;flex-direction:column;min-width:0}
.tile .tri b{font-size:clamp(22px,1.7vw,28px);font-weight:600;letter-spacing:-.5px;line-height:1.1}
.tile .tri span{font-size:11.5px;color:var(--mute);margin-top:6px}
.c-orange{color:var(--orange)}
.c-yellow{color:var(--yellow)}
.c-green{color:var(--green2)}
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1650px){.tiles.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1200px){.tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.tiles.six,.tiles.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px 15px;min-height:104px;overflow:hidden;
  transition:border-color .15s var(--ease);
}
.tile:hover{border-color:var(--line2)}
.tile .lbl{font-size:12px;color:var(--ink2);font-weight:500;padding-right:36px}
.tile .val{font-size:clamp(22px,1.7vw,28px);font-weight:600;letter-spacing:-.5px;line-height:1.1;margin-top:8px;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .val small{font-size:14px;color:var(--ink2);font-weight:500;letter-spacing:0;margin-left:2px}
.tile .sub{font-size:11.5px;color:var(--mute);margin-top:7px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tile .sub b{color:var(--ink2);font-weight:600}
.tile .ic-box{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;background:rgba(255,255,255,.04);color:var(--ink2);
}
.tile .ic-box svg.ic{width:15px;height:15px}
.tile.green .ic-box{background:var(--green-a);color:var(--green2)}
.tile.yellow .ic-box{background:var(--yellow-a);color:var(--yellow)}
.tile.blue .ic-box{background:var(--blue-a);color:var(--blue2)}
.tile.red .ic-box{background:var(--danger-a);color:var(--danger)}
.tile .val.good{color:var(--green2)}
.tile .val.bad{color:var(--danger)}

/* tables */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:600px}
th{
  font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--mute);font-weight:600;
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015);white-space:nowrap;
}
td{padding:11px 16px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.02)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.when{font-family:var(--mono);font-size:12px;color:var(--ink2);white-space:nowrap}
td b{font-weight:600}
td.nm{white-space:nowrap}
td .sub{display:block;font-size:12px;color:var(--ink2);margin-top:2px}
.row-actions{display:flex;gap:5px;justify-content:flex-end}
tbody .row-actions{opacity:.7;transition:.15s}
/* a flex <td> stops being a table cell and its border drifts; keep the cell a cell */
td.row-actions{display:table-cell;text-align:right;white-space:nowrap}
td.row-actions > .btn{margin-left:5px;vertical-align:middle}
tbody tr:hover .row-actions,tbody tr:focus-within .row-actions{opacity:1}
td.empty,.empty{color:var(--mute);text-align:center;padding:40px 20px;font-size:13.5px;grid-column:1/-1}
.empty svg.ic{width:26px;height:26px;display:block;margin:0 auto 10px;opacity:.5}

.stock-low{color:var(--danger);font-weight:700}
.stock-ok{color:var(--ink)}
.stock-zero{color:var(--mute)}

.sel-status{width:auto;min-width:150px;font-weight:600;font-size:12.5px}
.sel-status.st-Pending{color:var(--yellow)}
.sel-status.st-Approved{color:var(--blue2)}
.sel-status.st-Delivered{color:var(--green2)}
.sel-status.st-Denied{color:var(--danger)}

/* inline form (customers / accounts) */
.inline-form{display:grid;gap:10px;align-items:end}
.inline-form .field{margin:0}
.inline-form .btn{height:40px}

/* modal */
.modal-back{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(3,5,6,.72);backdrop-filter:blur(5px);
}
.modal-back.show{display:flex}
.modal{
  display:flex;flex-direction:column;width:100%;max-width:500px;max-height:92vh;
  background:var(--card2);border:1px solid var(--line2);border-radius:14px;
  box-shadow:var(--shadow);animation:pop .18s var(--ease);
}
@keyframes pop{from{transform:scale(.97) translateY(6px);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:1.4px;line-height:1}
.modal-body{padding:20px;overflow:auto;min-height:0}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.modal.wide{max-width:1240px;width:94vw}
.confirm-msg{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}

/* toast */
.toast{
  position:fixed;right:calc(max(4vw, (100vw - 1880px) / 2) + 28px);bottom:calc(4vh + 28px);z-index:200;
  display:flex;align-items:center;gap:10px;
  background:var(--card3);border:1px solid var(--line2);color:var(--ink);
  padding:11px 16px 11px 13px;border-radius:10px;font-size:13px;font-weight:600;
  box-shadow:var(--shadow-sm);opacity:0;transform:translateY(12px);pointer-events:none;
  transition:.22s var(--ease);max-width:420px;
}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green2);flex:none}
.toast.show{opacity:1;transform:none}
.toast.err{border-color:var(--danger-b)}
.toast.err::before{background:var(--danger)}
@media (max-width:1100px){.toast{right:28px;bottom:28px}}

/* =====================================================================
   Overview
===================================================================== */
.feed{display:flex;flex-direction:column}
.feed-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.feed-row:last-child{border-bottom:0}
.feed-ic{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.04);color:var(--ink2)}
.feed-ic svg.ic{width:14px;height:14px}
.feed-ic.green{background:var(--green-a);color:var(--green2)}
.feed-ic.blue{background:var(--blue-a);color:var(--blue2)}
.feed-ic.yellow{background:var(--yellow-a);color:var(--yellow)}
.feed-ic.red{background:var(--danger-a);color:var(--danger)}
.feed-txt{flex:1;min-width:0;font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-txt b{color:var(--ink);font-weight:600}
.feed-when{font-family:var(--mono);font-size:11.5px;color:var(--mute);white-space:nowrap}
.feed-more{width:100%;margin-top:12px}
/* the activity list scrolls inside its own card instead of stretching the page */
.feed-scroll{max-height:min(62vh,640px);overflow-y:auto;padding-right:6px;margin-right:-6px}
.feed-scroll .feed-txt{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4}
/* admins: a quiet hide button per line, clearer on hover */
.feed-hide{opacity:.35;transition:opacity .15s}
.feed-row:hover .feed-hide,.feed-hide:focus-visible{opacity:1}
.section-head .btn.sm{flex:none}
.side-list{display:flex;flex-direction:column;gap:6px}
.side-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.02);border:1px solid var(--line);font-size:13px}
.side-row .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-row .grow small{display:block;font-size:11px;color:var(--mute);margin-top:1px}
.side-row b{font-variant-numeric:tabular-nums;font-weight:600}
.mini-prog{width:70px;height:5px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.mini-prog i{display:block;height:100%;background:var(--green2);border-radius:5px}
.presence{width:8px;height:8px;border-radius:50%;flex:none;background:var(--mute)}
.presence.on{background:var(--green2);box-shadow:0 0 0 3px var(--green-a)}
.stack{display:flex;flex-direction:column;gap:16px}
.stack > .section{margin-bottom:0}

/* =====================================================================
   Members
===================================================================== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px}
.group-label{
  grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:8px;
  font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink2);font-weight:600;
}
.group-label:first-child{margin-top:0}
.group-label .n{color:var(--mute);letter-spacing:0;font-weight:500}
.group-label::after{content:"";flex:1;height:1px;background:var(--line)}
.group-label.lead{color:var(--yellow)}
.member{
  display:flex;flex-direction:column;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  transition:border-color .15s var(--ease),transform .15s var(--ease);
}
.member:hover{border-color:var(--line2);transform:translateY(-1px)}
.member.st-Blacklisted{opacity:.75}
.member-top{display:flex;align-items:center;gap:12px;min-width:0}
.member .avatar{width:40px;height:40px;border-radius:11px;font-size:13px}
.member .avatar .dot{background:var(--mute);box-shadow:none}
.member .avatar .dot.on{background:var(--green2);box-shadow:0 0 0 1px rgba(25,201,99,.25)}
.member .id{flex:1;min-width:0}
.member .name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member .rank{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--green2);font-weight:600;margin-top:2px;line-height:1.3}
.member.lead .rank{color:var(--yellow)}
.member .rank.none{color:var(--mute);letter-spacing:.3px;text-transform:none;font-weight:500}
.member .meta{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink2)}
.member .meta div{display:flex;gap:8px;align-items:flex-start;min-width:0}
.member .meta svg.ic{width:14px;height:14px;margin-top:2px;color:var(--mute)}
.member .meta span{min-width:0;overflow-wrap:anywhere}
.member .meta .away{color:var(--yellow)}
/* strikes: bright red, count always visible, reasons for admins only */
.member .meta .strikes,.member .meta .strikes svg.ic{color:#FF4D4D;font-weight:600}
.strike-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.strike-row{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:9px;background:rgba(255,77,77,.06);border:1px solid rgba(255,77,77,.22)}
.strike-row .grow{flex:1;min-width:0}
.strike-row .note{font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.strike-row .by{font-size:11px;color:var(--mute);margin-top:3px;font-family:var(--mono)}
/* a withdrawn strike stays on record, dimmed and crossed through */
.strike-row.revoked{background:rgba(255,255,255,.02);border-color:var(--line)}
.strike-row.revoked .note{color:var(--mute);text-decoration:line-through}
.strike-row .revoked-by{font-size:11px;color:var(--ink2);margin-top:3px}
.strike-head{display:flex;align-items:center;gap:10px;margin:18px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.strike-head h4{margin:0;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#FF4D4D;font-weight:600}
.strike-head .dim{font-size:11.5px}
.strike-add{display:flex;gap:8px}
.strike-add .ctl{flex:1}
.member .meta .away svg.ic{color:var(--yellow)}
.member .foot{display:flex;gap:6px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.member .foot .spacer{flex:1}

.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.role{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px}
.role-top{display:flex;gap:12px;align-items:center}
.role-ic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--green-a);color:var(--green2)}
.role-ic svg.ic{width:18px;height:18px}
.role-title{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:1.4px;line-height:1}
.role-en{font-size:11px;color:var(--ink2);text-transform:uppercase;letter-spacing:1.2px;margin-top:4px;font-weight:600}
.role-desc{font-size:12.5px;color:var(--ink2);line-height:1.55;margin:0}
.role-holder{font-size:12.5px;padding-top:10px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.role-holder .who{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-weight:600;font-size:12px}
.role-holder .who::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green2)}

/* =====================================================================
   Armory / logistics
===================================================================== */
.warehouses{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.wh{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:14px}
.wh-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.wh-head h3{margin:0;font-size:16px;font-weight:600}
.wh-head .ratio{margin-top:4px}
.stocks{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.stock-box{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px 12px;text-align:center}
.stock-box .val{font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1}
.stock-box .lbl{font-size:11px;color:var(--ink2);margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stock-box.fin{border-color:var(--green-b);background:rgba(25,201,99,.05)}
.stock-box.fin .val{color:var(--green2)}
.stock-arrow{color:var(--mute);display:grid;place-items:center}
.wh-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wh-note{font-size:11.5px;color:var(--mute);line-height:1.45;display:flex;gap:7px;align-items:flex-start}
.wh-note svg.ic{width:13px;height:13px;margin-top:2px;color:var(--green2);opacity:.8}
.wh-foot{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mute);border-top:1px solid var(--line);padding-top:10px}

/* =====================================================================
   Customers
===================================================================== */
.cust-name{color:var(--ink);cursor:pointer;font-weight:600;border-bottom:1px dotted var(--line3);transition:.15s}
.cust-name:hover{color:var(--green2);border-bottom-color:var(--green2)}
.cust-meta{color:var(--ink2);font-size:13px;margin-bottom:14px;display:flex;gap:14px;flex-wrap:wrap}
.cust-meta span{display:inline-flex;align-items:center;gap:6px}
.cust-meta svg.ic{width:13px;height:13px;color:var(--mute)}
.clog-h{margin:18px 0 10px;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink2);font-weight:600}
.clog-h:first-child{margin-top:0}
.clog-new{display:grid;grid-template-columns:230px 130px 130px 1fr auto;gap:8px;align-items:center}
.clog-new .ctl{width:100%}
.clog-list{display:flex;flex-direction:column;gap:6px}
.clog-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13px;
}
.clog-amt{font-variant-numeric:tabular-nums;font-weight:600}
.clog-money{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.clog-note{color:var(--ink2);font-style:italic}
.clog-when{font-family:var(--mono);font-size:11.5px;color:var(--mute);margin-left:auto;white-space:nowrap}
.ct-dir{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:2px 8px;border-radius:6px;border:1px solid;white-space:nowrap}
.ct-dir.geleverd{color:var(--green2);border-color:var(--green-b);background:var(--green-a)}
.ct-dir.gekocht{color:var(--blue2);border-color:var(--blue-b);background:var(--blue-a)}

/* chart */
.ch-legend{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--ink2);margin:4px 0 8px}
.ch-legend span{display:inline-flex;align-items:center;gap:6px}
.ch-dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.ch-dot.ch-in{background:var(--green2)}
.ch-dot.ch-out{background:var(--blue2)}
.ch-filters{margin-bottom:10px}
.ch-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:10px 8px 4px;margin-bottom:8px}
.supply-chart{display:block;max-width:none}
rect.ch-hit{fill:transparent}
path.ch-in{fill:var(--green2)}
path.ch-out{fill:var(--blue2)}
.ch-group:hover path{filter:brightness(1.18)}
.ch-val{fill:var(--ink2);font-size:10px;text-anchor:middle;font-weight:600}
.ch-x{fill:var(--ink2);font-size:10.5px;text-anchor:middle}
.ch-y{fill:var(--ink2);font-size:10px;text-anchor:end}
.ch-axis{stroke:rgba(255,255,255,.12);stroke-width:1}
.ch-grid{stroke:rgba(255,255,255,.05);stroke-width:1}
.ch-tip{
  position:absolute;pointer-events:none;display:none;z-index:5;
  background:var(--card3);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;
  font-size:12px;box-shadow:var(--shadow-sm);min-width:150px;
}
.ch-tip.show{display:block}
.ch-tip .d{font-family:var(--mono);color:var(--mute);font-size:11px;margin-bottom:5px}
.ch-tip .r{display:flex;align-items:center;gap:7px;justify-content:space-between}
.ch-tip .r i{width:10px;height:3px;border-radius:2px;display:inline-block;flex:none}
.ch-tip .r span{color:var(--ink2);flex:1}
.ch-tip .r b{font-variant-numeric:tabular-nums}
.ch-multi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ch-col-title{font-size:11px;font-weight:600;color:var(--ink2);text-align:center;margin-bottom:6px;letter-spacing:1.2px;text-transform:uppercase}
@media (max-width:900px){.ch-multi{grid-template-columns:1fr}}

/* =====================================================================
   Witwas lobbies
===================================================================== */
.lobbies{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.lobby{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px}
/* the card's edge follows the lobby's state */
.lobby.st-wachtend{border-color:var(--orange-b)}
.lobby.st-bezig{border-color:var(--yellow-b)}
.lobby.st-afgerond{border-color:var(--green-b)}
.sel-status.st-wachtend{color:var(--orange)}
.sel-status.st-bezig{color:var(--yellow)}
.sel-status.st-afgerond{color:var(--green2)}
.lobby-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.lobby-head h3{margin:0;font-size:16px;font-weight:600}
.lobby-by{color:var(--mute);font-size:11.5px;margin-top:3px}
.lobby-amt{display:flex;align-items:baseline;gap:6px;white-space:nowrap;min-width:0}
/* state label with "minimum gehaald" stacked under it, top right of the card */
.lobby-state{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.lobby-amt b{font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1}
.lobby-amt span.of{font-size:13px;color:var(--mute)}
/* minimum reached: the target reads as loud as the amount */
.lobby-amt.met b,.lobby-amt.met span.of{font-size:clamp(20px,1.55vw,26px);font-weight:600;letter-spacing:-.5px;line-height:1;color:var(--ink)}
.prog{height:8px;background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden}
.prog-fill{height:100%;background:var(--green);border-radius:8px;transition:width .4s var(--ease)}
.prog-fill.full{background:var(--green2)}
.lobby-pct{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink2)}
.lobby-pct b{color:var(--ink);font-variant-numeric:tabular-nums}
.lobby-contribs{display:flex;flex-direction:column;gap:4px}
.lc-row{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid var(--line)}
.lc-row span.nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-row b{font-variant-numeric:tabular-nums;font-weight:600}
.lc-arrow{color:var(--mute)}
.lc-net{color:var(--green2)}
.lobby-net{font-size:13px;color:var(--ink2);border-top:1px solid var(--line);padding-top:10px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.lobby-net b{color:var(--green2);font-variant-numeric:tabular-nums}
.lobby-join{display:flex;gap:8px}
.lobby-join .ctl{flex:1}
.lobby-foot{display:flex;gap:6px;flex-wrap:wrap}
.lobby-foot .spacer{flex:1}

/* =====================================================================
   Locations map
===================================================================== */
#locations.page.active{height:100%}
.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:stretch;height:100%;min-height:460px}
@media (max-width:1200px){.map-layout{grid-template-columns:1fr;height:auto}.map-side{max-height:320px}}
.map-container{
  position:relative;height:100%;min-height:460px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  background:radial-gradient(circle at 50% 40%,#0F1518,#07090B);
  cursor:grab;user-select:none;
}
@media (max-width:1200px){.map-container{height:62vh}}
.map-container:active{cursor:grabbing}
.map-world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
#mapImg{display:block;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:saturate(.85) brightness(.92)}
.marker-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.map-pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;z-index:2}
.pin-dot{
  width:14px;height:14px;border-radius:50%;background:var(--pin);
  border:2px solid rgba(7,9,11,.9);
  box-shadow:0 0 0 2px rgba(255,255,255,.75),0 4px 10px rgba(0,0,0,.6);
  transition:transform .12s var(--ease);
}
.map-pin:hover{z-index:5}
.map-pin:hover .pin-dot,.map-pin.hl .pin-dot{transform:scale(1.3)}
.pin-label{
  position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);
  white-space:nowrap;background:rgba(7,9,11,.9);border:1px solid var(--pin);color:#fff;
  font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;pointer-events:none;
  box-shadow:0 2px 8px rgba(0,0,0,.5);backdrop-filter:blur(3px);
}
.map-popup{
  position:absolute;display:none;flex-direction:column;gap:8px;width:262px;z-index:50;
  background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:10px;
  box-shadow:var(--shadow-sm);
}
.map-popup.show{display:flex}
.pin-colors{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sw-sep{width:1px;height:16px;background:var(--line2);margin:0 2px}
/* the rainbow swatch: a colour field to drag through; shows the picked colour */
.sw-custom{position:relative;display:inline-block;overflow:hidden;
  background:conic-gradient(#ff4d4d,#f6d600,#19c963,#22d3ee,#4a7be0,#b07cff,#ff5fa2,#ff4d4d)}
.sw-custom[style*="--pick"]{background:var(--pick)}
/* follow the colour field instantly while dragging: only the hover zoom animates */
.sw.sw-custom{transition:transform .12s}
.sw-custom input{position:absolute;inset:-6px;width:40px;height:40px;opacity:0;cursor:pointer;border:0;padding:0}
.sw{width:20px;height:20px;padding:0;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:0 0 0 1px rgba(255,255,255,.18);transition:.12s}
.sw:focus-visible,.mk-row:focus-visible{outline:2px solid rgba(25,201,99,.55);outline-offset:2px}
.sw:hover{transform:scale(1.1)}
.sw.on{border-color:#fff}
.popup-row{display:flex;gap:6px;flex-wrap:wrap}
.popup-by{font-size:10.5px;color:var(--mute)}
.map-hint{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  text-align:center;color:var(--ink2);font-size:14px;padding:20px;pointer-events:none;line-height:1.7;
}
.map-hint.show{display:flex}
.map-hint code{color:var(--green2);background:var(--green-a);padding:2px 6px;border-radius:5px;font-family:var(--mono);font-size:12px}
/* live GTA coordinates under the mouse, like the in-game map sites */
.map-coords{position:absolute;left:12px;bottom:12px;z-index:6;pointer-events:none;
  font-family:var(--mono);font-size:12px;color:var(--ink);background:rgba(7,9,11,.82);
  border:1px solid var(--line2);border-radius:8px;padding:6px 10px;backdrop-filter:blur(4px)}
.map-coords b{color:var(--ink2);font-weight:500;margin-right:4px}
.popup-coords{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--ink2)}
.popup-coords .btn{margin-left:auto}
.goto{padding:10px 12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.goto-row{display:flex;gap:6px}
.goto-row .ctl{flex:1;min-width:0}
/* paste a list of coordinates: many markers at once */
.bulk-text{font-family:var(--mono);font-size:12.5px;min-height:220px;white-space:pre}
.bulk-sum{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;margin:-6px 0 12px}
.bulk-sum .ok{color:var(--green2);font-weight:600}
.bulk-sum .bad{color:var(--danger);font-weight:600}
.bulk-bad{font-family:var(--mono);font-size:11.5px;color:var(--danger);max-height:90px;overflow:auto;margin:-6px 0 12px}
.map-tools{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:6px;z-index:6}
.map-tools .btn{background:rgba(13,17,20,.9);backdrop-filter:blur(4px)}
.map-tools .btn.on{border-color:var(--green2);color:var(--green2)}
.map-help-btn{font-weight:700;font-size:14px}
.map-container.selecting{cursor:crosshair}
.map-selbox{position:absolute;border:1.5px dashed var(--green2);background:rgba(25,201,99,.12);pointer-events:none;z-index:7;border-radius:2px}
.map-selbar{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:10px;
  padding:6px 8px 6px 14px;border-radius:10px;background:rgba(13,17,20,.94);border:1px solid var(--line2);font-size:13px;white-space:nowrap;backdrop-filter:blur(4px)}
.map-selbar[hidden],.map-help[hidden]{display:none}
.map-pin.sel .pin-dot{box-shadow:0 0 0 3px var(--danger),0 0 10px var(--danger)}
.mk-row.sel{border-color:rgba(217,74,74,.55);background:rgba(217,74,74,.08)}
.map-help{position:absolute;right:60px;top:12px;z-index:8;width:min(330px,calc(100% - 80px));max-height:calc(100% - 24px);overflow:auto;
  padding:12px 14px;border-radius:10px;background:rgba(13,17,20,.96);border:1px solid var(--line2);font-size:12.5px;backdrop-filter:blur(4px)}
.map-help-head{display:flex;align-items:center;justify-content:space-between;font-weight:600;margin-bottom:8px}
.map-help dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0}
.map-help dt{color:var(--text,#F4F5F5);white-space:nowrap}
.map-help dd{margin:0;color:var(--muted,#9aa3a8)}
.map-help kbd{font-family:var(--mono);font-size:11px;padding:1px 5px;border:1px solid var(--line2);border-radius:4px}
.map-side{display:flex;flex-direction:column;min-height:0;padding:0;overflow:hidden}
.map-side .head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.map-side .head h3{margin:0;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink2);font-weight:600;flex:1}
.map-side .list{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:4px}
.mk-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;border:1px solid transparent}
.mk-row:hover{background:rgba(255,255,255,.03);border-color:var(--line)}
.mk-row i{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.mk-row .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-row .grow small{display:block;font-size:11px;color:var(--mute)}
/* red cross to delete a marker from the list; "Zeker?" after the first click */
.mk-del{flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0;border-radius:7px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--danger);transition:background .15s,border-color .15s}
.mk-del svg.ic{width:15px;height:15px;stroke-width:2.4}
.mk-del:hover,.mk-del:focus-visible{background:var(--danger-a);border-color:var(--danger-b)}
.mk-del.armed{width:auto;padding:0 9px;font-size:11.5px;font-weight:700;background:var(--danger);border-color:var(--danger);color:#fff}
/* type filter: one chip per type; an "off" chip hides that type on map and list */
.map-filter{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.map-filter .chip{padding:4px 10px;font-size:11.5px}
.map-filter .chip.off{opacity:.45;text-decoration:line-through}
.mk-type{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--ink2)}
.map-popup select.ctl{width:100%}
/* admin: manage the location types */
.type-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.type-row{display:flex;gap:8px;align-items:center}
.type-row .ctl{flex:1}
.type-row .n{font-size:12px;color:var(--mute);white-space:nowrap;min-width:84px;text-align:right}
.type-add{display:flex;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.type-add .ctl{flex:1}
.map-side .tip{padding:12px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mute);line-height:1.5}

/* =====================================================================
   Login gate
===================================================================== */
#loginGate{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px;
  background:var(--bg);
}
#loginGate::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(800px 480px at 50% -10%, rgba(0,156,59,.10), transparent 60%),
    radial-gradient(600px 400px at 100% 100%, rgba(23,63,138,.10), transparent 55%);
}
#loginGate.show{display:flex}
.login-box{
  position:relative;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px;
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);padding:32px 28px 28px;
  box-shadow:var(--shadow);animation:pop .25s var(--ease);
}
.login-box .tricolor{margin:0 0 6px;opacity:.7}
.login-crest{margin:0 auto 6px;width:60px;height:60px;border-radius:15px;font-size:24px}
.login-box h1{margin:0;text-align:center;font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:2.4px;line-height:1;overflow-wrap:anywhere}
.login-sub{margin:0 0 8px;text-align:center;color:var(--ink2);font-size:12.5px;letter-spacing:.3px}
.login-box .btn{margin-top:4px;padding:12px;font-size:14px}
.login-err{color:var(--danger);font-size:12.5px;min-height:18px;text-align:center}
.login-foot{margin-top:6px;text-align:center;font-size:10.5px;color:var(--mute);letter-spacing:1.4px;text-transform:uppercase}

/* =====================================================================
   Admin
===================================================================== */
.admin-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
@media (max-width:1400px){.admin-grid{grid-template-columns:minmax(0,1fr)}}
/* a grid track sized 1fr grows to its widest child (the 600px accounts table);
   minmax(0,...) keeps the page at the window width and lets the table scroll */
.admin-grid > *{min-width:0}
.kv{display:flex;flex-direction:column;gap:10px}
.kv-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:9px 0;border-bottom:1px solid var(--line)}
.kv-row:last-child{border-bottom:0}
.kv-row span{color:var(--ink2)}
.kv-row b{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}