/* Text-size control. Every font-size below is calc(Npx * var(--font-scale, 1)); this is
   the only knob. --font-scale is set by font-size.js (website only). The extension loads
   this stylesheet without that script, hence BOTH this default and the inline fallback. */
:root { --font-scale: 1; }

/* The A− / A / A+ control itself.
   Its font-size is DELIBERATELY NOT scaled — the one exception to the calc() rule above.
   If it were, pressing A+ would grow the button that grew it, and the already-crowded topbar
   would push its own controls off the edge. Do not "fix" this inconsistency. */
.font-size-control { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.fs-btn {
  font-size: 12px;                     /* fixed on purpose — see above */
  line-height: 1;
  min-width: 26px; height: 28px;
  padding: 0 6px;
  border: 1px solid var(--border, rgba(255, 255, 255, .14));
  border-radius: 6px;
  background: transparent;
  color: var(--text-2, #9fb3b0);
  cursor: pointer;
  font-weight: 700;
  transition: background .15s, color .15s;
}
.fs-btn:hover { color: var(--text, #e6f0ee); background: rgba(148, 163, 184, .12); }
.fs-btn[aria-checked="true"] {
  background: linear-gradient(135deg, rgba(var(--brand-light-rgb), .22), rgba(var(--brand-rgb), .14));
  border-color: rgba(var(--brand-light-rgb), .5);
  color: var(--text, #e6f0ee);
}
.fs-btn:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 1px; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  font-size: calc(14px * var(--font-scale, 1));
  color: #1e293b;
  background: #f1f5f9;
  height: 100vh;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ===== TOP BAR ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: #fff;
  flex-shrink: 0;
  z-index: 100;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-title {
  font-size: calc(17px * var(--font-scale, 1));
  font-weight: 700;
  letter-spacing: -0.3px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.conn-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: calc(12px * var(--font-scale, 1));
  opacity: 0.9;
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fbbf24;
  transition: background 0.3s;
}
.conn-dot.on { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.conn-dot.off { background: #f87171; }

.icon-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  padding: 6px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.icon-btn:hover { background: rgba(255,255,255,0.25); }

/* ===== LAYOUT ===== */
.layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ===== SIDEBAR ===== */
.sidebar {
  width: 200px;
  background: #0f172a;
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 2px;
  flex-shrink: 0;
  /* Scroll the nav when it's taller than the viewport, so the last items stay reachable. */
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(120,140,150,.4); border-radius: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-2);
  text-decoration: none;
  font-size: calc(13px * var(--font-scale, 1));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-item.active {
  background: rgba(var(--brand-light-rgb),0.12);
  color: var(--brand);
  font-weight: 600;
}

.nav-item svg { flex-shrink: 0; }

/* ===== MAIN CONTENT ===== */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel { display: none; }
.panel.active { display: flex; flex-direction: column; gap: 20px; }

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

.panel-header h1 {
  font-size: calc(22px * var(--font-scale, 1));
  font-weight: 700;
  color: #0f172a;
}

.panel-actions {
  display: flex;
  gap: 8px;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: calc(13px * var(--font-scale, 1));
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-family: inherit;
  transition: all 0.15s;
}
.btn:hover { background: #f8fafc; border-color: #cbd5e1; }

.btn-sm {
  padding: 6px 12px;
  font-size: calc(12px * var(--font-scale, 1));
}

.btn-primary {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}
.btn-primary:hover { background: #064e46; border-color: #064e46; }

.danger { color: #ef4444; }
.danger:hover { background: #fef2f2; border-color: #fecaca; }

/* ===== STATS GRID ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.stat-num {
  font-size: calc(32px * var(--font-scale, 1));
  font-weight: 800;
  color: var(--brand-dark);
  margin-bottom: 4px;
}

.stat-lbl {
  font-size: calc(12px * var(--font-scale, 1));
  color: #94a3b8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== SECTION CARDS ===== */
.section-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-card-header h3 {
  font-size: calc(15px * var(--font-scale, 1));
  font-weight: 600;
  color: #334155;
}

/* ===== TABLE ===== */
.table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: auto;
  background: #fff;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(13px * var(--font-scale, 1));
}

.data-table th {
  text-align: left;
  padding: 10px 14px;
  background: #f8fafc;
  font-size: calc(11px * var(--font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.data-table td {
  padding: 9px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #f8fafc; }
.data-table tr.clickable { cursor: pointer; }

.empty-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 8px;
  color: #94a3b8;
  font-size: calc(13px * var(--font-scale, 1));
}

.loading {
  text-align: center;
  padding: 20px;
  color: #94a3b8;
}

/* ===== FILTERS ===== */
.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.filter-tabs {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
}

.filter-tab {
  padding: 5px 12px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: calc(12px * var(--font-scale, 1));
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.filter-tab.active {
  background: #fff;
  color: var(--brand-dark);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.filter-tab:hover:not(.active) { color: #334155; }

.search-input {
  padding: 7px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: calc(12px * var(--font-scale, 1));
  font-family: inherit;
  min-width: 200px;
  outline: none;
  transition: border-color 0.2s;
}
.search-input:focus { border-color: var(--brand); }

/* ===== STATUS BADGES ===== */
.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: calc(11px * var(--font-scale, 1));
  font-weight: 600;
}

.status-badge.pending { background: #fef9c3; color: #854d0e; }
.status-badge.running { background: #dbeafe; color: #1e40af; animation: pulse 1.5s infinite; }
.status-badge.completed { background: #dcfce7; color: #166534; }
.status-badge.stopped { background: #fee2e2; color: #991b1b; }
.status-badge.cancelled { background: #f1f5f9; color: #64748b; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ===== STATUS DOTS ===== */
.status-dot-sm {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
}
.status-dot-sm.sent { background: #94a3b8; }
.status-dot-sm.delivered { background: #22c55e; }
.status-dot-sm.read { background: #3b82f6; }
.status-dot-sm.failed { background: #f87171; }
.status-dot-sm.sending { background: #fbbf24; }
.status-dot-sm.pending { background: #cbd5e1; }

/* ===== FORM ===== */
.form-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e2e8f0;
}
/* Cards fill the dashboard width; the input controls stay a readable width so they don't
   stretch edge-to-edge on wide screens. Tables/lists inside cards are free to fill. */
.form-card .form-input,
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card input[type="number"],
.form-card select,
.form-card textarea { max-width: 720px; }

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: calc(13px * var(--font-scale, 1));
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: calc(13px * var(--font-scale, 1));
  font-family: inherit;
  color: #1e293b;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.08); }

.form-select {
  padding: 7px 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: calc(13px * var(--font-scale, 1));
  font-family: inherit;
  color: #1e293b;
  background: #fff;
  cursor: pointer;
  outline: none;
}

/* ===== TOGGLE BUTTON ===== */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  padding: 2px;
  transition: background 0.2s;
  vertical-align: middle;
}

.toggle-btn.on { background: #22c55e; }
.toggle-btn.off { background: #cbd5e1; }

.toggle-knob {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.toggle-btn.off .toggle-knob { transform: translateX(0); }
.toggle-btn.on .toggle-knob { transform: translateX(16px); }

.toggle-label {
  font-size: calc(11px * var(--font-scale, 1));
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}

tr.group-blocked td {
  opacity: 0.6;
}

.hint {
  font-size: calc(11px * var(--font-scale, 1));
  color: #94a3b8;
  margin-top: 4px;
}

.form-actions {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.setting-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: calc(13px * var(--font-scale, 1));
  color: #475569;
}

.setting-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: calc(13px * var(--font-scale, 1));
  color: #475569;
  cursor: pointer;
}

.sched-contacts-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: calc(13px * var(--font-scale, 1));
  color: #64748b;
}

.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.file-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: calc(12px * var(--font-scale, 1));
  color: #475569;
  border: 1px solid #e2e8f0;
}

.file-chip .remove {
  cursor: pointer;
  color: #94a3b8;
  margin-left: 4px;
  font-weight: 700;
}
.file-chip .remove:hover { color: #ef4444; }

/* ===== MODAL ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active { display: flex; }

.modal {
  background: #fff;
  border-radius: 16px;
  width: 90%;
  max-width: 900px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e2e8f0;
}

.modal-header h2 {
  font-size: calc(18px * var(--font-scale, 1));
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  font-size: calc(24px * var(--font-scale, 1));
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.modal-close:hover { color: #334155; }

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.modal-stat {
  flex: 1;
  min-width: 80px;
  text-align: center;
  padding: 12px 8px;
  border-radius: 10px;
}

.modal-stat .num {
  font-size: calc(24px * var(--font-scale, 1));
  font-weight: 800;
  display: block;
}

.modal-stat .lbl {
  font-size: calc(10px * var(--font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.modal-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: calc(11px * var(--font-scale, 1));
  font-weight: 700;
  color: #dc2626;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dc2626;
  animation: live-pulse 1.2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.modal-stat.msent { background: #dcfce7; }
.modal-stat.msent .num { color: #166534; }
.modal-stat.msent .lbl { color: #15803d; }

.modal-stat.mdelivered { background: #bbf7d0; }
.modal-stat.mdelivered .num { color: #14532d; }
.modal-stat.mdelivered .lbl { color: #166534; }

.modal-stat.msending { background: #fef3c7; }
.modal-stat.msending .num { color: #92400e; }
.modal-stat.msending .lbl { color: #b45309; }

.modal-stat.mread { background: #dbeafe; }
.modal-stat.mread .num { color: #1e40af; }
.modal-stat.mread .lbl { color: #1d4ed8; }

.modal-stat.mfailed { background: #fee2e2; }
.modal-stat.mfailed .num { color: #991b1b; }
.modal-stat.mfailed .lbl { color: #b91c1c; }

.modal-stat.mpending { background: #fef9c3; }
.modal-stat.mpending .num { color: #854d0e; }
.modal-stat.mpending .lbl { color: #a16207; }

/* ===== PROGRESS BAR ===== */
.modal-progress {
  margin-bottom: 16px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  border-radius: 4px;
  transition: width 0.4s ease;
}

.progress-text {
  font-size: calc(12px * var(--font-scale, 1));
  color: #64748b;
  margin-top: 4px;
  font-weight: 500;
}

/* ===== MODAL FILTER BAR ===== */
.modal-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-filter-bar .filter-tabs {
  flex-shrink: 0;
}

.modal-filter-bar .search-input {
  min-width: 180px;
}

/* ===== STATUS COLORS FOR DATA TABLE ===== */
.status-text {
  font-weight: 600;
  font-size: calc(12px * var(--font-scale, 1));
}
.status-text.read { color: #1d4ed8; }
.status-text.delivered { color: #166534; }
.status-text.sending { color: #b45309; }
.status-text.pending { color: #a16207; }
.status-text.failed { color: #b91c1c; }
.status-text.sent { color: #64748b; }

.failure-reason {
  color: #ef4444;
  font-size: calc(12px * var(--font-scale, 1));
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-cell {
  font-size: calc(11px * var(--font-scale, 1));
  color: var(--text-3);
  white-space: nowrap;
}

/* "WhatsApp gave us no time for this person" placeholder in a time column. */
.time-none {
  color: var(--text-3);
  opacity: 0.65;
  cursor: help;
}

/* Explanatory sub-line under a card's summary headline. */
.gm-note {
  font-size: calc(11px * var(--font-scale, 1));
  color: var(--text-3);
  margin-top: 3px;
}

.modal-message {
  background: #e5ddd5;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: calc(13px * var(--font-scale, 1));
  color: #334155;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

/* ===== REPORTS GRID ===== */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.report-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e2e8f0;
}

.report-card h3 {
  font-size: calc(15px * var(--font-scale, 1));
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.report-card p {
  font-size: calc(12px * var(--font-scale, 1));
  color: #94a3b8;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* ===== NAME EDITING ===== */
.name-cell {
  cursor: pointer;
  color: #334155;
  border-bottom: 1px dashed #cbd5e1;
  padding: 1px 4px;
  border-radius: 3px;
  display: inline-block;
  min-width: 40px;
}
.name-cell:hover { background: #f1f5f9; }

.source-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: calc(10px * var(--font-scale, 1));
  font-weight: 600;
  color: var(--brand-dark);
  background: #f0fdf9;
  border: 1px solid #a7f3d0;
  border-radius: 4px;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-label {
  font-size: calc(13px * var(--font-scale, 1));
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.sched-name-cell {
  cursor: pointer;
  color: #334155;
  border-bottom: 1px dashed #cbd5e1;
  padding: 1px 4px;
  border-radius: 3px;
  display: inline-block;
  min-width: 40px;
}
.sched-name-cell:hover { background: #f1f5f9; }
.name-placeholder { color: #94a3b8; font-style: italic; font-size: calc(12px * var(--font-scale, 1)); }
.name-input {
  border: 1.5px solid var(--brand);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: calc(13px * var(--font-scale, 1));
  font-family: inherit;
  outline: none;
  background: #fff;
  min-width: 60px;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== AUTH GATE (Phase 9) ===== */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
}
.auth-card {
  width: 360px;
  background: #fff;
  border-radius: 16px;
  padding: 30px 30px 34px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.3);
}
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: calc(22px * var(--font-scale, 1));
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 4px;
}
.auth-subtitle {
  text-align: center;
  color: #64748b;
  font-size: calc(13px * var(--font-scale, 1));
  margin-bottom: 20px;
}
.auth-tabs {
  display: flex;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 18px;
}
.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 0;
  font-size: calc(14px * var(--font-scale, 1));
  font-weight: 600;
  color: #64748b;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.auth-tab.active { background: #fff; color: var(--brand-dark); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d1d9e0;
  border-radius: 9px;
  font-size: calc(14px * var(--font-scale, 1));
  font-family: inherit;
  color: #1e293b;
  outline: none;
  transition: border-color 0.15s;
}
.auth-form input:focus { border-color: var(--brand); }
.auth-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: calc(13px * var(--font-scale, 1));
  color: #64748b;
  cursor: pointer;
}
.auth-remember input { cursor: pointer; }
.auth-error {
  color: #dc2626;
  font-size: calc(13px * var(--font-scale, 1));
  min-height: 16px;
  line-height: 1.3;
}
.auth-btn {
  margin-top: 4px;
  padding: 12px 0;
  border: none;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: #fff;
  font-size: calc(15px * var(--font-scale, 1));
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.auth-btn:hover { opacity: 0.92; }
.auth-btn:disabled { opacity: 0.6; cursor: default; }
.profile-menu { position: relative; }
.auth-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 200px;
  border: 0;
  background: rgba(255,255,255,0.08);
  color: inherit;
  font-family: inherit;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
.auth-who:hover { background: rgba(255,255,255,0.16); }
.auth-who[aria-expanded="true"] { background: rgba(255,255,255,0.2); }
.auth-who:empty { display: none; }
.auth-caret {
  flex-shrink: 0;
  color: rgba(255,255,255,0.75);
  transition: transform 0.15s;
}
.auth-who[aria-expanded="true"] .auth-caret { transform: rotate(180deg); }
.auth-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(11px * var(--font-scale, 1));
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--brand-dark, #0e7c6f);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.6);
}
.auth-who-name {
  font-size: calc(12.5px * var(--font-scale, 1));
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== ACCOUNT DROPDOWN ===== */
.profile-dropdown {
  /* Fixed, not absolute: the .topbar clips overflow (rounded corners + gloss), which would
     cut off an absolutely-positioned dropdown. Fixed escapes ancestor overflow; JS sets the
     top/right from the trigger's rect on open. */
  position: fixed;
  min-width: 220px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  padding: 6px;
  z-index: 200;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.profile-dropdown[hidden] { display: none; }
.profile-dd-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  margin-bottom: 6px;
}
.profile-dd-avatar {
  width: 36px;
  height: 36px;
  font-size: calc(13px * var(--font-scale, 1));
  color: #fff;
  background: linear-gradient(135deg, var(--brand-light, #25D366), var(--brand-dark, #128C7E));
  box-shadow: none;
}
.profile-dd-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.profile-dd-name {
  font-size: calc(13px * var(--font-scale, 1));
  font-weight: 700;
  color: var(--text, #0f2b27);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-dd-email {
  font-size: calc(11.5px * var(--font-scale, 1));
  color: var(--text-3, #8696a0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-dd-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: calc(13px * var(--font-scale, 1));
  font-weight: 600;
  color: var(--text-2, #475569);
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.profile-dd-item:hover { background: rgba(220,38,38,0.1); color: #dc2626; }
.profile-dd-item svg { flex-shrink: 0; }

/* ===== SEND TARGET TOGGLE + GROUP PICKER (Phase 11) ===== */
.target-toggle {
  display: inline-flex;
  background: #eef2f7;
  border-radius: 8px;
  padding: 3px;
}
.target-btn {
  border: none;
  background: transparent;
  padding: 8px 22px;
  font-size: calc(14px * var(--font-scale, 1));
  font-weight: 600;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.target-btn.active { background: #fff; color: var(--brand-dark); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.group-target-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-top: 6px;
}
.group-target-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  font-size: calc(14px * var(--font-scale, 1));
}
.group-target-item:last-child { border-bottom: none; }
.group-target-item:hover { background: #f8fafc; }
.group-target-item.disabled { opacity: 0.55; cursor: not-allowed; }
.group-target-item .gt-name { flex: 1; color: #1e293b; font-weight: 500; }
.group-target-item .gt-meta { color: #94a3b8; font-size: calc(12px * var(--font-scale, 1)); white-space: nowrap; }

/* ===== ADMIN-ONLY GROUP BADGE (Phase 12) ===== */
.admin-only-badge {
  display: inline-block;
  font-size: calc(11px * var(--font-scale, 1));
  font-weight: 600;
  color: #b91c1c;
  background: #fee2e2;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
  white-space: nowrap;
}

/* ============================================================
   AURORA THEME — Direction A · auto light + dark
   Floating header · pill sidebar · frosted glass · WhatsApp green
   ============================================================ */
:root {
  --brand-dark: #075e54;
  --brand: #128C7E;
  --brand-light: #25D366;
  /* RGB triplets of the three above. They exist because rgba() cannot take a hex variable:
     `rgba(var(--brand-light), .12)` works, `rgba(#25D366, .12)` does not. Without these, every
     translucent brand accent (glows, focus rings, active-nav tints) would stay hardcoded green
     while a tenant's theme changed everything else — a half-branded page, which is worse than
     an unbranded one. website/brand.js sets all six together.
     KEEP THESE IN SYNC with the hex values above. */
  --brand-rgb: 18,140,126;
  --brand-dark-rgb: 7,94,84;
  --brand-light-rgb: 37,211,102;
  --brand-glow: rgba(var(--brand-light-rgb),0.42);

  --bg-base: #e7f0ee;
  /* Glass is a GRADIENT, not a flat wash: brighter at the top-left where the light
     falls, thinner at the bottom-right. That lean is what makes a panel read as a
     pane of glass rather than a translucent rectangle. Mean alpha stays ≈0.50 —
     the same as the old flat 0.48 — so the validated chart contrasts still hold at
     both ends of the ramp. */
  --surface: linear-gradient(135deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.38) 100%);
  --surface-2: rgba(255,255,255,0.34);
  --surface-solid: #ffffff;
  --border: rgba(15,23,42,0.07);
  --border-glass: rgba(255,255,255,0.75);
  --text: #0f2b27;
  --text-2: #51636e;
  --text-3: #8ba0a8;
  --field: rgba(255,255,255,0.72);
  --field-brd: rgba(15,23,42,0.10);

  /* The three ingredients of the glass, as tokens so every panel matches. */
  --glass-blur: blur(22px) saturate(155%);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,0.85);   /* top specular highlight */
  --glass-ring: inset 0 0 0 1px rgba(255,255,255,0.45); /* light rim */

  --shadow-sm: 0 2px 10px rgba(var(--brand-dark-rgb),0.08);
  --shadow-md: 0 12px 32px rgba(var(--brand-dark-rgb),0.14);
  --shadow-lg: 0 22px 60px rgba(var(--brand-dark-rgb),0.24);
  --r-lg: 18px;
  --r-md: 14px;
}

:root[data-theme="dark"] {
  color-scheme: dark; /* native dropdowns, scrollbars, pickers render dark */
  /* Derived from the token, not a literal: dark mode overrides the glow's ALPHA (0.35 vs 0.42),
     not the brand colour. Hardcoding the green here would leave dark mode green for a tenant
     whose light mode themed correctly — the exact half-branded outcome the RGB tokens exist to
     prevent. Note this block deliberately does NOT redefine --brand itself, so a per-tenant
     brand colour carries into dark mode automatically. */
  --brand-glow: rgba(var(--brand-light-rgb),0.35);
  --bg-base: #06120e;
  --surface: linear-gradient(135deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.035) 100%);
  --surface-2: rgba(255,255,255,0.05);
  --surface-solid: #111a22;
  --border: rgba(255,255,255,0.09);
  --border-glass: rgba(255,255,255,0.12);
  --text: #e6f0ee;
  --text-2: #9fb3b0;
  --text-3: #6c8079;
  --field: rgba(255,255,255,0.05);
  --field-brd: rgba(255,255,255,0.12);
  --glass-blur: blur(22px) saturate(140%);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,0.14);
  --glass-ring: inset 0 0 0 1px rgba(255,255,255,0.07);
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.45);
  --shadow-md: 0 14px 36px rgba(0,0,0,0.55);
  --shadow-lg: 0 26px 65px rgba(0,0,0,0.65);
}

/* ============================================================
   CHART (VIZ) TOKENS
   Validated with the palette validator against the EFFECTIVE glass surfaces —
   the cards are translucent, so the real surface is the blend, not the page bg:
   light ≈ #E0F6EC (white .48 over the gradient), dark ≈ #142C27.
   Brand var(--brand-light) measures only 1.75:1 on the light glass, so light mode marks use
   a deeper green step; dark keeps the brand green (7.46:1). Delivery segments are
   an ordinal funnel (pending → delivered → read): one hue, monotone lightness.
   ============================================================ */
:root {
  --viz-mark: #178a52;          /* line + bars — 3.87:1 on light glass */
  --viz-read: #08542f;          /* funnel, darkest end — 8.00:1 */
  --viz-delivered: #178a52;     /* 3.87:1 */
  --viz-pending: #3cb87b;       /* funnel, light end — 2.23:1 (≥2:1 ordinal floor) */
  --viz-fail: #d03b3b;          /* status critical — fixed, never themed */
  --viz-up: #006300;            /* delta text — 6.67:1 */
  --viz-down: #a32020;          /* 6.67:1 */
  --viz-grid: rgba(15,23,42,0.09);
}
:root[data-theme="dark"] {
  --viz-mark: var(--brand-light);          /* 7.46:1 on dark glass */
  --viz-read: #7cf0a6;          /* funnel, light end here — 10.4:1 */
  --viz-delivered: #3cbd78;     /* 6.0:1 */
  --viz-pending: #2f8f5c;       /* 3.67:1 — re-stepped up; the first pass cleared the
                                   2:1 ordinal floor but read as an empty ring */
  /* Re-stepped for the brighter glass: on this surface #d03b3b measures 2.88:1 and
     #e66767 as text 4.29:1 — both just under. These clear it. */
  --viz-fail: #e66767;          /* 4.29:1 as a mark */
  --viz-up: #5ee08f;            /* 8.27:1 */
  --viz-down: #ea7373;          /* 4.75:1 as text */
  --viz-grid: rgba(255,255,255,0.07);
}

/* ---- Canvas ---- */
body {
  color: var(--text);
  background: transparent;
}

/* Dark mode: use the landing page's EXACT background gradient so the dashboard and
   the marketing site are pixel-identical. Light theme keeps its own canvas above. */
/* Aurora canvas: base color on the root, drifting glows on a fixed ::before layer.
   Each theme has its own palette so light mode is attractive too. */
:root[data-theme="dark"]  { background: linear-gradient(150deg, #04140d 0%, #06201a 45%, #031710 100%); background-attachment: fixed; }
:root[data-theme="light"] { background: linear-gradient(135deg, #aeead0 0%, #9fe3ea 38%, #c3eedb 68%, #d7f2e8 100%); background-attachment: fixed; }
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  animation: auroraDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(1200px circle at 0% -10%, rgba(var(--brand-light-rgb),.48), transparent 48%),
    radial-gradient(1050px circle at 100% 0%, rgba(6,182,212,.44), transparent 48%),
    radial-gradient(1100px circle at 90% 112%, rgba(16,185,129,.42), transparent 52%),
    radial-gradient(950px circle at 0% 106%, rgba(52,211,153,.36), transparent 52%),
    radial-gradient(1000px circle at 55% 48%, rgba(20,184,166,.26), transparent 60%);
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(1200px circle at 0% -10%, rgba(16,185,129,.50), transparent 52%),
    radial-gradient(1050px circle at 100% 0%, rgba(6,182,212,.46), transparent 52%),
    radial-gradient(1100px circle at 88% 110%, rgba(var(--brand-light-rgb),.46), transparent 56%),
    radial-gradient(950px circle at 5% 108%, rgba(45,212,191,.42), transparent 56%),
    radial-gradient(900px circle at 55% 45%, rgba(56,189,248,.26), transparent 62%);
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.05); }
  50%  { transform: translate3d(2.5%, 1.8%, 0) scale(1.14); }
  100% { transform: translate3d(-1%, 2.5%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ---- Floating header ---- */
.topbar {
  margin: 12px 12px 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-dark) 0%, #0e7c6f 55%, var(--brand) 100%);
  box-shadow: 0 10px 28px rgba(var(--brand-dark-rgb),0.32);
  position: relative;
}
.topbar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 45%);
  pointer-events: none;
}
.logo {
  background: rgba(255,255,255,0.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.30);
  border-radius: 10px;
}

/* ---- Floating glass sidebar with pill nav ---- */
.layout { padding: 12px; gap: 12px; }
.sidebar {
  width: 210px;
  border-radius: var(--r-lg);
  padding: 10px;
  gap: 4px;
  background: var(--surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md), var(--glass-edge), var(--glass-ring);
}
.nav-item {
  border-radius: 12px;
  padding: 11px 13px;
  transition: all 0.18s;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); transform: translateX(2px); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(var(--brand-light-rgb),0.22), rgba(var(--brand-light-rgb),0.05));
  color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand-light), 0 8px 18px rgba(var(--brand-light-rgb),0.14);
}
/* Dark sidebar is already translucent-white, so --surface-2 would read as a *darker*
   pill on hover; lift it instead. */
:root[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.07); }
:root[data-theme="dark"] .nav-item.active { color: #5ef08f; }

/* ============================================================
   DASHBOARD CHARTS
   ============================================================ */
.viz-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.viz-grid .viz-wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .viz-grid { grid-template-columns: 1fr; } }

.chart-card {
  position: relative;
  background: var(--surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm), var(--glass-edge), var(--glass-ring);
  padding: 16px 16px 12px;
  min-width: 0;                     /* let the SVG shrink inside the grid track */
}
.chart-card .ct-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.chart-card .ct-title { font-size: calc(13px * var(--font-scale, 1)); font-weight: 700; color: var(--text); }
.chart-card .ct-sub { font-size: calc(11px * var(--font-scale, 1)); color: var(--text-3); margin-top: 2px; }
.chart-card .ct-figure { font-size: calc(24px * var(--font-scale, 1)); font-weight: 800; color: var(--text); letter-spacing: -.4px; margin-top: 10px; line-height: 1; }
.chart-card svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.chart-card .grid-line { stroke: var(--viz-grid); stroke-width: 1; }
.chart-card .axis-label { fill: var(--text-3); font-size: calc(10px * var(--font-scale, 1)); font-family: inherit; }
.chart-card .chart-hit { fill: transparent; cursor: pointer; }
.chart-card .chart-dot { fill: var(--viz-mark); stroke: var(--surface-solid); stroke-width: 2; opacity: 0; transition: opacity .1s; }
.chart-card .chart-cross { stroke: var(--viz-grid); stroke-width: 1; opacity: 0; }
.chart-card .chart-empty { color: var(--text-3); font-size: calc(12px * var(--font-scale, 1)); padding: 28px 0; text-align: center; }

/* Tooltip — text stays on ink tokens; the value is the only bold thing. */
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5; opacity: 0;
  transform: translate(-50%, -100%);
  background: var(--surface-solid);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 9px;
  font-size: calc(11px * var(--font-scale, 1)); line-height: 1.45;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  transition: opacity .1s;
}
.chart-tip b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Donut + legend */
.donut-wrap { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.donut-wrap svg { flex: 0 0 128px; width: 128px; margin-top: 0; }
.donut-hole-num { fill: var(--text); font-size: calc(19px * var(--font-scale, 1)); font-weight: 800; font-family: inherit; }
.donut-hole-lbl { fill: var(--text-3); font-size: calc(8px * var(--font-scale, 1)); font-family: inherit; }
.viz-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.viz-legend-row { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--font-scale, 1)); }
.viz-legend-row .lg-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.viz-legend-row .lg-lbl { color: var(--text-2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-legend-row .lg-val { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.viz-legend-row .lg-pct { color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* KPI stat cards — icon chip, figure, delta footer */
.stat-card .sc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stat-card .sc-ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--brand-light-rgb),0.14); color: var(--brand);
}
:root[data-theme="dark"] .stat-card .sc-ic { color: #5ee08f; }
.stat-card .sc-foot {
  display: flex; align-items: center; gap: 4px;
  font-size: calc(11px * var(--font-scale, 1)); margin-top: 8px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.stat-card .sc-foot.up { color: var(--viz-up); }
.stat-card .sc-foot.down { color: var(--viz-down); }
.stat-card .sc-foot .sc-since { color: var(--text-3); }

/* ---- Main content text ---- */
.main-content { padding: 20px 22px; }
.panel-header h1 { color: var(--text); }
.section-card-header h3, .report-card h3 { color: var(--text); }
.report-card p { color: var(--text-2); }
.filter-label { color: var(--text-2); }
.loading, .empty-table { color: var(--text-3); }
.hint { color: var(--text-3); }
.form-group label { color: var(--text); }
.setting-field, .setting-check, .sched-contacts-bar { color: var(--text-2); }

/* ---- Stat cards ---- */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-sm), var(--glass-edge), var(--glass-ring);
  border-radius: var(--r-lg);
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.stat-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px;
  background: linear-gradient(180deg, var(--brand-light), var(--brand-dark));
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), var(--glass-edge), var(--glass-ring); }
/* The KPI figure is TEXT, so it wears the ink token — the old gradient clip faded
   from #12a37e to var(--brand-light), and that green end measures 1.75:1 on the light glass,
   so the number literally faded out as it read. The icon chip carries the brand. */
.stat-num {
  color: var(--text);
  letter-spacing: -.5px;
}
.stat-lbl { color: var(--text-3); }

/* ---- Glass content cards ---- */
.section-card,
.report-card,
.form-card {
  background: var(--surface);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-sm), var(--glass-edge);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.report-card { transition: transform 0.2s, box-shadow 0.2s; }
.report-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--glass-edge); }

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-sm), var(--glass-edge);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.data-table th {
  background: var(--surface-2);
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.data-table td { color: var(--text-2); border-bottom: 1px solid var(--border); }
.data-table tr:hover td { background: var(--surface-2); }

/* ---- Buttons ---- */
.btn {
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
}
.btn:hover { background: var(--surface-solid); color: var(--text); border-color: rgba(var(--brand-rgb),0.35); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  border: none;
  color: #fff;
  box-shadow: 0 6px 18px rgba(var(--brand-dark-rgb),0.30);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #086b60, #14a08f);
  border: none;
  color: #fff;
  box-shadow: 0 10px 26px rgba(var(--brand-dark-rgb),0.42);
  transform: translateY(-1px);
}

/* ---- Filters + fields ---- */
.filter-tabs { background: var(--surface-2); }
.filter-tab { color: var(--text-2); }
.filter-tab.active { background: var(--surface-solid); color: var(--brand); }
.search-input, .form-input, .form-select {
  background: var(--field);
  color: var(--text);
  border: 1px solid var(--field-brd);
}
.search-input::placeholder, .form-input::placeholder { color: var(--text-3); }
.search-input:focus, .form-input:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb),0.16);
}

/* ---- Progress bar shimmer ---- */
.progress-bar { height: 9px; border-radius: 5px; background: var(--surface-2); }
.progress-fill {
  background: linear-gradient(90deg, var(--brand-light), #12a37e, var(--brand-dark));
  position: relative;
  overflow: hidden;
}
.progress-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Modal + auth ---- */
.modal-overlay { background: rgba(3,20,17,0.50); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.modal {
  background: var(--surface-solid);
  color: var(--text);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--border); }
.modal-header h2 { color: var(--text); }
.progress-text { color: var(--text-2); }
.auth-overlay {
  background:
    radial-gradient(800px 600px at 0% 0%, var(--brand-glow), transparent 60%),
    linear-gradient(135deg, #043e37 0%, var(--brand-dark) 55%, var(--brand) 100%);
}
.auth-card {
  background: var(--surface-solid);
  color: var(--text);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.auth-subtitle { color: var(--text-2); }
.auth-tabs { background: var(--surface-2); }
.auth-tab { color: var(--text-2); }
.auth-tab.active { background: var(--surface-solid); color: var(--brand); }
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  background: var(--field);
  color: var(--text);
  border: 1px solid var(--field-brd);
}
.auth-form input::placeholder { color: var(--text-3); }
.auth-remember { color: var(--text-2); }
.auth-btn { box-shadow: 0 10px 26px rgba(var(--brand-dark-rgb),0.40); }

/* ---- Segmented + misc ---- */
.target-toggle { background: var(--surface-2); }
.target-btn { color: var(--text-2); }
.target-btn.active { background: var(--surface-solid); color: var(--brand); }
.file-chip { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
::-webkit-scrollbar-thumb { background: rgba(120,140,150,0.45); }

/* ============================================================
   DARK-MODE FINE TUNING
   ============================================================ */
:root[data-theme="dark"] .modal-message { background: #0b1e18; color: var(--text); }
:root[data-theme="dark"] .name-cell,
:root[data-theme="dark"] .sched-name-cell { color: var(--text-2); border-bottom-color: var(--border); }
:root[data-theme="dark"] .name-cell:hover,
:root[data-theme="dark"] .sched-name-cell:hover { background: var(--surface-2); }
:root[data-theme="dark"] .source-badge { background: rgba(var(--brand-light-rgb),0.10); border-color: rgba(var(--brand-light-rgb),0.30); color: #4ade80; }
:root[data-theme="dark"] .log-box { background: #05131a; }
:root[data-theme="dark"] .filter-tab.active,
:root[data-theme="dark"] .target-btn.active,
:root[data-theme="dark"] .auth-tab.active { color: #4ade80; }

/* Native <select> dropdown list — force readable option colors in dark mode */
:root[data-theme="dark"] select option,
:root[data-theme="dark"] .form-select option {
  background: #111a22;
  color: #e6f0ee;
}

/* Group picker list (Schedule / Send-To) — names were hardcoded dark slate */
:root[data-theme="dark"] .group-target-list { border-color: var(--border); }
:root[data-theme="dark"] .group-target-item { border-bottom-color: var(--border); }
:root[data-theme="dark"] .group-target-item:hover { background: var(--surface-2); }
:root[data-theme="dark"] .group-target-item .gt-name { color: var(--text); }
:root[data-theme="dark"] .group-target-item .gt-meta { color: var(--text-2); }

/* ===== Password show/hide (eye) + email verification step ===== */
.pw-field { position: relative; display: flex; align-items: center; }
.auth-form .pw-field input { width: 100%; padding-right: 42px; }
.pw-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px; border: none; background: none; cursor: pointer;
  color: #94a3b8; border-radius: 6px;
}
.pw-eye:hover { color: #475569; }
.pw-eye .eye-off { display: none; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-off { display: inline-flex; }
#authVerifyCode { letter-spacing: 4px; text-align: center; font-size: calc(16px * var(--font-scale, 1)); }
.auth-verify-note { font-size: calc(13px * var(--font-scale, 1)); color: #64748b; line-height: 1.45; margin-bottom: 4px; }
.auth-verify-note strong { color: var(--brand-dark); }
.auth-verify-actions { display: flex; justify-content: space-between; margin-top: 6px; }
.auth-verify-actions a { font-size: calc(12px * var(--font-scale, 1)); font-weight: 600; color: var(--brand); text-decoration: none; cursor: pointer; }
.auth-verify-actions a:hover { text-decoration: underline; }
:root[data-theme="dark"] .pw-eye { color: var(--text-3); }
:root[data-theme="dark"] .pw-eye:hover { color: var(--text); }
:root[data-theme="dark"] .auth-verify-note { color: var(--text-2); }
:root[data-theme="dark"] .auth-verify-note strong { color: #4ade80; }
:root[data-theme="dark"] .auth-verify-actions a { color: #4ade80; }

/* ============================================================
   THEME TOGGLE BUTTON (sun / moon icon swap)
   ============================================================ */
.theme-toggle .ic-sun { display: none; }
.theme-toggle .ic-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

/* ============================================================
   RESPONSIVE  (must stay at end-of-file: the theming pass above
   re-declares .sidebar/.topbar, so these need to win the cascade)
   ============================================================ */

/* Hamburger + drawer scrim are desktop-inert; the media queries below switch them on. */
.nav-toggle {
  display: none;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  padding: 7px;
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { background: rgba(255,255,255,0.25); }
.nav-scrim { display: none; }

/* ---- Mobile shell: off-canvas drawer, wrapping toolbars, 2-col grids ---- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  /* Fixed drawer escapes .layout's overflow:hidden and slides in over the scrim. */
  .layout { padding: 12px; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 264px; max-width: 82vw;
    margin: 0;
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    padding-top: 16px;
    z-index: 1500;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    background: var(--surface);
  }
  .sidebar.open { transform: translateX(0); }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
  }
  .nav-scrim.open { opacity: 1; visibility: visible; }

  /* Drawer open shouldn't let the shell scroll behind it. */
  body.nav-open { overflow: hidden; }

  /* Content reflow */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .reports-grid { grid-template-columns: repeat(2, 1fr); }

  /* Toolbars wrap instead of overflowing */
  .filters { flex-wrap: wrap; }
  .search-input { min-width: 0; width: 100%; }
  .panel-header { flex-wrap: wrap; gap: 10px; }
  .panel-actions { flex-wrap: wrap; }

  /* Topbar: keep the connection dot, drop its label to save width */
  .topbar-right { gap: 8px; }
  .conn-label { display: none; }

  /* Popovers must never exceed the viewport */
  .profile-dropdown { max-width: min(320px, 92vw); }
}

/* ---- Phone: single-column grids, tighter spacing, drop non-essential topbar bits ---- */
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr; }
  .reports-grid { grid-template-columns: 1fr; }

  .main-content { padding: 14px; }
  .topbar { margin: 8px 8px 0; }
  .layout { padding: 8px; }

  /* Free up the crowded topbar so the account/profile menu (log in / out) is never pushed
     off the right edge and clipped by .topbar's overflow:hidden. Drop the wordmark, the
     text-size stepper, and the widest non-essential control — the plan badge (Billing is in
     the sidebar). The get-extension button stays (it's icon-only here and there's room). */
  .font-size-control { display: none; }
  .topbar-title { display: none; }
  .plan-badge { display: none !important; }
  .topbar-right { gap: 6px; }
  /* These must always stay visible — never let them shrink to nothing */
  .profile-menu, .notif-wrap { flex-shrink: 0; }
  /* Collapse the account chip to just the avatar circle so it can't be pushed off-screen */
  .auth-who-name, .auth-caret { display: none; }
  .auth-who { padding: 4px; }

  /* Modal fills more of the screen and its inner content stays reachable */
  .modal { width: 94%; max-height: 90vh; }

  /* In-app auth overlay card must not overflow a 320px screen */
  .auth-card { width: min(360px, 92vw); }
}