/* IPTV reseller panel: the few parts the BGV Platform UI does not cover.
   Tokens only. No colours, sizes or radii are hard-coded here. */

/* Sidebar stays in view on long pages */
.app-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.app-sidebar nav { display: flex; flex-direction: column; gap: var(--space-1); }
.app-sidebar-foot { margin-top: auto; padding: var(--space-3); border-top: 1px solid var(--border); font-size: 14px; }
.app-sidebar-foot .who { font-weight: 600; }
.app-sidebar-foot .role { color: var(--ink-muted); }

/* Wallet balance in the top bar */
.balance { display: inline-flex; align-items: baseline; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); text-decoration: none; }
.balance strong { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.balance:hover strong { text-decoration: underline; }

/* Mobile navigation: the system hides the sidebar under 992px, this brings it back as a panel */
.nav-toggle { display: none; }
.nav-scrim { display: none; }
@media (max-width: 991.98px) {
  .nav-toggle { display: inline-flex; }
  body.nav-open .app-sidebar {
    display: flex; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040;
    width: var(--sidebar-width); box-shadow: var(--shadow-overlay);
  }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 1030; background: var(--scrim); }
  .app-topbar { padding: 0 var(--space-4); }
  .hide-sm { display: none; }
}

/* Layout helpers */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.section { margin-bottom: var(--space-6); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.section-head h2 { margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: var(--space-5); align-items: start; }
.split > * { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
@media (max-width: 1199.98px) { .split { grid-template-columns: minmax(0, 1fr); } }
.form-narrow { max-width: var(--form-max); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.form-actions .text-muted { font-size: 14px; }
.card-body > .field:last-child { margin-bottom: 0; }

/* Package picker: radio list with price on the right */
.choice-list { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.choice { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-lg); padding: var(--space-3) var(--space-4); margin: 0; cursor: pointer; border-bottom: 1px solid var(--border); background: var(--surface); }
.choice:last-child { border-bottom: 0; }
.choice:hover { background: var(--surface-sunken); }
.choice:has(.form-check-input:checked) { background: var(--accent-subtle); }
.choice .form-check-input { margin: 0; flex: none; }
.choice-main { flex: 1; display: flex; flex-direction: column; }
.choice-main .text-muted { font-size: 14px; }
.choice-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Key and value list for subscription details */
.details { display: grid; grid-template-columns: 140px minmax(0, 1fr); margin: 0; font-size: 14px; }
.details dt, .details dd { margin: 0; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.details dt { color: var(--ink-muted); font-weight: 500; }
.details dt:nth-last-of-type(1), .details dd:nth-last-of-type(1) { border-bottom: 0; }
@media (max-width: 575.98px) {
  .details { grid-template-columns: minmax(0, 1fr); }
  .details dt { padding-bottom: 0; border-bottom: 0; }
}
.copy { cursor: copy; word-break: break-all; }
.copy.copied { background: var(--success-subtle); }
.copy-hint { font-size: 12px; color: var(--ink-muted); }

/* Simple history list */
.history { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.history li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.history li:last-child { border-bottom: 0; }

/* Inline form tables on the packages page */
.table .form-control { min-height: var(--control-sm); font-size: 14px; padding: 4px var(--space-2); }
.table .w-price { width: 110px; }
.table .w-order { width: 72px; }
.table .w-duration { width: 130px; }
.table .form-check { margin: 0; }
.table .check-row { display: flex; gap: var(--space-3); white-space: nowrap; }
.table .form-check-label { font-size: 14px; }
.row-off > * { color: var(--ink-muted); }
.cell-sub { display: block; font-size: 12px; color: var(--ink-muted); }

/* Ledger amounts */
.amount-in { color: var(--success); font-weight: 600; }

/* Sign-in and setup */
.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--space-5); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .card-body { padding: var(--space-6); }
.auth-card h1 { margin: var(--space-5) 0 var(--space-1); }
.auth-card .lead-text { color: var(--ink-muted); font-size: 14px; margin-bottom: var(--space-5); }
.auth-brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }