/* The signed-in side of gnetfi.com -- customer dashboard and admin console.
   A deep GNET-blue band carries the header and the numbers that matter (glass tiles over the logo's
   own Wi-Fi arcs); the working tables sit on white panels lifted up into it. Dense on purpose: a shop
   with 25+ boards reads one line per board (operator, 2026-11-16: "ayaw ... kawat space"). */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app .wrap { width: min(1320px, 100% - 32px); }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- the band ---------- */
.band {
  position: relative; color: #fff; padding-bottom: 76px; overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(80, 150, 255, 0.35) 0%, rgba(80, 150, 255, 0) 55%),
    linear-gradient(135deg, #081d44 0%, #0f3474 52%, #1b56b0 100%);
}
/* the logo's arcs, very faint, bottom right */
.band::after {
  content: ""; position: absolute; right: -60px; bottom: -150px; width: 560px; height: 560px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='white' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M20 95a115 115 0 0 1 160 0' opacity='.07'/%3E%3Cpath d='M48 123a75 75 0 0 1 104 0' opacity='.09'/%3E%3Cpath d='M76 151a36 36 0 0 1 48 0' opacity='.11'/%3E%3Ccircle cx='100' cy='176' r='9' fill='white' stroke='none' opacity='.12'/%3E%3C/svg%3E") no-repeat center / contain;
}
.band > * { position: relative; z-index: 1; }

.band .topbar { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.band .brand { color: #fff; }
.band .brand img { background: #fff; border-radius: 50%; padding: 2px; }
.band .brand span { color: rgba(255, 255, 255, 0.65); }
.band .topbar .who .name { color: rgba(255, 255, 255, 0.75); }
.btn-glass { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.22); }
.btn-glass:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); color: #fff; }

.views { display: flex; gap: 4px; margin-left: 28px; }
.view {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px;
  background: none; cursor: pointer; font: 600 0.93rem/1 var(--font-body); color: rgba(255, 255, 255, 0.72);
}
.view:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
a.view { text-decoration: none; }
.view:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4); }
.view[aria-selected="true"] { color: #0f3474; background: #fff; }

.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px 0 20px; }
.hero h1 { color: #fff; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem); }
.hero p { color: rgba(255, 255, 255, 0.7); margin-top: 4px; font-size: 0.95rem; }

/* glass tiles: the numbers that matter */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.kpi .chip { grid-row: span 2; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; }
.kpi .chip .ico { width: 21px; height: 21px; }
.kpi b { font: 600 1.6rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; color: #fff; }
.kpi b small { font: 500 0.85rem var(--font-body); color: rgba(255, 255, 255, 0.6); margin-left: 4px; }
.kpi span.l { font-size: 0.82rem; color: rgba(255, 255, 255, 0.72); }
.chip.green { background: rgba(70, 200, 95, 0.2); color: #7ee38f; }
.chip.grey { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); }
.chip.blue { background: rgba(120, 175, 255, 0.22); color: #a9cbff; }
.chip.gold { background: rgba(255, 200, 60, 0.2); color: #ffd56b; }
.chip.red { background: rgba(255, 110, 90, 0.2); color: #ffab9c; }

/* ---------- content lifted into the band ---------- */
main.lift { margin-top: -52px; position: relative; z-index: 2; display: grid; gap: 18px; padding-bottom: 8px; }
.viewpanel { display: grid; gap: 18px; }
.viewpanel[hidden] { display: none; }
.stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 0 rgba(15, 37, 71, 0.04), 0 14px 34px -22px rgba(15, 37, 71, 0.45); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.panel-head h2 .ico { color: var(--blue); }
.panel-head .note { flex-basis: 100%; margin-top: -6px; }
.panel-body { padding: 16px 18px 18px; }
.count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--blue-wash); color: var(--blue-deep); font: 600 0.78rem/1 var(--font-body); }
.tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.searchbox { position: relative; }
.searchbox .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); width: 16px; height: 16px; }
.searchbox input { width: 260px; min-height: 36px; padding-left: 34px; font-size: 0.9rem; border-radius: 9px; background: var(--paper); }
.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--sunk); border-radius: 10px; }
.seg button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: 600 0.85rem/1 var(--font-body); color: var(--ink-2); white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button:focus-visible { outline: none; box-shadow: var(--focus); }
.seg button[aria-checked="true"], .seg button[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: 0 3px 8px -3px rgba(30, 91, 184, 0.7); }
/* Main Vendo is blue and Sub Vendo is teal everywhere -- the same colours as their tags. */
.seg button[aria-checked="true"][data-kind="sub-vendo"], .seg button[aria-checked="true"][data-gen-kind="sub-vendo"],
.seg button[aria-pressed="true"][data-filter-kind="sub-vendo"] { background: #0b8a9a; box-shadow: 0 3px 8px -3px rgba(11, 138, 154, 0.7); }
.seg button[aria-checked="true"] .n, .seg button[aria-pressed="true"] .n { color: rgba(255, 255, 255, 0.85); }
.seg button:not([aria-checked="true"]):not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, 0.7); }
.seg .n { margin-left: 5px; color: var(--ink-3); font-weight: 500; }

/* ---------- tables ---------- */
.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.88rem; }
.grid th { text-align: left; font-weight: 600; font-size: 0.76rem; color: var(--ink-2); background: #f7f9fc; padding: 0; white-space: nowrap; border-bottom: 1px solid var(--line); }
.grid th > button, .grid th > span:not(.sr) { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: none; font: inherit; color: inherit; }
.grid th > button { cursor: pointer; }
.grid th > button:hover { color: var(--ink); }
.grid th > button:focus-visible { outline: none; box-shadow: inset var(--focus); }
.grid th > button[aria-sort]::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; }
.grid th > button[aria-sort="ascending"]::after { border-bottom-color: currentColor; transform: translateY(-2px); }
.grid th > button[aria-sort="descending"]::after { border-top-color: currentColor; transform: translateY(2px); }
.grid th:first-child > *, .grid td:first-child { padding-left: 18px; }
.grid th:last-child > *, .grid td:last-child { padding-right: 18px; }
.grid td { padding: 8px 10px; border-bottom: 1px solid #edf1f7; vertical-align: middle; white-space: nowrap; }
.grid tbody tr:last-child > td { border-bottom: 0; }
.grid tbody tr:not(.detail):not(.placeholder):hover > td { background: #f6f9ff; }
.grid .placeholder td { text-align: center; color: var(--ink-3); padding: 34px 12px; white-space: normal; }
.grid .strong { font-weight: 600; color: var(--ink); }
.grid .sub { display: block; font-size: 0.78rem; color: var(--ink-3); margin-top: 1px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.grid .num { font-variant-numeric: tabular-nums; }
.grid .actions { text-align: right; }

.who-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--av); color: #fff; font: 700 0.8rem/1 var(--font-head); letter-spacing: 0.02em; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12); }
.namebox { min-width: 0; }
.namebox .line { display: flex; align-items: center; gap: 7px; }

.pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.pill .pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; position: relative; }
.pill-on { background: var(--green-wash); color: #23863a; }
.pill-off { background: #f0f2f6; color: #7b8ca7; }
@media (prefers-reduced-motion: no-preference) {
  .pill-on .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: ping 2s ease-out infinite; }
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 80%, 100% { transform: scale(2.6); opacity: 0; } }

.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef0ff; color: #4338ca; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.tag.kind-main { background: var(--blue-wash); color: var(--blue-deep); }
.tag.kind-sub { background: #e7f6f7; color: #0b6f7c; }
.status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; }
.status.unassigned { background: #f0f2f6; color: var(--ink-2); }
.status.assigned { background: var(--gold-wash); color: var(--gold-deep); }
.status.inventory { background: #f3ecff; color: #6b3fc0; }
.status.active { background: var(--green-wash); color: #23863a; }
.status.revoked { background: var(--danger-wash); color: var(--danger); }

.ver { display: inline-flex; align-items: center; gap: 6px; font: 500 0.82rem var(--font-mono); }
.ver .upd { font: 700 0.68rem var(--font-body); padding: 1px 6px; border-radius: 999px; background: #fff1db; color: #a35a00; }

.exp { display: grid; gap: 5px; min-width: 128px; }
.exp-top { display: flex; justify-content: space-between; gap: 10px; }
.exp-left { font-weight: 600; font-size: 0.78rem; }
.exp-left.ok { color: var(--ink-3); }
.exp-left.warn { color: #b26a00; }
.exp-left.bad { color: var(--danger); }
.bar { height: 4px; border-radius: 99px; background: #e9eef6; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 99px; }
.bar-fill.ok { background: linear-gradient(90deg, #3b82f6, #2e9e3e); }
.bar-fill.warn { background: #f0a020; }
.bar-fill.bad { background: var(--danger); }

.codechip { display: inline-flex; align-items: center; gap: 1px; border-radius: 9px; background: var(--gold-wash); border: 1px solid #f6e3b0; }
.codechip .code { font: 500 0.84rem/1 var(--font-mono); letter-spacing: 0.04em; color: var(--gold-deep); padding: 7px 3px 7px 10px; }
.iconbtn { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: inherit; cursor: pointer; }
.codechip .iconbtn { color: var(--gold-deep); }
.iconbtn:hover { background: rgba(15, 37, 71, 0.07); }
.iconbtn:focus-visible { outline: none; box-shadow: var(--focus); }
.iconbtn .ico { width: 16px; height: 16px; }
.btn .ico { width: 16px; height: 16px; }

.detail td { background: #f7f9fd; white-space: normal; }
.detail .field { min-width: 300px; }
.detail .field .tools { flex-wrap: nowrap; }
.detail .kv { display: flex; flex-wrap: wrap; gap: 10px 32px; padding: 4px 0 4px 45px; }
.detail .kv dt { font-size: 0.75rem; color: var(--ink-3); }
.detail .kv dd { margin: 2px 0 0; font: 500 0.92rem var(--font-mono); }
.detail .kv .limits { display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--font-body); }

.empty-note { color: var(--ink-3); font-size: 0.88rem; }

/* ---------- forms in panels ---------- */
.form { display: grid; gap: 14px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.form .input { min-height: 40px; font-size: 0.93rem; }
.form .field label { font-size: 0.84rem; color: var(--ink-2); }
.checks { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.9rem; }
.checks label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.checks input { width: 17px; height: 17px; accent-color: var(--blue); }
.result { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--green-wash); }
.result h3 { font: 600 0.9rem var(--font-body); color: #1c6b28; }
.result ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.result li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 500 0.88rem var(--font-mono); background: #fff; padding: 6px 6px 6px 10px; border-radius: 8px; }

/* ---------- drawer ---------- */
.drawer-back { position: fixed; inset: 0; background: rgba(8, 29, 68, 0.38); z-index: 20; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--surface); z-index: 21; display: grid; grid-template-rows: auto 1fr; box-shadow: -20px 0 40px -20px rgba(8, 29, 68, 0.5); }
.drawer header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer header h2 { flex: 1; font-size: 1.05rem; }
.drawer .scroll { overflow: auto; padding: 16px 20px 24px; display: grid; gap: 14px; align-content: start; }
.timeline { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 6px; font-size: 0.84rem; color: var(--ink-2); }

/* ---------- scroll areas (operator, 2026-11-16: "butangi ug scrollbar ... i bahin ang space") ----------
   Each table scrolls inside its own panel with its header pinned, so the page itself stays short and
   two lists share the screen instead of one pushing the other out of sight. */
.tablebox { overflow: auto; max-height: var(--tb, 60vh); min-height: 120px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b9c6da transparent; }
.tablebox.tb-lg { --tb: max(360px, calc(100vh - 330px)); }
.tablebox.tb-md { --tb: max(300px, 56vh); }
.tablebox.tb-sm { --tb: max(220px, 34vh); }
.tablebox::-webkit-scrollbar { width: 10px; height: 10px; }
.tablebox::-webkit-scrollbar-thumb { background: #c4cfdf; border-radius: 99px; border: 3px solid #fff; }
.tablebox::-webkit-scrollbar-thumb:hover { background: #9fb0c8; }
.tablebox::-webkit-scrollbar-track { background: transparent; }
.tablebox thead th { position: sticky; top: 0; z-index: 2; }
@media (max-width: 820px) {
  .tablebox, .tablebox.tb-lg, .tablebox.tb-md, .tablebox.tb-sm { --tb: 70vh; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .views { margin-left: auto; }
  .view { padding: 0 10px; }
  .topbar .who .name, .brand span { display: none; }
  .band { padding-bottom: 64px; }
  .hero { padding: 18px 0 14px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; gap: 0 10px; }
  .kpi .chip { width: 34px; height: 34px; }
  .kpi b { font-size: 1.3rem; }
  .searchbox, .searchbox input { width: 100%; }
  .tools { width: 100%; }
  .form .row2, .form .row3 { grid-template-columns: 1fr 1fr; }

  .grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .grid, .grid tbody, .grid tr, .grid td { display: block; }
  .grid tbody tr:not(.placeholder):not(.detail) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px 16px; border-bottom: 1px solid #edf1f7; }
  .grid td { border: 0 !important; padding: 0 !important; white-space: normal; min-width: 0; }
  .grid td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font: 400 0.72rem var(--font-body); color: var(--ink-3); margin-bottom: 3px; }
  .grid td.wide { grid-column: 1 / -1; }
  .grid td.lead { grid-column: 1 / -1; }
  .grid td.lead::before { display: none !important; }
  .grid .o2 { order: 2; } .grid .o3 { order: 3; } .grid .o4 { order: 4; } .grid .o5 { order: 5; } .grid .o6 { order: 6; } .grid .o7 { order: 7; }
  .grid td.actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
  .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid tbody tr:hover > td { background: none !important; }
  .grid .sub { max-width: none; }
  .detail td { padding: 12px 16px !important; }
  .detail .kv { padding-left: 0; }
}
@media (max-width: 420px) {
  .kpi span.l { font-size: 0.75rem; }
}