/*
 * CPA UI v8 — Admin density pass
 * Goal: show more of the administrator workspace without relying on
 * page-level scroll. Compacts chrome (hero/summary/tabs/section heads/
 * filters/rows/pricing/announcements) while leaving user-facing pages alone.
 *
 * Stacks on v7. Remove the `ui-v8` body class to compare/revert.
 * Avoids body zoom (breaks VIP background-clip:text animation in Chromium).
 */

/* ---- page shell ---- */
body.ui-v8 .console-page[data-console-page="admin"] {
  gap: 6px;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-page-hero {
  min-height: 0;
  padding: 4px 8px;
  gap: 6px;
  align-items: center;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-page-hero > div {
  min-width: 0;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-page-hero .console-page-eyebrow {
  font-size: 9px;
  letter-spacing: .1em;
  line-height: 1.1;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-page-hero h2 {
  margin: 0 0 1px;
  font-size: 15px;
  line-height: 1.15;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-page-hero span {
  display: -webkit-box;
  overflow: hidden;
  max-width: 62ch;
  color: #6a829c;
  font-size: 10px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-page-hero .newapi-button.slim {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 11px;
}

/* ---- summary strip ---- */
body.ui-v8 .console-page[data-console-page="admin"] .admin-overview-strip,
body.ui-v8 .console-page[data-console-page="admin"] .admin-summary-strip {
  gap: 5px;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-overview-strip .admin-summary-card,
body.ui-v8 .console-page[data-console-page="admin"] .admin-summary-card {
  min-height: 0 !important;
  padding: 4px 7px;
  border-radius: 7px;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-summary-card span {
  font-size: 9px;
  letter-spacing: .04em;
  line-height: 1.05;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-summary-card strong {
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.1;
}

/* ---- workspace tabs ---- */
body.ui-v8 .admin-workspace-tabs {
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(38, 70, 102, .06);
}

body.ui-v8 .admin-workspace-tab {
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 10px;
}

body.ui-v8 .admin-workspace-tab.active {
  box-shadow: 0 3px 8px rgba(46, 118, 173, .16);
}

/* ---- section cards ---- */
body.ui-v8 .console-page[data-console-page="admin"] .newapi-card {
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(65, 96, 132, .05);
}

body.ui-v8 .console-page[data-console-page="admin"] .newapi-card-head,
body.ui-v8 .console-page[data-console-page="admin"] .admin-section-head {
  min-height: 0;
  padding: 6px 10px;
}

body.ui-v8 .console-page[data-console-page="admin"] .newapi-card-title {
  font-size: 12px;
  line-height: 1.2;
}

body.ui-v8 .console-page[data-console-page="admin"] .newapi-card-desc {
  margin-top: 1px;
  font-size: 10px;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-section-chip {
  padding: 3px 6px;
  font-size: 8px;
  letter-spacing: .06em;
}

body.ui-v8 .console-page[data-console-page="admin"] .newapi-card-body {
  gap: 6px;
  padding: 8px 10px 10px;
}

body.ui-v8 .console-page[data-console-page="admin"] .newapi-button,
body.ui-v8 .console-page[data-console-page="admin"] .newapi-button.slim,
body.ui-v8 .console-page[data-console-page="admin"] .newapi-input,
body.ui-v8 .console-page[data-console-page="admin"] .newapi-select {
  min-height: 28px;
  font-size: 11px;
}

body.ui-v8 .console-page[data-console-page="admin"] .newapi-button.slim {
  padding: 4px 8px;
}

/* ---- accounts filters / bulk ---- */
body.ui-v8 .console-page[data-console-page="admin"] .admin-account-filter {
  gap: 5px;
  margin: 0;
  align-items: end;
}

/* put label + control denser; keep labels but shorter control height */
body.ui-v8 .admin-filter-field {
  gap: 1px;
}

body.ui-v8 .admin-filter-field > span {
  font-size: 8px;
  line-height: 1;
}

body.ui-v8 .admin-filter-field .newapi-input,
body.ui-v8 .admin-filter-field .newapi-select {
  min-height: 24px !important;
  padding: 2px 7px;
  font-size: 11px;
}

body.ui-v8 .admin-bulk-panel {
  border-radius: 8px;
}

body.ui-v8 .admin-bulk-panel > summary {
  min-height: 26px;
  padding: 3px 8px;
  font-size: 10px;
}

/* hide the bulky "+" marker box a bit tighter */
body.ui-v8 .admin-bulk-panel > summary::before {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  font-size: 11px;
}

body.ui-v8 .admin-bulk-selected-count {
  min-height: 22px;
  padding: 0 7px;
  font-size: 10px;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-bulk-expiry {
  gap: 6px;
  margin: 0;
  padding: 8px;
  border-radius: 9px;
}

body.ui-v8 .admin-bulk-expiry-note,
body.ui-v8 .admin-expiry-note {
  font-size: 9px;
  line-height: 1.35;
}

/* ---- account list: height + column alignment ---- */
/* ui-v2 sets overflow:visible + max-height:none; v8 must restore BOTH
   max-height and overflow or long account/pricing/disable catalogs spill.
   Also pin trailing action tracks so rows line up like a table. */
body.ui-v8 .console-page[data-console-page="admin"] .admin-account-list {
  gap: 4px;
  min-height: 160px;
  max-height: clamp(460px, 72vh, 880px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 4px 6px 0;
  scrollbar-gutter: stable;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-account-row {
  /* name | stats | fixed actions — fixed tail keeps 管理账号 column aligned */
  grid-template-columns: minmax(200px, 1.05fr) minmax(0, 1.35fr) 196px;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  align-items: center;
  min-height: 52px !important;
  height: auto;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-account-head {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

/* List rows reuse .admin-account-tools (3-col detail form). Force list layout. */
body.ui-v8 .console-page[data-console-page="admin"] .admin-account-row > .admin-account-tools.admin-account-row-actions,
body.ui-v8 .console-page[data-console-page="admin"] .admin-account-row-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 76px !important;
  gap: 6px !important;
  align-items: center;
  justify-items: stretch;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

body.ui-v8 .admin-account-expiry {
  gap: 1px;
  padding: 4px 7px;
  border-radius: 6px;
  min-height: 36px !important;
  height: auto;
  align-content: center;
}

body.ui-v8 .admin-account-expiry-label {
  font-size: 9px;
  line-height: 1.15;
}

body.ui-v8 .admin-account-expiry strong {
  display: block;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-detail-toggle {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px;
  min-height: 32px !important;
  height: 32px;
  padding: 0 6px;
  font-size: 11px;
  white-space: nowrap;
  justify-self: end;
}

/* name + id + balance: title full width, id | balance on second row */
body.ui-v8 .console-page[data-console-page="admin"] .admin-account-name {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  min-height: 0;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-account-name strong {
  grid-column: 1 / -1;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-account-name span,
body.ui-v8 .console-page[data-console-page="admin"] .admin-account-stat span {
  font-size: 10px;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-account-id {
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-balance-pill {
  justify-self: end;
  padding: 2px 6px;
  font-size: 10px;
  white-space: nowrap;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-account-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
  min-height: 0;
  align-items: stretch;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-account-stat {
  gap: 1px;
  min-width: 0;
  min-height: 36px !important;
  height: auto;
  padding: 4px 6px;
  border-radius: 6px;
  align-content: center;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-account-stat strong {
  margin-top: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-account-select {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-account-select input {
  width: 13px;
  height: 13px;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-account-tools {
  gap: 4px;
}

body.ui-v8 .console-page[data-console-page="admin"] .admin-balance-form .newapi-input,
body.ui-v8 .console-page[data-console-page="admin"] .admin-account-tools .admin-display-name-form .newapi-input,
body.ui-v8 .console-page[data-console-page="admin"] .admin-account-tools .newapi-button.slim {
  min-height: 28px;
  font-size: 11px;
}

/* account detail tools */
body.ui-v8 .admin-account-detail-page,
body.ui-v8 .admin-account-tool-card {
  border-radius: 9px;
}

body.ui-v8 .admin-account-detail-head {
  padding: 8px 10px;
  gap: 8px;
}

body.ui-v8 .admin-account-detail-title strong {
  font-size: 14px;
}

body.ui-v8 .admin-account-tools-grid {
  gap: 6px;
}

body.ui-v8 .admin-account-tool-card {
  padding: 8px 9px;
}

body.ui-v8 .admin-account-tool-title {
  font-size: 11px;
}

body.ui-v8 .admin-account-tool-hint {
  font-size: 9px;
  line-height: 1.35;
}

/* ---- pricing / model-disable (table-like fixed tails) ---- */
body.ui-v8 .admin-pricing-toolbar {
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}

body.ui-v8 .admin-pricing-status {
  font-size: 10px;
  justify-self: end;
  text-align: right;
}

body.ui-v8 .admin-pricing-list {
  gap: 4px;
  min-height: 160px;
  max-height: clamp(420px, 70vh, 860px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

/* model | effective | discount | actions */
body.ui-v8 .admin-pricing-row {
  grid-template-columns: minmax(168px, 1.15fr) minmax(0, 1.45fr) 108px 148px;
  align-items: center;
  min-height: 48px;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
}

/* model | effective | action — same model/effective tracks as pricing */
body.ui-v8 .admin-model-disable-section .admin-pricing-row {
  grid-template-columns: minmax(168px, 1.15fr) minmax(0, 1.45fr) 108px;
}

body.ui-v8 .admin-pricing-model,
body.ui-v8 .admin-pricing-effective {
  gap: 2px;
  min-width: 0;
}

body.ui-v8 .admin-pricing-model strong,
body.ui-v8 .admin-pricing-effective strong,
body.ui-v8 .admin-pricing-effective > div {
  display: block;
  overflow: hidden;
  color: #244f75;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ui-v8 .admin-pricing-model span,
body.ui-v8 .admin-pricing-effective span {
  display: block;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ui-v8 .admin-pricing-discount {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

body.ui-v8 .admin-pricing-discount .newapi-input {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body.ui-v8 .admin-pricing-discount span {
  font-size: 11px;
  text-align: center;
}

body.ui-v8 .admin-pricing-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
}

body.ui-v8 .admin-pricing-actions .newapi-button.slim {
  min-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
}

body.ui-v8 .admin-model-disable-section .admin-pricing-actions {
  justify-content: stretch;
}

body.ui-v8 .admin-model-disable-section .admin-pricing-actions .newapi-button.slim {
  width: 100%;
  justify-content: center;
}

/* ---- announcements ---- */
body.ui-v8 .admin-announcement-layout {
  gap: 8px;
}

body.ui-v8 .admin-announcement-form,
body.ui-v8 .admin-announcement-list {
  border-radius: 9px;
}

body.ui-v8 .admin-announcement-form {
  gap: 6px;
  padding: 8px;
}

body.ui-v8 .admin-announcement-content {
  min-height: 110px;
  line-height: 1.45;
}

body.ui-v8 .admin-announcement-list {
  gap: 5px;
  min-height: 120px;
  max-height: clamp(360px, 62vh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 7px;
}

body.ui-v8 .admin-announcement-item {
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
}

body.ui-v8 .admin-announcement-main {
  gap: 2px;
}

body.ui-v8 .admin-announcement-main strong {
  font-size: 11px;
}

body.ui-v8 .admin-announcement-main p {
  font-size: 10px;
  line-height: 1.4;
  -webkit-line-clamp: 2;
}

body.ui-v8 .admin-announcement-meta {
  font-size: 8px;
}

/* ---- activity / orders ---- */
body.ui-v8 .console-page[data-console-page="admin"] .admin-recent-table-wrap,
body.ui-v8 .console-page[data-console-page="admin"] .admin-orders-section .topup-order-list {
  min-height: 120px;
  max-height: clamp(420px, 68vh, 820px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.ui-v8 .console-page[data-console-page="admin"] .usage-log-table th,
body.ui-v8 .console-page[data-console-page="admin"] .usage-log-table td {
  padding: 5px 7px;
  font-size: 10px;
}

body.ui-v8 .console-page[data-console-page="admin"] .topup-order-row {
  padding: 7px 8px;
  border-radius: 8px;
}

/* ---- payment panel inside admin detail (if shown) ---- */
body.ui-v8 .admin-payment-panel {
  gap: 8px;
  margin: 6px 0 8px;
  padding: 9px;
  border-radius: 12px;
}

body.ui-v8 .admin-payment-title {
  font-size: 13px;
}

body.ui-v8 .admin-payment-desc {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.4;
}

body.ui-v8 .admin-payment-method {
  min-height: 30px;
  padding: 5px 7px;
  border-radius: 9px;
  font-size: 10px;
}

/* ---- responsive: keep density, don't explode list height ---- */
@media (max-width: 1180px) {
  body.ui-v8 .console-page[data-console-page="admin"] .admin-account-list {
    max-height: clamp(380px, 62vh, 720px);
    overflow: auto;
  }

  body.ui-v8 .console-page[data-console-page="admin"] .admin-account-row {
    grid-template-columns: minmax(180px, .95fr) minmax(0, 1.25fr);
  }

  body.ui-v8 .console-page[data-console-page="admin"] .admin-account-row > .admin-account-tools.admin-account-row-actions,
  body.ui-v8 .console-page[data-console-page="admin"] .admin-account-row-actions {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 88px !important;
  }

  body.ui-v8 .admin-pricing-row {
    grid-template-columns: minmax(140px, 1.1fr) minmax(0, 1.3fr) 100px 136px;
  }

  body.ui-v8 .admin-model-disable-section .admin-pricing-row {
    grid-template-columns: minmax(140px, 1.1fr) minmax(0, 1.3fr) 100px;
  }
}

@media (max-width: 760px) {
  body.ui-v8 .console-page[data-console-page="admin"] .admin-page-hero span {
    -webkit-line-clamp: 2;
  }

  body.ui-v8 .console-page[data-console-page="admin"] .newapi-card-desc {
    -webkit-line-clamp: 2;
  }

  body.ui-v8 .console-page[data-console-page="admin"] .admin-account-list,
  body.ui-v8 .admin-pricing-list,
  body.ui-v8 .admin-announcement-list,
  body.ui-v8 .console-page[data-console-page="admin"] .admin-recent-table-wrap {
    max-height: 62vh;
    overflow: auto;
  }

  body.ui-v8 .console-page[data-console-page="admin"] .admin-account-row,
  body.ui-v8 .console-page[data-console-page="admin"] .admin-account-row > .admin-account-tools.admin-account-row-actions,
  body.ui-v8 .console-page[data-console-page="admin"] .admin-account-row-actions,
  body.ui-v8 .console-page[data-console-page="admin"] .admin-account-stats,
  body.ui-v8 .admin-pricing-row,
  body.ui-v8 .admin-model-disable-section .admin-pricing-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ui-v8 .console-page[data-console-page="admin"] .admin-account-name {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.ui-v8 .console-page[data-console-page="admin"] .admin-detail-toggle,
  body.ui-v8 .admin-model-disable-section .admin-pricing-actions .newapi-button.slim {
    width: 100% !important;
    max-width: none;
    min-width: 0 !important;
  }

  body.ui-v8 .admin-pricing-actions {
    justify-content: stretch;
  }

  body.ui-v8 .admin-pricing-actions .newapi-button.slim {
    flex: 1 1 auto;
  }

  body.ui-v8 .admin-workspace-tab {
    flex: 0 0 auto;
  }
}

/* slightly quieter page enter on admin so dense content settles faster */
@media (prefers-reduced-motion: no-preference) {
  body.ui-v8 .console-page[data-console-page="admin"] {
    animation-duration: .16s;
  }
}