/* ==========================================================================
   network.css - Voodoo Network portal + platform pages (replaces portal.css).
   Loaded after theme.css. 1 = portal components, 2 = per-page rules (scoped).
   ========================================================================== */
/* ---- 1. portal components that theme.css doesn't already cover ---- */
/* old portal.css made .container a centred flex column with full-width panels; keep panels full width
   so wide tables scroll inside their .tablewrap instead of stretching the page */
[data-page] .panel, [data-page] .grid, [data-page] .plans { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
[data-page] .grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-page] .grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-page] .grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 820px) { [data-page] .grid.c2, [data-page] .grid.c3, [data-page] .grid.c4 { grid-template-columns: minmax(0, 1fr); } }
/* equal-height card rows: panels in a grid stretch; a trailing button row sits on one line */
[data-page] .grid { align-items: stretch; }
[data-page] .grid > .panel, [data-page] .grid > .plan, [data-page] .plans > .plan { margin: 0; height: 100%; display: flex; flex-direction: column; }
[data-page] .grid > .panel > .btn:last-child, [data-page] .grid > .panel > p:last-child:has(> .btn), [data-page] .plan > .btn:last-child { margin-top: auto; }
[data-page] .container > .panel { margin-bottom: var(--s5); }
[data-page] .container > .grid { margin-bottom: var(--s5); }
[data-page] .stat-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
[data-page] .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); width: 100%; align-items: stretch; }
[data-page] .plan { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); background: var(--surface-2); overflow: hidden; }
[data-page] .plan::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); }
[data-page] .plan h3 { margin: 0 0 var(--s2); font-size: var(--fs-md); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-strong); }
[data-page] .plan .price { font-size: var(--fs-xl); color: var(--accent-text); margin: 0 0 var(--s3); font-weight: 800; }
[data-page] .plan ul { list-style: none; margin: 0; padding: 0; }
[data-page] .plan li { padding: 0.25rem 0 0.25rem 1.1rem; color: var(--text); position: relative; }
[data-page] .plan li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 0.4rem; height: 0.4rem; background: var(--accent); }
[data-page] .page-tabs { width: 100%; }
[data-page] .region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem var(--s3); }
@media (max-width: 640px) { [data-page] .region-grid { grid-template-columns: 1fr; } }
[data-page] .panel-title .dir-meta { text-transform: none; letter-spacing: 0.02em; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
[data-page] .dir-note { margin-top: var(--s3); }
[data-page] .hero .tagline { color: var(--text-muted); font-size: var(--fs-lg); margin: var(--s2) 0 0; }
[data-page] .hero .tagline span { color: var(--accent-text); }
[data-page] .auth-bar, [data-page] #authPanel { margin-bottom: var(--s4); }
[data-page] .steps { counter-reset: st; list-style: none; margin: 0; padding: 0; }
[data-page] .steps li { counter-increment: st; position: relative; padding: 0 0 var(--s3) 2.4rem; }
[data-page] .steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--on-accent); font-weight: 800; border-radius: var(--radius); }

/* voucher print page: screen = dark card, print = clean black on white */
[data-page="voucher-print"] body { padding: var(--s5) var(--s4); }
[data-page="voucher-print"] .bar { max-width: 800px; margin: 0 auto var(--s4); display: flex; gap: var(--s2); }
[data-page="voucher-print"] .v { max-width: 800px; margin: 0 auto var(--s5); border: 1px solid var(--line-strong); border-top: 4px solid var(--accent); border-radius: var(--radius-lg);
  padding: var(--s5) var(--s6); background: var(--surface); page-break-inside: avoid; break-inside: avoid; }
[data-page="voucher-print"] .v .brand { display: block; font: 900 1.5rem/1.1 var(--font-brand); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-strong); }
[data-page="voucher-print"] .v .brand small { display: block; font: 700 0.72rem/1.4 var(--font); letter-spacing: 0.2em; color: var(--accent-text); margin-top: 0.3rem; }
[data-page="voucher-print"] .what { margin: var(--s4) 0 var(--s2); font-size: var(--fs-xl); font-weight: 800; color: var(--text-strong); }
[data-page="voucher-print"] .code { font-family: var(--font-mono); font-size: 1.8rem; letter-spacing: 0.12em; border: 2px dashed var(--accent-line); border-radius: var(--radius);
  padding: var(--s3) var(--s4); display: inline-block; color: var(--text-strong); background: var(--bg); margin: var(--s2) 0 var(--s3); }
[data-page="voucher-print"] .v ol { margin: 0 0 0 1.2rem; line-height: 1.6; }
[data-page="voucher-print"] .meta { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--text-muted); }
[data-page="voucher-print"] .err { max-width: 800px; margin: var(--s6) auto; color: var(--bad-text); }
@media print {
  @page { size: A4; margin: 12mm; }
  [data-page="voucher-print"] body { background: #fff; color: #000; padding: 0; }
  [data-page="voucher-print"] body::before { display: none; }
  [data-page="voucher-print"] .bar { display: none; }
  [data-page="voucher-print"] .v { background: #fff; color: #000; border-color: #999; border-top-color: #cd412b; box-shadow: none; }
  [data-page="voucher-print"] .v .brand, [data-page="voucher-print"] .what, [data-page="voucher-print"] .code { color: #000; }
  [data-page="voucher-print"] .v .brand small { color: #9c2f1e; }
  [data-page="voucher-print"] .code { background: #fff; border-color: #cd412b; }
  [data-page="voucher-print"] .meta { color: #333; }
}

/* ---- 2. page rules (scoped per page) ---- */
[data-page="portal-dashboard"] .dash-wrap { padding-top: var(--s4); }
[data-page="portal-dashboard"] .pick-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s4); }
[data-page="portal-dashboard"] .pick-row .label { margin: 0 var(--s2) 0 0; }
[data-page="portal-dashboard"] .srv-head { border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--s4); }
[data-page="portal-dashboard"] .srv-head .hero-inner { padding: var(--s6) var(--s5) var(--s5); grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
[data-page="portal-dashboard"] .srv-head .hero-title { font-size: var(--fs-3xl); margin-bottom: var(--s2); }
[data-page="portal-dashboard"] .srv-head .hd-id { display: flex; gap: var(--s4); align-items: flex-end; }
[data-page="portal-dashboard"] .srv-head .hero-logo { margin: 0; width: 4rem; height: 4rem; }
[data-page="portal-dashboard"] .tabs { margin-bottom: var(--s4); }
[data-page="portal-dashboard"] [role="tabpanel"] > .panel + .panel,
[data-page="portal-dashboard"] [role="tabpanel"] > .grid + .panel,
[data-page="portal-dashboard"] [role="tabpanel"] > .panel + .grid { margin-top: var(--s4); }
[data-page="portal-dashboard"] .tiles.c4 { margin-bottom: var(--s4); }
[data-page="portal-dashboard"] .tile .stat { font-size: var(--fs-lg); font-weight: 800; color: var(--text-strong); }
[data-page="portal-dashboard"] #banners:empty { display: none; }
[data-page="portal-dashboard"] #banners { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
[data-page="portal-dashboard"] .panel label + select,
[data-page="portal-dashboard"] .panel label + input,
[data-page="portal-dashboard"] .panel label + textarea { margin-bottom: var(--s3); }
[data-page="portal-dashboard"] .row > div { flex: 1 1 12rem; }
[data-page="portal-dashboard"] .cz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s4); align-items: start; }
[data-page="portal-dashboard"] .cz-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); min-width: 0; }
[data-page="portal-dashboard"] .cz-form fieldset { margin: 0; min-width: 0; }
[data-page="portal-dashboard"] .cz-form legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--s3); }
[data-page="portal-dashboard"] .cz-form legend + * { clear: both; }
[data-page="portal-dashboard"] .cz-preview { position: sticky; top: var(--s3); }
[data-page="portal-dashboard"] .cz-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
[data-page="portal-dashboard"] .report { display: grid; gap: 0.35rem; margin-top: var(--s2); font-size: var(--fs-sm); }
[data-page="portal-dashboard"] .report .ln { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
[data-page="portal-dashboard"] .report .chipc { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 1.6rem; padding: 0 0.45rem; border-radius: var(--radius); background: var(--chip-bg, var(--surface-2)); color: var(--chip-fg, var(--text-strong)); font-weight: 800; font-size: var(--fs-xs); border: 1px solid var(--line-strong); }
[data-page="portal-dashboard"] .report .ok { color: var(--ok-text); font-weight: 700; }
[data-page="portal-dashboard"] .report .adj { color: var(--warn-text); font-weight: 700; }
[data-page="portal-dashboard"] .field-err { color: var(--bad-text); font-size: var(--fs-sm); margin: 0.25rem 0 0; }
[data-page="portal-dashboard"] .hero-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
[data-page="portal-dashboard"] .hero-pick label { position: relative; display: block; margin: 0; cursor: pointer; border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; }
[data-page="portal-dashboard"] .hero-pick label img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-page="portal-dashboard"] .hero-pick label span { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.15rem 0.4rem; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; background: linear-gradient(0deg, rgba(16, 17, 17, 0.92), rgba(16, 17, 17, 0)); color: var(--text-strong); }
[data-page="portal-dashboard"] .hero-pick label.none { display: flex; align-items: center; justify-content: center; }
[data-page="portal-dashboard"] .hero-pick label.none span { position: static; background: none; }
[data-page="portal-dashboard"] .hero-pick input { position: absolute; opacity: 0; }
[data-page="portal-dashboard"] .hero-pick label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
[data-page="portal-dashboard"] .hero-pick label:has(input:focus-visible) { box-shadow: var(--focus); }
[data-page="portal-dashboard"] .src-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: end; margin-top: var(--s2); }
[data-page="portal-dashboard"] .file-btn { position: relative; overflow: hidden; }
[data-page="portal-dashboard"] .file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
[data-page="portal-dashboard"] .sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
[data-page="portal-dashboard"] .sec-list li { display: grid; grid-template-columns: auto 1.6rem minmax(0, 1fr) auto auto; gap: var(--s2); align-items: center; padding: 0.35rem 0.5rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
[data-page="portal-dashboard"] .sec-list li.off { opacity: 0.6; }
[data-page="portal-dashboard"] .sec-list .n { font-weight: 800; color: var(--accent-text); text-align: center; font-variant-numeric: tabular-nums; }
[data-page="portal-dashboard"] .sec-list label { margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--fs-base); color: var(--text-strong); font-weight: 600; }
[data-page="portal-dashboard"] .sec-list .icon-btn { width: 2rem; height: 2rem; }
[data-page="portal-dashboard"] .cz-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding: var(--s3); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
[data-page="portal-dashboard"] .pv-frame { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); box-shadow: var(--shadow); }
[data-page="portal-dashboard"] .pv-bar { display: flex; align-items: center; gap: var(--s2); padding: 0.45rem 0.6rem; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
[data-page="portal-dashboard"] .pv-bar .dots { display: inline-flex; gap: 4px; }
[data-page="portal-dashboard"] .pv-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); display: block; }
[data-page="portal-dashboard"] .pv-bar .url { flex: 1; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); background: var(--bg); border-radius: var(--radius); padding: 0.2rem 0.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
[data-page="portal-dashboard"] .pv-scroll { max-height: 46rem; overflow: auto; }
[data-page="portal-dashboard"] .pv { zoom: 0.56; background: var(--bg); min-height: 20rem; }
[data-page="portal-dashboard"] .pv.narrow { zoom: 0.8; max-width: 390px; margin: 0 auto; }
[data-page="portal-dashboard"] .pv .hero-inner { padding: var(--s7, 3rem) var(--s5) var(--s5); }
[data-page="portal-dashboard"] .pv .wrap { padding-left: var(--s5); padding-right: var(--s5); }
[data-page="portal-dashboard"] .pv .pv-sections { display: flex; flex-direction: column; gap: var(--s5); padding: var(--s5) 0 var(--s6); }
[data-page="portal-dashboard"] .pv .pv-tag { position: absolute; top: var(--s2); right: var(--s2); }
[data-page="portal-dashboard"] .pv.narrow .hero-inner,
[data-page="portal-dashboard"] .pv.narrow .tiles,
[data-page="portal-dashboard"] .pv.narrow .grid-4 { grid-template-columns: 1fr !important; }
[data-page="portal-dashboard"] .pv.narrow .tiles { display: grid; }
[data-page="portal-dashboard"] .pv [data-section] { position: relative; }
[data-page="servers"] .net-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); }
[data-page="servers"] .net-grid .srv-addr { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); }
[data-page="servers"] .dir-table .flag { font-size: 1.1em; }
[data-page="servers"] .dir-table td[data-l="Players"] b { font-size: var(--fs-lg); }
[data-page="servers"] .dir-meta { margin-left: var(--s2); }
[data-page="servers"] .dir-note { margin-top: var(--s3); }
[data-page="servers"] .auth-bar { display: flex; justify-content: flex-end; margin-bottom: var(--s3); }
[data-page="servers"] .hero .tagline { color: var(--text-muted); font-size: var(--fs-lg); margin: 0; }
[data-page="servers"] .dir-table thead th[data-sort] { cursor: pointer; }
@media (max-width: 760px) {
  [data-page="portal-dashboard"] .srv-head .hero-inner { grid-template-columns: 1fr; padding: var(--s5) var(--s4) var(--s4); }
}
@media (max-width: 1180px) {
  [data-page="portal-dashboard"] .cz { grid-template-columns: minmax(0, 1fr); }
  [data-page="portal-dashboard"] .cz-preview { position: static; order: -1; }
}
@media (max-width: 560px) {
  [data-page="portal-dashboard"] .cz-grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* fix1: plan notice in the Customise tab (Free plan: colours / logo / banner need Pro) */
[data-page="portal-dashboard"] .plan-note { padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-left: 4px solid var(--rust-orange, #c26d33);
  border-radius: var(--radius); background: color-mix(in srgb, var(--rust-orange, #c26d33) 10%, var(--surface)); color: var(--text); line-height: 1.5; }
[data-page="portal-dashboard"] .plan-note strong { color: var(--text-strong); }
[data-page="portal-dashboard"] .plan-note a { color: var(--accent-text); font-weight: 700; }