/* ══════════════════════════════════════════════════════════════
   Super Admin — the platform panel

   A different room from the business app: cooler, denser, built for
   tables and decisions rather than for one shopkeeper's day. It shares
   base.css tokens so both still feel like one product.
   ══════════════════════════════════════════════════════════════ */

body.sa{
  background:var(--canvas);
  min-height:100dvh;
  margin:0;
}

/* ── shell ─────────────────────────────────────────────────── */
.sa-shell{ display:grid; grid-template-columns:1fr; min-height:100dvh; }
@media (min-width:1000px){ .sa-shell{ grid-template-columns:246px minmax(0,1fr); } }

.sa-side{
  display:none; flex-direction:column; gap:1px;
  background:#101A16; color:#C9D3CD;
  padding:16px 12px 14px; position:sticky; top:0; height:100dvh; overflow-y:auto;
}
@media (min-width:1000px){ .sa-side{ display:flex; } }

.sa-brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 16px; text-decoration:none; }
.sa-brand img{ width:34px; height:34px; border-radius:9px; background:#fff; padding:3px; }
.sa-brand b{ color:#fff; font-size:15px; font-weight:800; letter-spacing:-.02em; display:block; line-height:1.2; }
.sa-brand span{ font-size:11px; color:#7E8F87; font-weight:600; }

.sa-group{
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#5E6F67; padding:16px 10px 6px;
}
.sa-nav{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 10px; border-radius:9px; border:0; background:transparent;
  color:#C9D3CD; font:inherit; font-size:13.5px; font-weight:600;
  text-align:left; cursor:pointer; text-decoration:none; transition:.13s;
}
.sa-nav:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sa-nav.on{ background:var(--saffron); color:#fff; font-weight:700; }
.sa-nav svg{ flex:none; opacity:.85; }
.sa-nav .n{
  margin-left:auto; font-size:11px; font-weight:800; padding:1px 7px;
  border-radius:999px; background:var(--danger); color:#fff;
}
.sa-nav.on .n{ background:rgba(0,0,0,.28); }

.sa-main{ min-width:0; display:flex; flex-direction:column; }

.sa-top{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px;
  padding:calc(12px + var(--safe-top)) 16px 12px;
  background:rgba(251,248,243,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
@media (min-width:1000px){ .sa-top{ padding:14px 26px; } }
.sa-top h1{ margin:0; font-size:18px; font-weight:800; letter-spacing:-.03em; }
.sa-top p{ margin:1px 0 0; font-size:12.5px; color:var(--muted); }
@media (max-width:640px){ .sa-top p{ display:none; } }
.sa-top .grow{ flex:1; min-width:0; }

.sa-body{ padding:18px 16px 90px; }
@media (min-width:1000px){ .sa-body{ padding:24px 26px 60px; max-width:1240px; } }

/* mobile menu */
.sa-burger{
  width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer;
}
@media (min-width:1000px){ .sa-burger{ display:none; } }
.sa-drawer{ position:fixed; inset:0; z-index:200; display:none; }
.sa-drawer.open{ display:block; }
.sa-drawer__bg{ position:absolute; inset:0; background:rgba(14,20,17,.55); }
.sa-drawer__panel{
  position:absolute; left:0; top:0; bottom:0; width:270px; max-width:84vw;
  background:#101A16; padding:16px 12px; overflow-y:auto;
  animation:slidein .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes slidein{ from{ transform:translateX(-100%) } }

/* ── stat cards ────────────────────────────────────────────── */
.sa-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin-bottom:20px; }
@media (min-width:760px){ .sa-stats{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .sa-stats{ grid-template-columns:repeat(5,1fr); } }
.sa-stat{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:14px 15px; text-align:left; font:inherit; cursor:pointer; transition:.14s;
}
.sa-stat:hover{ border-color:var(--line-2); transform:translateY(-1px); box-shadow:var(--sh-1); }
.sa-stat b{ display:block; font-size:24px; font-weight:800; letter-spacing:-.04em; line-height:1.1; }
.sa-stat span{ display:block; font-size:12px; color:var(--muted); font-weight:600; margin-top:3px; }
.sa-stat i{ display:block; width:26px; height:3px; border-radius:2px; margin-bottom:10px; background:var(--line-2); }

/* ── table ─────────────────────────────────────────────────── */
.sa-tablewrap{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1);
}
.sa-scroll{ overflow-x:auto; }
table.sa-table{ width:100%; border-collapse:collapse; min-width:820px; }
.sa-table th{
  text-align:left; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
  background:var(--sunk);
}
.sa-table td{ padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
.sa-table tr:last-child td{ border-bottom:0; }
.sa-table tbody tr{ cursor:pointer; transition:background .12s; }
.sa-table tbody tr:hover{ background:var(--sunk); }
.sa-table .num{ text-align:right; font-weight:700; white-space:nowrap; }
.sa-table .who b{ display:block; font-weight:700; font-size:13.5px; }
.sa-table .who span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

/* the same rows as cards, on a phone */
.sa-cards{ display:grid; gap:10px; }
.sa-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:14px; cursor:pointer; text-align:left; font:inherit; width:100%;
}
.sa-card:hover{ border-color:var(--line-2); }
.sa-card__h{ display:flex; align-items:flex-start; gap:10px; }
.sa-card__h b{ font-size:14.5px; font-weight:700; letter-spacing:-.01em; flex:1; min-width:0; }
.sa-card__m{ font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.5; }
.sa-card__f{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }

/* ── badges ────────────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:11.5px; font-weight:800; white-space:nowrap; line-height:1.5;
}
.badge i{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }

/* ── toolbar ───────────────────────────────────────────────── */
.sa-bar{ display:flex; gap:9px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.sa-bar .grow{ flex:1; min-width:190px; }
.sa-search{ position:relative; }
.sa-search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--faint); }
.sa-search input{
  width:100%; padding:10px 12px 10px 38px; font:inherit; font-size:14px;
  border:1px solid var(--line-2); border-radius:11px; background:var(--surface); color:var(--ink);
}
.sa-search input:focus{ outline:none; border-color:var(--saffron); box-shadow:0 0 0 3px rgba(245,124,32,.13); }

/* ── pagination ────────────────────────────────────────────── */
.sa-page{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.sa-page span{ font-size:12.5px; color:var(--muted); font-weight:600; }
.sa-page div{ display:flex; gap:7px; }

/* ── detail tabs ───────────────────────────────────────────── */
.sa-tabs{
  display:flex; gap:3px; padding:4px; background:var(--sunk);
  border:1px solid var(--line); border-radius:12px; margin-bottom:18px; overflow-x:auto;
}
.sa-tabs button{
  flex:none; font:inherit; font-size:12.5px; font-weight:700; padding:8px 14px;
  border:0; border-radius:9px; background:transparent; color:var(--body); cursor:pointer; white-space:nowrap;
}
.sa-tabs button[aria-selected="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }

/* ── key/value rows ────────────────────────────────────────── */
.kv{ display:grid; gap:0; }
.kv__r{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.kv__r:last-child{ border-bottom:0; }
.kv__r span{ color:var(--muted); font-weight:600; flex:none; }
.kv__r b{ font-weight:700; text-align:right; word-break:break-word; }

/* ── plan cards ────────────────────────────────────────────── */
.plans{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:760px){ .plans{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } }
.plan{
  background:var(--surface); border:1.5px solid var(--line); border-radius:16px; padding:18px;
  display:flex; flex-direction:column;
}
.plan__h{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.plan h3{ margin:0; font-size:17px; font-weight:800; letter-spacing:-.025em; }
.plan__p{ font-size:26px; font-weight:800; letter-spacing:-.04em; margin:10px 0 2px; }
.plan__p small{ font-size:13px; font-weight:600; color:var(--muted); letter-spacing:0; }
.plan__d{ font-size:13px; color:var(--muted); margin:6px 0 14px; line-height:1.5; min-height:20px; }
.plan__f{ display:grid; gap:6px; margin-bottom:16px; font-size:12.5px; }
.plan__f div{ display:flex; align-items:center; gap:7px; color:var(--body); }
.plan__f .off{ color:var(--faint); text-decoration:line-through; }
.plan .acts{ margin-top:auto; display:flex; gap:8px; }

/* ── feature editor ────────────────────────────────────────── */
.feat{ display:grid; gap:2px; max-height:min(52vh,460px); overflow-y:auto; padding-right:4px; }
.feat__r{ display:flex; align-items:center; gap:12px; padding:10px 2px; border-bottom:1px solid var(--line); }
.feat__r:last-child{ border-bottom:0; }
.feat__r b{ flex:1; font-size:13.5px; font-weight:600; }
.feat__r input[type=number]{
  width:92px; padding:7px 9px; font:inherit; font-size:13px; text-align:right;
  border:1px solid var(--line-2); border-radius:9px; background:var(--surface);
}
.feat__r input:disabled{ opacity:.4; }
.feat__r .u{ font-size:11px; color:var(--faint); width:52px; }

/* ── DNS instructions ──────────────────────────────────────── */
.dns{ background:#101A16; color:#D7E0DA; border-radius:13px; padding:15px 16px; font-size:13px; }
.dns table{ width:100%; border-collapse:collapse; }
.dns td{ padding:6px 0; border-bottom:1px solid rgba(255,255,255,.09); }
.dns td:first-child{ color:#7E8F87; font-weight:600; width:34%; }
.dns td:last-child{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all; }
.dns tr:last-child td{ border-bottom:0; }

/* ── bar chart ─────────────────────────────────────────────── */
.sa-bars{ display:flex; align-items:flex-end; gap:8px; height:130px; padding-top:8px; }
.sa-bars > div{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; gap:6px; min-width:0; }
.sa-bars .b{ background:linear-gradient(180deg,var(--saffron),var(--saffron-deep)); border-radius:5px 5px 0 0; min-height:3px; }
.sa-bars small{ text-align:center; font-size:10.5px; font-weight:700; color:var(--muted); }

/* ── misc ──────────────────────────────────────────────────── */
.sa-empty{ text-align:center; padding:48px 20px; }
.sa-empty b{ display:block; font-size:16px; font-weight:800; margin-bottom:5px; }
.sa-empty p{ margin:0 auto 16px; font-size:13.5px; color:var(--muted); max-width:340px; line-height:1.55; }

.sa-skel{ display:grid; gap:9px; }
.sa-skel > div{
  height:56px; border-radius:12px;
  background:linear-gradient(90deg,var(--sunk) 25%,#F1EEE8 37%,var(--sunk) 63%);
  background-size:400% 100%; animation:shim 1.3s linear infinite;
}

.copybox{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px;
  background:var(--sunk); border:1px dashed var(--line-2); font-size:13.5px;
}
.copybox code{ flex:1; min-width:0; font-size:13px; word-break:break-all; }

.note{ display:flex; gap:11px; padding:13px 15px; border-radius:13px; font-size:13.5px; line-height:1.55; margin-bottom:16px; }
.note--info{ background:#EAF2FB; border:1px solid #CBDDF2; color:#0A4E8F; }
.note--warn{ background:var(--saffron-soft); border:1px solid #F6DCC0; color:#7A4306; }
.note--ok{ background:var(--green-soft); border:1px solid #CDE6D8; color:#0A5C2E; }
.note--bad{ background:var(--danger-soft); border:1px solid #F6D6D2; color:#8E211A; }
.note b{ display:block; margin-bottom:2px; }

.meterbar{ height:6px; border-radius:4px; background:var(--line); overflow:hidden; min-width:64px; }
.meterbar i{ display:block; height:100%; border-radius:4px; background:var(--green); }

/* the same data, two shapes: a table on a desktop, cards on a phone */
[data-narrow]{ display:grid; }
[data-wide]{ display:none; }
@media (min-width:860px){
  [data-narrow]{ display:none; }
  [data-wide]{ display:block; }
}
@media (min-width:900px){ .sa-cols{ grid-template-columns:1fr 1fr !important; } }