/* Prism layout fixes v2 (deployed 2026-10-23)
   1) Mobile detail card: keep the 2x2 grid, every row on ONE line,
      uniform row rhythm, right sections offset from the center divider.
   2) PC detail card: larger font (user request).
   3) PC node table (>=1000px): compact content-sized columns, uniform
      gaps, centered block instead of space-between spreading.
   Mobile rules are gated by viewport <= 700px AND container <= 499px. */

/* ================= Mobile detail card ================= */
@media (max-width: 700px) {

/* ---------- Tier A: container 375-499px ---------- */
@container (width>=375px) and (width<=499px) {
  .system-detail-card { padding: 8px 5px !important; }
  .system-detail-card .detail-group { padding: 7px 2px; font-size: 9px; }
  .system-detail-card .detail-group + .detail-group { padding-left: 12px; }
  .system-detail-card .detail-group [data-line-label] > span:first-child {
    font-size: 8.5px !important; letter-spacing: -.3px;
  }
  /* uniform row rhythm: fixed row height + fixed gap, no per-row margins */
  .system-detail-card .detail-group .space-y-1 { row-gap: 3px; }
  .system-detail-card .detail-group .space-y-1 > div {
    min-height: 20px; align-items: center; margin-block-end: 0 !important;
  }
  /* label columns tuned per section (values get the rest of the half-card) */
  .system-detail-card .detail-group .space-y-1 > div {
    grid-template-columns: 56px minmax(0, 1fr) !important; gap: 4px !important;
  }
  .system-detail-card > .detail-groups:first-of-type > .detail-group:first-child .space-y-1 > div {
    grid-template-columns: 52px minmax(0, 1fr) !important;
  }
  .system-detail-card > .detail-groups:first-of-type > .detail-group:last-child .space-y-1 > div {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }
  .system-detail-card > .detail-groups:last-of-type > .detail-group:last-child .space-y-1 > div {
    grid-template-columns: 52px minmax(0, 1fr) !important;
  }
  /* undo line-wide stacking: stay in place, single line */
  .system-detail-card .detail-group .space-y-1 > div.line-wide { order: 0; margin-top: 0; }
  .system-detail-card .detail-group [data-line-label] > .tnum {
    white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -.4px; transform: scaleX(.95); transform-origin: left center;
  }
  .system-detail-card .detail-group .space-y-1 > div.line-wide > .tnum {
    white-space: nowrap !important; line-height: inherit;
  }
  /* shrink the fixed-width rate slots inside the Speed row */
  .system-detail-card [data-line-label] .tnum > span { --slot: 8.8ch !important; }
}

/* ---------- Tier B: container 340-374px (extra squeeze) ---------- */
@container (width>=340px) and (width<=374px) {
  .system-detail-card { padding: 8px 5px !important; }
  .system-detail-card .detail-group { padding: 7px 2px; font-size: 8.5px; }
  .system-detail-card .detail-group + .detail-group { padding-left: 12px; }
  .system-detail-card .detail-group [data-line-label] > span:first-child {
    font-size: 8px !important; letter-spacing: -.3px;
  }
  .system-detail-card .detail-group .space-y-1 { row-gap: 3px; }
  .system-detail-card .detail-group .space-y-1 > div {
    min-height: 20px; align-items: center; margin-block-end: 0 !important;
  }
  .system-detail-card .detail-group .space-y-1 > div {
    grid-template-columns: 54px minmax(0, 1fr) !important; gap: 4px !important;
  }
  .system-detail-card > .detail-groups:first-of-type > .detail-group:first-child .space-y-1 > div {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }
  .system-detail-card > .detail-groups:first-of-type > .detail-group:last-child .space-y-1 > div {
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }
  .system-detail-card > .detail-groups:last-of-type > .detail-group:last-child .space-y-1 > div {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }
  .system-detail-card .detail-group .space-y-1 > div.line-wide { order: 0; margin-top: 0; }
  .system-detail-card .detail-group [data-line-label] > .tnum {
    white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -.5px; transform: scaleX(.92); transform-origin: left center;
  }
  .system-detail-card .detail-group .space-y-1 > div.line-wide > .tnum {
    white-space: nowrap !important; line-height: inherit;
  }
  .system-detail-card [data-line-label] .tnum > span { --slot: 8.4ch !important; }
}

/* ---------- Tier C: container <= 339px (single column in the theme; just un-stack rows) ---------- */
@container (width<=339px) {
  .system-detail-card .detail-group .space-y-1 > div.line-wide { order: 0; margin-top: 0; }
  .system-detail-card .detail-group [data-line-label] > .tnum { overflow: hidden; text-overflow: ellipsis; }
  .system-detail-card .detail-group .space-y-1 > div.line-wide > .tnum { white-space: nowrap !important; }
}
}

/* ================= PC detail card: larger font ================= */
@container (width>=500px) and (width<=899px) {
  .system-detail-card .detail-group { font-size: 11.5px; }
  .system-detail-card .detail-group h4 { font-size: 11px; }
  .system-detail-card .detail-group .space-y-1 > div {
    grid-template-columns: 7.2em minmax(0, 1fr);
  }
}
@container (width>=900px) {
  .system-detail-card .detail-group { font-size: 13px; }
  .system-detail-card .detail-group h4 { font-size: 12px; }
}

/* ================= PC node table: compact + uniform ================= */
@media (width>=1000px) and (width<=1299px) {
  .compact-card-grid {
    grid-template-columns: 22px 84px 48px 110px 72px 104px 104px 68px 68px 68px 88px 50px;
    gap: 8px; justify-content: start; padding-inline: 8px !important;
  }
}
@media (width>=1300px) {
  .compact-card-grid {
    grid-template-columns: 24px 100px 54px 124px 82px 124px 124px 78px 78px 78px 100px 56px;
    gap: 16px; justify-content: start;
    padding-inline: max(8px, calc((100% - 1198px) / 2)) !important;
  }
}

/* Nested value spans (Speed row numbers): never clip, or their text baseline
   lifts and the down/up arrows no longer share a line with the numbers. */
.system-detail-card [data-line-label] > .tnum .tnum { overflow: visible; text-overflow: clip; }

/* PC table header: align titles with the data cells below them
   (System/Uptime data are centered; Speed/Traffic/CPU/Memory/Disk centered;
   Name/Region/Price left; Expiry right — last three already match in the theme). */
@media (width>=1000px) {
  .compact-card-head > :nth-child(4),
  .compact-card-head > :nth-child(5),
  .compact-card-head > :nth-child(6),
  .compact-card-head > :nth-child(7),
  .compact-card-head > :nth-child(8),
  .compact-card-head > :nth-child(9),
  .compact-card-head > :nth-child(10) { text-align: center; justify-content: center; }
}

/* Filter buttons: remove the dot-matrix texture (user request) */
.server-filter-button { background-image: none !important; }

/* ===== v6: header/data alignment hardening + panel tightening ===== */
@media (width>=1000px) {
  /* Remove the "Status" header label so Name lines up with the names below
     (the status dots themselves stay). */
  .compact-card-head > :first-child { visibility: hidden; }
  .compact-card-head > :nth-child(2) { padding-left: 0; }
  /* Center the data cells of the centered columns too, so header title and
     data share the exact same center (System / Uptime were the visible ones). */
  .server-card .compact-card-hit > :nth-child(4),
  .server-card .compact-card-hit > :nth-child(5),
  .server-card .compact-card-hit > :nth-child(6),
  .server-card .compact-card-hit > :nth-child(7),
  .server-card .compact-card-hit > :nth-child(8),
  .server-card .compact-card-hit > :nth-child(9),
  .server-card .compact-card-hit > :nth-child(10) {
    text-align: center; justify-content: center;
  }
}
@media (width>=1300px) {
  /* Tighten the dotted panel around the table: cap the list width and
     reduce the empty side margins (uniform 20px column gaps kept). */
  .server-node-list { max-width: 1290px; margin-inline: auto; }
  .compact-card-grid {
    gap: 20px;
    padding-inline: max(8px, calc((100% - 1242px) / 2)) !important;
  }
}

/* ===== v7: tighten the Price -> Expiry spacing (fig.2 feedback) ===== */
@media (width>=1300px) {
  .compact-card-grid {
    grid-template-columns: 24px 100px 54px 124px 82px 124px 124px 78px 78px 78px 84px 50px;
    gap: 18px;
    padding-inline: max(8px, calc((100% - 1198px) / 2)) !important;
  }
}

/* ===== v8: System / Uptime columns left-aligned (header + data) ===== */
@media (width>=1000px) {
  .compact-card-head > :nth-child(4),
  .compact-card-head > :nth-child(5),
  .server-card .compact-card-hit > :nth-child(4),
  .server-card .compact-card-hit > :nth-child(5),
  .compact-card-uptime {
    text-align: left !important; justify-content: flex-start !important;
  }
}

/* ===== v9: CPU / Memory / Disk columns left-aligned (header + data) ===== */
@media (width>=1000px) {
  .compact-card-head > :nth-child(8),
  .compact-card-head > :nth-child(9),
  .compact-card-head > :nth-child(10),
  .server-card .compact-card-hit > :nth-child(8),
  .server-card .compact-card-hit > :nth-child(9),
  .server-card .compact-card-hit > :nth-child(10) {
    text-align: left !important; justify-content: flex-start !important;
  }
}

/* ===== v11: dotted panel hugs the table — fixed width, equal tight sides ===== */
@media (width>=1300px) {
  .server-node-list { width: 1250px; max-width: 100%; margin-inline: auto; }
  .compact-card-grid { padding-inline: 26px !important; }
}

/* ===== v13: icons centered in their track (theme default) + margins made
   exactly equal by compensating the dot's 5.5px centering inset in the
   padding: left gap = 1 + 22.25 + 5.5 = 28.75px; right gap = 1 + 27.75 =
   28.75px. Padding sum stays 50px, so the 1198px grid still fills the
   1250px panel with zero slack. ===== */
@media (width>=1300px) {
  .compact-card-grid { padding-left: 22.25px !important; padding-right: 27.75px !important; }
}

/* ===== v14: header content groups pulled in to the panel's width (1250px
   centered), so the title and the stats cluster never extend past the
   dotted server panel below ===== */
@media (width>=1300px) {
  .once-header-inner { width: 1250px; max-width: 100%; }
}

/* ===== v15: filter button row pulled in to the panel's width (1250px
   centered), same as the header — starts at the panel's left edge and
   never extends past it ===== */
@media (width>=1300px) {
  .server-list-controls { width: 1250px; max-width: 100%; margin-inline: auto; }
}