/* Black workspace, compact records and configuration categories. */
:root {
  --bg: #000000;
  --surface: #000000;
  --surface-raised: #080808;
  --red: #ff606b;
  --green: #47df91;
  --blue: #58a6ff;
  --amber: #f1cd57;
}
body, .sidebar, .workspace, .topbar, .panel, .settings-card,
.sim-card, .sim-mini, .login-card, dialog { background: #000; }
.sidebar { border-right-color: #171717; }
.topbar, .page-footer { border-color: #171717; }
.text-blue, #statMb, .sim-balance { color: var(--blue); }
.text-green, #statClients, .positive { color: var(--green); }
.text-red, .negative { color: var(--red); }
.text-yellow, #statPurchases { color: var(--amber); }
.sim-balance > span, .sim-summary strong > small { color: var(--blue); }
.sim-details > div:first-child strong { color: var(--amber); }
.sim-details > div:nth-child(2) strong { color: var(--green); }
.sim-details > div:nth-child(3) strong { color: var(--red); }
.quick-stats article:nth-child(1) > span { color: var(--green); }
.quick-stats article:nth-child(2) > span { color: var(--blue); }
.quick-stats article:nth-child(3) > span { color: var(--green); }
.quick-stats article:nth-child(4) > span { color: var(--amber); }
.sales-footer > div:nth-child(1) strong { color: var(--amber); }
.sales-footer > div:nth-child(2) strong { color: var(--red); }
.sales-footer > div:nth-child(3) strong { color: var(--green); }
.sales-footer > div:nth-child(3) strong.negative { color: var(--red); }
.sales-footer > div:nth-child(4) strong { color: var(--blue); }
.badge { color: var(--green); }
.badge.error { color: var(--red); }
.badge.warn { color: var(--amber); }
.badge.blue { color: var(--blue); }
.cost-note, .help code { color: var(--amber); }

.overview-sim-heading { margin: 0 0 12px; }
.inactive-customers { margin: 0 0 20px; padding: 18px 20px; background: #000; border: 1px solid #292929; }
.inactive-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:12px; }
.inactive-heading h2 { color: var(--red); margin:0; }
.inactive-heading p { font-size:11px; margin:3px 0 0; }
.inactive-total { color:var(--amber); font-size:11px; white-space:nowrap; }
.inactive-table-wrap { overflow:auto; }
.inactive-customers table { width:100%; border-collapse:collapse; font-size:11px; }
.inactive-customers th { text-align:left; color:#aaa; font-size:10px; font-weight:500; padding:7px 8px; }
.inactive-customers td { padding:7px 8px; white-space:nowrap; }
.inactive-customers tbody tr:hover { background:#080808; }
.inactive-customers td small { display:block; font-size:10px; margin-top:2px; }
.call-button { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:6px; background:#153822; border:1px solid #2f8752; color:var(--green); font-size:10px; font-weight:600; white-space:nowrap; }
.call-button:hover { background:#1d5130; color:#fff; }
.inactive-empty { color:var(--muted); padding:15px 0 4px; font-size:11px; }
.overview-sim-heading h2 { font-size: 15px; }
.overview-sim-heading p { font-size: 11px; }
.sim-overview { margin: 0 0 22px; gap: 16px; }
.sim-mini { display: block; padding: 17px 20px; border-color: #242424; }
.sim-mini-heading, .sim-mini-heading > div, .sim-mini-balance {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sim-mini-heading > div { justify-content: flex-start; }
.sim-mini-heading strong { font-size: 14px; }
.sim-mini-heading strong small { display: inline; margin-left: 6px; font-size: 10px; }
.sim-mini .sim-symbol { padding: 4px 7px; font-size: 16px; }
.sim-mini-balance { margin: 16px 0 12px; }
.sim-mini-balance > strong { font-size: 29px; font-weight: 600; letter-spacing: -.5px; }
.sim-mini-balance > strong > span { font-size: 15px; font-weight: 500; }
.sim-mini-balance button { color: var(--blue); font-size: 11px; padding: 5px 9px; }
.sim-mini > .sim-mini-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; text-align: left;
  margin: 0; font-size: 11px; color: var(--muted);
}
.sim-mini-meta b { font-weight: 500; }

/* Dense, borderless tables across all record views. */
:is(#clients, #history, #resellers) .panel,
:is(#clients, #history, #resellers) .table-wrap,
:is(#clients, #history, #resellers) table,
:is(#clients, #history, #resellers) th,
:is(#clients, #history, #resellers) td {
  border: 0; border-radius: 0; box-shadow: none; background: #000;
}
:is(#clients, #history, #resellers) table { font-size: 11px; line-height: 1.3; }
:is(#clients, #history, #resellers) th {
  padding: 9px 8px; font-size: 10px; color: #b4b7c1; letter-spacing: 0;
}
:is(#clients, #history, #resellers) td {
  padding: 6px 8px; vertical-align: middle; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
:is(#clients, #history, #resellers) td small { font-size: 10px; margin-top: 2px; }
:is(#clients, #history, #resellers) tbody tr:hover td { background: #090909; }
#history .history-row { cursor: pointer; }
#history .history-row:focus-visible td { outline: 1px solid var(--blue); outline-offset: -1px; }
:is(#clients, #history, #resellers) .filters {
  padding: 0 0 15px; border: 0; gap: 10px;
}
:is(#clients, #history, #resellers) .pagination {
  border: 0; padding: 12px 0; font-size: 10px;
}
:is(#clients, #history, #resellers) .badge {
  padding: 0; background: transparent; border: 0; font-size: 9px; line-height: 1.3;
}
:is(#clients, #history, #resellers) td button {
  padding: 4px 6px; font-size: 9px; line-height: 1.3; min-height: 24px;
}
:is(#clients, #history, #resellers) .row-actions {
  gap: 4px; min-width: 158px; max-width: 218px;
}
#history td .ref { color: #888b97; font-size: 9px; }
#history td .quiet[data-action="notify"] { display: block; padding: 2px 0; color: var(--blue); }
#history [data-action="sim"] { color: var(--blue); }
#history [data-action="activate"] { color: var(--amber); }
#clients .delete-client-button { color: var(--red); background: transparent; padding: 3px 6px; min-height: 22px; font-size: 9px; }
#clients .delete-client-button:hover { color: #fff; background: #301014; }
#clients .delete-client-button:disabled { opacity: .55; cursor: wait; }
#history [data-action="complete"] { color: var(--green); }
#history [data-action="delete"], #resellers [data-delete] { color: var(--red); }
#clients td:nth-child(2), #history th:nth-child(2), #clients th:nth-child(2) { color: var(--blue); }
#resellers td:first-child small { color: var(--green); }
#resellers td:nth-child(4) { color: var(--amber); }
#resellers [data-save], #resellers [data-copy-token] { color: var(--blue); }
#resellers [data-ai] { color: var(--green); }
#resellers .reseller-expiry {
  min-height: 27px; padding: 3px 6px; font-size: 10px; width: 122px; min-width: 122px;
}
#resellers .token-input { min-height: 27px; padding: 3px 6px; width: 140px; }
:is(#clients, #history, #resellers) td details p { white-space: normal; }

#history .history-inline-action-row td { padding: 0 8px 8px; background: #000; }
.history-inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 9px 10px; background: #080808; border-left: 2px solid var(--blue); }
.history-inline-actions > span { display: grid; gap: 2px; min-width: 140px; margin-right: auto; }
.history-inline-actions strong { color: var(--blue); font-size: 11px; }
.history-inline-actions small { color: #8e929c; font-size: 10px; }
.history-inline-actions button { min-height: 27px; padding: 5px 9px; background: #101010; border: 1px solid #292929; border-radius: 5px; color: var(--green); font-size: 10px; font-weight: 700; }
.history-inline-actions button:hover:not(:disabled) { background: #181818; border-color: currentColor; }
.history-inline-actions button[data-receipt-action="activate"] { color: var(--amber); }
.history-inline-actions button[data-receipt-action="sim"] { color: var(--blue); }
.history-inline-actions button.danger { color: var(--red); }
.history-inline-actions button:disabled { color: #5d6069; cursor: not-allowed; opacity: .75; }
.history-inline-status { display: block; padding: 5px 0 0; color: var(--amber); font-size: 10px; }
@media (max-width:520px) { .history-inline-actions > span { width: 100%; margin-right: 0; } }

.settings-tabs {
  display: flex; flex-wrap: wrap; gap: 5px 17px; padding: 0 0 17px; margin-bottom: 6px;
}
.settings-tabs [role="tab"] {
  background: #000; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 10px 1px; color: #999daa; font-size: 12px; white-space: nowrap;
}
.settings-tabs [role="tab"][aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.settings-tabs [role="tab"]:nth-child(3n+2)[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); }
.settings-tabs [role="tab"]:nth-child(3n)[aria-selected="true"] { color: var(--amber); border-bottom-color: var(--amber); }
.settings-panels, .settings-account-panels { width: 100%; max-width: 920px; }
#settings .settings-card { border: 0; padding: 16px 0 6px; border-radius: 0; }
#settings .settings-card h2 { color: var(--blue); }
#settings [data-settings-panel="numbers"] h2, #settings [data-settings-panel="receipts"] h2 { color: var(--green); }
#settings [data-settings-panel="assistant"] h2, #settings [data-settings-panel="password"] h2 { color: var(--amber); }
#settings label { color: #d1d4de; }
#settings .plan-value, #settings #costPerGb { color: var(--amber); }
#settings .plan-mb { color: var(--blue); }
#settings .automation-number { color: var(--green); }
#settings .automation-iccid { color: var(--amber); }
#settings .plans-heading small { color: var(--blue); }
#settings .save-bar { max-width: 920px; position: static; background: #000; border: 0; box-shadow: none; padding: 18px 0 0; }
#settings textarea { min-height: 155px; }
#settings .plan-row { margin-top: 7px; }

.manual-receipt-panel { margin-bottom: 14px; }
.manual-receipt-heading h2 { margin: 5px 0; font-size: 19px; }
.manual-receipt-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.manual-receipt-form { display: grid; grid-template-columns: 1.1fr 1.2fr .8fr auto; align-items: end; gap: 12px; margin-top: 16px; }
.manual-receipt-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.manual-receipt-form input { min-width: 0; width: 100%; }
.manual-receipt-form input[readonly] { color: var(--blue); opacity: .9; }
.manual-receipt-form button { min-height: 40px; white-space: nowrap; }
.manual-receipt-status { min-height: 15px; margin: 8px 0 0; color: var(--green); font-size: 11px; }
@media (max-width: 760px) { .manual-receipt-form { grid-template-columns: repeat(2,minmax(0,1fr)); } .manual-receipt-form button { grid-column: 1 / -1; } }
@media (max-width: 420px) { .manual-receipt-form { grid-template-columns: 1fr; gap: 9px; } .manual-receipt-form button { grid-column: auto; } }

@media (max-width: 540px) {
  .inactive-customers { padding:15px 12px; }
  .inactive-heading { align-items:flex-start; }
  .inactive-heading h2 { font-size:15px; }
  .inactive-heading p { max-width:230px; }
  .inactive-customers th, .inactive-customers td { padding:6px 6px; }
  .sim-overview { gap: 10px; margin-bottom: 17px; }
  .sim-mini { padding: 13px 15px; }
  .sim-mini-balance { margin: 10px 0; }
  .sim-mini-balance > strong { font-size: 26px; }
  .sim-mini > .sim-mini-meta { gap: 5px 14px; font-size: 10px; }
  .overview-sim-heading p { font-size: 10px; }
  .settings-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 17px; padding-bottom: 12px; scrollbar-width: thin; }
  .settings-tabs [role="tab"] { font-size: 11px; padding: 8px 0; }
  :is(#clients, #history, #resellers) td { padding: 5px 7px; }
  :is(#clients, #history, #resellers) th { padding: 8px 7px; }
  :is(#clients, #history, #resellers) td button { min-height: 27px; }
}

/* Keep the entire SIM editor reachable, including the optional new number. */
#simDialog {
  width: min(720px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 24px;
}
#simDialog .dialog-heading { margin-bottom: 20px; }
#simDialog .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
#simDialog .form-grid label, #simDialog input, #simDialog select { min-width: 0; }
#simDialog .form-grid label { line-height: 1.4; }
#simDialog #newSimNumberFields { margin-top: 15px; }
#simDialog .form-actions { gap: 10px; margin-top: 18px; flex-wrap: wrap; }
#simDialog #simError { white-space: normal; overflow-wrap: anywhere; }
#simDialog #selectedSimIccid { color: var(--amber); }
#simDialog #fBalance { color: var(--blue); }
#simDialog #fCredit { color: var(--green); }
#simDialog #fLimit { color: var(--amber); }
#simDialog #fSimNumberSelect { color: var(--green); }
@media (max-width: 540px) {
  #simDialog { padding: 18px 16px; }
  #simDialog .dialog-heading { margin-bottom: 17px; }
  #simDialog .dialog-heading h2 { font-size: 20px; }
  #simDialog .form-grid { gap: 12px; }
  #simDialog input, #simDialog select { font-size: 13px; padding: 9px 8px; }
  #simDialog .form-grid label { font-size: 11px; }
  #simDialog .form-actions button { padding: 10px; font-size: 12px; }
  #simDialog .form-actions .primary { flex: 1; }
}
@media (max-width: 350px) {
  #simDialog .form-grid { grid-template-columns: 1fr; }
}

/* Follow the usable viewport when a mobile keyboard covers the screen. */
#simDialog {
  position: fixed;
  inset: auto;
  left: 50%;
  top: calc(var(--sim-viewport-top, 0px) + var(--sim-viewport-height, 100dvh) / 2);
  transform: translate(-50%, -50%);
  margin: 0;
  max-height: calc(var(--sim-viewport-height, 100dvh) - 24px);
}
#simDialog #simError.success { color: var(--green); }
#simDialog .form-actions { padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 540px) {
  #simDialog input, #simDialog select { font-size: 16px; }
}

/* Token dialog follows the SIM editor layout and keeps the full token visible. */
#tokenDialog {
  width: min(720px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  padding: 24px;
}
#tokenDialog .dialog-heading { margin-bottom: 20px; }
#tokenDialog label { min-width: 0; }
#tokenDialog #firstTokenValue {
  min-width: 0;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: .02em;
}
#tokenDialog .form-actions { gap: 10px; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 540px) {
  #tokenDialog { padding: 18px 16px; }
  #tokenDialog .dialog-heading h2 { font-size: 20px; }
  #tokenDialog #firstTokenValue { font-size: 12px; }
  #tokenDialog .form-actions .primary { flex: 1; }
}
.history-delete-question { color: var(--red); font-size: 10px; font-weight: 700; }
.history-load-more-wrap { display: grid; justify-items: center; gap: 7px; padding: 16px 0 4px; color: var(--muted); font-size: 10px; }
.history-load-more { min-width: 104px; border: 1px solid #303030; border-radius: 6px; padding: 7px 14px; color: var(--blue); background: #090909; font-size: 11px; font-weight: 700; }
.history-load-more:hover { border-color: var(--blue); background: #101010; }
.customer-profile { margin-top: 10px; padding: 14px; background: #070707; border-left: 2px solid var(--blue); white-space: normal; }
.customer-profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.customer-profile-head h3 { margin: 3px 0; color: #f2f3f5; font-size: 15px; }
.customer-profile-head p { margin: 0; color: var(--green); font-size: 11px; }
.customer-profile-head .quiet { padding: 4px 7px; color: var(--muted); }
.customer-profile-stats { display: grid; grid-template-columns: repeat(4,minmax(105px,1fr)); gap: 7px; margin: 14px 0 8px; }
.customer-profile-stats span { display: grid; gap: 3px; padding: 9px; background: #0c0c0c; }
.customer-profile-stats small, .customer-profile-details { color: #9498a2; font-size: 10px; }
.customer-profile-stats strong { color: var(--green); font-size: 13px; }
.customer-profile-details { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 6px 0 13px; }
.customer-profile-details b { color: #d8dae0; font-weight: 600; }
.customer-growth { padding: 11px 0; }
.customer-growth > div:first-child { display: grid; gap: 2px; color: #d8dae0; font-size: 11px; }
.customer-growth > div:first-child small { color: #858994; font-size: 10px; }
.customer-growth-chart { width: min(100%,420px); height: 106px; display: block; margin-top: 8px; overflow: visible; }
.customer-growth-chart path { stroke: #252525; stroke-width: 1; fill: none; }
.customer-growth-chart polyline { stroke: var(--blue); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.customer-growth-chart circle { fill: var(--green); }
.customer-chart-caption { width: min(100%,420px); display: flex; justify-content: space-between; gap: 8px; color: #858994; font-size: 9px; }
.customer-chart-caption strong { color: var(--blue); font-size: 10px; }
.customer-receipts { display: grid; gap: 7px; margin-top: 12px; color: #daddE4; font-size: 11px; }
.customer-receipt-list { max-height: 280px; overflow: auto; display: grid; gap: 1px; }
.customer-receipt-list > div { display: grid; grid-template-columns: 70px 70px minmax(150px,1fr) minmax(200px,1.2fr); gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid #151515; }
.customer-receipt-list small { color: #858994; font-size: 10px; }
.customer-profile-empty { color: #858994; font-size: 10px; }
@media (max-width:680px) { .customer-profile-stats { grid-template-columns: repeat(2,minmax(110px,1fr)); } .customer-receipt-list > div { grid-template-columns: 68px 1fr; } .customer-receipt-list > div > small { grid-column: 1 / -1; } }