@import url("./brand_tokens.aebacac9c2bb.css");

:root {
  --bg-primary: var(--brand-bg-900);
  --bg-secondary: var(--brand-bg-950);
  --surface: var(--brand-bg-950);
  --contact: var(--brand-text-strong);
  --text-main: var(--brand-text-strong);
  --text-light: var(--brand-text-main);
  --text-muted: var(--brand-text-muted);
  --text-gray400: var(--brand-text-subtle);
  --text-gray600: var(--text-gray600);
  --text-gray900: var(--text-gray900);
  --fuchsia-hot: var(--brand-accent-strong);
  --fuchsia-400: var(--brand-accent-soft);
  --fuchsia-500: var(--brand-accent);
  --fuchsia-600: var(--brand-fuchsia-600);
  --purple-500: var(--brand-violet-500);
  --purple-600: var(--brand-violet-600);
  --border-fuchsia-soft: var(--brand-border-accent);
  --border-white-soft: var(--brand-border-soft);
}

* {
  box-sizing: border-box;
}

/* "html body" elsewhere in this file is a DESCENDANT selector — it only
   ever styles <body>, never <html> itself, so without this the root
   element had no background at all and overscroll/rubber-band scrolling
   revealed the browser's default white canvas past the body's bounds
   (found live 2026-10-23). */
html {
  background: var(--bg-secondary);
}

body {
  margin: 0;
  font-family: var(--brand-font-sans);
  color: var(--text-main);
  background: linear-gradient(150deg, var(--bg-primary) 0%, var(--bg-secondary) 48%, var(--brand-bg-900-deep) 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.container {
  /* Decided 2026-10-22: one page width across the whole front end, not a
     narrow/wide split by page type — .container-wide is the single source
     of truth for the value; .container kept as a class name (still used by
     ~45 templates) but no longer a separate narrower width. See
     DESIGN_SYSTEM.md. */
  width: min(1500px, 96%);
  margin: 0 auto;
}

/* Wider variant for pages whose tables have too many columns (ICCID, status,
   customer, tariff, usage, cost, …) to fit comfortably in the standard
   1100px content width without wrapping or cramped column spacing. */
.container-wide {
  width: min(1500px, 96%);
  margin: 0 auto;
}

.bg-orb {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.35;
}

.bg-orb-a {
  width: 340px;
  height: 340px;
  right: -80px;
  top: -80px;
  background: radial-gradient(circle, var(--brand-glow-a) 0%, transparent 70%);
}

.bg-orb-b {
  width: 300px;
  height: 300px;
  left: -120px;
  bottom: 10%;
  background: radial-gradient(circle, var(--brand-glow-b) 0%, transparent 70%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand-bg-950);
  border-bottom: 1px solid var(--border-white-soft);
}

.nav {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
}

.site-header .brand.brand-link,
.site-header .brand.brand-link:visited,
.site-header .brand.brand-link:focus {
  color: var(--text-main);
  text-decoration: none;
  gap: 10px;
}

.site-header .brand.brand-link:hover {
  color: var(--fuchsia-hot);
}

.brand-logo-mark {
  display: inline-block;
  width: 132px;
  height: 30px;
  background-color: var(--text-main);
  -webkit-mask-image: var(--logo-url);
  mask-image: var(--logo-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.2s ease;
}

.brand-word {
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.site-header .brand.brand-link:hover .brand-logo-mark {
  background-color: var(--fuchsia-hot);
}

.site-header .brand.brand-link:hover .brand-word {
  color: var(--fuchsia-hot);
}

nav a {
  color: var(--text-muted);
  text-decoration: none;
  margin-left: 0.65rem;
  font-weight: 500;
}

nav a:hover {
  color: var(--fuchsia-hot);
}

.nav-primary {
  display: flex;
  align-items: center;
  margin-left: auto;
  justify-content: flex-end;
  gap: 2px;
}

.nav-account {
  margin-left: var(--brand-space-3);
}

.account-menu {
  position: relative;
}

.account-menu summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  transition: 0.2s ease;
}

.account-menu summary::-webkit-details-marker {
  display: none;
}

.account-menu[open] summary,
.account-menu summary:hover {
  border-color: rgba(var(--brand-accent-rgb), 0.45);
  box-shadow: 0 8px 18px rgba(var(--brand-accent-rgb), 0.2);
}

.account-icon {
  width: 15px;
  height: 15px;
  border: 2px solid var(--text-light);
  border-radius: 50%;
  position: relative;
}

.account-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 12px;
  width: 16px;
  height: 8px;
  border: 2px solid var(--text-light);
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

/* .account-dropdown / .theme-toggle* now live in brand_tokens.css (shared
   by both site_base.css and admin_brand.css) so the account dropdown and
   theme toggle are one single component, not two copies that can drift —
   see brand_tokens.css for the rules themselves. */

.hero {
  padding: 5rem 0 4rem;
}

.eyebrow {
  color: var(--fuchsia-500);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 600;
}

h1 {
  margin: 0.5rem 0 1rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  background: linear-gradient(90deg, var(--brand-accent-strong) 0%, var(--brand-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  color: var(--text-muted);
  max-width: 720px;
}

.actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.1rem;
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--border-fuchsia-soft);
  font-weight: 600;
  transition: 0.3s ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.btn-primary {
  color: var(--fuchsia-hot);
  background: var(--surface);
}

.btn-secondary {
  color: var(--text-light);
  background: rgba(255, 255, 255, 0.04);
}

.btn:hover {
  border-color: rgba(var(--brand-accent-rgb), 0.45);
  box-shadow: 0 8px 18px rgba(var(--brand-accent-rgb), 0.2);
  transform: translateY(-1px);
}

.btn-destructive {
  color: var(--brand-error-soft);
  background: rgba(var(--brand-error-rgb), 0.08);
  border-color: rgba(var(--brand-error-rgb), 0.3);
}

.btn-destructive:hover {
  border-color: rgba(var(--brand-error-rgb), 0.6);
  box-shadow: 0 8px 18px rgba(var(--brand-error-rgb), 0.18);
}

.btn-sm {
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

.sim-bar-actions {
  display: flex;
  gap: var(--brand-space-2);
  margin-top: 14px;
  flex-wrap: wrap;
}

.section {
  padding: 2.25rem 0;
}

.section-title {
  margin: 0 0 0.8rem;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  background: linear-gradient(90deg, var(--brand-accent-strong) 0%, var(--brand-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section p {
  color: var(--text-muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.card {
  border: 1px solid var(--border-fuchsia-soft);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(var(--brand-bg-950-rgb), 0.3);
}

.card h3 {
  margin: 0 0 0.5rem;
}

.card-subsection-title {
  margin: 1rem 0 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.kpi {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--fuchsia-500);
}

.table-wrap {
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.inline-link {
  color: var(--fuchsia-400);
  text-decoration: none;
  margin-left: var(--brand-space-2);
  font-weight: 600;
}

.inline-link:hover {
  color: var(--fuchsia-hot);
}

.page-title {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  background: linear-gradient(90deg, var(--brand-accent-strong) 0%, var(--brand-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.two-col-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.customer-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-wide-card {
  grid-column: 1 / -1;
}

.map-card {
  grid-column: 1 / -1;
}

.sim-map {
  margin-top: 10px;
  border-radius: 12px;
  min-height: 460px;
  border: 1px solid var(--border-fuchsia-soft);
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(var(--brand-bg-950-rgb), 0.26);
}

.map-status {
  margin-top: var(--brand-space-2);
  color: var(--text-gray400);
  font-size: 0.85rem;
}

.usage-chart-card {
  grid-column: 1 / -1;
  min-height: 0;
}

.usage-chart-wrap {
  position: relative;
  width: 100%;
  height: clamp(220px, 34vh, 280px);
  max-height: 280px;
  margin-top: var(--brand-space-2);
}

.usage-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--brand-space-4);
}

.usage-chart-header h3 {
  margin: 0;
}

.usage-range-tabs {
  display: flex;
  gap: var(--brand-space-1);
  background: rgba(var(--brand-bg-950-rgb), 0.5);
  border: 1px solid rgba(var(--brand-accent-2-rgb), 0.25);
  border-radius: 8px;
  padding: 3px;
}

.usage-range-tab {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.usage-range-tab:hover {
  color: var(--brand-text-strong);
  background: rgba(var(--brand-accent-2-rgb), 0.2);
}

.usage-range-tab.active {
  background: linear-gradient(135deg, var(--brand-accent-2), var(--brand-accent));
  color: var(--brand-text-strong);
}

/* Trial/contract/term status badge — shared by sim_detail.html (trial +
   contract countdown) and esim_device_detail.html (PAYN term countdown).
   Pulled out of sim_detail.html's own local <style> block once a second
   page needed the same pattern, rather than duplicating it a third time. */
.trial-status-block {
  display: flex;
  align-items: center;
  gap: var(--brand-space-2);
  margin-top: var(--brand-space-2);
  flex-wrap: wrap;
}
.trial-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.trial-badge--active {
  background: rgba(var(--brand-accent-2-rgb),0.15);
  border: 1px solid rgba(var(--brand-accent-2-rgb),0.4);
  color: var(--brand-lilac);
}
.trial-badge--warning {
  background: rgba(var(--brand-warning-rgb),0.15);
  border: 1px solid rgba(var(--brand-warning-rgb),0.4);
  color: var(--brand-warning-soft);
}
.trial-badge--ended {
  background: rgba(var(--brand-error-rgb),0.15);
  border: 1px solid rgba(var(--brand-error-rgb),0.4);
  color: var(--brand-error-soft);
}
.trial-date {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}
.contract-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.contract-badge--active {
  background: rgba(6,182,212,0.15);
  border: 1px solid rgba(6,182,212,0.4);
  color: var(--brand-info-soft-2);
}
.contract-badge--warning {
  background: rgba(var(--brand-warning-rgb),0.15);
  border: 1px solid rgba(var(--brand-warning-rgb),0.4);
  color: var(--brand-warning-soft);
}
.contract-badge--ended {
  background: rgba(var(--brand-error-rgb),0.15);
  border: 1px solid rgba(var(--brand-error-rgb),0.4);
  color: var(--brand-error-soft);
}

#usage-7d-chart {
  width: 100%;
  height: 100% !important;
  display: block;
}

.pool-progress {
  margin-top: var(--brand-space-2);
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.pool-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-violet-500) 0%, var(--brand-accent) 70%, var(--brand-accent-strong) 100%);
}

/* Pool usage past 100% of the allowance — reuses the same red convention as
   .trial-badge--ended / .contract-badge--ended rather than inventing a new
   danger colour. The fill itself is capped at 100% width by the template
   (the bar visually fills, matching the true "no more room" reality); the
   text/number values elsewhere on the page always show the real, unclamped
   figures. */
.pool-progress-fill--over {
  background: linear-gradient(90deg, var(--brand-error) 0%, var(--brand-error-soft) 100%);
}
.pool-usage--over {
  color: var(--brand-error-soft);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.85rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.92rem;
  vertical-align: middle;
}

th {
  color: var(--text-gray400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
}

.sims-table tbody tr:hover {
  background: rgba(var(--brand-accent-rgb), 0.08);
}

.billing-summary-row {
  cursor: pointer;
}

.billing-summary-row:hover {
  background: rgba(var(--brand-accent-rgb), 0.08);
}

.billing-summary-row td:first-child {
  display: flex;
  align-items: center;
  gap: var(--brand-space-2);
}

.billing-caret {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--fuchsia-400);
  transition: transform 0.2s ease;
}

.billing-summary-row.is-open .billing-caret {
  transform: rotate(90deg);
}

.billing-detail-row > td {
  padding: 0;
  background: rgba(255, 255, 255, 0.03);
}

.billing-detail-row .table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.billing-totals-row td {
  font-weight: 700;
  color: var(--fuchsia-400);
  background: rgba(var(--brand-accent-rgb), 0.08);
}

.billing-customer-row td {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
}

.billing-account-row td {
  background: rgba(168, 85, 247, 0.15);
  font-weight: 700;
  color: var(--fuchsia-400);
}

.billing-tariff-row td {
  background: rgba(255, 255, 255, 0.02);
}

.billing-tariff-row td:nth-child(3) {
  padding-left: 1.4rem;
}


.dash-hero {
  background: linear-gradient(130deg, var(--bg-primary) 0%, var(--bg-secondary) 55%, var(--brand-bg-850) 100%);
  color: var(--text-main);
  border-radius: 16px;
  padding: 22px;
  margin: 4px 0 14px;
  border: 1px solid var(--border-fuchsia-soft);
  box-shadow: 0 20px 40px rgba(var(--brand-bg-950-rgb), 0.35);
}

.dash-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fuchsia-500);
  margin-bottom: var(--brand-space-2);
}

.dash-title {
  margin: 0 0 6px;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  background: linear-gradient(90deg, var(--brand-accent-strong) 0%, var(--brand-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dash-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.iccid-link {
  color: var(--fuchsia-400);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
  word-break: break-all;
}

.iccid-link:hover {
  color: var(--fuchsia-hot);
}

.sims-shell {
  position: relative;
  z-index: 1;
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(var(--brand-bg-950-rgb), 0.55));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 10px;
  box-shadow: 0 18px 34px rgba(var(--brand-bg-950-rgb), 0.35);
}

.flash-stack {
  margin: 14px 0;
  display: grid;
  gap: var(--brand-space-2);
}

.flash-message {
  border: 1px solid var(--border-fuchsia-soft);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-light);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
}

.flash-success {
  border-color: rgba(74, 222, 128, 0.4);
}

.flash-error {
  border-color: rgba(248, 113, 113, 0.45);
}

.flash-warning {
  border-color: rgba(var(--brand-warning-soft-rgb), 0.45);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

.bulk-assign-form {
  margin-bottom: 10px;
}

.bulk-applying-notice {
  display: none;
  border: 1px solid var(--border-fuchsia-soft);
  background: rgba(var(--brand-accent-strong-rgb), 0.06);
  color: var(--text-light);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  margin-bottom: 10px;
  gap: 10px;
  align-items: center;
}

.bulk-applying-notice--visible {
  display: flex;
}

.bulk-applying-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--brand-accent-strong-rgb), 0.2);
  border-top-color: var(--fuchsia-hot);
  border-radius: 50%;
  animation: bulk-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes bulk-spin {
  to { transform: rotate(360deg); }
}

.bulk-assign-panels {
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(var(--brand-bg-950-rgb), 0.8));
  margin-bottom: 10px;
}

.bulk-assign-panels .bulk-assign-bar {
  flex: 1;
  min-width: 220px;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  background: none;
  padding: 4px 16px;
}

.bulk-assign-panels .bulk-assign-bar:first-child {
  padding-left: 0;
}

.bulk-assign-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.bulk-assign-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border-fuchsia-soft);
  flex-shrink: 0;
}

.bulk-assign-bar--centered {
  flex: 1;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.bulk-assign-bar label,
.bulk-assign-bar .bulk-assign-label {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.bulk-assign-bar select {
  min-width: 220px;
  background: rgba(var(--brand-bg-950-rgb), 0.85);
  color: var(--text-light);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 9px;
  padding: 8px 10px;
}

.tariff-combobox {
  position: relative;
  min-width: 260px;
}

.tariff-combobox-trigger {
  width: 100%;
  min-width: 260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brand-space-2);
  background: rgba(var(--brand-bg-950-rgb), 0.85);
  color: var(--text-light);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 0.86rem;
  cursor: pointer;
  text-align: left;
}

.tariff-combobox-trigger:hover,
.tariff-combobox-trigger:focus {
  border-color: var(--accent-fuchsia, var(--brand-accent-strong));
  outline: none;
}

.tariff-combobox-trigger[aria-expanded="true"] .tariff-combobox-chevron {
  transform: rotate(180deg);
}

.tariff-combobox-chevron {
  color: var(--text-muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.tariff-combobox-panel[hidden] {
  display: none;
}

.tariff-combobox-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: max(100%, 320px);
  max-height: 420px;
  display: flex;
  flex-direction: column;
  background: var(--brand-bg-950);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.tariff-combobox-filter {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-light);
  border: none;
  border-bottom: 1px solid var(--border-fuchsia-soft);
  padding: 10px 12px;
  font-size: 0.86rem;
  box-sizing: border-box;
}

.tariff-combobox-filter:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.07);
}

.tariff-combobox-body {
  overflow-y: auto;
  padding: 6px;
}

.tariff-combobox-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--brand-space-2);
  background: transparent;
  border: none;
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 8px 8px;
  cursor: pointer;
  border-radius: 6px;
}

.tariff-combobox-group-header:hover {
  background: rgba(var(--brand-accent-strong-rgb), 0.08);
}

.tariff-combobox-group-chevron {
  display: inline-block;
  color: var(--text-muted);
  transition: transform 0.15s ease;
  font-size: 0.7rem;
}

.tariff-combobox-group--open .tariff-combobox-group-chevron {
  transform: rotate(90deg);
}

.tariff-combobox-group-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.tariff-combobox-group-options {
  padding-left: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.tariff-combobox-option {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.84rem;
  color: var(--text-light);
  cursor: pointer;
}

.tariff-combobox-option:hover {
  background: rgba(var(--brand-accent-2-rgb), 0.18);
}

.tariff-combobox-empty {
  padding: 14px 10px;
  color: var(--text-muted);
  font-size: 0.84rem;
  text-align: center;
}

.sim-row {
  display: grid;
  /* ICCID | SIM Type | Label | Status | Customer | Custom Tariff | Trial | Data Usage | Total Cost */
  grid-template-columns: 2.0fr 0.9fr 1.0fr 0.9fr 1.3fr 1.7fr 1.0fr 0.8fr 0.8fr;
  column-gap: 18px;
  row-gap: 10px;
  align-items: center;
}

/* Allow all grid children to shrink below intrinsic content size so
   fr-based columns stay consistent between the header row and data rows. */
.sim-row > *,
.customer-row > *,
.tariff-row > * {
  min-width: 0;
}

.sim-row.sim-row-bulk {
  /* Checkbox | ICCID | SIM Type | Label | Status | Customer | Custom Tariff | Trial | Data Usage | Total Cost */
  grid-template-columns: 0.42fr 2.0fr 0.9fr 1.0fr 0.9fr 1.3fr 1.7fr 1.0fr 0.8fr 0.8fr;
}

.sim-row.esim-profile-row {
  grid-template-columns: 0.7fr 2.2fr 1.4fr 0.85fr 1.2fr 1.5fr;
}

.sim-row.sim-row-devices {
  /* Kind | ICCID | Status | Data Usage | Assigned To */
  grid-template-columns: 0.6fr 1.8fr 0.9fr 1.0fr 2.6fr;
}

.customer-row {
  display: grid;
  /* Account | Sub-acc | Total SIMs | Active SIMs | Total eSIMs | Active eSIMs | Monthly Cost | Monthly Overage | Status */
  grid-template-columns: 1.8fr 0.75fr 0.9fr 0.9fr 0.9fr 0.9fr 1.1fr 1.1fr 0.8fr;
  column-gap: 18px;
  row-gap: 10px;
  align-items: center;
}

.sim-row-head {
  color: var(--text-gray400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 8px 12px 10px;
}

.customer-row-head {
  color: var(--text-gray400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 8px 12px 10px;
}

.sort-link {
  color: var(--text-gray400);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sort-link:hover {
  color: var(--fuchsia-400);
}

.sort-arrow {
  color: var(--fuchsia-400);
  font-size: 0.72rem;
  line-height: 1;
}

.sim-row-item {
  margin: 8px 0;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  transition: 0.2s ease;
  font-size: 0.8rem;
}

.customer-row-item {
  margin: 8px 0;
  padding: 13px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  transition: 0.2s ease;
}

.customer-row-item:hover {
  border-color: rgba(var(--brand-accent-rgb), 0.42);
  box-shadow: 0 8px 16px rgba(var(--brand-accent-rgb), 0.16);
  transform: translateY(-1px);
}

.sim-row-item:hover {
  border-color: rgba(var(--brand-accent-rgb), 0.42);
  box-shadow: 0 8px 16px rgba(var(--brand-accent-rgb), 0.16);
  transform: translateY(-1px);
}

.sim-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--fuchsia-500);
}

.sim-empty {
  grid-template-columns: 1fr;
  text-align: center;
  color: var(--text-muted);
}

/* Generic card-row base, added 2026-10-22 migrating billing_list.html/
   users_list.html/invoice_list.html from <table> onto the card-row pattern
   (per the confirmed canonical-pattern decision, see DESIGN_SYSTEM.md).
   .sim-row/.customer-row above predate this and could migrate onto it too,
   but weren't touched here to keep this change scoped. A page defines its
   own grid-template-columns via a type-specific class (e.g. .user-row)
   alongside .data-row; .data-row-head/.data-row-item supply the shared
   header and item-card styling so new list pages don't reinvent them. */
.data-row {
  display: grid;
  column-gap: 18px;
  row-gap: 10px;
  align-items: center;
}
.data-row > * {
  min-width: 0;
}
.data-row-head {
  color: var(--text-gray400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 8px 12px 10px;
}
.data-row-item {
  margin: 8px 0;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  transition: 0.2s ease;
  font-size: 0.8rem;
}
.data-row-item:hover {
  border-color: rgba(var(--brand-accent-rgb), 0.42);
  box-shadow: 0 8px 16px rgba(var(--brand-accent-rgb), 0.16);
  transform: translateY(-1px);
}

.user-row {
  /* Name | Username | Email | Role | Status */
  grid-template-columns: 1.3fr 1fr 1.6fr 0.8fr 0.9fr;
}
.user-row.user-row-actions {
  /* + Actions */
  grid-template-columns: 1.3fr 1fr 1.6fr 0.8fr 0.9fr 1.4fr;
}

.bill-row {
  /* Period | Date Range | Customers | SIMs | Line Rental | Overage | Other | Subtotal | VAT | Total */
  grid-template-columns: 0.7fr 1.6fr 0.8fr 0.6fr 0.9fr 0.9fr 0.9fr 0.9fr 0.7fr 0.9fr;
}

.invoice-row {
  /* Period | Customer | Invoice Ref | SIMs | Line Rental | Overage | Subtotal | VAT | Total | Export */
  grid-template-columns: 0.7fr 1.3fr 1fr 0.6fr 0.9fr 0.9fr 0.9fr 0.7fr 0.9fr 1.7fr;
}

/* Shared empty-state component for any front-end page/section that isn't a
   card-row list (those use .sim-empty above). Shape matches admin_ui.css's
   .admin-empty-state for cross-system consistency (see DESIGN_SYSTEM.md) —
   this is the single front-end target, replacing the three incompatible
   patterns found in the 2026-10-21 audit (an undefined class with inline
   styles on users_list.html, and a bare unstyled <td> on billing_list.html/
   invoice_list.html). */
.empty-state {
  text-align: center;
  /* 48px 24px, matching admin_ui.css's .admin-empty-state exactly (48 isn't
     a single step on the --brand-space-* scale, hence the calc). */
  padding: calc(var(--brand-space-6) * 2) var(--brand-space-6);
  color: var(--text-muted);
}
.empty-state strong {
  display: block;
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: var(--brand-space-2);
}

.tariff-row {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 0.9fr 0.95fr 0.6fr 1.8fr 0.7fr;
  gap: 10px;
  align-items: center;
}

.tariff-row.tariff-row-main-admin {
  grid-template-columns: 1.35fr 1fr 0.9fr 0.95fr 0.55fr 1.7fr 1.7fr 0.65fr;
}

.tariff-row.tariff-row-no-core {
  grid-template-columns: 1.7fr 1fr 1.05fr 0.7fr 1.9fr 0.8fr;
}

.tariff-row-head {
  color: var(--text-gray400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 8px 12px 10px;
}

.tariff-row-item {
  margin: 8px 0;
  padding: 13px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  transition: 0.2s ease;
}

.tariff-row-item:hover {
  border-color: rgba(var(--brand-accent-rgb), 0.42);
  box-shadow: 0 8px 16px rgba(var(--brand-accent-rgb), 0.16);
  transform: translateY(-1px);
}

.pooled-data-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pooled-data-cell .pool-progress {
  margin-top: 0;
}

.pooled-data-cell .map-status {
  margin-top: 0;
  line-height: 1.25;
}

.muted-cell {
  color: var(--text-gray400);
}

.status-pill {
  display: inline-block;
  padding: 0.22rem 0.56rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.status-active {
  color: var(--brand-success-soft);
  background: rgba(22, 163, 74, 0.18);
}

.status-inactive {
  color: var(--brand-info-soft);
  background: rgba(37, 99, 235, 0.18);
}

.status-suspended {
  color: var(--brand-tag-2);
  background: rgba(234, 88, 12, 0.18);
}

.status-cancelled {
  color: var(--brand-error-soft-2);
  background: rgba(220, 38, 38, 0.16);
}

.status-prepared {
  color: var(--brand-warning-soft-2);
  background: rgba(202, 138, 4, 0.18);
}

.status-stock,
.status-dispatched,
.status-trial {
  color: var(--brand-violet-soft);
  background: rgba(139, 92, 246, 0.18);
}

.trial-pill {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-left: var(--brand-space-1);
  border: 1px solid transparent;
}

.trial-pill--active {
  color: var(--brand-lilac);
  background: rgba(var(--brand-accent-2-rgb), 0.15);
  border-color: rgba(var(--brand-accent-2-rgb), 0.35);
}

.trial-pill--warning {
  color: var(--brand-warning-soft);
  background: rgba(var(--brand-warning-rgb), 0.15);
  border-color: rgba(var(--brand-warning-rgb), 0.35);
}

.trial-pill--ended {
  color: var(--brand-error-soft);
  background: rgba(var(--brand-error-rgb), 0.15);
  border-color: rgba(var(--brand-error-rgb), 0.35);
}

.trial-pill--contracted {
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Distinguishes a physical Webbing SIM row at a glance from a SIMPro SIM —
   see esim.WebbingSIM's model docstring. Same pill shape/sizing convention
   as .trial-pill, using the brand accent (not a status colour, since this
   isn't a state — it never changes for a given row). */
.type-pill {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-left: 6px;
  border: 1px solid transparent;
  vertical-align: middle;
}

.type-pill--physical {
  color: var(--brand-lilac);
  background: rgba(var(--brand-accent-2-rgb), 0.15);
  border-color: rgba(var(--brand-accent-2-rgb), 0.35);
}

.per-page-form {
  margin-top: var(--brand-space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--brand-space-2);
  font-size: 0.88rem;
  color: var(--text-muted);
}

.per-page-form select {
  background: rgba(var(--brand-bg-950-rgb), 0.8);
  color: var(--text-light);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 8px;
  padding: 0.85rem 8px;
  font: inherit;
  line-height: 1.2;
}

.pagination {
  margin-top: var(--brand-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pagination-meta {
  color: var(--text-muted);
  font-weight: 600;
}

.pagination-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--brand-space-4);
  padding: 14px;
}

.pagination-btn {
  color: var(--purple-500);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 8px;
}

.pagination-btn:hover {
  border-color: var(--fuchsia-hot);
  color: var(--fuchsia-hot);
}

.pagination-info {
  color: var(--text-gray400);
  font-size: 12px;
}

.sims-filters {
  position: relative;
  z-index: 20;
  overflow: visible;
  margin: 12px 0 14px;
  padding: var(--brand-space-3);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.developer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.developer-form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.8rem;
}

.developer-form-inline label {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.developer-form-inline select {
  background: rgba(var(--brand-bg-950-rgb), 0.85);
  color: var(--text-light);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 9px;
  padding: 8px 10px;
  min-width: 230px;
}

.developer-secret {
  margin-top: 0.9rem;
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.75rem;
}

.developer-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.card pre {
  margin: 0.5rem 0 0.8rem;
  padding: 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border-fuchsia-soft);
  background: rgba(14, 11, 35, 0.85);
  overflow: auto;
}

.card code {
  color: var(--brand-tag-6);
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.85rem;
}

@media (max-width: 980px) {
  .developer-grid,
  .developer-doc-grid {
    grid-template-columns: 1fr;
  }
}

.filter-field {
  display: grid;
  gap: 6px;
}

.filter-field label {
  color: var(--text-gray400);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

.filter-field input,
.filter-field select {
  width: 100%;
  background: rgba(var(--brand-bg-950-rgb), 0.82);
  color: var(--text-light);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 8px;
  padding: 0.85rem 9px;
  font: inherit;
  line-height: 1.2;
}

.filter-actions {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--brand-space-2);
  grid-column: span 2;
}

.filter-actions .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.site-select {
  background: rgba(var(--brand-bg-950-rgb), 0.82);
  color: var(--text-light);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 8px;
  padding: 0.85rem 9px;
  font: inherit;
  line-height: 1.2;
}

.customer-form-card {
  margin-top: 10px;
}

.customer-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--brand-space-3);
}

.customer-form-field {
  display: grid;
  gap: 6px;
}

.customer-form-field label {
  color: var(--text-gray400);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

.customer-form-field input,
.customer-form-field select,
.customer-form-field textarea {
  width: 100%;
  background: rgba(var(--brand-bg-950-rgb), 0.82);
  color: var(--text-light);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 8px;
  padding: 8px 9px;
}

.customer-form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.checkbox-field {
  align-items: start;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: none;
  letter-spacing: normal;
}

.checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 4px;
  background: rgba(var(--brand-bg-950-rgb), 0.9);
  cursor: pointer;
  position: relative;
  margin: 0;
}

.checkbox-label input[type="checkbox"]:checked {
  border-color: var(--fuchsia-500);
  background: linear-gradient(145deg, var(--fuchsia-600), var(--fuchsia-400));
}

.checkbox-label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 3px;
  height: 8px;
  border: solid var(--brand-bg-950);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.full-width-field {
  grid-column: 1 / -1;
}

.name-builder-shell {
  display: grid;
  gap: var(--brand-space-2);
}

.name-builder-shell > label {
  color: var(--text-gray400);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

.name-builder-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--brand-space-2);
}

.name-builder-row input {
  min-width: 72px;
  max-width: 180px;
  background: rgba(var(--brand-bg-950-rgb), 0.82);
  color: var(--text-light);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 8px;
  padding: 8px 9px;
  font-weight: 700;
}

.name-builder-row input[readonly] {
  color: var(--brand-text-main);
}

.name-builder-row input#id_name_segment {
  min-width: 120px;
}

.name-sep {
  color: var(--fuchsia-500);
  font-weight: 800;
}

.form-error {
  margin: 0;
  color: var(--brand-tag-1);
  font-size: 0.82rem;
}

.input-error {
  border-color: rgba(248, 113, 113, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.15);
}

.has-error input,
.has-error select,
.has-error textarea {
  border-color: rgba(248, 113, 113, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.15);
}

.modal-backdrop {
  border: none;
  border-radius: 16px;
  padding: 0;
  width: min(520px, 92vw);
  background: transparent;
}

/* Wider variant for a modal holding a data table rather than confirmation
   copy (mirrors admin_ui.css's .admin-modal-card.is-wide). Added 2026-10-22
   migrating esim_device_detail.html's hand-rolled Network Detail dialog
   onto the shared <dialog> pattern instead of a bespoke <div role="dialog">. */
.modal-backdrop.is-wide {
  width: min(760px, 92vw);
}
.modal-backdrop.is-wide .modal-card {
  max-height: 80vh;
  overflow-y: auto;
}

.modal-backdrop::backdrop {
  background: rgba(var(--brand-bg-950-rgb), 0.72);
  backdrop-filter: blur(4px);
}

.modal-card {
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(var(--brand-bg-950-rgb), 0.7));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px;
  color: var(--text-light);
}

.modal-card h3 {
  margin-top: 0;
  color: var(--text-light);
}

/* Header row for a modal that needs a dedicated Close control instead of
   (or in addition to) the usual bottom-right Cancel/Confirm actions row —
   e.g. a content-viewing modal like the eSIM Network Detail table. */
.modal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brand-space-3);
  margin-bottom: var(--brand-space-3);
}
.modal-card-header h3 {
  margin: 0;
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  font-size: 1.25rem;
}
.modal-close:hover {
  color: var(--text-light);
}

.modal-card p {
  color: var(--text-gray400);
}

.modal-field {
  display: grid;
  gap: 6px;
}

.modal-field label {
  color: var(--text-gray400);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

.modal-field input {
  width: 100%;
  background: rgba(var(--brand-bg-950-rgb), 0.82);
  color: var(--text-light);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 8px;
  padding: 8px 9px;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.2rem;
}

.login-layout {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

.login-brand-panel {
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(var(--brand-bg-950-rgb), 0.58));
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  padding: 1.6rem;
  box-shadow: 0 16px 32px rgba(var(--brand-bg-950-rgb), 0.34);
  text-align: center;
}

.login-title {
  margin: 0.4rem 0 0.8rem;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  background: linear-gradient(90deg, var(--brand-accent-strong) 0%, var(--brand-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login-highlights {
  margin: 1rem auto 0;
  padding-left: 1.1rem;
  color: var(--text-light);
  text-align: left;
  width: fit-content;
}

.login-highlights li {
  margin: 0.45rem 0;
}

.login-card {
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.12), rgba(var(--brand-bg-950-rgb), 0.62));
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  padding: 1.6rem;
  box-shadow: 0 16px 32px rgba(var(--brand-bg-950-rgb), 0.34);
  text-align: center;
}

.login-form-title {
  margin: 0.4rem 0 0.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--brand-accent-strong) 0%, var(--brand-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login-form {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  text-align: left;
}

.login-form label {
  display: block;
  color: var(--text-light);
  font-size: 0.9rem;
  font-weight: 600;
}

.login-form input {
  display: block;
  width: 100%;
  padding: 0.72rem 0.78rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--brand-accent-rgb), 0.35);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-main);
}

.login-form input:focus {
  outline: none;
  border-color: rgba(var(--brand-accent-strong-rgb), 0.7);
  box-shadow: 0 0 0 3px rgba(var(--brand-accent-rgb), 0.22);
}

.login-form .btn {
  width: 100%;
  text-align: center;
  margin-top: 0.35rem;
}

.login-errors {
  border: 1px solid rgba(var(--brand-accent-strong-rgb), 0.35);
  background: rgba(var(--brand-accent-strong-rgb), 0.08);
  color: var(--text-light);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
}

.status-badge-connected {
  color: var(--brand-tag-5);
  background: rgba(var(--brand-success-rgb), 0.2);
  border-color: rgba(var(--brand-success-rgb), 0.45);
}

.status-badge-disconnected {
  color: var(--brand-tag-7);
  background: rgba(var(--brand-error-rgb), 0.2);
  border-color: rgba(var(--brand-error-rgb), 0.45);
}

.u-inline-block {
  display: inline-block;
}

.u-no-underline {
  text-decoration: none;
}

.u-mt-0 {
  margin-top: 0;
}

.u-mt-12 {
  margin-top: var(--brand-space-3);
}

.u-mt-14 {
  margin-top: 14px;
}

.u-mt-20 {
  margin-top: var(--brand-space-5);
}

.u-minw-260 {
  min-width: 260px;
}

.u-maxw-120 {
  max-width: 120px;
}

.u-minw-130 {
  min-width: 130px;
}

.row-actions {
  display: flex;
  gap: var(--brand-space-2);
  flex-wrap: wrap;
}

.u-nowrap {
  white-space: nowrap;
}

.actions-inline-wrap {
  display: flex;
  gap: var(--brand-space-3);
  align-items: center;
  flex-wrap: wrap;
}

.actions-inline-wrap-compact {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.help-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--brand-space-4);
  align-items: start;
}

.help-sidenav {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.help-sidenav a {
  display: block;
  padding: 9px 10px;
  color: var(--text-light);
  text-decoration: none;
  border-radius: 8px;
}

.help-sidenav a:hover,
.help-sidenav a.active {
  background: rgba(var(--brand-accent-rgb), 0.14);
  color: var(--fuchsia-400);
}

.help-content .card {
  margin-bottom: var(--brand-space-3);
}

.help-content h3 {
  margin-top: 0;
}

.help-content ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
}

.help-content li {
  margin: 6px 0;
}

@media (max-width: 700px) {
  .nav {
    min-height: 64px;
  }
  nav a {
    margin-left: 0.7rem;
    font-size: 0.92rem;
  }
  .nav-primary {
    gap: var(--brand-space-1);
  }
  .account-menu summary {
    width: 34px;
    height: 34px;
  }
  .hero {
    padding: 4rem 0 3rem;
  }
  .login-layout {
    grid-template-columns: 1fr;
  }
  .login-brand-panel {
    order: 2;
  }
  .login-card {
    order: 1;
  }
  .two-col-grid {
    grid-template-columns: 1fr;
  }
  .customer-detail-grid {
    grid-template-columns: 1fr;
  }
  .sim-row-head {
    display: none;
  }
  .sim-row-item {
    grid-template-columns: 1fr;
    gap: var(--brand-space-2);
  }
  .sim-row-item > div::before {
    content: attr(data-label);
    display: block;
    color: var(--text-gray400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.69rem;
    margin-bottom: 3px;
  }
  .sim-empty > div::before {
    content: "";
  }
  .customer-row-head {
    display: none;
  }
  .customer-row-item {
    grid-template-columns: 1fr;
    gap: var(--brand-space-2);
  }
  .customer-row-item > div::before {
    content: attr(data-label);
    display: block;
    color: var(--text-gray400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.69rem;
    margin-bottom: 3px;
  }
  .tariff-row-head {
    display: none;
  }
  .tariff-row-item {
    grid-template-columns: 1fr;
    gap: var(--brand-space-2);
  }
  .tariff-row-item > div::before {
    content: attr(data-label);
    display: block;
    color: var(--text-gray400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.69rem;
    margin-bottom: 3px;
  }
  .customer-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .help-layout {
    grid-template-columns: 1fr;
  }

  .help-sidenav {
    position: static;
    max-height: none;
  }
}

/* ── SIMPro sync health warning banner ────────────────────────���────────── */
.sync-health-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(var(--brand-warning-soft-rgb), 0.12) 0%, rgba(var(--brand-warning-rgb), 0.08) 100%);
  border-bottom: 1px solid rgba(var(--brand-warning-soft-rgb), 0.35);
  font-family: var(--brand-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-warning-soft);
  line-height: 1.4;
  z-index: 200;
  position: relative;
}

.sync-health-banner__icon {
  font-size: 16px;
  flex-shrink: 0;
  opacity: 0.9;
}

.sync-health-banner__message {
  flex: 1;
}

/* Hard failure variant — used when the poll errors out entirely */
.sync-health-banner--error {
  background: linear-gradient(90deg, rgba(var(--brand-error-rgb), 0.14) 0%, rgba(220, 38, 38, 0.08) 100%);
  border-bottom-color: rgba(var(--brand-error-rgb), 0.4);
  color: var(--brand-error-soft);
}

/* ── SIMPro Reconciliation ─────────────────────────────────────────────── */

.recon-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.recon-controls select {
  background: rgba(var(--brand-bg-950-rgb), 0.85);
  color: var(--text-light);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 9px;
  padding: 8px 12px;
  min-width: 260px;
}

.recon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  align-items: start;
}

@media (max-width: 1024px) {
  .recon-grid {
    grid-template-columns: 1fr;
  }
}

.recon-card {
  border: 1px solid var(--border-fuchsia-soft);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
}

.recon-card__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fuchsia-400);
  margin-bottom: 0.35rem;
}

.recon-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.15rem;
}

.recon-card__period {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.recon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.recon-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.3rem 0.5rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.recon-table td {
  padding: 0.45rem 0.5rem;
  color: var(--text-light);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.recon-table tr:last-child td {
  border-bottom: none;
}

.recon-table .recon-total-row td {
  font-weight: 700;
  color: var(--text-main);
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.recon-input {
  background: rgba(var(--brand-bg-950-rgb), 0.85);
  color: var(--text-light);
  border: 1px solid var(--border-fuchsia-soft);
  border-radius: 7px;
  padding: 5px 8px;
  width: 100px;
  text-align: right;
  font-size: 0.875rem;
}

.recon-input:focus {
  outline: none;
  border-color: var(--fuchsia-hot);
  box-shadow: 0 0 0 2px rgba(var(--brand-accent-strong-rgb), 0.15);
}

.recon-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.recon-diff {
  font-size: 2rem;
  font-weight: 800;
  margin: 0.75rem 0 0.25rem;
}

.recon-diff-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.recon-diff--profit {
  color: var(--brand-success-soft);
}

.recon-diff--overbilled {
  color: var(--brand-warning-soft);
}

.recon-diff--exact {
  color: var(--text-muted);
}

.recon-flag-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: 0.75rem;
}

.recon-flag-banner--overbilled {
  background: rgba(var(--brand-warning-rgb), 0.1);
  border: 1px solid rgba(var(--brand-warning-rgb), 0.35);
  color: var(--brand-tag-3);
}

.recon-flag-banner--profit {
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.35);
  color: var(--brand-tag-4);
}

.recon-flag-banner--exact {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
}

.recon-flag-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.recon-empty {
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: 1rem 0;
}

.recon-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.recon-side-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  padding: 0.65rem 0.8rem;
}

.recon-side-item__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.recon-side-item__value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
}