/* ═══════════════════════════════════════════════════════════════
   WISP UI — design system for binaryCMS (wisp-dark backend theme)
   Dark-first, playful accents, zero core changes.
   Loaded by layout.html AFTER tabler.min.css. Plugin pages get
   restyled purely through this layer (body-prefixed = beats
   plugin inline <style> blocks without touching plugin code).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --wisp-accent: #6366f1;
  --wisp-accent-2: #22d3ee;
  --wisp-accent-3: #e879f9;
  --wisp-grad: linear-gradient(120deg, var(--wisp-accent), var(--wisp-accent-2) 55%, var(--wisp-accent-3));
  --wisp-grad-soft: linear-gradient(120deg, rgba(99,102,241,.18), rgba(34,211,238,.12) 55%, rgba(232,121,249,.14));
  --wisp-radius: 14px;
  --wisp-radius-sm: 10px;
  --wisp-speed: .22s cubic-bezier(.4, 0, .2, 1);
  --wisp-pop: .28s cubic-bezier(.34, 1.56, .64, 1);
  --wisp-glow: 0 0 0 1px rgba(99,102,241,.35), 0 8px 30px -6px rgba(99,102,241,.45);
  --wisp-font-num: 'Inter Var', ui-sans-serif, system-ui, sans-serif;
}

/* Light-mode softening of tokens */
[data-bs-theme="light"] {
  --wisp-glass: rgba(255,255,255,.75);
  --wisp-glass-border: rgba(15,23,42,.08);
}
[data-bs-theme="dark"] {
  --wisp-glass: rgba(17,24,39,.72);
  --wisp-glass-border: rgba(148,163,184,.14);
}

/* ── Global texture & motion ─────────────────────────────── */
body {
  font-feature-settings: "cv03","cv04","cv11";
  letter-spacing: -0.011em;
}
body[data-bs-theme="dark"] {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(34,211,238,.10), transparent 60%),
    #0b1020;
  background-attachment: fixed;
}

@media (prefers-reduced-motion: no-preference) {
  body .card, body .btn, body .badge { transition: transform var(--wisp-speed), box-shadow var(--wisp-speed), border-color var(--wisp-speed), background var(--wisp-speed); }
  body .card:hover { transform: translateY(-2px); }
  body .btn:hover { transform: translateY(-1px); }
  body .btn:active { transform: translateY(0) scale(.98); }
}

/* Slim playful scrollbars */
body ::-webkit-scrollbar { width: 9px; height: 9px; }
body ::-webkit-scrollbar-thumb { background: rgba(99,102,241,.35); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
body ::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,.6); border: 2px solid transparent; background-clip: content-box; }
body ::-webkit-scrollbar-track { background: transparent; }

/* Selection */
body ::selection { background: rgba(99,102,241,.4); color: #fff; }

/* ── Cards: glass, gradient top edge ─────────────────────── */
body .card {
  border-radius: var(--wisp-radius);
  border: 1px solid var(--wisp-glass-border);
  background: var(--wisp-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 2px rgba(2,6,23,.25), 0 8px 24px -18px rgba(2,6,23,.5);
  overflow: hidden;
}
[data-bs-theme="light"] body .card { box-shadow: 0 1px 2px rgba(2,6,23,.06), 0 10px 28px -20px rgba(2,6,23,.25); }
body .card-header {
  background: transparent;
  border-bottom: 1px solid var(--wisp-glass-border);
  padding: .9rem 1.1rem;
}
body .card-title { font-weight: 700; letter-spacing: -.01em; }
body .card-footer { background: transparent; border-top: 1px solid var(--wisp-glass-border); }

/* ── Buttons: gradient primary + ghost rest ──────────────── */
body .btn { border-radius: var(--wisp-radius-sm); font-weight: 600; }
body .btn-primary,
body .btn-success { border: none; }
body .btn-primary {
  background: var(--wisp-grad);
  background-size: 160% 160%;
  box-shadow: 0 4px 14px -4px rgba(99,102,241,.55);
}
body .btn-primary:hover, body .btn-primary:focus {
  background-position: 90% 50%;
  box-shadow: 0 6px 20px -4px rgba(99,102,241,.65);
}
body .btn-ghost-primary, body .btn-ghost-secondary, body .btn-outline-secondary { color: inherit; }
body .btn-sm { border-radius: 9px; }

/* ── Forms ───────────────────────────────────────────────── */
body .form-control, body .form-select, body .form-control:focus {
  border-radius: var(--wisp-radius-sm);
}
body .form-control:focus, body .form-select:focus {
  border-color: var(--wisp-accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.22);
}
body .form-label { font-weight: 600; font-size: .8125rem; }
body input:not([type="checkbox"]):not([type="radio"]), body select, body textarea { min-height: 2.4rem; }

/* ── Tables ──────────────────────────────────────────────── */
body .table { --tblr-table-hover-bg: rgba(99,102,241,.07); margin-bottom: 0; }
body .table thead th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tblr-secondary);
  border-bottom: 1px solid var(--wisp-glass-border);
}
body .table td, body .table th { vertical-align: middle; }
body .table-responsive { border-radius: inherit; }
/* phones: let any unwrapped table scroll instead of breaking layout */
@media (max-width: 768px) {
  body .card-body > .table, body .card > .table, body .table-responsive { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body .table td, body .table th { white-space: nowrap; }
  body .btn { min-height: 40px; }
  body .btn-sm, body .btn-group-sm > .btn { min-height: 34px; }
}

/* ── Badges & avatars ────────────────────────────────────── */
body .badge { border-radius: 7px; font-weight: 700; padding: .35em .6em; }
body .avatar { border: 2px solid rgba(99,102,241,.35); }
body .status-dot { box-shadow: 0 0 0 3px rgba(47,179,68,.18); }

/* ═══════════════════════════════════════════════════════════
   COMPAT LAYER — known plugin/legacy patterns (body-prefixed)
   ═══════════════════════════════════════════════════════════ */
/* wisp_crm dots & badges */
body .wisp-dot { width: 9px; height: 9px; }
body .wisp-dot-green { box-shadow: 0 0 8px rgba(47,179,68,.8); }
body .wisp-dot-red { box-shadow: 0 0 8px rgba(214,57,57,.8); }
body .wisp-badge-pppoe {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  background: rgba(99,102,241,.12); color: #a5b4fc;
  border: 1px solid rgba(99,102,241,.25);
}
body .wisp-badge-city { background: rgba(34,211,238,.12); color: #67e8f9; }
body .wisp-seen-live { color: #4ade80; }
body .wisp-seen-recent { color: #fbbf24; }
body .wisp-seen-old { color: #94a3b8; }
body .wisp-row:hover td { background: rgba(99,102,241,.09) !important; }
body .wisp-progress { background: rgba(148,163,184,.15); border-radius: 4px; }
body .wisp-progress-bar { background: var(--wisp-grad) !important; }
/* legacy hardcoded blues (htmx tables, forms, hr borders) */
body .text-primary { color: #818cf8 !important; }
body .bg-primary, body .btn-primary { --tblr-btn-color: #6366f1; }
body hr { border-color: var(--wisp-glass-border); }
/* widgets & iframes inherit dark bg */
body .widget-frame { background: transparent; color-scheme: dark; }
/* easymde editor surface */
body .CodeMirror { background: rgba(2,6,23,.4); color: #e2e8f0; border-radius: var(--wisp-radius-sm); }
body .editor-toolbar { background: rgba(15,23,42,.5); border-color: var(--wisp-glass-border); }
body .editor-toolbar button { color: #cbd5e1; }
/* datatables */
body .dataTables_wrapper .dataTables_filter input, body .dataTables_wrapper .dataTables_length select {
  border-radius: var(--wisp-radius-sm);
}
/* modals & dropdowns */
body .modal-content { border-radius: var(--wisp-radius); border: 1px solid var(--wisp-glass-border); background: #111827; }
[data-bs-theme="light"] body .modal-content { background: #fff; }
body .dropdown-menu { border-radius: var(--wisp-radius-sm); border: 1px solid var(--wisp-glass-border); }
/* alerts get softer corners */
body .alert { border-radius: var(--wisp-radius-sm); }

/* ═══════════════════════════════════════════════════════════
   Layout pieces rendered by wisp-dark layout.html
   ═══════════════════════════════════════════════════════════ */
/* Active nav pill glow */
.wd-nav-item.active {
  background: var(--wisp-grad-soft) !important;
  box-shadow: inset 2px 0 0 var(--wisp-accent);
}
/* Command palette */
.wd-palette-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(2,6,23,.6); backdrop-filter: blur(6px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.wd-palette-backdrop.open { display: flex; animation: wdFade .15s ease; }
.wd-palette {
  width: 100%; max-width: 560px;
  background: #111827; border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(2,6,23,.8);
  overflow: hidden; animation: wdPop .18s var(--wisp-pop);
}
[data-bs-theme="light"] .wd-palette { background: #fff; }
.wd-palette input {
  width: 100%; border: none; outline: none; background: transparent;
  padding: 16px 18px; font-size: 16px; color: inherit;
  border-bottom: 1px solid var(--wisp-glass-border);
}
.wd-palette-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.wd-palette-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  color: inherit; text-decoration: none; font-size: 14px;
}
.wd-palette-item:hover, .wd-palette-item.sel { background: rgba(99,102,241,.16); }
.wd-palette-item .kbd-hint { margin-left: auto; opacity: .5; font-size: 11px; }
.wd-palette-empty { padding: 18px; text-align: center; opacity: .6; font-size: 13px; }
.wd-kbd {
  display: inline-block; padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--wisp-glass-border); background: rgba(148,163,184,.1);
  font-size: 11px; font-weight: 700; line-height: 1.4;
}
@keyframes wdFade { from { opacity: 0; } }
@keyframes wdPop { from { opacity: 0; transform: scale(.96) translateY(-8px); } }

/* Mobile bottom nav (admin) */
.wd-bottomnav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
  background: var(--wisp-glass); backdrop-filter: blur(16px);
  border-top: 1px solid var(--wisp-glass-border);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.wd-bottomnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 600; color: var(--tblr-secondary);
  text-decoration: none; padding: 4px 0; border-radius: 10px;
}
.wd-bottomnav a.active { color: var(--wisp-accent); }
@media (max-width: 768px) {
  .wd-bottomnav { display: flex; }
  body { padding-bottom: 62px; }
  body .wd-page-body { padding-bottom: 84px; }
}

/* ═══════════════════════════════════════════════════════════
   PROFILE / USER EDIT — light-first design + dark variants
   (covers wisp_crm profile tab + core user_edit.html markup;
    body-prefixed = beats plugin <style> blocks, !important =
    beats their !important by higher specificity)
   ═══════════════════════════════════════════════════════════ */

/* text meant to be "dark on light cards" becomes readable on dark */
[data-bs-theme="dark"] body .text-dark { color: var(--tblr-body-color) !important; }

/* ── wisp-card family: light-first refined ── */
body .wisp-card {
  background: var(--wisp-glass) !important;
  border-color: var(--wisp-glass-border) !important;
  border-radius: 16px !important;
  color: var(--tblr-body-color);
  box-shadow: 0 1px 2px rgba(2,6,23,.05), 0 12px 32px -24px rgba(2,6,23,.35) !important;
}
body .wisp-card-head {
  color: var(--tblr-secondary) !important;
  border-bottom: 1px solid var(--wisp-glass-border) !important;
  letter-spacing: .06em;
  padding-bottom: 10px;
}
body .wisp-card-head svg {
  color: var(--wisp-accent, #6366f1) !important;
  background: rgba(99,102,241,.1);
  border-radius: 8px;
  padding: 4px;
  width: 26px !important; height: 26px !important;
}
body .wisp-data-row { border-bottom: 1px dashed var(--wisp-glass-border) !important; padding: 9px 0 !important; }
body .wisp-data-label { color: var(--tblr-secondary) !important; font-size: 10.5px !important; letter-spacing: .05em; }
body .wisp-data-val { color: var(--tblr-body-color) !important; font-variant-numeric: tabular-nums; }
body .wisp-data-val.empty { color: var(--tblr-secondary) !important; }
body .wisp-tile {
  background: rgba(100,116,139,.07) !important;
  border: 1px solid var(--wisp-glass-border) !important;
  border-radius: 12px !important;
  transition: transform .15s ease, border-color .15s ease;
}
body .wisp-tile:hover { transform: translateY(-1px); border-color: rgba(99,102,241,.4) !important; }
body .wisp-tile-lbl { color: var(--tblr-secondary) !important; }
body .wisp-tile-val { color: var(--tblr-body-color) !important; font-weight: 750 !important; }

/* ── sidebar (user_edit shell): brand banner + gradient active pill ── */
body .wisp-sidebar-banner { background: linear-gradient(120deg, #4f46e5 0%, #0e7490 58%, #a21caf 112%) !important; }
body .wisp-avatar-dot { border-color: #fff !important; }
body .wisp-tag { background: rgba(79,70,229,.07) !important; color: #4f46e5 !important; border-color: rgba(79,70,229,.22) !important; }
body .wisp-tag-city { background: rgba(5,150,105,.07) !important; color: #047857 !important; border-color: rgba(5,150,105,.22) !important; }
body .wisp-sidebar-nav { border-top-color: var(--wisp-glass-border) !important; }
body .wisp-sidebar-nav .list-group-item { color: #475569 !important; }
body .wisp-sidebar-nav .list-group-item:hover { background: rgba(15,23,42,.05) !important; color: #0f172a !important; }
body .wisp-sidebar-nav .list-group-item.active {
  background: linear-gradient(120deg, #4f46e5, #0e7490) !important;
  color: #fff !important; border-color: transparent !important;
  box-shadow: 0 6px 16px -8px rgba(79,70,229,.6) !important;
}
body .wisp-sidebar-nav .list-group-item.active svg { color: #fff !important; }
[data-bs-theme="dark"] body .card.wisp-sidebar-card { background: var(--wisp-glass) !important; }
[data-bs-theme="dark"] body .wisp-sidebar-avatar-wrap .avatar { border-color: #0f172a !important; }
[data-bs-theme="dark"] body .wisp-avatar-dot { border-color: #0f172a !important; }
[data-bs-theme="dark"] body .wisp-tag { background: rgba(99,102,241,.14) !important; color: #a5b4fc !important; border-color: rgba(99,102,241,.3) !important; }
[data-bs-theme="dark"] body .wisp-tag-city { background: rgba(34,197,94,.12) !important; color: #6ee7b7 !important; border-color: rgba(34,197,94,.28) !important; }
[data-bs-theme="dark"] body .wisp-sidebar-nav .list-group-item { color: var(--tblr-secondary) !important; }
[data-bs-theme="dark"] body .wisp-sidebar-nav .list-group-item:hover { background: rgba(148,163,184,.1) !important; color: var(--tblr-body-color) !important; }
@media (max-width: 767.98px) {
  body .wisp-sidebar-nav { background: rgba(15,23,42,.035) !important; }
  body .wisp-sidebar-nav .list-group-item { background: #fff !important; border-color: #e2e8f0 !important; }
  [data-bs-theme="dark"] body .wisp-sidebar-nav { background: rgba(148,163,184,.07) !important; border-color: var(--wisp-glass-border) !important; }
  [data-bs-theme="dark"] body .wisp-sidebar-nav .list-group-item { background: rgba(15,23,42,.5) !important; border-color: var(--wisp-glass-border) !important; }
}

/* ── card chrome that assumed light (headers/footers/callouts) ── */
body .card-header.bg-white { background: transparent !important; }
body .card-footer.bg-light { background: rgba(15,23,42,.02) !important; }
body .bg-light { background: rgba(15,23,42,.035) !important; }
[data-bs-theme="dark"] body .card-header.bg-white,
[data-bs-theme="dark"] body .card-footer.bg-light,
[data-bs-theme="dark"] body .bg-light {
  background: rgba(148,163,184,.07) !important;
}

/* status header + finance values */
body #wisp-pane-dashboard .card { border-radius: 16px !important; }
body #wisp-pane-dashboard .h2, body #wisp-pane-dashboard [style*="font-size:28px"] { font-variant-numeric: tabular-nums; }

/* ── scrollable blocks (show more info without endless pages) ── */
body #wisp-session-details-container { max-height: 430px; overflow: auto; overscroll-behavior: contain; }
body #wisp-pane-meta .table-responsive { max-height: 480px; overflow: auto; overscroll-behavior: contain; }
body #crm-wa-chat-box { overscroll-behavior: contain; }
@media (max-width: 767px) {
  body #crm-wa-chat-box { min-height: 300px !important; max-height: 65vh !important; }
}
body .wisp-tab-pane ::-webkit-scrollbar { width: 6px; height: 6px; }
body .wisp-tab-pane ::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 6px; }
body .wisp-tab-pane ::-webkit-scrollbar-track { background: transparent; }

/* WhatsApp chat bubbles (inline styles — override with !important attr selectors) */
[data-bs-theme="dark"] body .wisp-tab-pane [style*="background:#d9fdd3"],
[data-bs-theme="dark"] body .wisp-tab-pane [style*="background: #d9fdd3"] { background: rgba(34,197,94,.16) !important; }
[data-bs-theme="dark"] body .wisp-tab-pane [style*="background:#fff"],
[data-bs-theme="dark"] body .wisp-tab-pane [style*="background: #fff"] { background: rgba(148,163,184,.1) !important; }

/* mobile overflow safety inside profile panes */
body #wisp-profile-canvas, body .wisp-tab-pane {
  min-width: 0; max-width: 100%; overflow-wrap: break-word; word-break: break-word;
}
body .wisp-tab-pane pre, body .wisp-tab-pane code { white-space: pre-wrap; word-break: break-word; }
body .wisp-tab-pane iframe, body .wisp-tab-pane img { max-width: 100%; }
body .wisp-row td, body .wisp-tab-pane td { word-break: break-word; }

/* ═══════════════════════════════════════════════════════════
   MOBILE / SMALL SCREEN OPTIMIZATION (all admin pages)
   ═══════════════════════════════════════════════════════════ */

/* No horizontal page blow-out, ever */
body .wd-page-body { overflow-x: clip; }
body iframe, body canvas, body img, body video { max-width: 100%; }
body pre, body code { white-space: pre-wrap; word-break: break-word; }
body td, body th { overflow-wrap: break-word; }

@media (max-width: 768px) {
  /* ── Typography: prevent iOS focus-zoom ── */
  body input[type="text"], body input[type="search"], body input[type="email"],
  body input[type="password"], body input[type="number"], body input[type="tel"],
  body input[type="url"], body input:not([type]), body select, body textarea {
    font-size: 16px !important;
  }

  /* ── Tables: scroll in place, stay column-aligned ── */
  body table.table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body table.table th, body table.table td { white-space: nowrap; }
  body .table-responsive { -webkit-overflow-scrolling: touch; }
  /* slim scrollbars for table scrollers */
  body table.table::-webkit-scrollbar { height: 6px; }
  body table.table::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 6px; }

  /* ── DataTables controls stack & wrap ── */
  body .dataTables_wrapper .row > div { margin-bottom: 6px; }
  body .dataTables_wrapper .dataTables_filter { text-align: left !important; }
  body .dataTables_wrapper .dataTables_filter input { width: 100% !important; }
  body .dataTables_length select { width: auto; }

  /* ── Toolbar & button groups wrap ── */
  body .btn-toolbar, body .btn-group { flex-wrap: wrap; }
  body .card-header { row-gap: 8px; }
  body .d-flex.flex-wrap { row-gap: 6px; }

  /* ── Modals: edge-to-edge-ish ── */
  body .modal-dialog { margin: 8px; max-width: calc(100vw - 16px); }
  body .modal-fullscreen-sm-down { margin: 0; }

  /* ── Fixed/oversized plugin grids collapse ── */
  body [style*="repeat(16"], body [style*="repeat(16,"] { grid-template-columns: repeat(2, 1fr) !important; }
  body [style*="repeat(4,1fr"], body [style*="repeat(4, 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  body [style*="repeat(3,1fr"], body [style*="repeat(3, 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── KPI/stat rows keep 2-up ── */
  body .row-cards > [class*="col"] { min-width: 0; }

  /* ── Long emails/names truncate inside table cells ── */
  body td code { word-break: break-all; white-space: normal; }

  /* ── Details/summary & list-groups breathe ── */
  body .list-group-item { overflow-wrap: anywhere; }

  /* ── Topbar: icon-only search on tiny screens ── */
  .wd-search-trigger span:not(.wd-kbd) { display: none; }
  .wd-search-trigger { max-width: 46vw; }
  .wd-search-trigger .wd-kbd { display: none; }
  .wd-topbar { gap: 6px; }
}

@media (max-width: 991.98px) {
  /* drawer should close after choosing a nav item (JS adds .wd-nav-tapped) */
  .wd-sidebar.mobile-open { box-shadow: 8px 0 40px rgba(2,6,23,.55); }
}
@media (max-width: 768px) {
  body .btn-list { flex-wrap: wrap !important; row-gap: 6px; }
}

/* ═══ Mobile round 2 — fixes from device testing ═══ */
@media (max-width: 768px) {
  /* Subscriber A-Z letter filter must wrap inside the card */
  body #az-filter { display: flex !important; flex-wrap: wrap !important; max-width: 100%; }
  body #az-filter .badge { white-space: nowrap; }

  /* Tables: size columns to content (no sparse stretching), scroll the rest.
     DataTables keeps its own layout and scrolls via its wrapper. */
  body table.table.dataTable { display: table !important; }
  body .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body .table-responsive > table.table { width: max-content; min-width: 100%; }

  /* Profile sidebar chips wrap instead of clipping */
  body .wisp-sidebar-info { max-width: 100%; }
  body .wisp-sidebar-info [class*="d-flex"] { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  body .wisp-sidebar-info [style*="display:inline-block"], body .wisp-sidebar-info span[style] { max-width: 100%; }

  /* Tab pill strip: scroll cleanly without visible scrollbar */
  body .wisp-sidebar-nav { scrollbar-width: none; }
  body .wisp-sidebar-nav::-webkit-scrollbar { display: none; }
}

/* ═══ Profile sidebar chips: wrap reliably (JS injects them with no
       whitespace between spans, so inline flow can never wrap them) ═══ */
body #wisp-sidebar-meta,
body #wisp-sidebar-ip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
}
body #wisp-sidebar-meta .wisp-tag,
body #wisp-sidebar-ip .wisp-ip-link {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ═══ PROFILE MOBILE — final coherent spec (≤768px) ═══ */
@media (max-width: 768px) {
  /* containment: nothing escapes the screen */
  body #wisp-profile-canvas,
  body #wisp-profile-canvas *:not(table):not(.table):not(.dataTables_wrapper)
   :not(.wisp-sidebar-nav):not(.wisp-sidebar-nav *):not(.table-responsive):not(.table-responsive *) {
    max-width: 100%;
  }
  body #wisp-profile-canvas .row > [class*="col-"],
  body .wisp-tab-pane .row > [class*="col-"] { min-width: 0; }
  body .wisp-profile-header, body .wisp-profile-header * { min-width: 0; }
  body .wisp-profile-header { padding: 14px !important; border-radius: 14px; }

  /* KPI cards: 2-up, shrinkable, readable */
  body .wisp-tab-pane .col-6 { min-width: 0; }
  body .wisp-kpi-card { min-width: 0; padding: 12px !important; }
  body .wisp-kpi-label { flex-wrap: wrap; row-gap: 2px; }
  body .wisp-kpi-val { font-size: 18px !important; word-break: break-word; }
  body .wisp-kpi-sub { font-size: 11px; }

  /* status hero meta strip: 2-up grid, readable */
  body .wisp-profile-header .d-flex.gap-4 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  body .wisp-profile-header .d-flex.gap-4 > .text-end { text-align: left !important; }
  body .wisp-profile-header [style*="font-size:9px"] { font-size: 10px !important; }
  body .wisp-profile-header [style*="font-size:12px"] { font-size: 13px !important; white-space: normal !important; word-break: break-word !important; }

  /* telemetry tiles 2-up */
  body .wisp-tab-pane .wisp-tile { flex: 1 1 40%; min-width: 0; }
  body .wisp-tab-pane .wisp-tile-val { white-space: normal; word-break: break-word; }
  body #wisp-session-details-container .row > [class*="col"] { min-width: 0; }
  body .wisp-hdr-dot { flex-shrink: 0; }
}

/* ═══ Root flex-shrink fixes: nothing may widen the page on phones ═══ */
@media (max-width: 768px) {
  body .wd-main, body .wd-page-wrapper, body .wd-page-body { min-width: 0; }
  body .container-xl, body .container, body .row, body [class*="col-"] { min-width: 0; }
  body .wisp-sidebar-nav { width: 100%; max-width: 100%; }
}

/* Long single buttons (e.g. Settings SSL deploy) must wrap & fit on phones */
@media (max-width: 768px) {
  body .btn { white-space: normal; max-width: 100%; }
}

/* floating toast: never exceed viewport */
body .toast-float { max-width: calc(100vw - 32px); }
body #wdsh-toast { max-width: calc(100vw - 32px); }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE READABILITY & TOUCH PASS — 2026-09-08 mobile UX push
   Goals: no iOS input zoom (16px), 44px+ touch targets, readable text,
   tables that don't crush, forms that are usable with thumbs.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* — iOS zoom prevention: every input 16px+ — */
  body input.form-control, body select.form-select, body textarea.form-control,
  body input[type="text"], body input[type="search"], body input[type="tel"],
  body input[type="email"], body input[type="password"], body input[type="number"],
  body input[type="date"], body select, body textarea {
    font-size: 16px !important;
  }

  /* — Touch targets — */
  body .btn { min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
  body .btn-sm { min-height: 36px; }
  body .form-check-input { width: 20px; height: 20px; }
  body .page-link { min-height: 42px; display: flex; align-items: center; justify-content: center; }
  body .list-group-item { padding-top: 12px; padding-bottom: 12px; }
  body .nav-tabs .nav-link { padding: 10px 12px; }
  body a { -webkit-tap-highlight-color: rgba(32,107,196,.15); }

  /* — Readable base text — */
  body { font-size: 15.5px; }
  body .table { font-size: 14px; }
  body .small, body small { font-size: 12.5px; }

  /* — Tables: scrollable without page breakouts, sticky header feel — */
  body .table-responsive {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body .table td, body .table th { padding: 8px 10px; }

  /* — Modals usable on phones — */
  body .modal-dialog { margin: 10px; max-width: none; }
  body .modal-content { border-radius: 16px; }
  body .modal-body { max-height: 72vh; overflow-y: auto; }

  /* — Cards breathe — */
  body .card-body { padding: 12px; }

  /* — Admin header actions wrap instead of overflowing — */
  body .page-header, body .page-body .header { flex-wrap: wrap; gap: 8px; }

  /* — User profile tab nav: horizontal scroll strip, fat targets — */
  body .wisp-sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  body .wisp-sidebar-nav::-webkit-scrollbar { display: none; }
  body .wisp-sidebar-nav .list-group-item {
    flex: 0 0 auto;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    margin-bottom: 0 !important;
  }
  body .wisp-sidebar-nav svg { display: none; }

  /* — Data rows / key-value tables wrap long values — */
  body .wisp-data-row td, body .wisp-data-row { word-break: break-word; overflow-wrap: anywhere; }
  body code { word-break: break-all; }

  /* — Dashboard KPI grids: 2-up already, ensure stats numbers fit — */
  body .fs-2 { font-size: 1.35rem !important; }
  body .fs-1 { font-size: 1.6rem !important; }

  /* — Tabs/panes and profile content not wider than screen — */
  body .wisp-tab-pane iframe { max-width: 100%; }
  body img { max-width: 100%; height: auto; }

  /* — Search inputs inside toolbars go full width — */
  body .card-header .form-control, body .card-body .d-flex .form-control { max-width: 100%; }

  /* — Breadcrumb: truncate long chains — */
  body .breadcrumb { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; font-size: 12.5px; }
  body .breadcrumb::-webkit-scrollbar { display: none; }
}

/* ═══ Role-based dashboard gating (server-derived body class, zero flash) ═══
   The layout stamps <body class="role-…"> from the authenticated user's role.
   Non-admin roles see only network-connected details (WISP Operations panel):
   system stats, quick actions and every other plugin widget are hidden. */
body:not(.role-admin) .dashboard-block[data-block-id="stats"],
body:not(.role-admin) .dashboard-block[data-block-id="quick-actions"] { display: none !important; }
body:not(.role-admin) .dashboard-block[data-plugin-name]:not([data-plugin-name="WISP Dash"]) { display: none !important; }

/* Banner variants (dashboard context has no .User — body class decides) */
body:not(.role-admin) .wst-banner-admin { display: none !important; }
body.role-admin .wst-banner-admin { display: inline-flex !important; }