/* Elements that set display (flex, grid) would otherwise ignore the hidden attribute. */
[hidden] {
  display: none !important;
}

:root {
  /* Colours */
  --bg: #0b1020;
  --panel: #111a2f;
  --panel-soft: #16233f;
  --text: #edf3ff;
  --muted: #9aa8c7;
  --primary: #5cc8ff;
  --on-primary: #071120;
  --violet: #8d7dff;
  --success: #31d0aa;
  --warning: #ffbf69;
  --danger: #ff5d73;
  --border: rgba(255, 255, 255, 0.08);
  /* The same colours as r, g, b, for see-through shades: rgba(var(--primary-rgb), 0.15). */
  --primary-rgb: 92, 200, 255;
  --success-rgb: 49, 208, 170;
  --warning-rgb: 255, 191, 105;
  --danger-rgb: 255, 93, 115;
  --muted-rgb: 154, 168, 199;
  --violet-rgb: 141, 125, 255;
  --panel-rgb: 17, 26, 47;
  --on-primary-rgb: 7, 17, 32;
  --light-rgb: 255, 255, 255;
  --shadow-rgb: 0, 0, 0;
  --chrome-rgb: 9, 13, 25;
  /* Chart series: categorical slots 1-2, validated for CVD and contrast on --panel. */
  --series-real: #3987e5;
  --series-cdn: #d95926;
  --series-3: #199e70;

  /* Corners */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-pill: 999px;

  /* Text sizes */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;

  /* Spacing (gaps, padding, margins): steps of 2px */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 18px;
  --space-10: 20px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', 'Noto Kufi Arabic', sans-serif;
  background: radial-gradient(circle at top, #122444 0%, var(--bg) 48%);
  color: var(--text);
}

button, input, select, textarea {
  font: inherit;
}

.shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: rgba(var(--chrome-rgb), 0.92);
  border-inline-end: 1px solid var(--border);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary), var(--violet));
  color: var(--on-primary);
  font-weight: 800;
}

.brand h1,
.topbar h2,
.panel h3 {
  margin: 0;
}

.brand p,
.eyebrow,
.panel-header span,
.client-meta,
.muted {
  color: var(--muted);
}

/* The menu scrolls on its own; the user box stays at the bottom. */
.nav {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-inline: calc(-1 * var(--space-4));
  padding-inline: var(--space-4);
}

.nav-item {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(var(--light-rgb), 0.78);
  border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-7);
  text-align: start;
  font: inherit;
  font-size: var(--text-md);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-item:hover {
  background: rgba(var(--light-rgb), 0.05);
  color: var(--text);
}

/* The page you are on: a tinted row with an accent bar at its start. */
.nav-item.active {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}

[dir="rtl"] .nav-item.active {
  box-shadow: inset -3px 0 0 var(--primary);
}

.content {
  padding: 32px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.eyebrow {
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
}

.status-pill {
  background: rgba(var(--success-rgb), 0.12);
  color: var(--success);
  border: 1px solid rgba(var(--success-rgb), 0.35);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-9);
  margin-bottom: 28px;
}

.summary-card,
.panel {
  background: rgba(var(--panel-rgb), 0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: 0 24px 48px rgba(var(--shadow-rgb), 0.2);
}

.summary-card {
  padding: var(--space-10);
}

.summary-label {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  margin-bottom: 18px;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.summary-value {
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
}

.summary-footnote {
  margin-top: 10px;
  font-size: var(--text-sm);
  color: var(--muted);
}

.panel {
  padding: var(--space-10);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.panel-header span {
  font-size: var(--text-sm);
}

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

th, td {
  text-align: start;
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

tbody:not(.static-rows) tr {
  cursor: pointer;
  transition: background 0.18s ease;
}

tbody:not(.static-rows) tr:hover {
  background: rgba(var(--light-rgb), 0.02);
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.badge.online {
  background: rgba(var(--success-rgb), 0.12);
  color: var(--success);
}

.badge.offline {
  background: rgba(var(--danger-rgb), 0.12);
  color: var(--danger);
}

.client-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: var(--space-4) var(--space-9);
  font-size: var(--text-base);
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-8);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.badge.idle {
  background: rgba(var(--muted-rgb), 0.12);
  color: var(--muted);
}

.status-pill.warning {
  background: rgba(var(--warning-rgb), 0.12);
  color: var(--warning);
  border-color: rgba(var(--warning-rgb), 0.35);
}

.small {
  font-size: var(--text-sm);
}

.error-text {
  color: var(--danger);
}

.table-scroll {
  overflow-x: auto;
}

#client-table-body td,
#alert-table-body td,
#router-table-body td {
  white-space: nowrap;
}

.client-link {
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(var(--primary-rgb), 0.4);
  text-underline-offset: 3px;
}

tbody:not(.static-rows) tr:hover .client-link {
  color: var(--primary);
}

/* Consumption levels use the status colors, always with a text label. */
.badge.level-full {
  background: rgba(var(--danger-rgb), 0.14);
  color: var(--danger);
}

.badge.level-middle {
  background: rgba(var(--warning-rgb), 0.14);
  color: var(--warning);
}

.badge.level-normal {
  background: rgba(var(--success-rgb), 0.12);
  color: var(--success);
}

.badge.level-unlimited {
  background: rgba(var(--violet-rgb), 0.16);
  color: #b3a8ff;
}

.summary-card.level-unlimited {
  border-top: 3px solid var(--violet);
}

.section-title {
  margin: var(--space-4) 0 var(--space-6);
  font-size: 1rem;
}

.stat-grid-6 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.card-button {
  text-align: start;
  color: inherit;
  cursor: pointer;
}

.card-button:hover {
  border-color: rgba(var(--primary-rgb), 0.4);
}

.summary-card.level-full {
  border-top: 3px solid var(--danger);
}

.summary-card.level-middle {
  border-top: 3px solid var(--warning);
}

.summary-card.level-normal {
  border-top: 3px solid var(--success);
}

.stacked-panel {
  margin-bottom: 18px;
}

.usage-rules {
  margin: -14px 0 24px;
  line-height: 1.5;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-count {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #1a0710;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
}

.nav-count[hidden] {
  display: none;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: 14px;
}

.toolbar input {
  flex: 1 1 220px;
}

input,
select,
textarea {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--text-md);
}

.pager div {
  display: flex;
  gap: var(--space-4);
}

.btn {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-7);
  font-weight: 600;
  cursor: pointer;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn.primary {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: rgba(var(--primary-rgb), 0.4);
  color: var(--primary);
}

.btn.small-btn {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}

.btn.danger {
  background: rgba(var(--danger-rgb), 0.12);
  border-color: rgba(var(--danger-rgb), 0.4);
  color: var(--danger);
}

.badges {
  display: flex;
  gap: var(--space-3);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.diag-summary {
  margin: var(--space-2) 0;
  font-size: var(--text-base);
}

table.compact th,
table.compact td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-md);
}

.toast {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 20px;
  max-width: 420px;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(var(--shadow-rgb), 0.35);
}

.toast.success {
  border-color: rgba(var(--success-rgb), 0.5);
}

.toast.error {
  border-color: rgba(var(--danger-rgb), 0.5);
  color: var(--danger);
}

.toast.warning {
  border-color: rgba(var(--warning-rgb), 0.5);
  color: var(--warning);
}

.client-meta.single {
  grid-template-columns: 1fr;
}

.quota {
  display: grid;
  gap: var(--space-3);
  margin-top: 10px;
  font-size: var(--text-base);
}

.quota-label {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}

.quota-label strong {
  color: var(--text);
}

.quota-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--panel-soft);
  overflow: hidden;
}

.quota-fill {
  height: 100%;
  border-radius: var(--radius-pill);
}

.quota-fill.ok {
  background: var(--success);
}

.quota-fill.warning {
  background: var(--warning);
}

.quota-fill.danger {
  background: var(--danger);
}

.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.traffic-status {
  margin-inline-start: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.chart-legend {
  display: flex;
  gap: var(--space-8);
  font-size: var(--text-md);
  color: var(--muted);
}

.legend-item,
.tooltip-row,
.direction-values span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.legend-item strong,
.tooltip-row strong,
.direction-values strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.dash-key {
  display: inline-block;
  width: 16px;
  border-top: 2px dashed var(--text);
  opacity: 0.7;
}

.chart-wrap {
  /* Charts and their time axis always read left (past) to right (now), in Arabic too. */
  position: relative;
  min-height: 200px;
  touch-action: none;
  direction: ltr;
}

.chart-wrap svg {
  display: block;
}

.chart-wrap .grid {
  stroke: rgba(var(--light-rgb), 0.06);
}

.chart-wrap .baseline {
  stroke: rgba(var(--light-rgb), 0.18);
}

.chart-wrap .axis-label {
  fill: var(--muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.chart-wrap .series-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-wrap .series-area {
  fill-opacity: 0.45;
}

.chart-wrap .limit-line {
  fill: none;
  stroke: var(--text);
  stroke-opacity: 0.7;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.chart-wrap .limit-label {
  fill: var(--text);
  font-size: var(--text-xs);
  font-weight: 600;
}

.chart-wrap .crosshair {
  stroke: rgba(var(--light-rgb), 0.35);
  stroke-width: 1;
}

.chart-wrap .crosshair-dot {
  stroke: var(--panel);
  stroke-width: 2;
}

.chart-tooltip {
  position: absolute;
  top: 8px;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(var(--shadow-rgb), 0.35);
  font-size: var(--text-sm);
  color: var(--muted);
  pointer-events: none;
  white-space: nowrap;
}

.chart-tooltip[hidden] {
  display: none;
}

.tooltip-time {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Boards ---------- */

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.row-actions {
  text-align: end;
  white-space: nowrap;
}

.board-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
  padding: var(--space-8);
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(var(--light-rgb), 0.02);
}

.board-form[hidden] {
  display: none;
}

.board-form label {
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-md);
  color: var(--muted);
}

.board-form .check {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.board-form-checks,
.board-form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

/* ---------- Client window ---------- */

.client-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.client-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  margin-bottom: 20px;
}

.client-header h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.client-stack {
  display: grid;
  gap: var(--space-9);
}

/* Two columns that stack independently, so a long panel on one side never leaves gaps on the other. */
.client-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-9);
  align-items: start;
}

.client-col {
  display: grid;
  gap: var(--space-9);
  min-width: 0;
}

/* Wide tables scroll inside their panel instead of stretching the column. */
.client-col > * {
  min-width: 0;
}

.diagnostics-panel .actions {
  margin-bottom: 0;
}

.panel-title {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.panel-title.spaced {
  margin-top: 20px;
}

.chart-head h3 {
  font-size: 1rem;
}

.chart-head .chart-legend {
  flex-wrap: wrap;
}

.direction {
  margin-top: 16px;
}

.direction-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin-bottom: 6px;
}

.direction-head h5 {
  margin: 0;
  font-size: var(--text-md);
}

.direction-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  font-size: var(--text-md);
  color: var(--muted);
}

.full-now {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
}

.alert-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-md);
}

.panel-title .small {
  text-transform: none;
  letter-spacing: 0;
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-7);
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
}

.filter-tab.active {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.4);
  color: var(--text);
}

.tab-count {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: rgba(var(--light-rgb), 0.08);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.panel-note {
  margin: -6px 0 12px;
  line-height: 1.5;
}

.cell-quota {
  display: grid;
  gap: var(--space-2);
  min-width: 150px;
  white-space: nowrap;
}

#pr-body td {
  white-space: nowrap;
}

.meta-row span {
  flex-shrink: 0;
}

.meta-row strong {
  min-width: 0;
  text-align: end;
  overflow-wrap: anywhere;
}

.unlimited-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: 14px;
}

.unlimited-control:empty {
  display: none;
}

.unlimited-state {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-inline-end: auto;
  font-size: var(--text-base);
}

.panel-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-6);
}

.field-picker {
  margin-bottom: 14px;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(var(--light-rgb), 0.02);
}

.field-picker[hidden] {
  display: none;
}

.picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: 10px;
}

.picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-3) var(--space-7);
  font-size: var(--text-md);
}

.picker-list .check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

#diagnostics:empty {
  display: none;
}

#diagnostics {
  margin-top: 12px;
}

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

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

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

@media (max-width: 620px) {
  .content,
  .client-page {
    padding: var(--space-9) var(--space-8);
  }

  .client-columns {
    grid-template-columns: 1fr;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
}

/* ---------- Right-to-left ---------- */

[dir="rtl"] .eyebrow,
[dir="rtl"] .summary-label,
[dir="rtl"] th,
[dir="rtl"] .section h5,
[dir="rtl"] .panel-title {
  letter-spacing: 0;
}

/* ---------- Sign-in ---------- */

.auth-page {
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.auth-card {
  width: min(420px, 100%);
  display: grid;
  gap: var(--space-9);
}

.auth-card .brand {
  margin-bottom: 0;
}

.auth-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
}

.auth-card h2 {
  margin: 0;
  font-size: 1.25rem;
}

.auth-form {
  display: grid;
  gap: var(--space-7);
}

.auth-form[hidden] {
  display: none;
}

.auth-form label {
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--muted);
}

.auth-form .btn {
  padding: 11px 14px;
}

.error-text[hidden] {
  display: none;
}

/* ---------- Signed-in user ---------- */

.user-box {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-2);
}

.user-name {
  font-weight: 700;
}

.user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: 8px;
}

a.btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* ---------- Users & audit ---------- */

.notice {
  display: grid;
  gap: var(--space-3);
  margin-bottom: 16px;
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  background: rgba(var(--primary-rgb), 0.08);
}

.notice[hidden] {
  display: none;
}

.temp-password {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-lg);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-xs);
  background: var(--panel-soft);
  user-select: all;
}

.user-form .perm-area {
  grid-column: 1 / -1;
}

.perm-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

.perm-group {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.perm-group legend {
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted);
}

.perm-group .check {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-md);
  color: var(--text);
}

#user-table-body td {
  white-space: nowrap;
}

.audit-details {
  max-width: 420px;
  font-size: var(--text-sm);
  color: var(--muted);
  overflow-wrap: anywhere;
}

tr.audit-warning td {
  background: rgba(var(--danger-rgb), 0.06);
}

/* ---------- Developer page ---------- */

.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-9);
  align-items: start;
}

.dev-card.dev-bad {
  border-color: rgba(var(--danger-rgb), 0.5);
}

/* ---------- Billing ---------- */

.nav-group {
  margin: var(--space-7) var(--space-2) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.nav-group:first-child {
  margin-top: 0;
}

[dir="rtl"] .nav-group {
  letter-spacing: 0;
}

th.num,
td.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.compact-grid {
  margin-bottom: 16px;
}

.compact-grid .summary-value {
  font-size: 1.4rem;
}

/* Names and addresses wrap; amounts, statuses, profiles and dates stay on one line. */
#bills-body td,
#customers-body td {
  min-width: 70px;
}

/* Profile columns stay on one line; addresses get room to wrap. */
#bills-body td:nth-child(7),
#customers-body td:nth-child(6) {
  white-space: nowrap;
}

#bills-body td:nth-child(8),
#customers-body td:nth-child(8) {
  min-width: 160px;
}

#bills-body .badge,
#customers-body .badge,
#billing .badge {
  white-space: nowrap;
}

#billing table.compact td {
  white-space: nowrap;
}

.owed {
  color: var(--danger);
}

.owes-now {
  margin: 0 0 var(--space-6);
  font-size: 15px;
}

.owes-now strong {
  font-size: 1.3rem;
  color: var(--danger);
}

.owes-now.paid-up {
  color: var(--success);
  font-weight: 600;
}

/* ---------- Collector app (collect.html), phone first ---------- */

.collect-page {
  min-height: 100dvh;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

.collect-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.collect-who {
  display: grid;
  min-width: 0;
}

.collect-who strong,
.collect-who span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collect-header-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

.collect-main {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
}

.collect-main h2 {
  font-size: var(--text-xl);
  margin: var(--space-2) 0 var(--space-6);
}

.collect-banner {
  margin: 0;
  padding: var(--space-5) var(--space-8);
  font-size: var(--text-base);
  background: var(--panel-soft);
  border-bottom: 1px solid var(--border);
}

.collect-banner.warn {
  color: var(--warning);
}
.collect-banner.error {
  color: var(--danger);
}
.collect-banner.ok {
  color: var(--success);
  border: 1px solid rgba(var(--success-rgb), 0.4);
  border-radius: var(--radius-sm);
}

.collect-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: 12px;
}

.collect-card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--border);
  min-width: 0;
}

.collect-card strong {
  font-size: 17px;
  overflow-wrap: anywhere;
}

.collect-card.accent {
  border-color: rgba(var(--primary-rgb), 0.45);
}

.collect-search {
  display: grid;
  gap: var(--space-4);
  margin-bottom: 10px;
}

.collect-search input[type="search"] {
  width: 100%;
  font-size: var(--text-lg);
  padding: var(--space-6);
  box-sizing: border-box;
}

.collect-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-base);
}

.collect-toggle input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.collect-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.collect-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: start;
  font: inherit;
  box-sizing: border-box;
}

button.collect-item {
  cursor: pointer;
}
button.collect-item:active {
  background: var(--panel-soft);
}

.collect-item-main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.collect-item-main > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collect-item-amount {
  display: grid;
  justify-items: end;
  gap: var(--space-2);
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--text-base);
}

.collect-empty {
  padding: var(--space-8);
  text-align: center;
}

.collect-more {
  width: 100%;
  margin-top: 10px;
  padding: var(--space-6);
}

.collect-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--panel);
  border-top: 1px solid var(--border);
}

.collect-nav button {
  padding: var(--space-7) var(--space-2);
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.collect-nav button.active {
  color: var(--primary);
}

body.sheet-open {
  overflow: hidden;
}

.collect-sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.collect-sheet-head {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.collect-sheet-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collect-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
  display: grid;
  align-content: start;
  gap: var(--space-6);
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.collect-details {
  display: grid;
  gap: var(--space-4);
}

.collect-detail {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  font-size: var(--text-base);
}

.collect-detail > span:last-child {
  text-align: end;
  min-width: 0;
  overflow-wrap: anywhere;
}

.collect-form {
  display: grid;
  gap: var(--space-6);
}

.collect-form label {
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-base);
}

.collect-form label.collect-toggle {
  display: flex;
}

.collect-form input:not([type="checkbox"]),
.collect-form select {
  width: 100%;
  font-size: var(--text-xl);
  padding: var(--space-6);
  box-sizing: border-box;
}

.collect-due {
  display: grid;
  gap: var(--space-1);
}

.collect-due strong {
  font-size: var(--text-2xl);
  color: var(--warning);
}

.collect-quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.collect-remaining {
  margin: 0;
  font-weight: 600;
}

.collect-remaining.good {
  color: var(--success);
}
.collect-remaining.bad {
  color: var(--danger);
}

.collect-submit {
  padding: var(--space-7);
  font-size: var(--text-lg);
}

.collect-slip {
  display: grid;
  gap: var(--space-6);
}

.collect-slip-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.collect-slip-actions .btn {
  padding: var(--space-7);
}

.collect-slip-preview {
  width: 100%;
  max-width: 360px;
  justify-self: center;
  background: #fff;
  border-radius: var(--radius-xs);
}

.collect-page .toast {
  inset-inline: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  max-width: none;
  z-index: 20;
}

.collect-detail a {
  color: var(--primary);
}

/* ---------- Collectors' cash (dashboard) ---------- */

a.nav-item {
  text-decoration: none;
}

#collectors-body tr {
  cursor: pointer;
}

#collectors-body tr.selected td {
  background: rgba(var(--primary-rgb), 0.08);
}

.handover-form {
  align-items: center;
  flex-wrap: wrap;
  margin: var(--space-8) 0;
}

.handover-form input {
  min-width: 140px;
  flex: 1;
}

.collector-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-10);
}

.collector-columns > * {
  min-width: 0;
}

.collector-columns h4 {
  margin: 0 0 var(--space-4);
}

tr.voided td {
  opacity: 0.55;
  text-decoration: line-through;
}

tr.voided td:nth-child(3) {
  text-decoration: none;
}

#collections-body tr {
  cursor: pointer;
}

/* ---------- Billing overview ---------- */

.bo-toolbar {
  align-items: center;
  margin-bottom: 16px;
}

.bo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: 16px;
}

.bo-grid > .panel {
  min-width: 0;
}

.bo-grid h3 {
  margin: 0 0 var(--space-2);
  font-size: 15px;
}

.bo-wide {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .bo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bchart {
  position: relative;
  width: 100%;
  margin-top: 8px;
}

.bchart svg {
  display: block;
  overflow: visible;
}

.bchart-grid {
  stroke: var(--border);
  stroke-width: 1;
}

.bchart-axis {
  fill: var(--muted);
  font-size: var(--text-xs);
  direction: ltr;
}

.bchart-cross {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.chart-tip {
  position: absolute;
  z-index: 3;
  min-width: 160px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.35);
  font-size: var(--text-sm);
  pointer-events: none;
  display: grid;
  gap: var(--space-2);
}

.chart-tip-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.chart-tip-row strong {
  margin-inline-start: auto;
  padding-inline-start: 12px;
}

.hbars {
  display: grid;
  gap: var(--space-4);
  margin-top: 10px;
}

.hbar {
  display: grid;
  grid-template-columns: minmax(80px, 160px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--text-md);
}

.hbar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hbar-track {
  height: 10px;
  border-radius: 5px;
  background: var(--panel-soft);
  overflow: hidden;
}

.hbar-fill {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
}

[dir="rtl"] .hbar-fill {
  border-radius: 4px 0 0 4px;
}

.hbar-value {
  font-weight: 600;
  white-space: nowrap;
}

.bo-heat td,
.bo-heat th {
  white-space: nowrap;
}

/* ---------- Connections ---------- */

.conn-intro {
  margin: 0 0 var(--space-8);
  max-width: 900px;
}

#view-connections > .panel + .panel {
  margin-top: 16px;
}

.conn-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.conn-card {
  padding: var(--space-7);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  min-width: 0;
}

.conn-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.conn-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.conn-accounts {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.conn-accounts li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.conn-accounts li .btn {
  margin-inline-start: auto;
}

.board-form > p {
  grid-column: 1 / -1;
  margin: 0;
}

/* ---------- Resellers ---------- */

.rs-toolbar {
  align-items: center;
  margin-bottom: 12px;
}

#rs-body tr {
  cursor: pointer;
}

#rs-body tr.selected td {
  background: rgba(var(--primary-rgb), 0.08);
}

#rs-body tr.rs-own td {
  opacity: 0.7;
}

#view-resellers > .panel {
  margin-top: 16px;
}

.rs-forms {
  margin: var(--space-8) 0;
}

.rs-settings summary {
  cursor: pointer;
  color: var(--muted);
  margin: var(--space-4) 0;
}

.rs-credit {
  color: var(--success);
}

#rs-customers tr {
  cursor: pointer;
}

/* ---------- NetSub ↔ Radius ---------- */

.cs-issues {
  flex-wrap: wrap;
  margin: var(--space-6) 0;
}

.cs-issues .filter-tab strong {
  margin-inline-start: 4px;
}

.cs-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-inline-end: 6px;
  background: var(--muted);
}

.cs-dot.level-full {
  background: var(--danger);
}
.cs-dot.level-middle {
  background: var(--warning);
}

#cs-body tr {
  cursor: pointer;
}

/* ---------- Monthly invoicing ---------- */
.inv-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-8);
}

.inv-facts {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

.inv-facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

.inv-facts dt {
  color: var(--muted);
}
.inv-facts dd {
  margin: 0;
  font-weight: 600;
  text-align: end;
}

.inv-warning {
  color: var(--warning, #f5b455);
}

/* ---------- New customers ---------- */
.ob-form {
  margin-bottom: 16px;
}
.ob-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}
.ob-grid label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-md);
  color: var(--muted);
}
.ob-grid input, .ob-grid select {
  width: 100%;
}
.ob-first {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
}
.ob-first legend {
  color: var(--muted);
  font-size: var(--text-md);
  padding: 0 var(--space-2);
}
.ob-first .radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  font-size: var(--text-base);
  white-space: nowrap;
}
.ob-first input[type='radio'] {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.ob-first-amount {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  width: 100%;
}
.ob-first-amount > * {
  flex: 1 1 160px;
  width: auto;
  min-width: 0;
}
.ob-first-amount > select {
  flex: 0 0 90px;
}
.ob-note {
  grid-column: 1 / -1;
}
.ob-buttons {
  display: flex;
  gap: var(--space-4);
  margin-top: 14px;
  flex-wrap: wrap;
}
/* ---------- Calls ---------- */
.calls-find input {
  flex: 1 1 320px;
  font-size: var(--text-lg);
}
.calls-results {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.calls-result {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-6);
  text-align: start;
  background: var(--panel, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  color: inherit;
  cursor: pointer;
}
.calls-result > span:nth-child(3) {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
}
.calls-noresult {
  padding: var(--space-4) var(--space-2);
}
.calls-repeat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.calls-repeat-item {
  display: grid;
  gap: var(--space-1);
  text-align: start;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-6);
}
.calls-note {
  max-width: 320px;
}
.call-form {
  display: grid;
  gap: var(--space-4);
  margin-bottom: 12px;
}
.call-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.call-form-row > * {
  flex: 1 1 140px;
}
.call-form textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
}
.call-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
.call-list li {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.call-list li.voided {
  opacity: 0.55;
}
.call-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}
.call-note {
  margin: var(--space-3) 0 var(--space-1);
  white-space: pre-wrap;
}
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.link-btn.small {
  font-size: var(--text-sm);
}

/* ---------- Tickets ---------- */
tr.clickable {
  cursor: pointer;
}
tr.clickable:hover td {
  background: var(--panel-soft);
}
tr.voided {
  opacity: 0.5;
}
.strike {
  text-decoration: line-through;
}
.tk-form {
  margin-bottom: 16px;
}
.tk-customer {
  position: relative;
}
.tk-found {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 5;
  margin-top: 4px;
  background: var(--panel);
  border-radius: var(--radius-sm);
}
.tk-head .panel-header span {
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.tk-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-6) var(--space-9);
  margin: var(--space-4) 0 var(--space-6);
}
.tk-facts > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.tk-facts strong {
  overflow-wrap: anywhere;
}
.tk-facts select {
  width: 100%;
}
.tk-resolution {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin: 0 0 var(--space-3);
}
.tk-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 960px) { .tk-columns { grid-template-columns: 1fr; } }
.tk-thread {
  margin-bottom: 12px;
}
.tk-entry.status .call-head > span:first-child, .tk-entry.assign .call-head > span:first-child, .tk-entry.charge .call-head > span:first-child, .tk-entry.system .call-head > span:first-child {
  font-size: var(--text-md);
  color: var(--muted);
}
.tk-charge-form {
  display: grid;
  gap: var(--space-5);
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.tk-mode {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.tk-charge-form[data-mode="list"] .tk-mode [data-mode="list"], .tk-charge-form[data-mode="outside"] .tk-mode [data-mode="outside"] {
  background: var(--panel-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.tk-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5);
}
.tk-charge-form[data-mode="list"] .tk-outside-fields, .tk-charge-form[data-mode="outside"] .tk-list-fields {
  display: none;
}
.tk-charge-form label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
  min-width: 0;
}
.tk-charge-form label input, .tk-charge-form label select {
  width: 100%;
  min-width: 0;
  color: var(--text);
  font-size: var(--text-base);
}
.tk-wide {
  grid-column: 1 / -1;
}
.tk-charge-hint {
  width: 100%;
  margin: 0;
}

/* ---------- Maintenance ---------- */
.mt-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-6);
}
.mt-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-7);
  display: grid;
  gap: var(--space-3);
}
.mt-card h4 {
  margin: 0;
}
.mt-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-md);
}
.num-input {
  width: 110px;
}
#mt-items input[name="name"], #mt-topics input[name="name"] {
  width: 100%;
  min-width: 160px;
}
.tm-handover {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  flex-wrap: wrap;
}

#view-ticketMoney a, #view-maintenance a, #view-cashbook a, #ticket-list a {
  color: var(--primary);
}

/* ---------- Menu sections ---------- */

.nav-section {
  display: grid;
  gap: var(--space-2);
}
.nav-section .nav-group {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  margin: 0;
  padding: var(--space-6) var(--space-5);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: start;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-section .nav-group:hover {
  background: rgba(var(--light-rgb), 0.04);
  color: var(--text);
}
.nav-section.open .nav-group {
  color: var(--text);
}
.nav-section .nav-group > span:first-of-type {
  flex: 1;
}
/* Each group's line icon. */
.nav-icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.nav-section.open .nav-icon {
  color: var(--primary);
  opacity: 1;
}
/* A subgroup: a small heading over its pages; hidden when none of its pages are allowed. */
.nav-subgroup {
  display: grid;
  gap: var(--space-1);
}
.nav-subgroup:not(:has(.nav-item:not([hidden]))) {
  display: none;
}
.nav-sub {
  padding: var(--space-5) var(--space-7) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--muted-rgb), 0.75);
}
[dir="rtl"] .nav-sub {
  letter-spacing: 0;
}
.nav-section-count {
  font-size: var(--text-xs);
  letter-spacing: 0;
}
.nav-chevron {
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex: none;
}
[dir="rtl"] .nav-chevron {
  transform: rotate(45deg);
}
.nav-section.open .nav-chevron {
  transform: rotate(45deg);
}
[dir="rtl"] .nav-section.open .nav-chevron {
  transform: rotate(-45deg);
}
.nav-items {
  display: none;
  gap: var(--space-1);
  padding-bottom: var(--space-5);
  padding-inline-start: var(--space-5);
  margin-inline-start: var(--space-7);
  border-inline-start: 1px solid var(--border);
}
.nav-section.open .nav-items {
  display: grid;
}
.nav-items .nav-item {
  padding: var(--space-5) var(--space-7);
}

/* ---------- Customer page ---------- */

.cp {
  max-width: 1240px;
  display: grid;
  gap: var(--space-8);
}
.cp-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr);
  gap: 18px 28px;
  align-items: start;
  border-top: 3px solid var(--primary);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--violet-rgb), 0.05) 45%, transparent), var(--panel);
}
.cp-identity {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  min-width: 0;
}
.cp-avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-2xl);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--violet));
  color: var(--on-primary);
  font-weight: 800;
  font-size: 22px;
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.25);
}
.cp-who {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.cp-who h2 {
  margin: 0;
  font-size: var(--text-2xl);
  overflow-wrap: anywhere;
}
.cp-fullname {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-lg);
}
.cp-fullname:empty {
  display: none;
}
.cp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cp-chips:empty {
  display: none;
}
.cp-board {
  margin: 0;
}
.cp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-6) var(--space-9);
  margin: 0;
}
.cp-facts div {
  min-width: 0;
}
.cp-facts dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 3px;
}
[dir="rtl"] .cp-facts dt {
  letter-spacing: 0;
  font-size: var(--text-sm);
}
.cp-facts dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.cp-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.cp-actions .btn {
  text-decoration: none;
}
.cp-spacer {
  flex: 1;
}
.cp-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-3);
  background: rgba(var(--chrome-rgb), 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.cp-tabs button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cp-tabs button:hover {
  color: var(--text);
  background: var(--panel-soft);
}
.cp-tabs button.active {
  color: var(--on-primary);
  background: var(--primary);
}
.cp-tabs button[hidden] {
  display: none;
}
.cp-tab-count:empty {
  display: none;
}
.cp-tab-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(var(--light-rgb), 0.12);
  font-size: var(--text-sm);
  text-align: center;
}
.cp-tabs button.active .cp-tab-count {
  background: rgba(var(--on-primary-rgb), 0.18);
}
.cp-pane {
  display: grid;
  gap: var(--space-8);
  min-width: 0;
}
.cp-pane[hidden] {
  display: none;
}
.cp-directions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-9);
}
.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  align-items: start;
}
.cp-grid > *, .cp-pane > * {
  min-width: 0;
}
.cp-diag {
  border-color: rgba(var(--primary-rgb), 0.35);
}
@media (max-width: 900px) {
  .cp-hero {
    grid-template-columns: 1fr;
  }
  .cp-directions {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .cp-avatar {
    width: 52px;
    height: 52px;
    font-size: var(--text-xl);
    border-radius: var(--radius-lg);
  }
  .cp-who h2 {
    font-size: 20px;
  }
  .cp-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cp-actions .btn {
    flex: 1 1 auto;
  }
  .cp-spacer {
    display: none;
  }
}

#client-body {
  display: grid;
  gap: var(--space-8);
}

/* ---------- Continuous ping ---------- */
.ping-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-9);
  align-items: baseline;
  margin-bottom: 10px;
}
.ping-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  height: 70px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  overflow: hidden;
}
.ping-bar {
  flex: 1 1 0;
  max-width: 14px;
  min-width: 3px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
}
.ping-bar.lost {
  height: 100%;
  background: var(--danger);
  opacity: 0.6;
}
.ping-log {
  margin-top: 10px;
  max-height: 260px;
  overflow-y: auto;
}
.btn.active-action {
  border-color: var(--danger);
  color: var(--danger);
}

/* ---------- Connection history ---------- */
.ch-controls {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.ch-days {
  display: inline-flex;
  gap: var(--space-1);
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ch-days button {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-md);
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.ch-days button.active {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}
.ch-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0 var(--space-8);
}
.ch-card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
}
.ch-card span {
  font-size: var(--text-sm);
  color: var(--muted);
}
.ch-card strong {
  font-size: var(--text-xl);
}
.ch-card small {
  font-size: var(--text-sm);
  color: var(--muted);
}
.ch-card.warn {
  border-color: rgba(var(--warning-rgb), 0.5);
}
.ch-card.warn strong {
  color: var(--warning);
}
.ch-card.good strong {
  color: var(--success);
}
.ch-timeline {
  display: grid;
  gap: var(--space-2);
  margin-bottom: 14px;
}
.ch-row, .ch-axis {
  display: grid;
  grid-template-columns: 96px 1fr 34px;
  gap: var(--space-5);
  align-items: center;
}
.ch-label {
  font-size: var(--text-sm);
  color: var(--muted);
  white-space: nowrap;
}
.ch-track {
  position: relative;
  height: 16px;
  border-radius: 5px;
  background: rgba(var(--light-rgb), 0.04);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ch-seg {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 3px;
  background: var(--primary);
  opacity: 0.85;
}
.ch-seg.open {
  background: var(--success);
}
.ch-seg.short {
  background: var(--danger);
  opacity: 1;
  min-width: 3px;
}
.ch-count {
  font-size: var(--text-sm);
  text-align: end;
  color: var(--muted);
}
.ch-count.many {
  color: var(--warning);
  font-weight: 700;
}
.ch-hours {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
}
.ch-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-3) 0 0;
}
.ch-key {
  display: inline-block;
  width: 14px;
  height: 8px;
  border-radius: 2px;
  background: var(--primary);
}
.ch-key.short {
  background: var(--danger);
}
.ch-short-row td {
  color: var(--danger);
}
@media (max-width: 620px) { .ch-row, .ch-axis { grid-template-columns: 64px 1fr 26px; gap: var(--space-3); } .ch-controls { flex-wrap: wrap; } }

/* ---------- Cash book ---------- */
.cb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cb-balances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-6);
  margin-bottom: 16px;
}
.cb-pot {
  display: grid;
  gap: 3px;
  padding: var(--space-7) var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.cb-pot-name {
  font-size: var(--text-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
[dir="rtl"] .cb-pot-name {
  letter-spacing: 0;
}
.cb-pot strong {
  font-size: 19px;
}
.cb-pot.warn {
  border-color: rgba(var(--warning-rgb), 0.5);
}
.cb-pot.warn strong {
  color: var(--warning);
}
.cb-form {
  margin-bottom: 16px;
}
.cb-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  margin-bottom: 16px;
}
.cb-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.cb-line.total {
  border-bottom: 0;
  padding-top: 10px;
}
td.cb-out {
  color: var(--danger);
}
.cb-categories summary {
  cursor: pointer;
  font-weight: 600;
}
.cb-categories input[name="name"] {
  width: 100%;
  min-width: 180px;
}
.cp2-rate {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
}
.cp2-rate input {
  width: 110px;
}
.tk-own span {
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
  color: var(--text);
  font-size: var(--text-base);
}
.tk-own input[type="checkbox"] {
  width: auto;
  min-height: 0;
}

.cb-customer {
  position: relative;
}
.cb-picked {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--text);
}
.cb-picked[hidden] {
  display: none;
}

.cb-later {
  color: var(--warning);
}

.cp-notice {
  border-color: rgba(var(--warning-rgb), 0.45);
}
.cp-notice p {
  margin: var(--space-3) 0;
}
.cp-steps {
  margin: var(--space-3) 0 0;
  padding-inline-start: 20px;
  display: grid;
  gap: var(--space-2);
}

.be-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: end;
  padding: var(--space-3) 0;
}
.be-fields label {
  display: grid;
  gap: 3px;
  font-size: var(--text-sm);
  color: var(--muted);
}
.be-fields input {
  width: 120px;
}
.be-reason input {
  width: 220px;
}
.be-buttons {
  display: inline-flex;
  gap: var(--space-3);
}

/* The NetPulse logo goes home. */
.sidebar .brand {
  cursor: pointer;
  border-radius: var(--radius-md);
}
.sidebar .brand:hover .brand-mark {
  filter: brightness(1.1);
}
.sidebar .brand:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* ---------- Client window: the menu beside the customer's page ---------- */
.cp-shell {
  grid-template-columns: 240px minmax(0, 1fr);
}
.cp-shell .client-page {
  margin: 0;
  max-width: none;
  width: 100%;
}
.cp-shell .sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
@media (max-width: 980px) {
  .cp-shell {
    grid-template-columns: 1fr;
  }
  .cp-shell .sidebar {
    position: static;
    height: auto;
  }
}

/* ---------- Regions page ---------- */
.rg-add {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}
.rg-add input {
  min-width: 220px;
}
.rg-actions {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.rg-actions select {
  max-width: 200px;
}
.danger-link {
  color: var(--danger);
}

/* ---------- Charged by days (public/service-form.js) and the Periods ending page ---------- */
.sc-kinds {
  margin-bottom: 10px;
}
.sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-6);
  margin: var(--space-5) 0;
}
.sc-grid label, .sc-note {
  display: grid;
  gap: var(--space-2);
}
.sc-quote {
  margin: var(--space-3) 0;
}
.sc-quote p {
  margin: 0 0 var(--space-2);
  color: var(--text);
  font-weight: 600;
}
.sc-pieces {
  margin: 0;
  padding-inline-start: 18px;
}
.ob-period {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 8px;
}
.pe-radius-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-inline-start: 6px;
  border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: inherit; font-weight: 700; }
.pe-radius-link:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.pe-check {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
  font-size: 0.85em;
  white-space: nowrap;
}
.sc-grid select, .sc-grid input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.ob-first .ob-period {
  flex: 1 1 100%;
  width: 100%;
}
.pe-settings {
  margin-top: 16px;
}
.pe-settings-row {
  display: flex;
  gap: var(--space-6);
  align-items: flex-end;
  flex-wrap: wrap;
}
.pe-settings-row label {
  display: grid;
  gap: var(--space-2);
  max-width: 160px;
}
.dev-job-detail {
  max-width: 340px;
  overflow-wrap: anywhere;
}
.ob-price {
  display: flex;
  gap: var(--space-3);
}
.ob-price input {
  flex: 1 1 auto;
  min-width: 0;
}
.ob-price select {
  flex: 0 0 80px;
}

/* ---------- Take a payment: customers or resellers (office) ---------- */
.collect-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.collect-mode button {
  border: 0;
  border-radius: 9px;
  padding: var(--space-5);
  background: transparent;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
}
.collect-mode button.active {
  background: var(--primary);
  color: var(--on-primary);
}
.in-line {
  margin-bottom: 6px;
}
.in-line select {
  flex: 1 1 auto;
}
.in-line input {
  flex: 0 0 110px;
}

/* ---------- Dialogs (public/ui.js) ---------- */

.np-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(var(--shadow-rgb), 0.5);
}

.np-dialog::backdrop {
  background: rgba(5, 8, 18, 0.6);
}

.np-dialog-form {
  display: grid;
  gap: var(--space-7);
  padding: var(--space-10);
}

.np-dialog-form h3 {
  margin: 0;
  font-size: 17px;
}

.np-dialog-message {
  margin: 0;
  line-height: 1.5;
  white-space: pre-line;
}

.np-dialog-field input,
.np-dialog-field textarea {
  width: 100%;
}

.np-dialog-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--text-md);
}

.np-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-4);
}

/* ---------- Resellers each role sees (Users page) ---------- */

.role-resellers {
  display: grid;
  gap: var(--space-4);
}

.role-resellers-row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
}

.role-resellers-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
}

@media (max-width: 640px) {
  .role-resellers-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Reports (Accounting) ---------- */

.rep-title {
  margin: var(--space-6) 0 var(--space-4);
}

.rep-sub {
  margin: var(--space-8) 0 var(--space-4);
}

.rep-totals {
  font-weight: 600;
}

.rep-date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Printing a report: the report only, black on white, every row. */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  .sidebar,
  .topbar,
  .no-print,
  .toast,
  .conn-intro {
    display: none !important;
  }

  .shell,
  .content,
  .panel {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .table-scroll {
    overflow: visible;
  }

  table {
    font-size: var(--text-xs);
  }

  th,
  td {
    color: #000;
    border-color: #999;
  }

  .muted {
    color: #333;
  }
}

/* ---------- Downloads (Administration) ---------- */

.dl-groups {
  display: grid;
  gap: var(--space-8);
}

.dl-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.dl-item {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
}

.dl-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.dl-item ol {
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-10);
}

@media (max-width: 640px) {
  .dl-items {
    grid-template-columns: 1fr;
  }
}

/* ---------- Drops (short sessions by VLAN) ---------- */

.dr-groups {
  display: grid;
  gap: var(--space-8);
}

.dr-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
}

/* ---------- Reseller page (public/reseller.html) ---------- */

.reseller-page {
  display: grid;
  gap: var(--space-8);
  width: min(1200px, 100%);
  align-self: start;
}

.reseller-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.reseller-page .summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.reseller-head .brand {
  margin-bottom: 0;
  color: inherit;
  text-decoration: none;
}

/* ---------- Get the app (public/apps.html) ---------- */

.apps-page {
  display: grid;
  gap: var(--space-8);
  width: min(760px, 100%);
  justify-items: center;
}

.apps-card {
  width: 100%;
}

.apps-page .brand {
  color: inherit;
  text-decoration: none;
}

.apps-list {
  display: grid;
  gap: var(--space-4);
}

.apps-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
}

.apps-help ol {
  margin: var(--space-4) 0 0;
  padding-inline-start: var(--space-10);
  display: grid;
  gap: var(--space-3);
}

.apps-roles {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

#apps-roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
}

#apps-roles label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

#apps-form label {
  align-self: start;
}

/* Stock page forms: each field with its label above. */
.stk-form { flex-wrap: wrap; align-items: flex-end; }
.stk-form label { display: flex; flex-direction: column; gap: 2px; font-size: 0.85em; }
.stk-form label[hidden] { display: none; }
.stk-short { color: var(--danger, #c0392b); font-weight: 600; }

/* Totals under a table. */
tfoot.totals th, tfoot.totals td { border-top: 2px solid var(--border, rgba(127,127,127,.35)); font-weight: 600; white-space: nowrap; }

/* Messages: unseen ones stand out; their state as the office sees it. */
.msg.unseen { border-inline-start: 3px solid var(--accent, #3b82f6); padding-inline-start: 8px; cursor: pointer; }
.msg { cursor: pointer; }
.msg-state { font-size: 0.85em; white-space: nowrap; }
.msg-state.seen { color: var(--ok, #16a34a); }
.msg-state.delivered { color: var(--accent, #3b82f6); }

/* Users page: one tick per feature, with what it does and where it shows. */
.perm-item { align-items: flex-start; }
.perm-item .perm-help { display: block; font-weight: 400; }
.perm-preview { margin-top: var(--space-4, 16px); padding: var(--space-3, 12px); border-radius: var(--radius-md, 8px); background: rgba(var(--accent-rgb, 59, 130, 246), 0.08); }

/* A button with a small line icon (the radius filler download). */
.btn-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
  margin-inline-end: var(--space-3);
}
.filler-download {
  margin-inline-start: auto;
  text-decoration: none;
}
.toolbar-end {
  justify-content: flex-end;
}

/* Ticket note: the "Enter sends" tick beside the button. */
.tk-note-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Collect page: customers who moved this month; ticket: the new address of a moving customer. */
.collect-moved {
  margin-bottom: var(--space-3);
}

.collect-moved summary {
  cursor: pointer;
  font-weight: 700;
  padding: var(--space-2) 0;
}

.tk-move {
  margin-top: var(--space-3);
}

.tk-move-empty {
  border: 1px dashed var(--warning);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

/* Get the app: Android or iPhone; the iPhone web app's notification offer. */
.apps-choices {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.apps-choices button {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.apps-choices button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.apps-steps li,
.apps-printing li {
  margin-bottom: var(--space-2);
}

.apps-notify {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.apps-printing {
  margin-top: var(--space-4);
}

.apps-printing a {
  color: var(--primary);
}

.webapp-notify {
  position: fixed;
  inset-inline: var(--space-3);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--border);
}

.webapp-notify span {
  flex: 1 1 100%;
}

/* Collector page: what they hold, customer by customer; a handover's details. */
.collector-pending {
  margin-block: var(--space-3);
}

.collector-pending summary {
  cursor: pointer;
  padding-block: var(--space-2);
}

.handover-detail td {
  background: rgba(var(--muted-rgb), 0.06);
}

/* A receipt printed again (receipt.html): the slip image, alone on the paper when printing. */
.receipt-page {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
}

.receipt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.receipt-image {
  width: 80mm;
  max-width: 100%;
}

.receipt-page[data-paper="384"] .receipt-image {
  width: 58mm;
}

.receipt-page[data-paper="a4"] .receipt-image {
  width: 120mm;
}

/* The office's A4 receipt (receipt-a4.js): printed paper, so its own ink colours, not the theme's. */
.a4-receipt {
  --a4-paper: #ffffff;
  --a4-ink: #15181f;
  --a4-muted: #5d6474;
  --a4-line: #cfd4dc;
  --a4-soft: #f1f3f6;
  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  box-sizing: border-box;
  padding: 16mm 15mm;
  display: flex;
  flex-direction: column;
  gap: 7mm;
  background: var(--a4-paper);
  color: var(--a4-ink);
  font-family: "Inter", "Noto Kufi Arabic", "Segoe UI", Arial, sans-serif;
  font-size: 10.5pt;
  line-height: 1.45;
  box-shadow: 0 10px 40px rgba(var(--shadow-rgb), 0.35);
}

.a4-receipt h1,
.a4-receipt h2,
.a4-receipt h3,
.a4-receipt p {
  margin: 0;
}

.a4-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8mm;
  padding-bottom: 6mm;
  border-bottom: 2.5pt solid var(--a4-ink);
}

.a4-company {
  display: flex;
  align-items: center;
  gap: 5mm;
}

.a4-logo {
  max-height: 22mm;
  max-width: 45mm;
  object-fit: contain;
}

.a4-company h1 {
  font-size: 20pt;
  letter-spacing: 0.02em;
}

.a4-company p {
  color: var(--a4-muted);
}

.a4-title {
  min-width: 62mm;
  display: grid;
  gap: 1.5mm;
}

.a4-title h2 {
  font-size: 17pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2mm;
}

.a4-field {
  display: flex;
  justify-content: space-between;
  gap: 4mm;
}

.a4-field span {
  color: var(--a4-muted);
}

.a4-box {
  border: 1pt solid var(--a4-line);
  border-radius: 2mm;
  padding: 4mm 5mm;
  display: grid;
  gap: 2mm;
}

.a4-box h3,
.a4-table th {
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--a4-muted);
}

.a4-name {
  font-size: 14pt;
  font-weight: 700;
}

.a4-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5mm 10mm;
}

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

.a4-table th,
.a4-table td {
  padding: 2.5mm 3mm;
  text-align: start;
  border-bottom: 1pt solid var(--a4-line);
}

.a4-table thead th {
  background: var(--a4-soft);
  border-bottom: 1.5pt solid var(--a4-ink);
}

.a4-table .num {
  text-align: end;
  white-space: nowrap;
}

.a4-totals {
  align-self: flex-end;
  width: 92mm;
  display: grid;
  gap: 1.8mm;
}

.a4-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 4mm;
}

.a4-totals > div span {
  color: var(--a4-muted);
}

.a4-totals .a4-balance {
  margin-top: 1.5mm;
  padding: 3mm 4mm;
  background: var(--a4-ink);
  color: var(--a4-paper);
  font-size: 13pt;
  font-weight: 700;
  justify-content: center;
}

.a4-totals .a4-balance span {
  color: var(--a4-paper);
}

.a4-totals .a4-balance:has(strong) {
  justify-content: space-between;
}

.a4-note {
  color: var(--a4-muted);
  font-size: 9pt;
}

.a4-center,
.a4-thanks {
  text-align: center;
}

.a4-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10mm;
  padding-top: 6mm;
  border-top: 1pt dashed var(--a4-line);
}

.a4-sign {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10mm;
}

.a4-sign div {
  display: grid;
  gap: 1mm;
}

.a4-sign span {
  color: var(--a4-muted);
  font-size: 9pt;
}

.a4-sign i {
  display: block;
  height: 14mm;
  border-bottom: 1pt solid var(--a4-ink);
}

.a4-whish {
  width: 58mm;
  display: grid;
  justify-items: center;
  gap: 1.5mm;
  text-align: center;
  font-size: 9pt;
  font-weight: 700;
}

.a4-qr {
  width: 34mm;
  height: 34mm;
}

.a4-thanks {
  font-weight: 600;
}

@media print {
  .receipt-toolbar,
  #receipt-message {
    display: none;
  }

  .receipt-page {
    padding: 0;
  }

  .receipt-page[data-paper="a4"] {
    background: var(--a4-paper, #ffffff);
  }

  .a4-receipt {
    box-shadow: none;
    width: auto;
    min-height: 0;
    height: 265mm;
    padding: 0;
  }

  @page {
    size: A4;
    margin: 14mm;
  }
}

/* Excel-style filters on every table's column headers (ui.js setUpTableFilters). */
tr.filtered-out {
  display: none;
}

.col-filter {
  display: none;
  margin-inline-start: var(--space-1);
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.4;
  cursor: pointer;
}

table.col-filters-on .col-filter {
  display: inline-block;
}

.col-filter.on {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
}

.col-menu {
  position: fixed;
  z-index: 1000;
  width: min(280px, calc(100vw - 16px));
  max-height: min(420px, calc(100vh - 16px));
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(var(--shadow-rgb), 0.45);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.col-menu-item {
  text-align: start;
  padding: 6px var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.col-menu-item:hover {
  background: var(--panel-soft);
}

.col-menu-values {
  overflow: auto;
  max-height: 220px;
  border-top: 1px solid var(--border);
  padding-top: var(--space-1);
}

.col-menu-value {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  padding: 2px 0;
  font-size: var(--text-sm);
}

.col-menu-value[hidden] {
  display: none;
}

.col-menu-actions {
  display: flex;
  justify-content: flex-end;
}

/* A handover closed with a difference (received less). */
.warning-text {
  color: var(--warning);
}

.handover-difference {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* The customer page inside the phone app (client.html?embed=1): the app has its own menu. */
body.embedded #cp-sidebar {
  display: none;
}

/* A technician's handover in detail (Maintenance money): ticket by ticket. */
.tm-detail-row > td {
  background: rgba(var(--shadow-rgb), 0.12);
}

.tm-detail-group + .tm-detail-group {
  margin-top: var(--space-3);
}

.tm-detail-group h5 {
  margin: 0 0 var(--space-1);
}

.tm-detail-table {
  width: 100%;
}