/* Inter — the interface face this stylesheet has always named but never
   loaded, so every page had been falling back to the system font.

   Imported here rather than linked in markup because the stylesheet is
   referenced from 85 separate page files; one import covers all of them. It is
   loaded with display=swap, so text paints immediately in the fallback and
   reflows when Inter arrives — a page on a slow link is never blank, and a
   network that cannot reach Google simply keeps the system font. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Dira IBS — shared stylesheet
   Palette mirrors the CoreConnect-style template: indigo primary, soft slate UI. */

:root {
  /* ---------------------------------------------------------------------
     BRAND ACCENT

     One source of truth for the interface accent. The names below it are
     aliases: the stylesheet and the pages between them hold 176
     var(--indigo-*) references, and renaming those would be a large diff for
     no benefit. Point the aliases somewhere else and the whole interface
     follows.

     A previous build changed the accent by writing green into variables still
     called --indigo-*, so a page could not be read at a glance to tell which
     palette it was meant to have. Hence the honest name here.
     --------------------------------------------------------------------- */
  --brand-50:  #ecfdf3;
  --brand-100: #dcfce7;
  --brand-500: #1b7d3e;
  --brand-600: #166534;
  --brand-700: #14532d;

  /* Secondary accent, used in gradients beside the primary. Kept in the same
     family so the two blend rather than clash. */
  --brand-alt-100: #dcfce7;
  --brand-alt-500: #4ade80;
  --brand-alt-600: #22c55e;

  /* Historical names — aliases, not values. */
  --indigo-50:  var(--brand-50);
  --indigo-100: var(--brand-100);
  --indigo-500: var(--brand-500);
  --indigo-600: var(--brand-600);
  --indigo-700: var(--brand-700);
  --sky-100:   var(--brand-alt-100);
  --sky-500:   var(--brand-alt-500);
  --sky-600:   var(--brand-alt-600);
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --red-50:   #fef2f2;
  --red-500:  #ef4444;
  --red-600:  #dc2626;
  --green-500:#10b981;
  --amber-500:#f59e0b;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --shadow:    0 4px 14px rgba(15,23,42,0.06);
  --shadow-lg: 0 16px 48px rgba(15,23,42,0.12);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------------------------------------------------------------------
     TYPE AND DENSITY SCALE

     Every size that drives the layout lives here, so the interface can be
     tightened or loosened in one place. The previous values pushed a
     full-width table into horizontal scrolling on a 1366px laptop and
     clipped the sidebar; these fit it.

     Inter is loaded properly now. It was named here from the start but no
     stylesheet ever fetched it, so the console had been rendering in the
     system fallback the whole time — which is why it read as wider and
     plainer than intended. Inter is drawn for interfaces: tighter default
     spacing, unambiguous 1/l/I, and tabular figures for the numeric
     columns this application is mostly made of.
     --------------------------------------------------------------------- */
  --fs-xs:   10px;     /* table headers, chips, meta */
  --fs-sm:   11.5px;   /* secondary text, help lines */
  --fs-base: 12.5px;   /* body copy, table cells, inputs */
  --fs-md:   13px;     /* nav, buttons */
  --fs-lg:   15px;     /* card headings */
  --fs-xl:   19px;     /* page titles */

  /* ---------------------------------------------------------------------
     ROLE TOKENS

     Named for what they ARE rather than what colour they happen to be. The
     palette tokens above stay as the raw ingredients; these are what an
     operator sets in Platform → Settings → Appearance, and what every
     structural rule below now reads.

     Each falls back to the exact value its rule used before, so an install
     that has never opened the appearance settings renders identically.
     --------------------------------------------------------------------- */
  --bg-page:       #f3f6f3;
  --bg-surface:    #ffffff;
  --bg-sidebar:    var(--brand-50);
  --bg-header:     #ffffff;
  --bg-footer:     #f3f6f3;
  --bg-modal:      #ffffff;
  --bg-input:      #ffffff;
  --bg-table-head: #f3f6f3;

  --text-body:     var(--slate-800);
  --text-heading:  var(--slate-900);
  --text-muted:    var(--slate-500);
  --text-invert:   #ffffff;

  --nav-text:        var(--slate-700);
  --nav-hover-bg:    var(--brand-100);
  --nav-active-bg:   var(--brand-600);
  --nav-active-text: #ffffff;

  --border-color:  #d4ded6;

  /* Buttons. Each defaults to the token it used to hard-code, so buttons
     track the brand and radius by default and only detach when someone
     deliberately sets one. */
  --btn-radius:        var(--radius-sm);
  --btn-pad-y:         11px;
  --btn-pad-x:         22px;
  --btn-fs:            14px;
  --btn-weight:        600;
  --btn-primary-bg:    var(--brand-600);
  --btn-primary-text:  var(--text-invert);
  --btn-primary-hover: var(--brand-700);
  --btn-ghost-bg:      var(--bg-surface);
  --btn-ghost-text:    var(--nav-text);
  --btn-ghost-border:  var(--border-color);
  --btn-danger-bg:     var(--red-600);

  /* Informational status. Kept separate from --sky-*, which the green rebrand
     aliased onto the secondary brand colour and which now drives decorative
     gradients rather than meaning. */
  --info-500: #0ea5e9;

  /* Status pills and flashes are derived from the four status colours above by
     mixing: some of the status colour into the card for the ground, and some
     into --status-ink for the label. Dark mode flips --status-ink to white and
     widens the mix, so one set of rules reads correctly on both grounds. */
  --status-ink:     #000;
  --status-ink-amt: 72%;
  --status-bg-amt:  16%;

  --sidebar-w: 206px;
  --cell-pad-y: 7px;
  --cell-pad-x: 10px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Digits the same width, so figures line up down a column and a changing
   value does not shift the ones beside it. */
table.dira td, table.dira th,
.stat-value, .num, .amount, input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
a { color: var(--indigo-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   AUTH / LOGIN PAGE
   ============================================================ */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 80% 20%, var(--indigo-50), transparent 60%),
    radial-gradient(900px 500px at 10% 90%, var(--sky-100), transparent 60%),
    var(--slate-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--indigo-600);
}
.auth-brand .logo {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--indigo-500), var(--sky-500));
  display: grid; place-items: center;
  color: white;
  box-shadow: var(--shadow);
  font-weight: 700;
}
.auth-brand h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--indigo-700);
}
.auth-brand .tag {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--slate-500);
  text-transform: uppercase;
  margin-top: 2px;
}

.auth-stack {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: min(960px, 100%);
}
@media (min-width: 880px) {
  .auth-stack { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
}

.auth-card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--slate-200);
  margin: -28px -28px 22px;
  padding: 0 12px;
}
.auth-tabs button {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 18px 12px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--slate-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.auth-tabs button:hover { color: var(--slate-700); }
.auth-tabs button.is-active {
  color: var(--indigo-600);
  border-bottom-color: var(--indigo-600);
}

.auth-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--slate-900); }
.auth-sub   { margin: 0 0 22px; font-size: 14px; color: var(--slate-500); }

.field { margin-bottom: 16px; }
.field-row { display: flex; align-items: center; justify-content: space-between; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--slate-700); margin-bottom: 6px; }
.field .hint  { font-size: 12px; color: var(--indigo-600); font-weight: 600; }
.field .control {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s, background .15s;
  min-height: 44px; /* consistent height across all input types */
}
.field .control:hover  { border-color: var(--slate-300); }
.field .control:focus-within {
  background: var(--bg-input);
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--indigo-100);
}
.field .control .icon {
  padding: 0 10px;
  color: var(--slate-400);
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* All text-like inputs + selects + textareas — unified styling */
.field .control input,
.field .control select,
.field .control textarea {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 12px 14px;
  font: inherit;
  font-family: inherit;
  font-size: 14px;
  color: var(--slate-900);
  outline: none;
  width: 100%;
  min-width: 0; /* lets flex children shrink below content width */
}
/* When an icon precedes the input, drop its left padding so the icon owns it */
.field .control .icon + input,
.field .control .icon + select,
.field .control .icon + textarea {
  padding-left: 0;
}

/* === SELECT — kill browser default arrow + draw our own SVG chevron === */
.field .control select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.field .control select::-ms-expand { display: none; }
.field .control:focus-within select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* === TEXTAREA — multi-line behaviour === */
.field .control textarea {
  min-height: 96px;
  line-height: 1.55;
  resize: vertical;
  padding-top: 12px;
}

/* === NUMBER INPUT — strip the WebKit/Mozilla spinners, they clash with our layout === */
.field .control input[type="number"]::-webkit-outer-spin-button,
.field .control input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field .control input[type="number"] { -moz-appearance: textfield; }

/* === FILE INPUT — restyled picker button === */
.field .control input[type="file"] {
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
}
.field .control input[type="file"]::file-selector-button {
  background: white;
  border: 1px solid var(--slate-200);
  padding: 6px 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-700);
  cursor: pointer;
  margin-right: 12px;
  transition: border-color .15s, color .15s;
}
.field .control input[type="file"]::file-selector-button:hover {
  border-color: var(--indigo-500);
  color: var(--indigo-700);
}
.field .control input[type="file"]::-webkit-file-upload-button {
  background: white;
  border: 1px solid var(--slate-200);
  padding: 6px 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-700);
  cursor: pointer;
  margin-right: 12px;
}

/* === DATE / TIME — pad consistent with text inputs === */
.field .control input[type="date"],
.field .control input[type="time"],
.field .control input[type="datetime-local"] { cursor: pointer; }

/* === DISABLED STATE === */
.field .control:has(:disabled) {
  background: var(--slate-100);
  border-color: var(--slate-200);
  cursor: not-allowed;
  opacity: 0.75;
}
.field .control input:disabled,
.field .control select:disabled,
.field .control textarea:disabled { cursor: not-allowed; color: var(--slate-500); }

/* === PLACEHOLDER === */
.field .control input::placeholder,
.field .control textarea::placeholder { color: var(--slate-400); }

/* === TOGGLE BUTTON (password show/hide) === */
.field .control .toggle {
  background: transparent;
  border: 0;
  padding: 0 12px;
  color: var(--slate-400);
  cursor: pointer;
}
.field .control .toggle:hover { color: var(--slate-700); }

/* === MOBILE — prevent iOS auto-zoom on focus, allow grid to collapse === */
@media (max-width: 560px) {
  .field .control input,
  .field .control select,
  .field .control textarea {
    font-size: 16px;
    padding: 11px 12px;
  }
  .field .control select { padding-right: 36px; }
}

.checkbox { display: flex; align-items: center; gap: 8px; margin: 8px 0 18px; font-size: 13px; color: var(--slate-600); }
.checkbox input { width: 16px; height: 16px; }

.btn-primary {
  width: 100%;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 0;
  border-radius: var(--btn-radius);
  padding: 14px 16px;
  font-weight: var(--btn-weight);
  font-size: calc(var(--btn-fs) + 1px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, transform .05s;
}
.btn-primary:hover { background: var(--btn-primary-hover); }
.btn-primary:active { transform: translateY(1px); }

.auth-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--slate-200);
  text-align: center;
  font-size: 13px;
  color: var(--slate-500);
}

.flash {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
}
.flash-ok  {
  background: color-mix(in srgb, var(--green-500) calc(var(--status-bg-amt) * 0.75), var(--bg-surface));
  color:      color-mix(in srgb, var(--green-500) var(--status-ink-amt), var(--status-ink));
  border: 1px solid color-mix(in srgb, var(--green-500) 34%, var(--bg-surface));
}
.flash-err {
  background: color-mix(in srgb, var(--red-500) calc(var(--status-bg-amt) * 0.75), var(--bg-surface));
  color:      color-mix(in srgb, var(--red-500) var(--status-ink-amt), var(--status-ink));
  border: 1px solid color-mix(in srgb, var(--red-500) 34%, var(--bg-surface));
}

.auth-hero {
  display: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--indigo-600), var(--slate-900));
  color: white;
  padding: 36px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 880px) {
  .auth-hero { display: flex; flex-direction: column; justify-content: flex-end; }
}
.auth-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(56,189,248,0.35), transparent 60%);
  pointer-events: none;
}
.auth-hero h2 { font-size: 22px; margin: 0 0 8px; font-weight: 700; }
.auth-hero p  { font-size: 14px; opacity: .85; margin: 0; line-height: 1.55; max-width: 360px; }

.auth-meta { margin-top: 18px; font-size: 12px; color: var(--slate-400); text-align: center; }

/* ============================================================
   APP SHELL (sidebar + main)
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  padding: 12px 9px;
  display: flex;
  flex-direction: column;
  /* Pin the whole sidebar to the viewport so the brand + nav stay put
     while the page scrolls. align-self:start keeps the grid item from
     stretching past 100vh; the main nav scrolls inside on short screens. */
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 18px;
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: 14px;
  flex-shrink: 0;            /* brand stays fixed at the top of the sidebar */
}
.sidebar .brand .logo {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--indigo-500), var(--sky-500));
  border-radius: 10px;
  display: grid; place-items: center;
  color: white; font-weight: 700;
  box-shadow: var(--shadow);
}
.sidebar .brand .name { font-weight: 700; font-size: 18px; line-height: 1.1; color: var(--slate-900); }
.sidebar .brand .sub  { font-size: 11px; color: var(--slate-500); letter-spacing: 0.04em; }

.nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
/* The primary nav is the scrolling region of the sidebar: brand stays above,
   footer below, this list takes the remaining height and scrolls if needed. */
.sidebar > .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  color: var(--nav-text);
  font-weight: 500;
  font-size: 14px;
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--nav-hover-bg); color: var(--brand-700); text-decoration: none; }
.nav a.is-active {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  box-shadow: var(--shadow);
}
.nav a.is-active svg { color: var(--nav-active-text); }
.nav a svg { color: var(--slate-500); flex-shrink: 0; }

/* ---- Section-header dividers in the flat nav ---- */
.nav-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-400);
  padding: 16px 14px 6px;
  margin-top: 4px;
  border-top: 1px solid var(--slate-200);
  line-height: 1;
}
/* ---- Clickable KPI tile (hover lift) ---- */
.kpi-tile {
  display: block;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  position: relative;
}
.kpi-tile:hover {
  border-color: var(--indigo-500, #6366f1);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  text-decoration: none;
}
.kpi-tile .kpi-arrow {
  position: absolute;
  top: 16px;
  right: 14px;
  opacity: 0.4;
  color: var(--indigo-600);
  transition: opacity .15s, transform .15s;
}
.kpi-tile:hover .kpi-arrow,
.kpi-tile:focus-visible .kpi-arrow {
  opacity: 1;
  transform: translateX(3px);
}
.kpi-tile:focus-visible {
  outline: 2px solid var(--indigo-500);
  outline-offset: 2px;
}

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.btn-block {
  background: var(--indigo-600);
  color: white;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
}
.btn-block:hover { background: var(--indigo-700); }

.nav-foot a { color: var(--slate-600); }
.nav-foot a.danger { color: var(--red-600); }

/* Main */
.main {
  --main-pad-x: 15px;
  --main-pad-y: 11px;
  padding: var(--main-pad-y) var(--main-pad-x);
  background: var(--bg-page);
}
/* Sticky, full-width app bar. Breaks out of the .main padding via the
   --main-pad-* vars so it spans edge-to-edge and stays pinned while the
   page scrolls underneath (frosted-glass blur + hairline border). */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex; align-items: center; gap: 16px;
  margin: calc(-1 * var(--main-pad-y)) calc(-1 * var(--main-pad-x)) var(--main-pad-y);
  padding: 8px var(--main-pad-x);
  background: var(--bg-header);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-color);
}
.topbar h1 { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--slate-900); }
.search {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
    padding: 6px 11px;
  max-width: 520px;
}
.search input { border: 0; outline: 0; flex: 1; font: inherit; font-size: 14px; background: transparent; }
.topbar .actions { display: flex; align-items: center; gap: 14px; color: var(--slate-500); }
.topbar .avatar {
  display: flex; align-items: center; gap: 10px;
  background: white;
  padding: 6px 12px 6px 6px;
  border-radius: 30px;
  border: 1px solid var(--slate-200);
}
.topbar .avatar img, .topbar .avatar .initial {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--indigo-600);
  display: grid; place-items: center; color: white; font-weight: 700;
}
.topbar .avatar span { font-weight: 600; font-size: 14px; color: var(--slate-700); }

.bell { position: relative; cursor: pointer; }
/* The old decorative red dot is gone - #notifBadge in layout.php now
   shows a REAL unread count fed by audit.php?ajax=notifications. */

/* Cards */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  padding: 12px 14px;
}
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-3 { grid-template-columns: 2fr 1fr 1fr; }
.grid-3-eq { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 980px) { .grid-3, .grid-3-eq { grid-template-columns: 1fr; } }

.hero-card h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: var(--slate-900); }
.hero-card p  { margin: 0 0 18px; color: var(--slate-500); font-size: 14px; }

.action-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: calc(var(--btn-pad-y) + 3px) var(--btn-pad-x);
  border-radius: var(--radius);
  border: 1px solid var(--btn-ghost-border);
  background: var(--btn-ghost-bg);
  font-weight: var(--btn-weight);
  font-size: var(--btn-fs);
  color: var(--btn-ghost-text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.btn:hover { border-color: var(--indigo-500); color: var(--indigo-700); }
.btn-indigo { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn-indigo:hover { background: var(--btn-primary-hover); color: var(--btn-primary-text); }
.btn-sky    { background: var(--sky-500); border-color: var(--sky-500); color: white; }
.btn-sky:hover { background: var(--sky-600); color: white; }
.btn svg { flex-shrink: 0; }

.kpi {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 14px;
}
.kpi .icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--indigo-50);
  display: grid; place-items: center;
  color: var(--indigo-600);
}
.kpi.kpi-alert .icon { background: var(--red-50); color: var(--red-600); }
.kpi .label { font-size: 13px; color: var(--slate-500); margin-bottom: 4px; }
.kpi .value { font-size: 22px; font-weight: 700; color: var(--slate-900); }

/* Inventory */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 6px 0 16px;
}
.section-title { font-size: 16px; font-weight: 700; color: var(--slate-900); display: flex; align-items: center; gap: 12px; }
.chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 30px;
  background: var(--slate-100);
  color: var(--slate-600);
  font-weight: 600;
}
.chip.indigo { background: var(--indigo-600); color: white; }

.table-wrap { overflow-x: auto; background: var(--slate-50); border-radius: var(--radius); padding: 4px; }
table.dira {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 10px;
  overflow: hidden;
}
table.dira th, table.dira td {
  text-align: left;
  padding: var(--cell-pad-y) var(--cell-pad-x);
  font-size: var(--fs-base);
  border-bottom: 1px solid var(--slate-100);
}
table.dira th {
  background: var(--bg-table-head);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
table.dira td { color: var(--slate-700); }
table.dira tr:last-child td { border-bottom: 0; }

.status-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.status-online::before { background: var(--green-500); }
.status-offline::before { background: var(--red-500); }
.status-unknown::before { background: var(--slate-400); }
.status-online { color: var(--green-500); }
.status-offline { color: var(--red-500); }

.bar {
  height: 6px; background: var(--slate-100); border-radius: 999px; overflow: hidden;
  margin-top: 6px;
}
.bar > span { display: block; height: 100%; background: var(--indigo-600); border-radius: 999px; }
.bar.danger > span { background: var(--red-500); }

.device-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--indigo-50);
  color: var(--indigo-600);
  display: inline-grid; place-items: center;
  margin-right: 10px;
  flex-shrink: 0;
}
.device-icon.danger { background: var(--red-50); color: var(--red-500); }

.cell-name { display: flex; align-items: center; }
.cell-name .meta { display: flex; flex-direction: column; }
.cell-name .meta b { font-size: 14px; color: var(--slate-900); }
.cell-name .meta small { color: var(--slate-500); font-size: 12px; }

.pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 6px 4px;
  font-size: 13px; color: var(--slate-500);
}
.pager .pages { display: flex; gap: 6px; }
.pager .pages button {
  border: 1px solid var(--slate-200);
  background: white;
  padding: 6px 12px;
  border-radius: 8px;
  font: inherit; font-size: 13px;
  color: var(--slate-600);
  cursor: pointer;
}
.pager .pages button.is-active { background: var(--indigo-600); color: white; border-color: var(--indigo-600); }

.fab {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--indigo-600);
  color: white;
  border: 0;
  font-size: 28px;
  font-weight: 300;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
}
.fab:hover { background: var(--indigo-700); }

/* Bottom cards */
.mini-card h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-size: 15px; font-weight: 700; color: var(--slate-900);
}
.mini-card h3 svg { color: var(--indigo-600); }
.bars {
  display: flex; align-items: flex-end; gap: 10px;
  height: 110px;
  background: var(--indigo-50);
  border-radius: 10px;
  padding: 14px;
}
.bars > span {
  flex: 1;
  background: linear-gradient(180deg, var(--indigo-500), var(--indigo-600));
  border-radius: 6px 6px 0 0;
}
.line-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  font-size: 13px;
  color: var(--slate-600);
}
.line-row b { color: var(--slate-900); }
.metric-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
  margin-bottom: 6px;
}
.metric-row .pct { color: var(--green-500); font-weight: 700; }
.metric-row .warn { color: var(--red-500); font-weight: 700; }

.vendor-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--slate-700);
}
.vendor-row + .vendor-row { margin-top: 6px; }
.vendor-row.is-top { background: var(--indigo-50); color: var(--indigo-700); font-weight: 600; }

/* ============================================================
   PLATFORM DASHBOARD — Voucher/Inventory style
   ============================================================ */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 11px; margin-bottom: 10px;
}
.page-head .titles h2 { margin: 0 0 1px; font-size: var(--fs-xl); font-weight: 700; color: var(--text-heading); letter-spacing:-0.015em; }
.page-head .titles p  { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }

.kpi-tile {
  position: relative;
  padding: 22px;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.kpi-tile .head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 18px;
}
.kpi-tile .head .lbl {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
}
.kpi-tile .head .badge {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: white;
}
.kpi-tile .head .badge.sky    { background: var(--sky-500); }
.kpi-tile .head .badge.indigo { background: var(--indigo-600); }
.kpi-tile .head .badge.softi  { background: var(--indigo-100); color: var(--indigo-600); }
.kpi-tile .head .badge.softg  { background: #d1fae5;            color: #047857; }
.kpi-tile .num {
  font-size: 30px; font-weight: 700; color: var(--slate-900); line-height: 1;
}
.kpi-tile .foot {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sky-600);
}
.kpi-tile .foot.danger { color: var(--red-500); }
.kpi-tile .foot.muted  { color: var(--slate-500); }

.section-head-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 14px;
}
.section-head-row h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--slate-900); }
.section-head-row .tools { display: flex; gap: 8px; color: var(--slate-500); }
.section-head-row .tools button {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--slate-500);
  cursor: pointer;
}
.section-head-row .tools button:hover { color: var(--indigo-600); border-color: var(--indigo-500); }

.badge-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge-active    { background: color-mix(in srgb, var(--info-500) var(--status-bg-amt), var(--bg-surface)); color: color-mix(in srgb, var(--info-500) var(--status-ink-amt), var(--status-ink)); }
.badge-trial,
.badge-depleted  { background: color-mix(in srgb, var(--brand-500) var(--status-bg-amt), var(--bg-surface)); color: color-mix(in srgb, var(--brand-500) var(--status-ink-amt), var(--status-ink)); }
.badge-paused,
.badge-suspended,
.badge-failed    { background: color-mix(in srgb, var(--red-500) var(--status-bg-amt), var(--bg-surface)); color: color-mix(in srgb, var(--red-500) var(--status-ink-amt), var(--status-ink)); }
.badge-success   { background: color-mix(in srgb, var(--green-500) var(--status-bg-amt), var(--bg-surface)); color: color-mix(in srgb, var(--green-500) var(--status-ink-amt), var(--status-ink)); }
.badge-pending   { background: color-mix(in srgb, var(--amber-500) var(--status-bg-amt), var(--bg-surface)); color: color-mix(in srgb, var(--amber-500) var(--status-ink-amt), var(--status-ink)); }
.badge-cancelled,
.badge-refunded  { background: var(--border-color); color: var(--text-muted); }


.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grid-4 { grid-template-columns: 1fr; } }

/* ============================================================
   CUSTOMER PORTAL — welcome banner + info rows
   ============================================================ */
.hero-banner {
  background: linear-gradient(135deg, var(--indigo-600), var(--sky-500));
  color: white;
  padding: 32px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 20%, rgba(255,255,255,0.18), transparent 50%);
  pointer-events: none;
}
.hero-banner > * { position: relative; z-index: 1; }
.hero-banner h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: white; letter-spacing: -0.01em; }
.hero-banner p  { margin: 0; opacity: 0.92; font-size: 15px; line-height: 1.5; }
.hero-banner .cta {
  background: white;
  color: var(--indigo-700);
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: transform .1s, box-shadow .15s;
}
.hero-banner .cta:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.hero-banner.warn   { background: linear-gradient(135deg, var(--amber-500), #ea580c); }
.hero-banner.danger { background: linear-gradient(135deg, #dc2626, #7f1d1d); }
.hero-banner.warn .cta,
.hero-banner.danger .cta { color: var(--red-600); }
.hero-banner.danger .cta { color: #991b1b; }

.info-card { padding: 22px; }
.info-card h3 {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate-500);
}
.info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--slate-100);
}
.info-row:last-child { border-bottom: 0; }
.info-row .lbl { color: var(--slate-500); }
.info-row .val { font-weight: 600; color: var(--slate-900); }
.info-row .val.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

.pay-method-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 560px) { .pay-method-grid { grid-template-columns: 1fr; } }
.pay-method {
  position: relative;
  display: block;
  padding: 16px;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: white;
  transition: border-color .15s, background .15s;
}
.pay-method:hover { border-color: var(--indigo-500); }
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pay-method .lbl { font-weight: 600; font-size: 14px; color: var(--slate-900); margin-bottom: 4px; }
.pay-method .desc { font-size: 12px; color: var(--slate-500); line-height: 1.4; }
.pay-method:has(input:checked) {
  border-color: var(--indigo-600);
  background: var(--indigo-50);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.pay-method.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--slate-50);
  border-style: dashed;
}
.pay-method.is-disabled:hover { border-color: var(--slate-200); }
.pay-method.is-disabled .lbl  { color: var(--slate-500); }

/* Quick-Pay STK push row on customer dashboard — phone | amount | button.
   Collapses to a single column on phones. */
.quick-pay-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 640px) {
  .quick-pay-grid { grid-template-columns: 1fr; }
  .quick-pay-grid button { width: 100%; justify-content: center; }
}

/* ============================================================
   PERIOD SEGMENTED CONTROL — used by audit.php and reports.php
   ============================================================ */
.period-group { display: inline-flex; }
.period-group a {
  text-decoration: none;
  border: 1px solid var(--slate-200);
  background: white;
  color: var(--slate-600);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}
.period-group a:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.period-group a:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.period-group a + a { border-left: 0; }
.period-group a:hover { color: var(--indigo-700); }
.period-group a.is-active { background: var(--indigo-600); color: white; border-color: var(--indigo-600); }

/* ============================================================
   REPORTS — chart + breakdown styles
   ============================================================ */
.report-bars {
  display: flex; align-items: flex-end; gap: 12px;
  height: 200px;
  padding: 12px 0 6px;
}
.report-bars .bar {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  position: relative;
}
.report-bars .bar .value {
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-600);
  white-space: nowrap;
}
.report-bars .bar .col {
  width: 100%;
  background: linear-gradient(180deg, var(--indigo-500), var(--indigo-600));
  border-radius: 6px 6px 0 0;
  min-height: 4px;
  transition: filter .15s;
}
.report-bars .bar:hover .col { filter: brightness(1.1); }
.report-bars .bar.peak .col { background: linear-gradient(180deg, var(--sky-500), var(--sky-600)); }
.report-bars .bar .label {
  font-size: 11px;
  color: var(--slate-500);
  text-align: center;
  white-space: nowrap;
}

.breakdown-list { display: flex; flex-direction: column; gap: 14px; }
.breakdown-list .row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
}
.breakdown-list .row .lbl { font-size: 13px; color: var(--slate-700); font-weight: 600; }
.breakdown-list .row .val { font-size: 13px; color: var(--slate-900); font-weight: 700; text-align: right; }
.breakdown-list .row .meta { font-size: 11px; color: var(--slate-500); }
.breakdown-list .row .barwrap {
  grid-column: 1 / -1;
  height: 6px;
  background: var(--slate-100);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.breakdown-list .row .barwrap > span {
  display: block;
  height: 100%;
  background: var(--indigo-600);
  border-radius: 999px;
}
.breakdown-list .row.color-mpesa  .barwrap > span { background: #10b981; }
.breakdown-list .row.color-card   .barwrap > span { background: var(--indigo-600); }
.breakdown-list .row.color-cash   .barwrap > span { background: var(--amber-500); }
.breakdown-list .row.color-bank   .barwrap > span { background: var(--sky-500); }
.breakdown-list .row.color-other  .barwrap > span { background: var(--slate-400); }

.delta { font-size: 12px; font-weight: 600; }
.delta.up   { color: #10b981; }
.delta.down { color: var(--red-500); }
.delta.flat { color: var(--slate-500); }

/* ============================================================
   WIZARD STEPPER — router provisioning, plan tier setup, etc.
   ============================================================ */
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--slate-100);
  margin-bottom: 24px;
}
.wizard-step {
  display: flex; align-items: center; gap: 12px;
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.wizard-step .num {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  background: white;
  border: 1.5px solid var(--slate-200);
  color: var(--slate-400);
  flex-shrink: 0;
}
.wizard-step .label .t {
  font-size: 13px; font-weight: 700;
  color: var(--slate-500); letter-spacing: -0.01em;
}
.wizard-step .label .s {
  font-size: 11px;
  color: var(--slate-400);
  margin-top: 2px;
}
.wizard-step.is-current .num {
  background: var(--indigo-50);
  border-color: var(--indigo-600);
  color: var(--indigo-700);
}
.wizard-step.is-current .label .t { color: var(--indigo-700); }
.wizard-step.is-done .num {
  background: var(--indigo-600);
  border-color: var(--indigo-600);
  color: white;
}
.wizard-step.is-done .num::before {
  content: "✓"; font-size: 16px; font-weight: 700;
}
.wizard-step.is-done .num .nlabel { display: none; }
.wizard-step.is-done .label .t { color: var(--slate-900); }
.wizard-sep {
  flex-shrink: 0;
  width: 28px; height: 1.5px;
  background: var(--slate-200);
  margin: 0 -2px;
}
.wizard-step.is-done + .wizard-sep,
.wizard-step.is-current + .wizard-sep { background: var(--indigo-200); }

/* Toggle switch — wizard "Router has Wireless" and similar opt-ins */
.dira-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
}
.dira-toggle-title { font-weight: 700; font-size: 14px; color: var(--slate-800); }
.dira-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.dira-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dira-switch-track { position: absolute; inset: 0; background: var(--slate-300); border-radius: 999px; transition: background .15s; }
.dira-switch-track::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; background: white; border-radius: 50%;
  transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.dira-switch input:checked + .dira-switch-track { background: var(--indigo-600); }
.dira-switch input:checked + .dira-switch-track::before { transform: translateX(20px); }

/* Ether port role grid — wizard step 2 (Port Setup) */
.port-role-grid { display: flex; flex-direction: column; gap: 8px; }
.port-role-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 10px;
}
.port-role-row .port-name {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700; font-size: 13px; color: var(--slate-700);
  width: 72px; flex-shrink: 0;
}
.port-role-row select {
  flex: 1; padding: 8px 10px;
  border: 1px solid var(--slate-200); border-radius: 8px;
  font-size: 13px; background: white;
}

/* Sidebar count badge (MikroTik / Access Points / Equipment) */
.nav a .nav-count {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.nav a.is-active .nav-count { background: var(--indigo-100, #e0e7ff); color: var(--indigo-700); }

/* Access Point "Visible Device" autocomplete dropdown */
.ap-device-results {
  position: absolute; z-index: 30;
  left: 0; right: 0; margin-top: 4px;
  max-height: 260px; overflow-y: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,23,42,.14);
}
.ap-device-row { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--slate-100); }
.ap-device-row:last-child { border-bottom: 0; }
.ap-device-row:hover { background: var(--slate-50); }
.ap-device-row b { display: block; font-size: 13px; color: var(--slate-900); }
.ap-device-row span { display: block; font-size: 11px; color: var(--slate-500); font-family: ui-monospace, Menlo, monospace; margin-top: 2px; }
.ap-device-empty { padding: 12px; font-size: 12px; color: var(--slate-400); text-align: center; }
/* the Visible Device control anchors the absolute dropdown */
.field .control { position: relative; }

.code-block {
  position: relative;
  background: #0f172a;
  border-radius: 10px;
  padding: 16px 18px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: #e2e8f0;
  word-break: break-all;
  line-height: 1.7;
  overflow-x: auto;
}
.code-block::-webkit-scrollbar { height: 6px; }
.code-block::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 999px; }
.code-block .copy-hint {
  position: absolute;
  top: 8px; right: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--indigo-300);
  background: rgba(79,70,229,0.2);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.code-block .copy-hint:hover { background: rgba(79,70,229,0.4); color: white; }
.code-block .copy-hint.copied { background: #10b981; color: white; }

.wait-indicator {
  display: flex; align-items: center; gap: 14px;
  padding: 18px;
  background: var(--slate-50);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--slate-700);
}
.wait-indicator .ring {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--slate-200);
  border-top-color: var(--indigo-600);
  animation: dira-spin 0.8s linear infinite;
}
.wait-indicator.is-done {
  background: #d1fae5;
  color: #065f46;
}
.wait-indicator.is-done .ring {
  border-color: #10b981;
  border-top-color: #10b981;
  animation: none;
}
.wait-indicator.is-done .ring::before {
  content: "✓"; color: white; font-weight: 700; font-size: 14px;
  position: relative; top: -3px;
}

/* ============================================================
   GLOBAL LOADING — top progress bar + overlay (loading.js owns these)
   ============================================================ */

.dira-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--indigo-500), var(--sky-500), var(--indigo-600));
  background-size: 200% 100%;
  z-index: 99999;
  opacity: 0;
  transition: width .35s cubic-bezier(.25,.8,.25,1), opacity .25s;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(99,102,241,.6), 0 0 4px rgba(99,102,241,.8);
}
.dira-progress.is-running {
  opacity: 1;
  width: 92%;
  transition: width 18s cubic-bezier(.1,.85,.4,.99), opacity .15s;
  animation: dira-progress-shimmer 1.6s linear infinite;
}
.dira-progress.is-done {
  opacity: 1;
  width: 100%;
  transition: width .35s ease, opacity .4s ease .15s;
  animation: none;
}
@keyframes dira-progress-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.dira-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  padding: 24px;
}
.dira-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.dira-overlay-card {
  background: white;
  border-radius: 16px;
  padding: 36px 44px;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 300px;
  max-width: 420px;
  text-align: center;
  transform: translateY(-8px) scale(.96);
  transition: transform .25s cubic-bezier(.25,1.4,.5,1.0);
}
.dira-overlay.is-open .dira-overlay-card { transform: translateY(0) scale(1); }

.dira-overlay-spinner {
  width: 52px;
  height: 52px;
  position: relative;
}
.dira-overlay-spinner::before,
.dira-overlay-spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid transparent;
}
.dira-overlay-spinner::before {
  border-top-color: var(--indigo-600);
  border-right-color: var(--indigo-600);
  animation: dira-spin 0.8s linear infinite;
}
.dira-overlay-spinner::after {
  border: 4px solid var(--indigo-100);
}
@keyframes dira-spin {
  to { transform: rotate(360deg); }
}

.dira-overlay-message {
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -0.01em;
  max-width: 320px;
}
.dira-overlay-sub {
  font-size: 13px;
  color: var(--slate-500);
  max-width: 320px;
  line-height: 1.5;
}

.dira-overlay-progress {
  width: 100%;
  height: 4px;
  background: var(--slate-100);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.dira-overlay-progress > span {
  display: block;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, var(--indigo-500), var(--sky-500));
  border-radius: 999px;
  animation: dira-indeterminate 1.4s ease-in-out infinite;
}
@keyframes dira-indeterminate {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(150%);  }
  100% { transform: translateX(400%); }
}

.row-id { color: var(--indigo-600); font-weight: 700; }

/* Tenant portal hostname under an ISP's name in the platform ISP table.
   Reads as a hostname first and a link second — it is reference
   information that happens to be clickable, not a call to action. The
   arrow marks it as leaving for a new tab. */
.tenant-host {
  font-size: 12px;
  color: var(--slate-500);
  text-decoration: none;
  word-break: break-all;
  border-bottom: 1px dotted var(--slate-400, #94a3b8);
}
.tenant-host:hover,
.tenant-host:focus-visible {
  color: var(--indigo-600);
  border-bottom-color: currentColor;
}
.tenant-host::after {
  content: '97';           /* north-east arrow: opens in a new tab */
  font-size: 10px;
  margin-left: 3px;
  opacity: .65;
}

.row-id:hover { text-decoration: underline; }

.kebab {
  background: transparent; border: 0; padding: 6px;
  border-radius: 8px; cursor: pointer; color: var(--slate-400);
}
.kebab:hover { background: var(--slate-100); color: var(--slate-700); }

/* Right rail */
.rail { display: flex; flex-direction: column; gap: 18px; }

.card-dark {
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
  color: white;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card-dark h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.card-dark p  { margin: 0 0 16px; font-size: 13px; opacity: 0.7; line-height: 1.5; }
.card-dark .bars {
  background: transparent;
  padding: 0;
  height: 130px;
  align-items: flex-end;
  gap: 12px;
}
.card-dark .bars > span {
  background: linear-gradient(180deg, var(--sky-500), var(--sky-600));
  border-radius: 4px 4px 0 0;
}
.card-dark .bars > span.peak {
  background: linear-gradient(180deg, var(--indigo-500), var(--indigo-600));
}

.export-tools .tool-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--slate-700);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.export-tools .tool-btn + .tool-btn { margin-top: 10px; }
.export-tools .tool-btn:hover { border-color: var(--indigo-500); color: var(--indigo-700); }
.export-tools .tool-btn .icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--indigo-50);
  color: var(--indigo-600);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.export-tools h4 {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 700;
}

.announce {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 80% at 20% 100%, rgba(99,102,241,0.55) 0%, transparent 60%),
    linear-gradient(160deg, #1e293b 0%, #020617 100%);
  color: white;
  border-radius: var(--radius);
  padding: 90px 22px 22px;
  min-height: 160px;
  box-shadow: var(--shadow);
}
.announce::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(1px 1px at 30% 20%, rgba(255,255,255,0.5), transparent),
                    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,0.4), transparent),
                    radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,0.6), transparent),
                    radial-gradient(1px 1px at 20% 60%, rgba(255,255,255,0.3), transparent);
  opacity: 0.6;
  pointer-events: none;
}
.announce span.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 4px;
}
.announce strong { display: block; font-size: 15px; font-weight: 700; }

.layout-2 {
  display: grid;
  gap: 18px;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 1080px) { .layout-2 { grid-template-columns: 1fr; } }

/* ============================================================
   FILTER CHIPS + MODAL FORMS
   ============================================================ */
.chip-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
}
.chip-row a {
  text-decoration: none;
  background: white;
  border: 1px solid var(--slate-200);
  color: var(--slate-600);
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.chip-row a:hover { color: var(--indigo-700); border-color: var(--indigo-500); }
.chip-row a.is-active { background: var(--indigo-600); color: white; border-color: var(--indigo-600); }
.chip-row a .n {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 30px;
  background: var(--slate-100);
  color: var(--slate-600);
  font-size: 11px;
}
.chip-row a.is-active .n { background: rgba(255,255,255,0.2); color: white; }

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 20px;
  overflow-y: auto;
}
.modal {
  background: var(--bg-modal);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 620px;
  padding: 0;
  animation: modal-in .18s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--slate-100);
}
.modal-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--slate-900); }
.modal-head p  { margin: 4px 0 0; font-size: 13px; color: var(--slate-500); }
.modal-close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--slate-400);
  padding: 6px;
  border-radius: 8px;
}
.modal-close:hover { background: var(--slate-100); color: var(--slate-700); }
.modal-body { padding: 22px 26px; }
.modal-foot {
  padding: 16px 26px 22px;
  border-top: 1px solid var(--slate-100);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.modal-section + .modal-section { margin-top: 22px; }
.modal-section > h3 {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate-500);
}
.field-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
}
.field-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } }

.modal .field { margin-bottom: 0; }
.modal .field label { font-size: 12px; margin-bottom: 5px; }
.modal .help {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 4px;
}

.btn-ghost {
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  border: 1px solid var(--btn-ghost-border);
  padding: var(--btn-pad-y) calc(var(--btn-pad-x) - 4px);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-weight);
  font-size: var(--btn-fs);
  cursor: pointer;
}
.btn-ghost:hover { background: var(--slate-50); border-color: var(--slate-300); }
.btn-solid {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 0;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-weight);
  font-size: var(--btn-fs);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-solid:hover { background: var(--btn-primary-hover); }
.btn-danger-solid {
  background: var(--btn-danger-bg);
  color: var(--btn-primary-text);
  border: 0;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-weight);
  font-size: var(--btn-fs);
  cursor: pointer;
}
.btn-danger-solid:hover { background: #991b1b; }

.row-actions {
  display: inline-flex; align-items: center; gap: 6px;
}
.row-actions a, .row-actions button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--slate-500);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.row-actions a:hover { color: var(--indigo-700); background: var(--indigo-50); }
.row-actions button:hover { color: var(--slate-700); background: var(--slate-100); }
.row-actions .danger:hover { color: var(--red-600); background: #fef2f2; }


/* ============================================================
   MOBILE RESPONSIVENESS � drawer sidebar, scrollable tables,
   stacked headers, finger-sized controls.
   ============================================================ */

/* Hamburger button � desktop hides it, mobile shows it in the topbar */
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: var(--slate-700);
}
.menu-toggle:hover { background: var(--slate-100); }

/* Backdrop that covers content when the drawer is open */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 998;
}

/* ---- Tablet & smaller (=980px) ---- */
@media (max-width: 980px) {
  /* Sidebar becomes an off-canvas drawer */
  .app {
    grid-template-columns: 1fr;     /* single column, sidebar overlays */
  }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 999;
    box-shadow: 4px 0 24px rgba(15,23,42,0.15);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop.is-open { display: block; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 6px; }
  .topbar { gap: 10px; }
  .topbar .search { flex: 1; min-width: 0; }
}

/* ---- Phone (=640px) ---- */
@media (max-width: 640px) {
  .main { --main-pad-x: 14px; --main-pad-y: 16px; }
  .topbar { gap: 8px; }
  .topbar .search { display: none; }   /* topbar search is rarely useful on a phone */
  .topbar .avatar span { display: none; }

  /* Page headers stack: title above buttons */
  .page-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
  .page-head > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .page-head h2 { font-size: 18px !important; }

  /* Tables overflow horizontally rather than squashing */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table.dira { min-width: 720px; }

  /* Section heads stack */
  .section-head-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
  }
  .section-head-row .tools {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* Modals: fill the screen rather than centred fixed-width */
  .modal-backdrop { padding: 0; }
  .modal {
    max-width: 100% !important;
    margin: 0;
    min-height: 100vh;
    border-radius: 0;
  }
  .modal-head { padding: 16px 18px 12px; }
  .modal-body { padding: 16px 18px; }
  .modal-foot { padding: 12px 18px 16px; flex-wrap: wrap; gap: 8px; }

  /* KPI tiles + cards stack */
  .grid-3, .grid-3-eq, .grid-4, .layout-2 { grid-template-columns: 1fr !important; }

  /* Buttons: touch target =40px */
  .btn, .btn-solid, .btn-ghost, .btn-primary { padding: 11px 14px; font-size: 13px; }

  /* Page-head action group: full-width buttons row */
  .page-head .btn,
  .page-head .btn-solid,
  .page-head .btn-ghost { flex: 1; justify-content: center; }

  /* Chip row scrolls horizontally rather than wrapping */
  .chip-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 6px;
  }
  .chip-row a { flex-shrink: 0; }

  /* Quick Pay grid + field grid collapse to one column already done at 560/640;
     re-assert here to be sure */
  .quick-pay-grid, .field-grid { grid-template-columns: 1fr !important; }
}

/* iOS � prevent input zoom on focus (text inputs <16px trigger zoom) */
@media (max-width: 640px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="url"], input[type="date"], input[type="datetime-local"],
  textarea, select {
    font-size: 16px !important;
  }
}

/* ============================================================
   DARK MODE
   Triggered by either:
     - prefers-color-scheme: dark  (system preference)
     - data-theme="dark" on <html> (manual override via toggle)
   Users who explicitly pick light always get light, even on a
   dark-mode OS, via data-theme="light".
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Invert the slate scale. Components reference --slate-N
       throughout the file, so this single remap dark-themes the
       entire UI without rewriting individual rules. */
    --slate-50:  #0f172a;
    --slate-100: #1e293b;
    --slate-200: #334155;
    --slate-300: #475569;
    --slate-400: #64748b;
    --slate-500: #94a3b8;
    --slate-600: #cbd5e1;
    --slate-700: #e2e8f0;
    --slate-800: #f1f5f9;
    --slate-900: #f8fafc;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
    --shadow:    0 4px 14px rgba(0,0,0,0.40);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.55);

    /* The role layer, re-pointed at the inverted scale. Everything that reads
       a role token — cards, inputs, tables, nav, buttons — follows from here,
       including pages written after this was set up. */
    --bg-page:       var(--slate-50);
    --bg-surface:    var(--slate-100);
    --bg-sidebar:    var(--slate-100);
    --bg-header:     var(--slate-100);
    --bg-footer:     var(--slate-50);
    --bg-modal:      var(--slate-100);
    --bg-input:      var(--slate-50);
    --bg-table-head: var(--slate-50);
    --text-body:     var(--slate-700);
    --text-heading:  var(--slate-900);
    --text-muted:    var(--slate-500);
    --nav-text:        var(--slate-600);
    --nav-hover-bg:    var(--slate-200);
    --nav-active-text: var(--slate-900);
    --border-color:  var(--slate-200);

    --status-ink:     #fff;
    --status-ink-amt: 46%;
    --status-bg-amt:  26%;
  }
}
/* Raised from [data-theme="dark"] to html[data-theme="dark"] so it outranks
   the :root block the appearance settings inject after this file. */
html[data-theme="dark"] {
  --slate-50:  #0f172a;
  --slate-100: #1e293b;
  --slate-200: #334155;
  --slate-300: #475569;
  --slate-400: #64748b;
  --slate-500: #94a3b8;
  --slate-600: #cbd5e1;
  --slate-700: #e2e8f0;
  --slate-800: #f1f5f9;
  --slate-900: #f8fafc;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow:    0 4px 14px rgba(0,0,0,0.40);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.55);

  /* The role layer, re-pointed at the inverted scale. Everything that reads
     a role token — cards, inputs, tables, nav, buttons — follows from here,
     including pages written after this was set up. */
  --bg-page:       var(--slate-50);
  --bg-surface:    var(--slate-100);
  --bg-sidebar:    var(--slate-100);
  --bg-header:     var(--slate-100);
  --bg-footer:     var(--slate-50);
  --bg-modal:      var(--slate-100);
  --bg-input:      var(--slate-50);
  --bg-table-head: var(--slate-50);
  --text-body:     var(--slate-700);
  --text-heading:  var(--slate-900);
  --text-muted:    var(--slate-500);
  --nav-text:        var(--slate-600);
  --nav-hover-bg:    var(--slate-200);
  --nav-active-text: var(--slate-900);
  --border-color:  var(--slate-200);

  --status-ink:     #fff;
  --status-ink-amt: 46%;
  --status-bg-amt:  26%;
}

/* Component-specific dark-mode overrides for things that hard-code
   white / #fff / rgba(...). Grouped here so the original light-mode
   stylesheet stays unchanged. The selector list applies to BOTH the
   system-preference path AND the manual data-theme="dark" path. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background: var(--slate-50); color: var(--slate-700); }
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .auth-card,
  :root:not([data-theme="light"]) .modal,
  :root:not([data-theme="light"]) .sidebar,
  :root:not([data-theme="light"]) .topbar .avatar,
  :root:not([data-theme="light"]) .topbar .search,
  :root:not([data-theme="light"]) .kpi-tile,
  :root:not([data-theme="light"]) .info-card { background: var(--slate-100); border-color: var(--slate-200); }
  :root:not([data-theme="light"]) .topbar { background: rgba(15, 23, 42, 0.82); border-bottom-color: var(--slate-200); }
  :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) textarea, :root:not([data-theme="light"]) select {
    background: var(--slate-50); color: var(--slate-700); border-color: var(--slate-200);
  }
  :root:not([data-theme="light"]) table.dira { background: var(--slate-100); }
  :root:not([data-theme="light"]) table.dira thead th { background: var(--slate-50); color: var(--slate-600); border-bottom-color: var(--slate-200); }
  :root:not([data-theme="light"]) table.dira tbody td { border-bottom-color: var(--slate-200); color: var(--slate-700); }
  :root:not([data-theme="light"]) table.dira tbody tr:hover td { background: rgba(99, 102, 241, 0.08); }
  :root:not([data-theme="light"]) .nav a { color: var(--slate-600); }
  :root:not([data-theme="light"]) .nav a:hover { background: var(--slate-200); color: var(--slate-800); }
  :root:not([data-theme="light"]) .sidebar { background: linear-gradient(180deg, #1e2233, #0f172a); }
  :root:not([data-theme="light"]) .btn-ghost { background: var(--slate-50); color: var(--slate-700); border-color: var(--slate-200); }
}
html[data-theme="dark"] body { background: var(--slate-50); color: var(--slate-700); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar .avatar,
html[data-theme="dark"] .topbar .search,
html[data-theme="dark"] .kpi-tile,
html[data-theme="dark"] .info-card { background: var(--slate-100); border-color: var(--slate-200); }
html[data-theme="dark"] .topbar { background: rgba(15, 23, 42, 0.82); border-bottom-color: var(--slate-200); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--slate-50); color: var(--slate-700); border-color: var(--slate-200);
}
html[data-theme="dark"] table.dira { background: var(--slate-100); }
html[data-theme="dark"] table.dira thead th { background: var(--slate-50); color: var(--slate-600); border-bottom-color: var(--slate-200); }
html[data-theme="dark"] table.dira tbody td { border-bottom-color: var(--slate-200); color: var(--slate-700); }
html[data-theme="dark"] table.dira tbody tr:hover td { background: rgba(99, 102, 241, 0.08); }
html[data-theme="dark"] .nav a { color: var(--slate-600); }
html[data-theme="dark"] .nav a:hover { background: var(--slate-200); color: var(--slate-800); }
html[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #1e2233, #0f172a); }
html[data-theme="dark"] .btn-ghost { background: var(--slate-50); color: var(--slate-700); border-color: var(--slate-200); }

/* ---------------------------------------------------------------------------
   ISP signup — portal subdomain field
   The input and its fixed domain suffix read as one address bar, so the
   applicant sees the whole URL they are choosing rather than a bare word.
   --------------------------------------------------------------------------- */
.subdomain-control { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.subdomain-control input {
  flex: 1 1 12ch; min-width: 0;
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.subdomain-suffix {
  display: inline-flex; align-items: center;
  padding: 0 .7rem;
  font-size: .82rem; white-space: nowrap;
  color: var(--muted, #64748b);
  background: var(--sunk, #f1f5f9);
  border: 1px solid var(--hair, #e2e8f0); border-left: 0;
  border-top-right-radius: 8px; border-bottom-right-radius: 8px;
}
/* Narrow screens: the suffix wraps under the input and squares off. */
@media (max-width: 560px) {
  .subdomain-control input { border-radius: 8px 8px 0 0; }
  .subdomain-suffix {
    flex: 1 1 100%;
    border-left: 1px solid var(--hair, #e2e8f0); border-top: 0;
    border-radius: 0 0 8px 8px;
  }
}
.subdomain-preview {
  margin: .4rem 0 0; font-size: .8rem; word-break: break-all;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--muted, #64748b);
}
.subdomain-status { margin: .3rem 0 0; font-size: .82rem; font-weight: 600; }
.subdomain-status.is-checking { color: var(--muted, #64748b); font-weight: 400; }
.subdomain-status.is-ok       { color: #15803d; }
.subdomain-status.is-error    { color: #b91c1c; }
@media (prefers-color-scheme: dark) {
  .subdomain-status.is-ok    { color: #4ade80; }
  .subdomain-status.is-error { color: #f87171; }
}

/* Guidance shown on the platform host, where ISP staff and customers have no
   tab to click — they belong on their own provider's portal address. */
.auth-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--muted, #64748b);
  background: var(--sunk, #f1f5f9);
  border: 1px solid var(--hair, #e2e8f0);
  border-radius: 8px;
}
.auth-note code {
  font-size: .82em;
  word-break: break-all;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ink, #0f172a);
  font-weight: 600;
}