@font-face {
  font-family: 'Fraunces';
  src: url('./vendor/fonts/fraunces-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('./vendor/fonts/fraunces-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('./vendor/fonts/fraunces-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('./vendor/fonts/manrope-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('./vendor/fonts/manrope-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('./vendor/fonts/manrope-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('./vendor/fonts/manrope-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('./vendor/fonts/manrope-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* CRM theme tokens -- white/neutral background with royal blue as the
     primary accent (buttons, active states, focus rings, table headers).
     Variable NAMES below (--gold, --maroon*) are legacy from the original
     maroon/gold "luxury" theme and intentionally left unrenamed -- hundreds
     of rules throughout this file reference them via var(--gold) etc., and
     renaming would touch every one of those call sites for no functional
     benefit. Only the VALUES changed. See
     docs/WAADA_CRM_UX_Audit_2026-07-06 Finding 8. */
  --bg: #FFFBF9;
  --panel: #FFFFFF;
  --panel-soft: #FBEEEE;
  --ink: #0F172A;
  --muted: #64748B;
  --maroon: #B3364B;
  --maroon-deep: #7A2436;
  --maroon-light: #C65A70;
  --gold: #B3364B;
  --line: #E2E8F0;
  --ok: #1F6F5C;
  --warn: #B45309;
  --bad: #DC2626;
  --shadow: 0 24px 60px rgba(15, 23, 42, .12);
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
}
h1, h2, h3, .brand strong { font-family: var(--font-display); }
.hidden { display: none !important; }

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(179, 54, 75, .08), transparent 34%),
    linear-gradient(135deg, #FFFBF9 0%, #FBEFEC 52%, #F7E9E6 100%);
}
.login-card {
  width: min(460px, 100%);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 28px;
  display: grid;
  gap: 24px;
}
.brand.compact { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.login-card h1 { font-size: 28px; }
.login-copy { color: var(--muted); line-height: 1.55; margin-bottom: 0; }
.login-form { display: grid; gap: 14px; }
.login-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.login-form input { width: 100%; }
.form-error { min-height: 18px; color: var(--bad); font-size: 13px; margin: 0; }

.crm-view {
  min-height: 100vh;
  display: block;
}

.nav-chrome {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
}

.appbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
  background: rgba(255, 251, 249, .96);
  border-bottom: 1px solid var(--line);
}

.main-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  overflow-x: auto;
}

.main-menu-item {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  padding: 9px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.main-menu-item:hover { background: rgba(15, 23, 42, .045); }

.main-menu-item.active {
  color: #fff;
  background: var(--maroon);
  border-color: var(--maroon-deep);
}

.appbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.sub-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: rgba(255, 251, 249, .8);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.sub-menu-group {
  display: none;
  align-items: center;
  gap: 8px;
}

.sub-menu-group.active {
  display: flex;
}

/* Small non-interactive dividers used to sub-group a nav section's buttons
   (e.g. People & Trust -> Profile Review / Support & Safety / Live Operations).
   See docs/WAADA_CRM_UX_Audit_2026-07-06 Finding 6. */
.nav-group-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
.nav-group-label:first-child { margin-left: 0; padding-left: 0; border-left: none; }

.brand { display: flex; gap: 12px; align-items: center; }
.mark {
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--maroon), var(--maroon-deep)); color: #fff;
  display: grid; place-items: center;
  font-weight: 900;
}
.brand strong { display: block; font-size: 18px; color: var(--ink); }
.brand span { color: var(--muted); font-size: 12px; }
nav { display: grid; gap: 8px; }
.nav {
  border: 0; background: transparent; color: var(--ink);
  text-align: left; padding: 12px 14px; border-radius: 10px;
  font-weight: 700; cursor: pointer;
}
.nav.active, .nav:hover { background: var(--maroon); color: #fff; }
.security-note {
  margin-top: auto; background: rgba(179, 54, 75, .1); color: #7A2436;
  border: 1px solid rgba(179, 54, 75, .28); border-radius: 12px;
  padding: 12px; font-size: 12px; line-height: 1.45;
}
.staff-card {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(15, 23, 42, .03);
}
.staff-card span { color: var(--muted); font-size: 12px; }
.staff-card strong { color: var(--maroon); text-transform: capitalize; }
.staff-card button { width: 100%; margin-top: 4px; }

.shell { padding: 28px; min-width: 0; }
.topbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 18px;
}
.eyebrow {
  margin: 0 0 4px; color: var(--gold);
  font-size: 12px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase;
}
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; color: var(--ink); font-size: 30px; }
.toolbar { display: flex; gap: 10px; align-items: center; }
input, select, textarea {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; background: #FFFFFF; color: var(--ink);
}
input { width: 260px; }
button {
  border: 0; border-radius: 8px; padding: 0 16px; min-height: 36px;
  background: var(--maroon); color: #fff; font-weight: 600; font-size: 13px;
  cursor: pointer;
}
button.secondary { background: #FFFFFF; color: var(--ink); border: 1px solid var(--line); }
button.good { background: var(--ok); }
button.bad { background: var(--bad); }
button.warn { background: var(--warn); }
button:disabled {
  opacity: .48;
  cursor: not-allowed;
}
a { color: var(--maroon); font-weight: 800; word-break: break-all; }

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.stat:hover { border-color: var(--gold); box-shadow: 0 10px 24px rgba(179, 54, 75, .1); }
.stat span { color: var(--muted); font-size: 12px; font-weight: 700; }
.stat strong { display: block; font-size: 26px; color: var(--ink); margin-top: 4px; }

.content-grid {
  display: grid; grid-template-columns: minmax(360px, 480px) 1fr;
  gap: 16px; align-items: start;
}
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--line);
}
.panel-head h2 { margin: 0; font-size: 16px; }
.panel-head span {
  background: rgba(179, 54, 75, .14); color: #BE185D;
  padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
}
.list { max-height: calc(100vh - 220px); overflow: auto; }
.row {
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  display: grid; gap: 6px; cursor: pointer;
}
.row:hover, .row.selected { background: rgba(15, 23, 42, .04); }
.row.danger-row {
  border-left: 4px solid var(--bad);
  background: rgba(184, 75, 85, .06);
}
.row.danger-row:hover, .row.danger-row.selected {
  background: rgba(184, 75, 85, .12);
}
.block-summary {
  margin-top: 6px;
  color: #9F1239;
  font-size: 13px;
  font-weight: 900;
}
.block-summary.large {
  color: var(--bad);
  background: rgba(184, 75, 85, .08);
  border: 1px solid rgba(184, 75, 85, .16);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0;
}
.add-row { width: 100%; border-radius: 0; background: rgba(179, 54, 75, .08); color: var(--ink); }
.row-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-ref {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  text-align: left;
  cursor: pointer;
}
.user-ref:hover strong { color: var(--gold); text-decoration: underline; }
.user-ref strong {
  color: inherit;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.user-ref small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
}
.user-ref.compact strong { font-size: 13px; }
.user-ref.compact small { font-size: 10px; }
.user-ref.muted {
  color: var(--muted);
  cursor: default;
}
.inline-users {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.hero-users { margin-top: 4px; }
.profile-id-line { font-weight: 800; }
.row-actions { display: flex; gap: 8px; margin-top: 4px; }
.row-actions button { padding: 7px 10px; font-size: 12px; }
.row-actions button:disabled { opacity: .55; cursor: not-allowed; }
.meta { color: var(--muted); font-size: 12px; }
.notice.info {
  margin: 14px 0 18px;
  padding: 12px 14px;
  border: 1px solid #ead7a8;
  border-radius: 12px;
  background: #fff9e8;
  color: #6f531b;
  font-size: 12px;
  line-height: 1.55;
}
.quality-mini {
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: #E2E8F0;
}
.quality-mini span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--maroon), var(--gold));
}
.pill {
  border-radius: 999px; padding: 3px 9px; font-size: 11px;
  font-weight: 700; text-transform: capitalize; letter-spacing: .01em;
}
.pending { background: rgba(217, 119, 6, .14); color: #B45309; }
.approved { background: rgba(31, 111, 92, .16); color: #1F6F5C; }
.rejected { background: rgba(184, 75, 85, .16); color: #DC2626; }
.pill.info { background: rgba(99, 102, 241, .16); color: #4338CA; }
.gender-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  margin-right: 6px;
}
.gender-chip.male { background: #dbeafe; color: #1d4ed8; }
.gender-chip.female { background: #fce7f3; color: #be185d; }
.gender-chip.missing { background: rgba(15, 23, 42, .08); color: var(--muted); }

.detail-panel { min-height: 520px; }
.detail-empty { padding: 28px; color: var(--muted); }
.detail { padding: 18px; }
.hero {
  display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: center;
  border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 16px;
}
.hero.slim { grid-template-columns: 56px 1fr; }
.staff-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--maroon), var(--gold));
}
.avatar {
  width: 128px; height: 128px; border-radius: 18px;
  object-fit: cover; background: #eee;
}
.detail h2 { margin-bottom: 4px; color: var(--ink); }
.detail .sub { color: var(--muted); font-size: 13px; }
.detail-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 12px;
  margin: -2px 0 14px;
  border-bottom: 1px solid var(--line);
}
.detail-tab {
  flex: 0 0 auto;
  background: rgba(15, 23, 42, .04);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 12px;
}
.detail-tab.active {
  background: rgba(179, 54, 75, .18);
  color: #fff;
  border-color: rgba(179, 54, 75, .38);
}
.detail [hidden] { display: none !important; }
.review-workflow {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-soft);
  padding: 14px;
  margin-bottom: 14px;
}
.workflow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.workflow-head strong { color: var(--ink); }
.workflow-head span { color: var(--gold); font-size: 12px; font-weight: 900; }
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.workflow-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(15, 23, 42, .04);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 12px;
}
.workflow-step span {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--muted);
  font-size: 10px;
}
.workflow-step.active {
  border-color: rgba(179, 54, 75, .45);
  color: #fff;
}
.workflow-step.done {
  background: rgba(31, 111, 92, .14);
  border-color: rgba(31, 111, 92, .3);
  color: #1F6F5C;
}
.accept-section { width: 100%; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quality-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
  padding: 14px;
  margin-bottom: 14px;
}
.quality-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.quality-box label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.quality-box strong { color: var(--ink); font-size: 20px; }
.quality-track {
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: #E2E8F0;
  margin-bottom: 8px;
}
.quality-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--maroon), var(--gold));
}
.field {
  background: var(--panel-soft); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px;
}
.field label { display: block; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; margin-bottom: 4px; }
.field p { margin: 0; line-height: 1.45; }
.profile-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--ink);
  text-align: left;
}
.profile-card:hover {
  border-color: rgba(179, 54, 75, .72);
  transform: translateY(-1px);
}
.profile-card img {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.profile-card span {
  display: grid;
  gap: 3px;
}
.profile-card small {
  color: var(--muted);
}
.section-head {
  margin: 12px 0 10px;
}
.section-head h3,
.detail h3 {
  margin: 18px 0 8px;
}
.section-head p,
.section-note {
  margin: -2px 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.detail-section {
  display: grid;
  gap: 12px;
}
.media { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.media img { width: 120px; height: 140px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); }
.review-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  overflow: visible;
  gap: 12px;
}
.review-media figure,
.secure-media {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
  padding: 10px;
  min-height: 190px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.review-media figure img,
.secure-media img {
  width: 100%;
  height: 230px;
  border-radius: 12px;
  object-fit: cover;
}
.secure-review-media .secure-media img {
  object-fit: contain;
  background: rgba(15, 23, 42, .04);
}
.review-media figcaption {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.photo-carousel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.photo-carousel-viewport {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  touch-action: pan-y;
}
.photo-carousel-track {
  display: flex;
  transition: transform 0.28s ease;
  will-change: transform;
}
.photo-carousel-slide {
  margin: 0;
  flex: 0 0 100%;
  padding: 10px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.photo-carousel-slide img {
  width: 100%;
  height: 320px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.photo-carousel-nav {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.photo-carousel-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.photo-carousel-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.photo-carousel-counter {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.photo-carousel-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.photo-carousel-dot {
  width: 24px;
  height: 6px;
  border-radius: 999px;
  border: 0;
  background: rgba(15, 23, 42, .18);
  cursor: pointer;
}
.photo-carousel-dot.active {
  width: 34px;
  background: var(--gold);
}
.review-media.photo-carousel-host {
  display: block;
  overflow: visible;
}
.photo-review-host,
.verification-review-host {
  display: block;
  overflow: visible;
}
.photo-review-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1500px) {
  .photo-review-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .photo-review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .photo-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.photo-review-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(15, 23, 42, .04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.photo-review-frame {
  aspect-ratio: 3 / 4;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-review-media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.photo-review-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #F1F5F9;
}
.photo-review-meta {
  padding: 10px;
  display: grid;
  gap: 8px;
}
.photo-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.photo-review-head strong {
  font-size: 12px;
  line-height: 1.35;
}
.photo-review-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.photo-review-actions button {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  padding: 8px 10px;
}
.photo-review-reason-input {
  width: 100%;
  min-height: 56px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, .06);
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
  resize: vertical;
}
.photo-review-summary {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(179, 54, 75, .28);
  background: rgba(179, 54, 75, .08);
}
.photo-review-summary.blocked {
  border-color: rgba(184, 75, 85, .22);
  background: rgba(184, 75, 85, .06);
}
.photo-review-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.photo-review-blockers {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
}
.section-verification-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 14px;
}
@media (max-width: 1200px) {
  .section-verification-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .section-verification-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.section-verification-status {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}
.section-verification-status span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.section-verification-list {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}
.queue-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.section-verification-filter.active {
  border-color: var(--maroon);
  color: var(--maroon);
  background: rgba(179, 54, 75, .08);
}
.section-verification-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(15, 23, 42, .035);
  display: grid;
  gap: 12px;
}
.section-verification-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.section-verification-card-head label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.section-verification-card-head strong {
  color: var(--ink);
  font-size: 14px;
}
.section-verification-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--maroon);
  background: var(--panel);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}
.secondary-link:hover { border-color: var(--maroon); }
.section-verification-form {
  margin: 0;
}
.section-verification-form textarea {
  min-height: 74px;
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.actions.tight { margin-top: 0; }
.approval-summary {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(179, 54, 75, .34);
  border-radius: 14px;
  background: rgba(179, 54, 75, .08);
}
.approval-summary.blocked {
  border-color: rgba(184, 75, 85, .22);
  background: rgba(184, 75, 85, .06);
}
.approval-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.approval-summary-head label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.approval-summary-head strong { display: block; margin-top: 4px; color: var(--ink); }
.approval-summary p { margin: 10px 0 0; color: var(--muted); line-height: 1.5; }
.approval-summary ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink); }
.approval-summary li + li { margin-top: 6px; }
.approval-blocker-group { margin-top: 14px; }
.approval-blocker-group label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.approval-blocker-group.overridden {
  border-top: 1px solid rgba(179, 54, 75, .18);
  padding-top: 12px;
}
.approval-blocker-item { list-style: disc; }
.approval-blocker-item .override-blocker-btn { margin-top: 8px; }
.approval-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.crm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .6);
  backdrop-filter: blur(10px);
}
.crm-modal {
  width: min(520px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(179, 54, 75, .42);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42);
}
.crm-modal h2 { margin: 14px 0 8px; }
.crm-modal > p { color: var(--muted); line-height: 1.55; }
.approval-confirm-list {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
.approval-confirm-list div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--ink);
  font-size: 13px;
}
.approval-confirm-list span { color: var(--gold); font-weight: 900; }
.approval-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.approval-confirm-check input {
  width: auto;
  margin-top: 2px;
  accent-color: var(--maroon);
}
.diff {
  border: 1px dashed var(--gold); border-radius: 12px;
  background: rgba(179, 54, 75, .08); padding: 12px; margin-top: 12px;
}
.diff pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; color: var(--ink); }
.form-grid { display: grid; gap: 10px; margin: 14px 0 20px; }
.form-grid input, .form-grid textarea, .form-grid select { width: 100%; }
.form-grid textarea { min-height: 110px; resize: vertical; }
.counter-line { display: flex; justify-content: flex-end; color: var(--muted); font-size: 11px; font-weight: 800; margin-top: -6px; }
.check-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
.check-row input { width: auto; }
.mini-list { display: grid; gap: 8px; }
.mini-row {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 3px;
}
.mini-row strong { color: var(--ink); }
.mini-row span { color: var(--muted); font-size: 12px; }
.mini-row p { margin: 4px 0 0; color: var(--ink); line-height: 1.45; }
.moderation-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.moderation-form textarea,
.moderation-form button {
  grid-column: 1 / -1;
}
.ticket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.chat-box {
  display: grid;
  gap: 10px;
  max-height: 330px;
  overflow: auto;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.support-message {
  width: min(78%, 620px);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.support-message.crm {
  justify-self: end;
  background: #fff0f4;
  border-color: #fbd2dd;
}
.support-message strong { display: block; color: #BE185D; font-size: 12px; margin-bottom: 4px; }
.support-message p { margin: 0; line-height: 1.45; }
.support-message span { display: block; color: var(--muted); font-size: 10px; margin-top: 6px; }
.report-items-box {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 14px;
}
.report-items-box h3 { margin: 0 0 4px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.report-item {
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.report-item.from-reported { border-color: #fbd2dd; background: #fff0f4; }
.report-item-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.report-item-meta strong { font-size: 12px; }
.report-item-meta span { color: var(--muted); font-size: 10px; }
.report-item p { margin: 0; line-height: 1.45; }
.report-item-error { color: var(--muted); font-style: italic; }
.report-item-media { max-width: 240px; max-height: 240px; border-radius: 10px; margin-top: 8px; display: block; }
.reply-box {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.reply-box textarea { min-height: 96px; resize: vertical; }
.image-preview {
  min-height: 140px;
  border: 1px dashed var(--gold);
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: #fffbf7;
  overflow: hidden;
}
.image-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}
.greeting-preview {
  min-height: 160px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px 20px;
  text-align: center;
}
.greeting-preview-line {
  color: #FFF9F2;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  max-width: 420px;
}
.greeting-preview-wordmark {
  color: #E6D2A5;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
}
.role-note {
  margin-top: 14px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
}
.staff-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.staff-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.staff-form input,
.staff-form select { width: 100%; }
.staff-form .actions,
.staff-form .check-row { grid-column: 1 / -1; }

/* Compact/premium permission matrix -- dense list rows instead of boxed,
   heavily-padded cards. See docs/WAADA_CRM_UX_Audit_2026-07-06 Finding 8. */
.permission-matrix {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.permission-matrix h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.permission-category {
  margin-bottom: 6px;
  border-radius: 8px;
  overflow: hidden;
}
.permission-category h4 {
  margin: 0;
  padding: 6px 10px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--maroon);
  background: var(--panel-soft);
}
.permission-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  font-weight: 400;
  text-transform: none;
  border-bottom: 1px solid rgba(15, 23, 42, .045);
  border-radius: 0;
  cursor: pointer;
}
.permission-category .permission-row:last-child { border-bottom: 0; }
.permission-row:hover { background: rgba(179, 54, 75, .045); }
.permission-row input { margin-top: 0; width: auto; flex: 0 0 auto; }
.permission-row .perm-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  flex: 0 0 auto;
  white-space: nowrap;
}
.permission-row .meta {
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-meta-grid {
  margin-top: 18px;
  border-top: 1px solid rgba(179, 54, 75, .2);
  padding-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 20px;
}
.role-meta-grid > div { display: grid; gap: 4px; }
.role-meta-grid .meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 800;
}
.role-meta-grid strong { font-size: 14px; }

.role-users-actions { margin-top: 0; margin-bottom: 14px; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.data-table th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 700;
  background: var(--panel-soft);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr.clickable-row { cursor: pointer; transition: background-color .12s ease; }
.data-table tr.clickable-row:hover td { background: rgba(179, 54, 75, .045); }

.picker-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 10px;
  padding: 6px 12px;
  margin: 12px 0;
  display: grid;
  gap: 4px;
}
.picker-row { padding: 8px 0; border-bottom: 1px solid rgba(15, 23, 42, .06); }
.picker-row:last-child { border-bottom: none; }

.theme-preview {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.theme-swatch {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

@media (max-width: 980px) {
  .crm-view { grid-template-columns: 1fr; }
  .topbar, .toolbar { align-items: stretch; flex-direction: column; }
  input { width: 100%; }
  .stats, .content-grid { grid-template-columns: 1fr; }
}

.detail-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 180px;
  padding: 28px;
  margin: 0;
  color: var(--muted);
  text-align: center;
  border: 1px solid rgba(179, 54, 75, .2);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(179, 54, 75, .12), transparent 48%),
    rgba(15, 23, 42, .025);
}

.detail-empty::before {
  content: "\25C7";
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--gold);
  border: 1px solid rgba(179, 54, 75, .35);
  background: rgba(179, 54, 75, .08);
  font-size: 18px;
}

.audience-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.audience-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(15, 23, 42, .045);
  color: var(--ink);
  cursor: pointer;
}
.audience-mode-card input { margin-top: 3px; accent-color: var(--maroon); }
.audience-mode-card strong { display: block; font-size: 13px; }
.audience-mode-card small { display: block; color: var(--muted); line-height: 1.35; margin-top: 3px; }

.content-grid.monitoring-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
}
.monitoring-grid > .panel { overflow: visible; }
.monitoring-grid .list { max-height: none; overflow: visible; }

.content-grid.dashboard-grid {
  grid-template-columns: minmax(0, 1fr);
}
.dashboard-grid > .panel { overflow: visible; }
.dashboard-grid .list { max-height: none; overflow: visible; }
.dashboard-grid .detail-panel { display: none; }

.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.chart-card {
  position: relative;
  height: 300px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(15, 23, 42, .025);
}
.chart-card h4 { margin: 0 0 12px; color: var(--ink); font-size: 12px; }
.chart-card canvas { flex: 1 1 auto; max-height: 260px; min-height: 0; }
/* For charts with many categories (e.g. ~20 onboarding screens as horizontal
   bars) -- the default 300px card is too cramped to keep labels readable. */
.chart-card.tall { height: 620px; grid-column: 1 / -1; }
.chart-card.tall canvas { max-height: 580px; }
.monitoring-dashboard,
.monitoring-timeline {
  padding: 18px;
  display: grid;
  gap: 16px;
}
.monitoring-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 6px 2px 2px;
}
.monitoring-head h2 { margin: 0 0 5px; font-size: 22px; }
.monitoring-head p { margin: 0; color: var(--muted); font-size: 12px; }
.monitoring-section {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .035), rgba(15, 23, 42, .012)),
    var(--panel-soft);
}
.monitoring-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}
.monitoring-section-head > div { display: flex; align-items: center; gap: 9px; }
.monitoring-section-head > div > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--gold);
  background: rgba(179, 54, 75, .1);
  border: 1px solid rgba(179, 54, 75, .25);
  font-size: 10px;
  font-weight: 900;
}
.monitoring-section-head h3 { margin: 0; font-size: 15px; }
.monitoring-section-head small {
  max-width: 310px;
  color: var(--muted);
  text-align: right;
  line-height: 1.4;
}
.monitoring-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 9px;
  margin-bottom: 13px;
}
.monitoring-metrics article {
  min-height: 82px;
  padding: 12px;
  border-radius: 13px;
  border: 1px solid rgba(179, 54, 75, .15);
  background: rgba(179, 54, 75, .055);
}
.monitoring-metrics article span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.monitoring-metrics article strong {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-size: 22px;
}
.monitoring-metrics.health article {
  background: rgba(179, 54, 75, .045);
  border-color: rgba(179, 54, 75, .15);
}
.monitoring-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.monitoring-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 12px;
}
.monitoring-table th {
  padding: 10px 12px;
  color: var(--muted);
  background: rgba(15, 23, 42, .025);
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.monitoring-table td {
  padding: 11px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  vertical-align: top;
}
.monitoring-table td strong,
.monitoring-table td small { display: block; }
.monitoring-table td strong { color: var(--ink); }
.monitoring-table td small { margin-top: 3px; color: var(--muted); }
.monitoring-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}
.monitoring-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.monitoring-status.live { color: #1F6F5C; background: rgba(31, 111, 92, .12); }
.monitoring-status.live::before {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(31, 111, 92, .12);
}
.monitoring-note {
  margin: 11px 0 0;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(15, 23, 42, .025);
  font-size: 11px;
  line-height: 1.45;
}
.monitoring-note.warn {
  color: #B45309;
  border-color: rgba(180, 83, 9, .25);
  background: rgba(180, 83, 9, .08);
}
.monitoring-device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.monitoring-device-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
}
.monitoring-device-grid h4 { margin: 0 0 12px; color: var(--ink); font-size: 12px; }
.monitoring-perf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.monitoring-perf-grid > div { min-width: 0; }
.monitoring-perf-grid h4 { margin: 0 0 8px; color: var(--ink); font-size: 12px; }
.monitoring-query {
  display: block;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted);
}
.link-button {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  color: var(--maroon-light);
  font-size: 11px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.link-button:hover { color: var(--maroon); }
@media (max-width: 720px) {
  .monitoring-perf-grid { grid-template-columns: 1fr; }
}
.monitoring-bar-row { display: grid; gap: 5px; margin-top: 9px; }
.monitoring-bar-row > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
}
.monitoring-bar-row strong {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monitoring-bar-row span { color: var(--gold); font-weight: 900; }
.monitoring-bar-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, .07);
}
.monitoring-bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--maroon), var(--gold));
}
.monitoring-privacy {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(31, 111, 92, .24);
  border-radius: 14px;
  background: rgba(31, 111, 92, .07);
}
.monitoring-privacy strong { flex: 0 0 auto; color: #1F6F5C; font-size: 12px; }
.monitoring-privacy span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.monitoring-timeline {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 150px);
  overflow: auto;
}
.timeline-list { display: grid; gap: 0; }
.timeline-event {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  padding: 0 0 17px;
}
.timeline-event::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.timeline-event:last-child::before { display: none; }
.timeline-event i {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--maroon);
  box-shadow: 0 0 0 2px rgba(179, 54, 75, .25);
}
.timeline-event.verification i,
.timeline-event.subscription i {
  background: var(--gold);
  box-shadow: 0 0 0 2px rgba(179, 54, 75, .25);
}
.timeline-event span {
  color: var(--gold);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.timeline-event strong { display: block; margin-top: 2px; color: var(--ink); font-size: 12px; }
.timeline-event p { margin: 3px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.timeline-event time { color: var(--muted); font-size: 9px; }
.monitoring-empty { padding: 18px; color: var(--muted); text-align: center; font-size: 12px; }

@media (max-width: 1180px) {
  .content-grid.monitoring-grid { grid-template-columns: 1fr; }
  .monitoring-timeline { position: static; max-height: none; }
}

@media (max-width: 720px) {
  .monitoring-head,
  .monitoring-section-head,
  .monitoring-privacy {
    align-items: stretch;
    flex-direction: column;
  }
  .monitoring-section-head small { max-width: none; text-align: left; }
  .monitoring-device-grid { grid-template-columns: 1fr; }
}

/* Premium enterprise CRM system -- second, later-cascading token layer.
   Recolored to match the same white/royal-blue palette as the first :root
   above (kept as two blocks rather than structurally merged in this pass --
   see docs/WAADA_CRM_UX_Audit_2026-07-06 Finding 8 for why a full merge was
   deferred). */
:root {
  --bg: #FFFBF9;
  --bg-raised: #FFFFFF;
  --panel: #FFFFFF;
  --panel-strong: #FFFFFF;
  --panel-soft: #FFFBF9;
  --ink: #0F172A;
  --ink-soft: #33415C;
  --muted: #64748B;
  --maroon: #B3364B;
  --maroon-deep: #7A2436;
  --maroon-soft: rgba(179, 54, 75, .08);
  --gold: #B3364B;
  --gold-soft: rgba(179, 54, 75, .08);
  --line: #E2E8F0;
  --line-strong: rgba(179, 54, 75, .3);
  --ok: #1F6F5C;
  --warn: #B45309;
  --bad: #DC2626;
  --shadow: 0 28px 70px rgba(15, 23, 42, .14);
  --shadow-soft: 0 14px 34px rgba(15, 23, 42, .1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  letter-spacing: 0;
}

body.crm-busy { cursor: progress; }

.appbar {
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}

.sub-menu {
  background: var(--panel-soft);
}

.nav-chrome .staff-card {
  flex-direction: row;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}

.nav-chrome .staff-card span,
.nav-chrome .staff-card strong { grid-column: auto; }

.nav-chrome .staff-card button {
  width: auto;
  margin: 0;
  padding: 7px 10px;
  font-size: 10px;
}

.nav-chrome .security-note {
  margin: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 24px;
  font-size: 10px;
}

.brand {
  gap: 11px;
  padding: 0 5px;
}

.mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #fffaf3;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .22), transparent 42%),
    linear-gradient(135deg, var(--maroon), var(--maroon-deep));
  border: 1px solid rgba(179, 54, 75, .24);
  box-shadow: 0 9px 24px rgba(179, 54, 75, .28);
}

.brand strong { font-size: 16px; letter-spacing: .01em; }
.brand span { margin-top: 2px; color: #64748B; font-size: 11px; }

.nav-group {
  display: grid;
  gap: 5px;
}

.nav-label {
  padding: 0 9px 5px;
  color: #64748B;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav {
  position: relative;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: #64748B;
  font-size: 12px;
  font-weight: 750;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.nav::before {
  content: attr(data-icon);
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #64748B;
  background: rgba(15, 23, 42, .035);
  border: 1px solid rgba(15, 23, 42, .045);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
}

.nav:hover {
  color: var(--ink);
  background: rgba(15, 23, 42, .035);
  transform: translateX(2px);
}

.nav.active {
  color: var(--maroon);
  background: linear-gradient(90deg, rgba(179, 54, 75, .14), rgba(179, 54, 75, .05));
  border-color: rgba(179, 54, 75, .17);
  box-shadow: inset 3px 0 0 var(--gold);
}

.nav.active::before {
  color: var(--maroon);
  background: rgba(179, 54, 75, .11);
  border-color: rgba(179, 54, 75, .2);
}

.staff-card {
  flex: 0 0 auto;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 8px;
  padding: 11px;
  border-color: var(--line);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, .022);
}

.staff-card span,
.staff-card strong { grid-column: 1 / -1; }
.staff-card strong { color: var(--gold); font-size: 11px; letter-spacing: .05em; }
.staff-card button { width: auto; margin: 3px 0 0; padding: 8px 9px; font-size: 10px; }

.security-note {
  flex: 0 0 auto;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px 11px;
  color: #64748B;
  background: rgba(179, 54, 75, .045);
  border-color: rgba(179, 54, 75, .15);
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.45;
}

.security-note strong { color: #B3364B; font-size: 10px; }

.shell {
  width: 100%;
  max-width: 1740px;
  margin: 0 auto;
  padding: 28px clamp(22px, 3vw, 48px) 44px;
}

.topbar {
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 22px;
}

.page-heading { min-width: 250px; }
.page-kicker { display: flex; align-items: center; gap: 9px; min-height: 24px; }
.page-kicker .eyebrow { margin: 0; }
.page-subtitle {
  max-width: 680px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.eyebrow {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .11em;
}

h1 { font-size: clamp(27px, 2.4vw, 38px); line-height: 1.08; }
h2 { letter-spacing: -.01em; }

.environment-badge {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 3px 7px;
  border: 1px solid rgba(179, 54, 75, .25);
  border-radius: 999px;
  color: #B3364B;
  background: rgba(179, 54, 75, .07);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.environment-badge[data-environment="production"] {
  color: #BE185D;
  border-color: rgba(184, 75, 85, .34);
  background: rgba(184, 75, 85, .1);
}

.toolbar {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

input,
select,
textarea {
  min-height: 40px;
  border-color: var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  background: #FFFFFF;
  color: var(--ink);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(179, 54, 75, .55);
  background: #FBEEEE;
  box-shadow: 0 0 0 3px rgba(179, 54, 75, .08);
}

input.invalid,
textarea.invalid { border-color: var(--bad); }

/* Premium button system -- consolidated, single source of truth (wins here
   via cascade order). Salesforce/Linear-style: flat solid fills, restrained
   shadow, 8px radius, 36px height, 600-weight label instead of the old
   800-weight all-caps look. See docs/WAADA_CRM_UX_Audit_2026-07-06 Finding 8. */
button {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), transparent),
    var(--maroon);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 2px 8px rgba(179, 54, 75, .18);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

button:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), transparent),
    var(--maroon-deep);
  box-shadow: 0 4px 14px rgba(179, 54, 75, .28);
}
button:active:not(:disabled) { box-shadow: 0 1px 2px rgba(179, 54, 75, .2); }
button.secondary {
  color: var(--ink-soft);
  background: #FFFFFF;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
button.secondary:hover:not(:disabled) {
  background: var(--panel-soft);
  border-color: var(--maroon-light);
  color: var(--maroon);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
button.good { background: var(--ok); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 2px 8px rgba(31, 111, 92, .2); }
button.good:hover:not(:disabled) { background: #124A3D; box-shadow: 0 4px 14px rgba(31, 111, 92, .3); }
button.warn { background: var(--warn); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 2px 8px rgba(180, 83, 9, .2); }
button.warn:hover:not(:disabled) { background: #92400E; box-shadow: 0 4px 14px rgba(180, 83, 9, .3); }
button.bad { background: var(--bad); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 2px 8px rgba(220, 38, 38, .2); }
button.bad:hover:not(:disabled) { background: #B91C1C; box-shadow: 0 4px 14px rgba(220, 38, 38, .3); }
button:disabled { box-shadow: none; }

.stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.stat {
  min-height: 92px;
  padding: 14px;
  border-color: var(--line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .026), transparent),
    var(--panel);
  box-shadow: none;
}

.stat:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}
.stat span { color: #64748B; font-size: 10px; }
.stat strong { margin-top: 8px; color: var(--ink); font-size: 25px; }

.content-grid {
  grid-template-columns: minmax(330px, 430px) minmax(0, 1fr);
  gap: 14px;
}

.panel {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .018), transparent 38%),
    var(--panel);
  box-shadow: var(--shadow-soft);
}

.panel-head {
  min-height: 56px;
  padding: 15px 17px;
  background: rgba(15, 23, 42, .012);
}
.panel-head h2 { font-size: 14px; }
.panel-head span {
  color: #B3364B;
  background: var(--gold-soft);
  border: 1px solid rgba(179, 54, 75, .14);
}

.list {
  max-height: calc(100vh - 214px);
  scrollbar-width: thin;
  scrollbar-color: rgba(179, 54, 75, .34) transparent;
}

.row {
  padding: 14px 16px;
  border-bottom-color: rgba(15, 23, 42, .06);
  gap: 7px;
}
.row:hover,
.row.selected { background: rgba(179, 54, 75, .045); }
.row.selected { box-shadow: inset 3px 0 0 var(--gold); }

.row-title strong { font-size: 13px; }
.meta { color: #64748B; font-size: 11px; line-height: 1.45; }

.pill {
  padding: 4px 7px;
  border: 1px solid currentColor;
  font-size: 9px;
  letter-spacing: .02em;
}
.pending { color: #B45309; background: rgba(194, 138, 69, .1); border-color: rgba(194, 138, 69, .23); }
.approved { color: #1F6F5C; background: rgba(31, 111, 92, .1); border-color: rgba(31, 111, 92, .25); }
.rejected { color: #DC2626; background: rgba(184, 75, 85, .1); border-color: rgba(184, 75, 85, .25); }
.pill.info { color: #4338CA; background: rgba(99, 102, 241, .1); border-color: rgba(99, 102, 241, .25); }
.gender-chip.male,
.gender-chip.female,
.gender-chip.missing {
  color: #64748B;
  background: rgba(15, 23, 42, .045);
  border: 1px solid var(--line);
}

.detail-panel { min-height: 600px; }
.detail { padding: 20px; }
.detail-empty {
  min-height: 240px;
  margin: 14px;
  border-color: rgba(179, 54, 75, .16);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 50% 0%, rgba(179, 54, 75, .08), transparent 48%),
    rgba(15, 23, 42, .012);
}
.detail-empty::before {
  content: "S";
  color: var(--gold);
  background: rgba(179, 54, 75, .06);
  border-color: rgba(179, 54, 75, .23);
  font-weight: 900;
}

.hero {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 17px;
}
.avatar { width: 112px; height: 112px; border-radius: var(--radius-md); border: 1px solid var(--line); }

.detail-tabs {
  gap: 6px;
  padding-bottom: 11px;
  scrollbar-width: thin;
  scrollbar-color: rgba(179, 54, 75, .32) transparent;
}
.detail-tab {
  min-height: 34px;
  padding: 7px 10px;
  color: #64748B;
  background: rgba(15, 23, 42, .025);
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: none;
  font-size: 10px;
}
.detail-tab.active {
  color: #B3364B;
  background: rgba(179, 54, 75, .09);
  border-color: rgba(179, 54, 75, .28);
}

.field,
.quality-box,
.review-workflow,
.mini-row,
.profile-card,
.monitoring-section {
  border-color: var(--line);
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .018), transparent),
    var(--panel-soft);
}

.field { padding: 13px; border-radius: 10px; }
.field label,
.quality-box label { color: #64748B; font-size: 9px; letter-spacing: .05em; }
.field p { color: var(--ink-soft); font-size: 12px; }

.review-workflow { border-radius: var(--radius-md); }
.workflow-step { border-radius: 9px; font-size: 10px; }
.workflow-step.active {
  color: #B3364B;
  border-color: rgba(179, 54, 75, .32);
  background: rgba(179, 54, 75, .07);
}
.workflow-step.done {
  color: #1F6F5C;
  background: rgba(31, 111, 92, .1);
  border-color: rgba(31, 111, 92, .22);
}

.quality-mini,
.quality-track { background: rgba(15, 23, 42, .055); }
.quality-mini span,
.quality-track span,
.monitoring-bar-track span {
  background: linear-gradient(90deg, var(--maroon), var(--gold));
}

.actions { gap: 8px; }

.crm-modal-overlay {
  background: rgba(5, 7, 11, .78);
  backdrop-filter: blur(14px);
}
.crm-modal {
  padding: 25px;
  border-color: rgba(179, 54, 75, .26);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .025), transparent),
    var(--panel-strong);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .5);
}
.crm-prompt-modal { width: min(560px, 100%); }
.notification-row[role="button"] { cursor: pointer; }
.notification-row[role="button"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.notification-architecture-help {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgba(179, 54, 75, .2);
  border-radius: 12px;
  background: rgba(179, 54, 75, .055);
}
.notification-architecture-help summary {
  color: var(--gold);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}
.notification-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.notification-help-grid > div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(15, 23, 42, .025);
}
.notification-help-grid strong,
.notification-help-grid span { display: block; }
.notification-help-grid strong { color: var(--ink); font-size: 11px; }
.notification-help-grid span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.notification-detail-overlay {
  align-items: stretch;
  justify-items: end;
  padding: 0;
}
.notification-detail-modal {
  width: min(1080px, 94vw);
  max-height: 100vh;
  min-height: 100vh;
  border-radius: 18px 0 0 18px;
  border-right: 0;
  padding: 28px;
}
.notification-detail-head,
.notification-section-head,
.notification-worker-state {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.notification-detail-head h2 { margin: 6px 0; }
.notification-detail-head p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.notification-detail-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.notification-detail-section h3 { margin: 0 0 12px; }
.notification-section-head p {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 12px;
}
.notification-worker-warning {
  grid-column: 1 / -1;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #f0c36d;
  background: rgba(240, 195, 109, 0.12);
  color: #8a5a00;
  font-size: 13px;
  line-height: 1.45;
}
.notification-metadata-grid,
.notification-worker-state {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.notification-metadata-grid > div,
.notification-worker-state > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(15, 23, 42, .025);
}
.notification-metadata-grid span,
.notification-worker-state span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.notification-metadata-grid strong,
.notification-worker-state strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
}
.field-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.field-label-row .copyable-id {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, .025);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.notification-metrics { margin-bottom: 12px; }
.notification-error-summary {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(184, 75, 85, .22);
  border-radius: 10px;
  background: rgba(184, 75, 85, .07);
}
.notification-error-summary > strong { font-size: 12px; }
.notification-error-summary > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.notification-error-summary span {
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(15, 23, 42, .05);
  font-size: 10px;
}
.notification-recipient-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.notification-recipient-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 11px;
}
.notification-recipient-table th,
.notification-recipient-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.notification-recipient-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: var(--panel-strong);
  font-size: 9px;
  text-transform: uppercase;
}
.notification-recipient-table td strong,
.notification-recipient-table td small { display: block; }
.notification-recipient-table td small {
  max-width: 190px;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 9px;
}
.notification-merge-panel {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.02);
}
.notification-merge-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}
.notification-merge-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}
.notification-merge-chip.optional {
  border-style: dashed;
  color: var(--muted);
}
.notification-merge-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.notification-merge-preview {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.notification-merge-preview > strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold);
}
.notification-merge-preview > div > span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.notification-merge-preview p {
  margin: 4px 0 0;
  color: var(--ink);
  white-space: pre-wrap;
}
.notification-merge-warnings {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 193, 7, 0.35);
  background: rgba(255, 193, 7, 0.08);
  color: #92400E;
  font-size: 11px;
}
.notification-merge-sample {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.02);
}
.notification-merge-sample p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.notification-merge-sample p span {
  display: inline-block;
  min-width: 42px;
  color: var(--gold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
@media (max-width: 820px) {
  .notification-detail-modal {
    width: 100vw;
    border-radius: 0;
    padding: 20px;
  }
  .notification-detail-head,
  .notification-section-head { flex-direction: column; }
  .notification-metadata-grid,
  .notification-worker-state { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notification-help-grid { grid-template-columns: 1fr; }
}
.modal-kicker {
  color: var(--gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.modal-field {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  color: #64748B;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.modal-field input,
.modal-field textarea { width: 100%; }
.modal-field input[type="radio"],
.modal-field input[type="checkbox"] {
  width: auto;
}
.modal-field label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.68);
}

.qr-code-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border-radius: 10px;
  padding: 14px;
  margin: 14px auto 0;
  width: fit-content;
}
.qr-code-fallback-hint {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
}

.backup-codes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 14px 0;
}
.backup-codes-grid code {
  background: rgba(15, 23, 42, .04);
  border: 1px solid rgba(179, 54, 75, .24);
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .04em;
}

.support-message.crm {
  background: rgba(179, 54, 75, .11);
  border-color: rgba(179, 54, 75, .2);
}
.support-message strong { color: #B3364B; }
.image-preview { background: rgba(15, 23, 42, .02); border-color: rgba(179, 54, 75, .24); }
.role-note {
  color: #475569;
  background: rgba(88, 126, 163, .08);
  border-color: rgba(88, 126, 163, .18);
}

.monitoring-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, .68fr) !important;
}
.monitoring-dashboard,
.monitoring-timeline { padding: 17px; gap: 13px; }
.monitoring-head { padding: 2px 0 5px; }
.monitoring-head h2 { font-size: 20px; }
.monitoring-section { padding: 15px; border-radius: var(--radius-md); }
.monitoring-section-head > div > span {
  color: var(--gold);
  background: var(--gold-soft);
  border-color: rgba(179, 54, 75, .2);
}
.monitoring-metrics article {
  min-height: 77px;
  border-color: rgba(179, 54, 75, .12);
  border-radius: 10px;
  background: rgba(179, 54, 75, .035);
}
.monitoring-metrics.health article {
  border-color: rgba(179, 54, 75, .16);
  background: rgba(179, 54, 75, .055);
}
.monitoring-table-wrap { border-radius: 9px; }
.monitoring-table th { color: #64748B; background: rgba(15, 23, 42, .018); }
.monitoring-table td { color: #64748B; }
.monitoring-status.live { color: #1F6F5C; background: rgba(31, 111, 92, .1); }
.monitoring-timeline { top: 16px; max-height: calc(100vh - 140px); }
.timeline-event i { background: var(--maroon); }
.timeline-event.verification i,
.timeline-event.subscription i { background: var(--gold); }

.content-grid.debug-verification-grid {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
}
.content-grid.debug-verification-grid .detail-panel {
  min-width: 0;
}
.debug-verification-sidebar {
  display: grid;
  gap: 12px;
  padding: 20px;
}
.debug-verification-sidebar h2 { margin: 0; font-size: 18px; }
.debug-verification-sidebar p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.debug-verification-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.debug-verification-status {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.55;
}
.debug-verification-status.loading {
  color: var(--ink-soft);
  background: rgba(15, 23, 42, .04);
  border: 1px solid rgba(15, 23, 42, .08);
}
.debug-verification-status.ready {
  color: #1F6F5C;
  background: rgba(31, 111, 92, .08);
  border: 1px solid rgba(31, 111, 92, .18);
}
.debug-verification-status.empty {
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid rgba(179, 54, 75, .2);
}
.debug-verification-status.error {
  color: #DC2626;
  background: rgba(179, 54, 75, .12);
  border: 1px solid rgba(179, 54, 75, .28);
}
.debug-verification-status .meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  word-break: break-all;
}
.debug-verification-filter {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(180px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
}
.debug-verification-filter label {
  display: grid;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.debug-verification-table-wrap {
  overflow: auto;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, .02);
}
.debug-verification-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1180px;
  font-size: 12px;
}
.debug-verification-table th,
.debug-verification-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  text-align: left;
  vertical-align: top;
}
.debug-verification-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(248, 250, 252, .96);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.debug-th-help {
  border-bottom: 1px dotted rgba(179, 54, 75, 0.55);
  cursor: help;
}
.debug-flow-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  vertical-align: middle;
}
.debug-verification-table code,
.debug-code-inline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  word-break: break-all;
}
.debug-table-actions { white-space: nowrap; }
.debug-table-empty {
  color: var(--muted);
  text-align: center;
  padding: 28px 16px !important;
}

.debug-verification-head h2,
.debug-verification-head p { margin: 0; }
.debug-verification-head p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.debug-verification-guard {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(179, 54, 75, .2);
  border-radius: var(--radius-md);
  background: var(--gold-soft);
}
.debug-verification-guard strong { color: var(--gold); font-size: 11px; }
.debug-verification-guard span { color: var(--muted); font-size: 10px; line-height: 1.55; }
.debug-verification-detail { display: grid; gap: 18px; }
.debug-verification-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.debug-code-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(179, 54, 75, .3);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(179, 54, 75, .12), rgba(179, 54, 75, .09));
}
.debug-code-panel > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.debug-code-panel > strong {
  grid-column: 1;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: .12em;
}
.debug-code-panel button { grid-column: 2; grid-row: 1 / 3; }
.debug-verification-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.debug-verification-grid article,
.debug-profile-reference {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(15, 23, 42, .025);
}
.debug-verification-grid span,
.debug-profile-reference span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.debug-verification-grid strong,
.debug-profile-reference code {
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font-size: 11px;
}
.debug-verification-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 360px;
  margin: auto;
  text-align: center;
}
.debug-verification-empty > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(179, 54, 75, .28);
  border-radius: 18px;
  color: var(--gold);
  background: var(--gold-soft);
  font-size: 12px;
  font-weight: 800;
}

.loading-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.loading-rail.active { opacity: 1; }
.loading-rail span {
  display: block;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold), var(--maroon), transparent);
  animation: crm-loading 1.15s ease-in-out infinite;
}
@keyframes crm-loading {
  from { transform: translateX(-110%); }
  to { transform: translateX(330%); }
}

.toast-region {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 3200;
  width: min(390px, calc(100vw - 36px));
  display: grid;
  gap: 9px;
  pointer-events: none;
}
.crm-toast {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: rgba(21, 25, 34, .97);
  box-shadow: var(--shadow);
  animation: toast-in .2s ease-out;
  pointer-events: auto;
}
.crm-toast.leaving { opacity: 0; transform: translateY(-5px); transition: .18s ease; }
.crm-toast-mark {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(179, 54, 75, .08);
}
.crm-toast.success .crm-toast-mark { background: var(--ok); box-shadow: 0 0 0 4px rgba(31, 111, 92, .09); }
.crm-toast.error .crm-toast-mark { background: var(--bad); box-shadow: 0 0 0 4px rgba(184, 75, 85, .09); }
.crm-toast strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 12px; }
.crm-toast p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.crm-toast button {
  min-height: 0;
  padding: 3px 5px;
  color: #64748B;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 9px;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mobile-menu { display: none; }

@media (max-width: 1180px) {
  .shell { padding-inline: 22px; }
  .content-grid { grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); }
  .monitoring-grid { grid-template-columns: 1fr !important; }
  .monitoring-timeline { position: static; max-height: none; }
}

@media (max-width: 900px) {
  .appbar { flex-wrap: wrap; row-gap: 8px; }
  .main-menu { order: 3; flex: 1 1 100%; }
  .nav-chrome .sub-menu { display: none; }
  .nav-chrome.open .sub-menu { display: flex; flex-wrap: wrap; }
  .nav-chrome.open .sub-menu-group { display: none; }
  .nav-chrome.open .sub-menu-group.active { display: flex; flex-wrap: wrap; }
  .nav-chrome .main-menu { display: none; }
  .nav-chrome.open .main-menu { display: flex; flex-wrap: wrap; }
  .nav-chrome .security-note { display: none; }
  .nav-chrome.open .security-note { display: grid; }
  .shell { padding: 22px 18px 38px; }
  .mobile-menu {
    display: inline-flex;
    min-height: 29px;
    padding: 5px 9px;
    color: var(--ink-soft);
    background: rgba(15, 23, 42, .04);
    border-color: var(--line);
    box-shadow: none;
    font-size: 9px;
  }
  .topbar { align-items: stretch; flex-direction: column; }
  .toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .toolbar input { flex: 1 1 250px; }
  .content-grid { grid-template-columns: 1fr; }
  .list { max-height: 420px; }
  .detail-panel { min-height: 440px; }
}

@media (max-width: 640px) {
  .shell { padding-inline: 13px; }
  h1 { font-size: 27px; }
  .toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .toolbar input,
  .toolbar button { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2,
  .staff-form,
  .moderation-form { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 76px minmax(0, 1fr); }
  .avatar { width: 76px; height: 76px; }
  .detail { padding: 15px; }
  .monitoring-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitoring-device-grid { grid-template-columns: 1fr; }
  .monitoring-head,
  .monitoring-section-head,
  .monitoring-privacy { align-items: stretch; flex-direction: column; }
  .monitoring-section-head small { max-width: none; text-align: left; }
  .debug-code-panel { grid-template-columns: 1fr; }
  .debug-code-panel button { grid-column: 1; grid-row: auto; }
  .debug-verification-filter { grid-template-columns: 1fr; }
  .debug-verification-grid { grid-template-columns: 1fr; }
  .debug-verification-table { min-width: 980px; }
  .dashboard-charts { grid-template-columns: 1fr; }
}

.onboarding-live-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.onboarding-live-dock > * { pointer-events: auto; }

.onboarding-live-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  max-width: 320px;
}

.onboarding-live-bubble {
  min-width: 88px;
  max-width: 120px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(24, 18, 22, 0.94);
  color: #fff;
  padding: 10px 12px;
  text-align: left;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.onboarding-live-dock.has-waiting .onboarding-live-bubble {
  border-color: #B3364B;
}

.onboarding-live-bubble span {
  display: block;
  font-weight: 800;
  font-size: 12px;
}

.onboarding-live-bubble small {
  display: block;
  color: #B3364B;
  font-size: 10px;
  margin-top: 4px;
  text-transform: capitalize;
}

.onboarding-live-bubble.active {
  background: var(--maroon);
}

.onboarding-live-popup {
  width: min(360px, calc(100vw - 36px));
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.onboarding-live-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(179, 54, 75, 0.1);
}

.onboarding-live-popup-name {
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.onboarding-live-popup-name strong {
  display: block;
  font-size: 14px;
}

.onboarding-live-popup-name span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
  text-transform: capitalize;
}

.onboarding-live-popup-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.onboarding-live-popup-body {
  max-height: 260px;
  overflow: auto;
  padding: 12px 14px;
}

.onboarding-live-popup-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

.onboarding-live-popup-compose textarea {
  min-height: 54px;
  resize: vertical;
}

.onboarding-live-context {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  margin: 12px 0;
  background: rgba(15, 23, 42, 0.02);
}

.onboarding-live-context .context-head strong {
  display: block;
  font-size: 15px;
}

.onboarding-live-context .context-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.onboarding-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
}

.onboarding-check {
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.04);
}

.onboarding-check.ok {
  color: #1F6F5C;
}

.onboarding-check.pending {
  color: #B45309;
}

.queue-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.queue-chip {
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.queue-chip.active {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}


/* ---------------------------------------------------------------- */
/* Notifications hub: dashboard cards + System Notifications editor  */
/* ---------------------------------------------------------------- */
.notifications-hub-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.notifications-hub-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .026), transparent),
    var(--panel);
  box-shadow: none;
  cursor: pointer;
}

.notifications-hub-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.notifications-hub-card-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748B;
}

.notifications-hub-card h3 { margin: 0; font-size: 17px; }
.notifications-hub-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.notifications-hub-card-stat {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.notifications-hub-card-stat strong { font-size: 20px; color: var(--ink); }
.notifications-hub-card-stat span { font-size: 11px; color: #64748B; }

.notifications-hub-gap-note {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(194, 138, 69, .3);
  border-radius: var(--radius-md);
  background: rgba(194, 138, 69, .08);
  font-size: 12px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notifications-hub-gap-note strong { color: #B45309; }

.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink);
  margin: 4px 0;
}
.toggle-row input[type="checkbox"] { width: 16px; height: 16px; }

.email-channel-block {
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.email-channel-block #sysNotifEmailFields {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.02);
}
.email-html-textarea {
  min-height: 160px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.email-preview-card {
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--radius-md, 10px);
  background: var(--panel);
  box-shadow: var(--shadow-soft, none);
  overflow: hidden;
  margin-top: 6px;
}
.email-preview-card-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.email-preview-meta {
  display: grid;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.email-preview-meta > div {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}
.email-preview-meta > div > span {
  min-width: 52px;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .06em;
}
.email-preview-meta > div > strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.email-preview-frame {
  width: 100%;
  height: 320px;
  border: 0;
  background: #fff;
}

/* ---------------------------------------------------------------- */
/* Premium interaction polish (consistent transitions + focus states */
/* across the whole CRM; appended last so it wins on equal specificity) */
/* ---------------------------------------------------------------- */
button,
.nav,
.main-menu-item,
.queue-chip,
input,
select,
textarea,
a,
.panel,
.notification-row,
.onboarding-check {
  transition: background-color .16s ease, border-color .16s ease,
    color .16s ease, transform .12s ease, box-shadow .16s ease,
    filter .16s ease;
}

button:hover:not(:disabled),
.nav:hover,
.main-menu-item:hover,
.queue-chip:hover {
  transform: translateY(-1px);
}

button:active:not(:disabled),
.nav:active,
.main-menu-item:active,
.queue-chip:active {
  transform: translateY(0);
}

button:focus-visible,
.nav:focus-visible,
.main-menu-item:focus-visible,
.queue-chip:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.panel {
  transition: box-shadow .2s ease, border-color .2s ease;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(179, 54, 75, .35);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(179, 54, 75, .55);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* ---------------------------------------------------------------- */
/* Members dashboard + drill-down list, Reports Queue/By Profile     */
/* (dashboard-first redesign -- stat cards compute from a lean stats */
/* endpoint, drill-down list/queue rows are lean too; see app.js)    */
/* ---------------------------------------------------------------- */

.members-dashboard { padding: 4px; }

.members-search-row,
.members-list-toolbar,
.reports-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.members-search-row input,
.members-list-toolbar input,
.reports-toolbar input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 13px;
}

.reports-toolbar select {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 13px;
}

.members-list-toolbar { align-items: center; }
.members-list-toolbar #membersBackToDashboard { flex: none; white-space: nowrap; }

.members-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.member-stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 84px;
  padding: 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .026), transparent),
    var(--panel);
  cursor: pointer;
  box-shadow: none;
}
.member-stat-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}
.member-stat-card span { color: var(--muted); font-size: 11px; font-weight: 600; }
.member-stat-card strong { font-size: 24px; color: var(--ink); }

.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
.member-row.selected { background: rgba(179, 54, 75, .045); box-shadow: inset 3px 0 0 var(--gold); }
.member-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.member-view-btn { flex: none; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.mini-row-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- */
/* WAADA premium CRM speed pass                                      */
/* Warm graphite / ivory / champagne palette + instant-feeling UI.   */
/* Appended last so it overrides the older royal-blue CRM theme.      */
/* ---------------------------------------------------------------- */
:root {
  --bg: #FFFBF9;
  --bg-raised: #FFFEFC;
  --panel: #FFFEFC;
  --panel-strong: #FFFFFF;
  --panel-soft: #FBEEEE;
  --ink: #17110E;
  --ink-soft: #3B302A;
  --muted: #7E7065;
  --maroon: #B3364B;
  --maroon-deep: #7A2436;
  --maroon-light: #C65A70;
  --maroon-soft: rgba(179, 54, 75, .09);
  --gold: #1F6F5C;
  --gold-soft: rgba(31, 111, 92, .15);
  --line: rgba(54, 37, 28, .13);
  --line-strong: rgba(179, 54, 75, .26);
  --ok: #1F6F5C;
  --warn: #A05A12;
  --bad: #C9332F;
  --shadow: 0 22px 52px rgba(42, 25, 18, .12);
  --shadow-soft: 0 10px 26px rgba(42, 25, 18, .08);
}

html,
body {
  background:
    radial-gradient(circle at 8% -8%, rgba(31, 111, 92, .20), transparent 30%),
    radial-gradient(circle at 95% 0%, rgba(179, 54, 75, .12), transparent 28%),
    var(--bg);
}

body.crm-busy { cursor: default; }

.login-view {
  background:
    radial-gradient(circle at top left, rgba(31, 111, 92, .24), transparent 34%),
    radial-gradient(circle at bottom right, rgba(179, 54, 75, .13), transparent 32%),
    linear-gradient(135deg, #FFFBF9 0%, #FBF0EE 52%, #F7E4E1 100%);
}

.login-card,
.panel,
.chart-card,
.monitoring-dashboard,
.monitoring-timeline,
.monitoring-section,
.review-workflow,
.crm-modal,
.notification-detail-section,
.member-stat-card,
.stat {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 254, 252, .95)),
    var(--panel);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.appbar {
  background: rgba(255, 254, 252, .88);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 28px rgba(42, 25, 18, .07);
  backdrop-filter: blur(18px);
}

.sub-menu {
  background: rgba(247, 242, 234, .84);
  border-bottom-color: var(--line);
  backdrop-filter: blur(16px);
}

.mark,
.staff-icon {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .20), transparent 42%),
    linear-gradient(135deg, var(--maroon), var(--maroon-deep));
  border-color: rgba(31, 111, 92, .32);
  box-shadow: 0 10px 24px rgba(122, 36, 54, .22);
}

.brand strong,
h1,
h2,
h3,
.detail h2,
.monitoring-head h2,
.monitoring-section-head h3 {
  color: var(--ink);
}

.brand span,
.page-subtitle,
.meta,
.detail .sub,
.monitoring-head p,
.monitoring-section-head small,
.data-table td,
.monitoring-table td {
  color: var(--muted);
}

.eyebrow,
.workflow-head span,
.monitoring-bar-row span,
a {
  color: var(--gold);
}

.environment-badge,
.panel-head span {
  color: var(--maroon);
  background: var(--maroon-soft);
  border-color: var(--line-strong);
}

.main-menu-item,
.nav,
.detail-tab,
.queue-chip {
  border-radius: 999px;
  font-weight: 800;
}

.main-menu-item {
  color: var(--muted);
  padding: 9px 13px;
}

.main-menu-item:hover,
.nav:hover,
.detail-tab:hover {
  color: var(--ink);
  background: rgba(179, 54, 75, .07);
  transform: none;
}

.main-menu-item.active,
.nav.active,
.detail-tab.active {
  color: #FFF8ED;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .13), transparent),
    linear-gradient(135deg, var(--maroon), var(--maroon-deep));
  border-color: rgba(31, 111, 92, .34);
  box-shadow: 0 8px 18px rgba(122, 36, 54, .15);
}

.nav::before {
  color: var(--gold);
  background: var(--gold-soft);
  border-color: rgba(31, 111, 92, .26);
}

.nav.active::before {
  color: #FFF8ED;
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .15);
}

.security-note {
  color: var(--muted);
  background: rgba(31, 111, 92, .12);
  border-color: rgba(31, 111, 92, .24);
}

.security-note strong,
.staff-card strong {
  color: var(--maroon);
}

input,
select,
textarea,
.members-search-row input,
.members-list-toolbar input,
.reports-toolbar input,
.reports-toolbar select {
  background: rgba(255, 254, 252, .92);
  border-color: var(--line);
  color: var(--ink);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(31, 111, 92, .68);
  background: #FFFEFC;
  box-shadow: 0 0 0 3px rgba(31, 111, 92, .14);
}

button {
  min-height: 38px;
  border-radius: 999px;
  border-color: rgba(31, 111, 92, .28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent),
    linear-gradient(135deg, var(--maroon), var(--maroon-deep));
  color: #FFF8ED;
  box-shadow: 0 7px 16px rgba(122, 36, 54, .14);
  font-weight: 800;
  letter-spacing: .005em;
  transition: background-color .10s ease, border-color .10s ease, color .10s ease, box-shadow .10s ease;
}

button:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent),
    linear-gradient(135deg, #C2445C, var(--maroon-deep));
  box-shadow: 0 9px 20px rgba(122, 36, 54, .18);
  transform: none;
}

button:active:not(:disabled) {
  filter: brightness(.96);
  transform: translateY(1px);
}

button.secondary {
  color: var(--ink-soft);
  background: rgba(255, 254, 252, .86);
  border-color: var(--line);
  box-shadow: none;
}

button.secondary:hover:not(:disabled) {
  color: var(--maroon);
  background: #FFFEFC;
  border-color: rgba(31, 111, 92, .42);
  box-shadow: 0 5px 14px rgba(42, 25, 18, .06);
}

button.good {
  background: linear-gradient(135deg, #21876E, #124A3D);
  box-shadow: 0 7px 16px rgba(18, 74, 61, .13);
}

button.warn {
  background: linear-gradient(135deg, #B76A18, #85460D);
  box-shadow: 0 7px 16px rgba(133, 70, 13, .13);
}

button.bad {
  background: linear-gradient(135deg, #D33D39, #9F211F);
  box-shadow: 0 7px 16px rgba(159, 33, 31, .13);
}

.stat:hover,
.member-stat-card:hover,
.profile-card:hover,
.row:hover,
.row.selected {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, .60);
  box-shadow: var(--shadow-soft);
  transform: none;
}

.row.selected,
.member-row.selected {
  background: rgba(179, 54, 75, .07);
  box-shadow: inset 3px 0 0 var(--gold);
}

.add-row {
  background: rgba(31, 111, 92, .14);
  color: var(--ink);
}

.quality-mini,
.monitoring-bar-track {
  background: rgba(54, 37, 28, .09);
}

.quality-mini span,
.monitoring-bar-track span {
  background: linear-gradient(90deg, var(--maroon), var(--gold));
}

.pending {
  background: rgba(160, 90, 18, .13);
  color: #9A520C;
}

.approved {
  background: rgba(31, 111, 92, .13);
  color: #154F41;
}

.rejected {
  background: rgba(201, 51, 47, .13);
  color: #A72623;
}

.pill.info,
.gender-chip.male {
  background: rgba(179, 54, 75, .10);
  color: var(--maroon);
}

.data-table th,
.monitoring-table th {
  color: var(--muted);
  background: rgba(31, 111, 92, .10);
}

.data-table tr.clickable-row:hover td,
.monitoring-table tr:hover td {
  background: rgba(31, 111, 92, .08);
}

.photo-review-card,
.review-media figure,
.debug-verification-grid article,
.debug-profile-reference,
.monitoring-metrics article,
.monitoring-device-grid > div {
  background: rgba(255, 254, 252, .72);
  border-color: var(--line);
}

.loading-rail {
  height: 3px;
}

.loading-rail span {
  background: linear-gradient(90deg, transparent, var(--gold), var(--maroon), transparent);
  animation-duration: .82s;
}

.crm-toast {
  background: rgba(255, 254, 252, .96);
  border-color: var(--line);
}

.crm-toast-mark {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(31, 111, 92, .14);
}

::-webkit-scrollbar-thumb {
  background: rgba(179, 54, 75, .28);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(179, 54, 75, .44);
}

.detail-empty {
  border-color: rgba(31, 111, 92, .22);
  background:
    radial-gradient(circle at 50% 0%, rgba(31, 111, 92, .14), transparent 48%),
    rgba(255, 254, 252, .62);
}

.detail-empty::before {
  background: var(--gold-soft);
  border-color: rgba(31, 111, 92, .30);
}

.workflow-step.active {
  color: var(--maroon);
  border-color: var(--line-strong);
  background: var(--maroon-soft);
}

.support-message.crm {
  background: rgba(179, 54, 75, .08);
  border-color: rgba(179, 54, 75, .20);
}

.support-message strong,
.onboarding-live-bubble small {
  color: var(--gold);
}

.image-preview,
.onboarding-live-dock.has-waiting .onboarding-live-bubble {
  border-color: rgba(31, 111, 92, .32);
}

.monitoring-query-button {
  width: 100%;
  min-height: 0;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-align: left;
}

.monitoring-query-button:hover:not(:disabled) {
  background: transparent;
  box-shadow: none;
}

.monitoring-query-button:hover .monitoring-query {
  color: var(--maroon);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crm-query-modal {
  width: min(1040px, calc(100vw - 36px));
}

.query-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.query-metric-grid article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 254, 252, .72);
}

.query-metric-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.query-metric-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 20px;
}

/* Founder Command Center — compact, decision-first, with advanced detail on demand. */
.security-note { display: none; }
.main-menu { gap: 4px; }
.main-menu-item { padding-inline: 11px; }
.monitoring-dashboard { gap: 16px; }
.founder-health {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(31, 111, 92, .07);
}
.founder-health > div { display: flex; align-items: center; gap: 11px; }
.founder-health small,
.founder-health strong { display: block; }
.founder-health small { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.founder-health strong { margin-top: 3px; color: var(--ink); font-size: 18px; text-transform: capitalize; }
.founder-health p { margin: 0; color: var(--muted); line-height: 1.5; }
.founder-status-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 6px rgba(31, 111, 92, .12); }
.founder-status-warning { background: rgba(160, 90, 18, .08); border-color: rgba(160, 90, 18, .25); }
.founder-status-warning .founder-status-dot { background: var(--warn); box-shadow: 0 0 0 6px rgba(160, 90, 18, .12); }
.founder-status-critical { background: rgba(201, 51, 47, .07); border-color: rgba(201, 51, 47, .25); }
.founder-status-critical .founder-status-dot { background: var(--bad); box-shadow: 0 0 0 6px rgba(201, 51, 47, .12); }
.founder-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.founder-summary-grid article { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.64); }
.founder-summary-grid span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
.founder-summary-grid strong { display: block; margin-top: 7px; color: var(--ink); font-size: 25px; }
.founder-toolbox { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.62); }
.founder-toolbox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.founder-toolbox-head h3,
.founder-toolbox-head p { margin: 0; }
.founder-toolbox-head h3 { margin-top: 4px; }
.founder-toolbox-head small { color: var(--muted); }
.founder-search-row { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, auto); gap: 9px; }
.founder-profile-results { display: grid; gap: 8px; margin-top: 12px; }
.founder-profile-results > p { margin: 0; padding: 12px; color: var(--muted); border-radius: 12px; background: rgba(31,111,92,.06); }
.founder-profile-card,
.founder-alert-list article { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,254,252,.78); }
.founder-profile-card div,
.founder-alert-list article div { min-width: 0; }
.founder-profile-card strong,
.founder-profile-card span,
.founder-profile-card small,
.founder-alert-list strong,
.founder-alert-list small { display: block; }
.founder-profile-card span,
.founder-profile-card small,
.founder-alert-list small { margin-top: 3px; color: var(--muted); overflow-wrap: anywhere; }
.founder-alert-list { display: grid; gap: 8px; }
.founder-health-history { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 8px; }
.founder-health-history article { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,254,252,.78); }
.founder-health-history span,
.founder-health-history strong,
.founder-health-history small { display: block; }
.founder-health-history span,
.founder-health-history small { color: var(--muted); }
.founder-health-history strong { margin: 5px 0; text-transform: capitalize; }
.founder-history-healthy { color: var(--ok); }
.founder-history-warning { color: var(--warn); }
.founder-history-critical { color: var(--bad); }
.two-factor-visible-error {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(201, 51, 47, .25);
  border-radius: 10px;
  background: rgba(201, 51, 47, .08);
  color: var(--bad);
  font-weight: 800;
}

@media (max-width: 900px) {
  .founder-health { grid-template-columns: 1fr; }
  .founder-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder-search-row { grid-template-columns: 1fr; }
}

.query-full-text {
  max-height: min(58vh, 620px);
  overflow: auto;
  margin: 16px 0 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #18120F;
  color: #FFF4E4;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.65;
}

.query-full-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.founder-command { gap: 16px; }
.founder-command-tabs { display: flex; gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.58); overflow-x: auto; }
.founder-command-tabs button { flex: 1; min-width: 140px; min-height: 38px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); box-shadow: none; }
.founder-command-tabs button.active { background: var(--ink); color: white; }
.founder-command-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.founder-command-metrics.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.founder-metric-card { min-height: 112px; padding: 16px; text-align: left; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.74); box-shadow: none; transition: transform .16s ease, border-color .16s ease; }
.founder-metric-card:hover { transform: translateY(-2px); border-color: var(--gold); }
.founder-metric-card span, .founder-metric-card strong, .founder-metric-card small { display: block; }
.founder-metric-card span { color: var(--muted); font-size: 12px; font-weight: 800; }
.founder-metric-card strong { margin: 9px 0 4px; font-size: 28px; }
.founder-metric-card small { color: var(--muted); font-weight: 600; line-height: 1.35; }
.founder-health-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.founder-health-actions button { min-height: 62px; padding: 11px 13px; text-align: left; border-radius: 13px; background: rgba(255,255,255,.72); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.founder-health-actions button:first-child { grid-column: span 2; color: white; background: var(--ink); }
.founder-health-actions span, .founder-health-actions small { display: block; }
.founder-health-actions small { margin-top: 4px; opacity: .7; font-size: 10px; }
.founder-check-dialog { width: min(560px, calc(100vw - 32px)); padding: 20px; }
.founder-check-dialog h2 { margin: 5px 0; }
.founder-check-dialog > p { margin: 6px 0; }
.founder-check-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 10px 0; }
.founder-check-option { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; }
.founder-check-option input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--maroon); }
.founder-check-all { margin-top: 14px; background: rgba(31,111,92,.07); }
.founder-health-results { display: grid; gap: 8px; }
.founder-health-results details { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.founder-health-results summary { display: flex; justify-content: space-between; padding: 12px 14px; cursor: pointer; text-transform: capitalize; }
.founder-result-body { padding: 12px 14px; border-top: 1px solid var(--line); }
.founder-result-body > p { display: flex; justify-content: space-between; gap: 15px; margin: 7px 0; color: var(--muted); line-height: 1.45; }
.founder-result-body > p:first-of-type:not(:last-child) { display: block; }
.founder-link { padding: 0; color: var(--maroon); background: none; border: 0; box-shadow: none; text-align: left; text-decoration: underline; }
.founder-token-grid { display: grid; gap: 8px; }
.founder-token-grid article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.founder-token-grid strong, .founder-token-grid small { display: block; }
.founder-token-grid small { margin-top: 3px; color: var(--muted); }

/* Calm workspace pass: reduce competing surfaces and keep attention on the active task. */
html,
body {
  background: var(--bg);
}

.appbar,
.sub-menu {
  box-shadow: none;
  backdrop-filter: none;
}

.appbar {
  min-height: 64px;
}

.main-menu {
  gap: 3px;
}

.main-menu-item {
  padding: 8px 11px;
  font-size: 11px;
  box-shadow: none;
}

.sub-menu {
  border-bottom: 1px solid var(--line);
}

.nav-chrome .security-note {
  color: var(--muted);
  background: transparent;
  border-top-color: var(--line);
}

.shell {
  padding-top: 22px;
}

.topbar {
  gap: 18px;
  margin-bottom: 16px;
}

.page-heading h1 {
  font-size: clamp(22px, 2.1vw, 30px);
  letter-spacing: -.02em;
}

.page-subtitle {
  margin-top: 4px;
  font-size: 12px;
}

.toolbar {
  gap: 7px;
}

.toolbar input,
.toolbar select,
.toolbar button {
  min-height: 34px;
}

.stats {
  gap: 8px;
  margin-bottom: 14px;
}

.stat {
  min-height: 78px;
  padding: 12px;
  border-radius: 11px;
  box-shadow: none;
  background: var(--panel);
}

.stat strong {
  margin-top: 5px;
  font-size: 22px;
}

.content-grid {
  gap: 12px;
}

/* Navigation alignment: keep every tab on the same baseline and let the
   active state change emphasis without changing the tab's geometry. */
.appbar .main-menu-item {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 36px;
  min-height: 36px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 999px;
  transform: none;
  padding: 0 13px;
}

.appbar .main-menu-item.active {
  border-color: rgba(122, 36, 54, .28);
  box-shadow: none;
}

.nav-group-label {
  display: inline-flex;
  align-items: center;
  height: 36px;
  box-sizing: border-box;
}

.panel,
.chart-card,
.monitoring-dashboard,
.monitoring-section,
.member-stat-card {
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(42, 25, 18, .045);
  background: var(--panel);
}

.panel-head {
  min-height: 50px;
  padding: 13px 15px;
  background: transparent;
}

.list {
  max-height: calc(100vh - 196px);
}

.row {
  padding: 11px 14px;
  gap: 5px;
}

/* Membership editors use compact admin controls; native full-width checkboxes
   otherwise inherit the global input width and become oversized squares. */
.staff-form .check-row {
  display: flex;
  align-items: center;
  grid-column: span 1;
  min-height: 38px;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.staff-form .check-row input[type="checkbox"] {
  appearance: none;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  border: 1px solid #B8C3D1;
  border-radius: 5px;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
}
.staff-form .check-row input[type="checkbox"]:checked {
  border-color: var(--maroon);
  background: var(--maroon);
  box-shadow: inset 0 0 0 3px #fff;
}
.staff-form .check-row span { line-height: 1.35; }

.entitlement-section {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
}
.entitlement-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.entitlement-section-head h4 { margin: 0; color: var(--ink); font-size: 14px; }
.entitlement-section-head span { color: var(--muted); font-size: 11px; font-weight: 800; }
.entitlement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* List buttons must not inherit the maroon action-button background. */
.list > .row {
  width: 100%;
  min-height: 66px;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, .07);
  border-radius: 0;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
}
.list > .row:hover { background: rgba(179, 54, 75, .045); }
.list > .row.selected {
  background: rgba(179, 54, 75, .09);
  box-shadow: inset 3px 0 0 var(--maroon);
}
.list > .row.selected .row-title strong { color: var(--maroon); }
.list > .row .meta { color: var(--muted); }

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

/* CRM-wide control normalization. These selectors intentionally sit at the
   end of the stylesheet so screen-specific legacy rules cannot turn list
   items into maroon action buttons or stretch checkboxes to input width. */
.row,
.list > .row {
  width: 100%;
  min-height: 58px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, .07);
  border-radius: 0;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}
.row:hover,
.list > .row:hover { background: rgba(179, 54, 75, .045); }
.row.selected,
.list > .row.selected {
  background: rgba(179, 54, 75, .09);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--maroon);
}
.row.selected .row-title strong,
.row:hover .row-title strong { color: var(--maroon); }
.row.add-row,
.row.add-row.selected { background: rgba(179, 54, 75, .055); }

.detail input[type="checkbox"],
.detail input[type="radio"],
.check-row input[type="checkbox"],
.check-row input[type="radio"] {
  appearance: none;
  width: 17px;
  height: 17px;
  min-width: 17px;
  flex: 0 0 17px;
  margin: 0;
  padding: 0;
  border: 1px solid #B8C3D1;
  border-radius: 5px;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
}
.detail input[type="radio"],
.check-row input[type="radio"] { border-radius: 50%; }
.detail input[type="checkbox"]:checked,
.check-row input[type="checkbox"]:checked {
  border-color: var(--maroon);
  background: var(--maroon);
  box-shadow: inset 0 0 0 3px #fff;
}
.detail input[type="radio"]:checked,
.check-row input[type="radio"]:checked {
  border: 5px solid var(--maroon);
  background: #fff;
}
.crm-view input[type="checkbox"],
.crm-view input[type="radio"] {
  width: 17px;
  height: 17px;
  min-width: 17px;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}
.crm-view label > input[type="checkbox"],
.crm-view label > input[type="radio"] { flex: 0 0 17px; }
.form-grid .check-row,
.staff-form .check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.form-grid .check-row input[type="checkbox"],
.staff-form .check-row input[type="checkbox"] { width: 17px; }
.form-grid .check-row input[type="radio"],
.staff-form .check-row input[type="radio"] { width: 17px; }

.detail-panel {
  min-height: 420px;
}

.detail-empty {
  min-height: 360px;
  padding: 22px;
  background: var(--panel);
}

.detail-empty::before {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .shell { padding: 18px 16px 32px; }
  .topbar { gap: 12px; }
  .main-menu { overflow-x: auto; }
}

@media (max-width: 1000px) {
  .founder-command-metrics, .founder-command-metrics.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder-health-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .founder-command-metrics, .founder-command-metrics.compact, .founder-health-actions, .founder-check-options { grid-template-columns: 1fr; }
  .founder-health-actions button:first-child { grid-column: auto; }
}

/* Simple operations shell: preserve every CRM destination while reducing
   decorative styling and giving the work areas a stable left rail. */
:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --ink: #17202d;
  --ink-soft: #344054;
  --muted: #667085;
  --maroon: #315f9b;
  --maroon-deep: #234a7d;
  --maroon-light: #4f7fbd;
  --maroon-soft: rgba(49, 95, 155, .08);
  --gold: #315f9b;
  --gold-soft: rgba(49, 95, 155, .10);
  --line: #e4e7ec;
  --line-strong: #cbd5e1;
  --shadow: 0 12px 30px rgba(16, 24, 40, .08);
  --shadow-soft: 0 4px 12px rgba(16, 24, 40, .04);
  --font-display: var(--font-ui);
}

html, body { background: var(--bg); }
h1, h2, h3, .brand strong { font-family: var(--font-ui); }

.crm-view { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.nav-chrome {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.appbar {
  min-height: 100%;
  align-items: stretch;
  flex-direction: column;
  gap: 24px;
  padding: 20px 14px 14px;
  background: var(--panel);
  border-bottom: 0;
}
.brand { padding: 0 8px; }
.mark {
  background: var(--maroon);
  border: 0;
  box-shadow: none;
}
.brand strong { color: var(--ink); font-size: 15px; }
.brand span { color: var(--muted); }
.main-menu { flex-direction: column; align-items: stretch; gap: 3px; overflow: visible; }
.main-menu-item {
  width: 100%;
  justify-content: flex-start;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: left;
}
.main-menu-item:hover { background: var(--panel-soft); color: var(--ink); }
.main-menu-item.active {
  color: var(--maroon-deep);
  background: var(--maroon-soft);
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--maroon);
}
.appbar-right {
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.staff-card { width: 100%; }
.staff-card button { width: 100%; margin-top: 6px; }
.sub-menu {
  align-items: stretch;
  flex-direction: column;
  gap: 14px;
  padding: 0 14px 16px;
  background: var(--panel);
  border-bottom: 0;
}
.sub-menu-group { align-items: stretch; flex-direction: column; gap: 3px; }
.nav-group-label {
  height: auto;
  margin: 8px 0 2px;
  padding: 0 10px;
  border: 0;
  color: var(--muted);
  font-size: 10px;
}
.security-note { display: none; }
.shell { padding: 30px clamp(22px, 4vw, 56px) 48px; }

.login-view {
  background: var(--bg);
}
.login-card, .panel, .chart-card, .monitoring-dashboard, .monitoring-section,
.review-workflow, .crm-modal, .stat, .member-stat-card {
  background: var(--panel);
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}
button {
  min-height: 36px;
  border-radius: 7px;
  background: var(--maroon);
  border-color: var(--maroon);
  box-shadow: none;
}
button:hover:not(:disabled) { background: var(--maroon-deep); box-shadow: none; }
button.secondary { background: var(--panel); color: var(--ink-soft); border-color: var(--line-strong); }
button.secondary:hover:not(:disabled) { background: var(--panel-soft); color: var(--ink); box-shadow: none; }
.main-menu-item, .nav, .detail-tab, .queue-chip { border-radius: 7px; }
.main-menu-item.active, .nav.active, .detail-tab.active { background: var(--maroon-soft); color: var(--maroon-deep); box-shadow: inset 3px 0 0 var(--maroon); }
.toolbar input, .toolbar select, .toolbar button { min-height: 36px; }
.stat { min-height: 76px; padding: 13px; }
.content-grid { gap: 14px; }
.panel-head { background: transparent; }

@media (max-width: 900px) {
  .crm-view { display: block; }
  .nav-chrome { position: sticky; height: auto; max-height: none; overflow: visible; border-right: 0; }
  .appbar { min-height: 64px; flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; }
  .main-menu { flex-direction: row; align-items: center; overflow-x: auto; }
  .main-nav-section { flex: 0 0 auto; }
  .main-nav-section .sub-menu-group { padding: 0 0 4px; }
  .main-menu-item { width: auto; justify-content: center; white-space: nowrap; }
  .appbar-right { flex-direction: row; align-items: center; margin-top: 0; }
  .staff-card { width: auto; }
  .staff-card button { width: auto; margin-top: 0; }
  .sub-menu { flex-direction: row; overflow-x: auto; padding: 10px 16px; }
  .sub-menu-group { flex-direction: row; align-items: center; }
  .nav-group-label { white-space: nowrap; }
  .shell { padding: 22px 18px 38px; }
}

/* Final navigation corrections for the compact left rail. */
html,
body,
*,
*::before,
*::after {
  scrollbar-color: #cbd5e1 transparent;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}

.appbar {
  min-height: 0;
  flex: 0 0 auto;
}

.appbar-right {
  position: fixed;
  top: 18px;
  right: 24px;
  z-index: 120;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  margin-top: 0;
}

.appbar-right .staff-card {
  width: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.appbar-right .staff-card span,
.appbar-right .staff-card strong {
  display: inline;
  margin: 0;
}

.appbar-right #manage2faBtn { display: none; }

.appbar-right #logoutBtn {
  width: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 0;
  line-height: 1;
}

.appbar-right #logoutBtn::before {
  content: '⏻';
  font-size: 20px;
}

.sub-menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.sub-menu-group.active {
  display: flex;
}

.sub-menu-group.hidden {
  display: none !important;
}

/* Parent-first accordion navigation. Each group is moved beside its parent
   at startup so expanded children never collect at the end of the rail. */
.main-nav-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}

.main-nav-section .sub-menu-group {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 0 0 8px 10px;
}

.main-nav-section .sub-menu-group.active {
  display: flex;
}

.main-nav-section .sub-menu-group .nav-group-label {
  margin-top: 6px;
}

.main-nav-section .sub-menu-group .nav {
  min-height: 32px;
  padding-left: 10px;
}

.main-nav-section .sub-menu-group .nav.active {
  box-shadow: inset 2px 0 0 var(--maroon);
}

.nested-nav-parent {
  position: relative;
  padding-left: 20px !important;
  color: var(--ink-soft);
}

.nested-nav-parent::after {
  content: '›';
  position: absolute;
  right: 12px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  transition: transform .15s ease;
}

.nested-nav-parent[aria-expanded='true']::after {
  transform: rotate(90deg);
}

.nested-nav-group {
  display: none;
  flex-direction: column;
  gap: 3px;
  padding-left: 10px;
}

.nested-nav-group.open {
  display: flex;
}

.nested-nav-group .nav {
  min-height: 32px;
  padding-left: 10px;
}

.nav-chrome > .appbar > .main-menu {
  overflow-y: auto;
  min-height: 0;
}

@media (max-width: 900px) {
  .appbar-right {
    position: static;
    margin-top: 0;
  }
}

/* Owner-facing live activity center. */
.activity-center {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
}
.activity-toggle {
  position: relative;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  font-size: 24px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .18);
}
.activity-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 2px 5px;
  border: 2px solid var(--panel);
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
}
.activity-panel {
  position: absolute;
  right: 0;
  bottom: 60px;
  width: min(380px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 120px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 20px 50px rgba(16, 24, 40, .18);
}
.activity-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.activity-panel-head h2 { margin: 0; font-size: 18px; }
.activity-panel-head .eyebrow { margin-bottom: 2px; }
.activity-panel-head button { min-height: 30px; padding-inline: 9px; font-size: 11px; }
.activity-list { max-height: 500px; overflow-y: auto; padding: 6px; }
.activity-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 12px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}
.activity-item:last-child { border-bottom: 0; }
.activity-item:hover { background: var(--panel-soft); box-shadow: none; transform: none; }
.activity-item.read { opacity: .68; }
.activity-item-mark { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--muted); }
.activity-item.unread .activity-item-mark { background: var(--maroon); box-shadow: 0 0 0 4px var(--maroon-soft); }
.activity-item-copy { min-width: 0; }
.activity-item-copy strong,
.activity-item-copy small,
.activity-item-copy > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.activity-item-copy strong { font-size: 12px; }
.activity-item-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.activity-item-copy > span { margin-top: 5px; color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.activity-item em { color: var(--bad); font-size: 10px; font-style: normal; text-transform: uppercase; }
.activity-empty { padding: 20px 12px; text-align: center; }

@media (max-width: 640px) {
  .activity-center { right: 16px; bottom: 16px; }
}

/* Shared CRM visual system: maroon + gold brand palette (see
   docs/WAADA_CRM_UX_Audit_2026-07-06 Finding 8 for the theme's history --
   this file previously accumulated several full recolor passes, the last of
   which switched every brand token to blue; restored to the maroon/gold
   identity used everywhere else in the CRM, e.g. buttons and the brand
   mark). Deliberately does NOT re-declare `.nav-chrome`/`.main-menu-item`/
   `.nav` colors here -- the "Simple operations shell" pass above already
   gives the left rail a correct, var()-driven maroon treatment; this block
   only needs to fix the token values themselves. */
:root { --bg: #FFFBF9; --panel: #FFFFFF; --panel-soft: #FBEEEE; --ink: #0F172A; --muted: #64748B; --gold: #B8860B; --gold-soft: rgba(184, 134, 11, .12); --maroon: #B3364B; --maroon-deep: #7A2436; --maroon-light: #C65A70; --maroon-soft: rgba(179, 54, 75, .08); --line: #E2E8F0; --ok: #0D9488; --warn: #D97706; --bad: #DC2626; --font-display: 'Manrope', sans-serif; }

/* UI/UX fix: hover and active states must never read as "basically the
   same" -- hover is a neutral tint (you're pointing, nothing changed),
   active is the maroon-tinted flat fill + left accent bar (this is where
   you are). Appended last so it wins on equal specificity, same convention
   the rest of this file already uses. Targets the plain `.main-menu-item`/
   `.nav` selectors because app.js's organizeNavigation() removes the
   original `.sub-menu` wrapper at startup, so any `.sub-menu .nav...` rule
   elsewhere in this file no longer matches the real DOM. */
/* UI/UX fix: every sub-menu item gets a light card look by default, not
   just the active one -- otherwise the list reads as plain text next to a
   colored icon chip, and the active row (the only one with a background)
   looks like an unrelated, disconnected element rather than "one of these
   rows, currently selected." */
.sub-menu-group .nav {
  background: var(--panel-soft) !important;
  border: 1px solid var(--line);
}

.main-menu-item:hover,
.nav:hover {
  background: rgba(15, 23, 42, .05) !important;
  color: var(--ink) !important;
  box-shadow: none;
}

/* !important on background/color specifically (nothing else in this rule)
   because this exact selector has FIVE other competing declarations
   earlier in this file (from past redesign passes that were appended
   rather than replacing what came before -- see the theme-history comment
   above), all fighting over these same two properties. Depending on
   viewport/media-query resolution order, one of those older rules could
   win instead of this one, producing a solid dark fill with same-color
   (invisible) text -- exactly the bug reported against the deployed
   left nav. This guarantees the final visual state regardless of what
   else in the file matches. */
.main-menu-item.active,
.nav.active {
  background: var(--maroon-soft) !important;
  color: var(--maroon-deep) !important;
  border-color: var(--maroon-light);
  box-shadow: inset 3px 0 0 var(--maroon);
  font-weight: 800;
}

/* UI/UX fix: an accordion parent (a .main-menu-item with a data-section,
   e.g. "People") needs its own open/closed indicator -- otherwise whether
   it expanded is only guessable from the sub-item list appearing below it,
   which reads as "nothing happened" at a glance. app.js's syncNav() sets
   aria-expanded on these buttons to match .sub-menu-group visibility. */
.main-menu-item[data-section] {
  position: relative;
  padding-right: 28px;
}

.main-menu-item[data-section]::after {
  content: '›';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  transition: transform .15s ease;
}

.main-menu-item[data-section][aria-expanded='true']::after {
  transform: translateY(-50%) rotate(90deg);
  color: var(--maroon);
}

.member-stat-card { background: #EFF6FF; border: 1px solid #DBEAFE; border-radius: 14px; color: #1E3A8A; padding: 20px; text-align: left; }
.member-stat-card:nth-child(4n+2) { background: #ECFDF5; border-color: #CCFBF1; color: #115E59; }
.member-stat-card:nth-child(4n+3) { background: #F5F3FF; border-color: #EDE9FE; color: #5B21B6; }
.member-stat-card:nth-child(4n+4) { background: #FFFBEB; border-color: #FEF3C7; color: #92400E; }
.member-stat-card strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.member-stat-card small { display: block; margin-top: 10px; font-size: 11px; }
.member-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #0F172A0D; }
.chart-card { border: 1px solid #E2E8F0; border-radius: 16px; box-shadow: 0 4px 16px #0F172A05; padding: 22px; min-width: 0; }
.chart-card canvas { max-height: 290px; }
.people-filters { display: flex; flex-wrap: wrap; align-items: start; gap: 10px; padding: 12px 0; }
.filter-dropdown { min-width: 145px; border: 1px solid #CBD5E1; border-radius: 9px; background: white; padding: 10px; }
.filter-dropdown summary { cursor: pointer; font-size: 12px; font-weight: 700; }
.filter-dropdown label { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 12px; }
.filter-dropdown input { width: auto; }
.monitoring-bar-track span { background: linear-gradient(90deg, #2563EB, #60A5FA); }
.members-stat-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (prefers-reduced-motion: reduce) { .member-stat-card:hover { transform: none; } }

.chart-card:has(#peopleReviewChart), .chart-card:has(#peoplePlansChart), .chart-card:has(#ticketTypesChart), .chart-card:has(#ticketStatusChart) { height: 380px; }
.chart-card.people-growth { height: 480px; }
.chart-card h3 { margin: 0 0 16px; }
.member-stat-card[data-tone="blue"] { background: #EFF6FF; border-color: #DBEAFE; color: #1E3A8A; }
.member-stat-card[data-tone="amber"] { background: #FFFBEB; border-color: #FEF3C7; color: #92400E; }
.member-stat-card[data-tone="teal"] { background: #ECFDF5; border-color: #CCFBF1; color: #115E59; }
.member-stat-card[data-tone="violet"] { background: #F5F3FF; border-color: #EDE9FE; color: #5B21B6; }
@media (max-width: 600px) { .chart-card.people-growth { height: 560px; } .people-filters label { flex: 1 1 100%; } }

/* User Journey uses the whole workspace, with details below each chart. */
.journey-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.journey-dashboard > .monitoring-head, .journey-dashboard > .monitoring-note, .journey-wide { grid-column: 1 / -1; }
.journey-dashboard > section { min-width: 0; }
.journey-dashboard .dashboard-charts { grid-template-columns: minmax(0, 1fr); }
.journey-dashboard .chart-card canvas { max-height: none; width: 100% !important; }
.journey-dashboard .monitoring-section-head { flex-wrap: wrap; gap: 10px; }
.journey-dashboard .monitoring-section-head small { max-width: 100%; text-align: left; }
.journey-dashboard .monitoring-table { width: 100%; min-width: 0; table-layout: fixed; }
.journey-dashboard .monitoring-table th, .journey-dashboard .monitoring-table td { overflow-wrap: anywhere; white-space: normal; }
.journey-dashboard .monitoring-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .journey-dashboard { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .journey-dashboard .monitoring-metrics { grid-template-columns: minmax(0, 1fr); } }

.journey-section > .monitoring-section-head { min-height: 64px; align-content: start; }