/* ================================================================
   components.css — Reusable UI components
   Buttons, modals, forms, tables, toasts, badges, alerts.
   ================================================================ */

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  -webkit-appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--btn-primary-bg2) 0%, var(--btn-primary-bg) 100%);
  border-color: var(--btn-primary-line);
  color: #fff;
  box-shadow: 0 1px 3px rgba(14,40,63,0.3), 0 1px 0 rgba(255,255,255,0.08) inset;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #3358a0 0%, var(--navy-light) 100%);
  border-color: var(--navy-light);
}

.btn-ghost {
  background: var(--bg-panel);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-300);
}

.btn-success {
  background: linear-gradient(135deg, #1db954 0%, var(--emerald) 100%);
  border-color: #12803e;
  color: #fff;
  box-shadow: 0 1px 3px rgba(18,128,62,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;
}

.btn-success:hover:not(:disabled) {
  background: linear-gradient(135deg, #22c55e 0%, #1db954 100%);
}

.btn-warn {
  background: linear-gradient(135deg, #d97706 0%, var(--amber) 100%);
  border-color: #92400e;
  color: #fff;
  box-shadow: 0 1px 3px rgba(146,64,14,0.3), 0 1px 0 rgba(255,255,255,0.08) inset;
}

.btn-warn:hover:not(:disabled) {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, var(--red) 100%);
  border-color: #991b1b;
  color: #fff;
  box-shadow: 0 1px 3px rgba(153,27,27,0.3), 0 1px 0 rgba(255,255,255,0.08) inset;
}

.btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
}

.btn-sm {
  padding: 5px 10px;
  font-size: var(--text-xs);
}

.btn-xs {
  padding: 3px 7px;
  font-size: 11px;
}

.btn-lg {
  padding: 11px 22px;
  font-size: var(--text-base);
  letter-spacing: 0.3px;
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  background: var(--white);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) inset;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30,58,95,0.12), 0 1px 2px rgba(0,0,0,0.04) inset;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap {
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}

/* Ensure the horizontal scrollbar is visible when content overflows */
.table-wrap::-webkit-scrollbar {
  height: 8px;
}
.table-wrap::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--gray-400, #9ca3af);
  border-radius: 4px;
}
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

table.data-table th {
  background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);
  padding: 10px 12px;
  text-align: left;
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

table.data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}

table.data-table tr:last-child td {
  border-bottom: none;
}

table.data-table tbody tr {
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

table.data-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(30,58,95,0.04) 0%, var(--bg-hover) 100%);
  box-shadow: inset 3px 0 0 var(--navy);
}

/* ── Search box ─────────────────────────────────────────────── */
.search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.search-box {
  padding: 7px 30px 7px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  background: var(--white);
  width: 100%;                 /* fill parent .search-wrap */
  font-family: inherit;
  -webkit-appearance: none;
  touch-action: manipulation;
}

.search-box:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30,58,95,0.12);
}

.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  display: none;
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.search-clear:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

/* ── Stat cards (dashboard) ─────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.stat-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat-num {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--navy-text);
  line-height: 1;
}

.stat-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--space-2);
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-bg);
  padding: var(--space-4);
  animation: modal-bg-in 150ms ease-out;
}

.modal-bg.open {
  display: flex;
}

@keyframes modal-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal), 0 0 0 1px rgba(0,0,0,0.06);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
  animation: modal-in 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-wide  { max-width: 880px; }
.modal-xl    { max-width: 1100px; }

.modal-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: #fff;
  letter-spacing: 0.2px;
}

.modal-close {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  line-height: 1;
}

.modal-close:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

.modal-body {
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── Toast notifications ────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: calc(var(--topbar-height) + 10px);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: 420px;
  width: calc(100% - 2 * var(--space-5));
}

.toast {
  background: var(--gray-800);
  color: var(--white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.06) inset;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  pointer-events: auto;
  animation: toast-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 420px;
  border-left: 3px solid rgba(255,255,255,0.25);
}

.toast-success {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-left-color: #4ade80;
}
.toast-warn {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  border-left-color: #fbbf24;
}
.toast-error {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  border-left-color: #f87171;
}
.toast-info {
  background: var(--accent-blue-grad);
  border-left-color: #93c5fd;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); max-height: 100px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(20px); max-height: 0; margin-bottom: -8px; }
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* ── Alert banners ──────────────────────────────────────────── */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.alert-warn {
  background: var(--yellow-bg);
  border-color: var(--yellow-border);
  color: #92400e;
}

.alert-error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

.alert-success {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}

/* ── Loading state ──────────────────────────────────────────── */
.loading {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gray-200);
  border-top-color: var(--navy-text);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  margin-right: var(--space-2);
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Empty state ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: var(--space-3);
  opacity: 0.4;
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.empty-state-msg {
  font-size: var(--text-sm);
}

/* ── Login screen ───────────────────────────────────────────── */
#login-screen,
#denied-screen {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.login-card {
  background: var(--white);
  border-radius: 14px;
  padding: 40px 44px;
  width: 380px;
  max-width: 94vw;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.login-icon {
  font-size: 36px;
  margin-bottom: var(--space-2);
}

.login-title {
  font-family: Georgia, serif;
  color: var(--navy-text);
  font-size: var(--text-xl);
  margin-bottom: 4px;
}

.login-sub {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.login-field {
  text-align: left;
  margin-bottom: var(--space-3);
}

.login-field:nth-of-type(2) {
  margin-bottom: var(--space-5);
}

.login-field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 5px;
}

.login-field input {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}

.login-field input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.login-btn {
  width: 100%;
  padding: 11px;
  background: var(--btn-primary-bg);
  color: var(--gold);
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast);
}

.login-btn:hover:not(:disabled) {
  background: var(--navy-light);
}

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

.login-err {
  color: #c0392b;
  font-size: var(--text-xs);
  margin-top: 10px;
  min-height: 18px;
}

.login-foot {
  color: #9aa3b0;
  font-size: var(--text-xs);
  margin-top: var(--space-4);
  margin-bottom: 0;
}

/* ── View Member field layout ───────────────────────────────── */
.view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
}

.view-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--gray-100);
  min-width: 0;
}

.view-field-full {
  grid-column: 1 / -1;
}

.view-field-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.view-field-value {
  font-size: var(--text-base);
  color: var(--text-primary);
  word-break: break-word;
}

/* ── Edit Member form layout ────────────────────────────────── */
.edit-row {
  display: grid;
  gap: 11px;
  margin-bottom: 11px;
}

/* ── Role checkboxes ────────────────────────────────────────── */
.role-checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px;
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.role-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  cursor: pointer;
  user-select: none;
}

.role-checkbox-label input[type="checkbox"] {
  cursor: pointer;
}

.role-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
}

/* ── Quick Search Reports ───────────────────────────────────── */
.qs-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Query items as a responsive grid of tiles */
.qs-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2);
}

.qs-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 11px 13px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.qs-item:hover {
  border-color: var(--navy-text);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.qs-item-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.qs-item-body {
  flex: 1;
  min-width: 0;
}

.qs-item-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.25;
}

.qs-item-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.qs-item-count {
  flex-shrink: 0;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  min-width: 30px;
  text-align: center;
}

.qs-result-area {
  min-height: 200px;
}

.qs-result-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  background: var(--bg-panel);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
}

.qs-result {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.qs-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
}

.qs-result-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.qs-result-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.qs-result-actions {
  display: flex;
  gap: var(--space-2);
}

.qs-result-body {
  padding: 0;
}

.qs-result-body .table-wrap {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ── Reports panel ──────────────────────────────────────────── */
.rpt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.rpt-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 92px;
}

.rpt-card-ready:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--navy-text);
}

.rpt-card-pending {
  opacity: 0.55;
  cursor: not-allowed;
}

.rpt-card-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.rpt-card-body {
  flex: 1;
  min-width: 0;
}

.rpt-card-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.25;
}

.rpt-card-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

.rpt-card-pill {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--amber);
  color: white;
  font-size: 9px;
  font-weight: var(--weight-bold);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.rpt-result-area {
  margin-top: var(--space-4);
}

.rpt-result {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.rpt-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
}

.rpt-result-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.rpt-result-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.rpt-result-actions {
  display: flex;
  gap: var(--space-2);
}

.rpt-result-body .table-wrap {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ── Secondary status badge (outlined pill) ─────────────────── */
.badge-secondary {
  background: transparent !important;
  border: 1.5px solid currentColor;
  font-weight: var(--weight-semibold);
  padding: 1px 6px !important;
  font-size: 10px !important;
}

/* ── Secondary-status checkbox row (Add/Edit forms) ─────────── */
.sec-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 9px 12px;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sec-status-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.sec-status-label input[type="checkbox"] {
  cursor: pointer;
}

/* ── Backup & Restore panel ─────────────────────────────────── */
.backup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-4);
  max-width: 1800px;
  align-items: stretch;
}

/* Download: row1 col1 */
.backup-grid > .backup-card:nth-child(1) { grid-column: 1; grid-row: 1; }

/* Restore: row1 col2 */
.backup-grid > .backup-card:nth-child(2) { grid-column: 2; grid-row: 1; }

/* CSV: row2 col1-2 */
.backup-grid > .backup-csv-card { grid-column: 1 / 3; grid-row: 2; }

/* Cloud: cols 3-4, spans both rows — double wide, full height */
.backup-cloud-right { grid-column: 3 / 5; grid-row: 1 / 3; }

/* Dropbox: cols 5-6, spans both rows — double wide, full height */
.backup-dropbox-right { grid-column: 5 / 7; grid-row: 1 / 3; }

@media (max-width: 900px) {
  .backup-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .backup-grid > .backup-card:nth-child(1),
  .backup-grid > .backup-card:nth-child(2),
  .backup-grid > .backup-csv-card,
  .backup-cloud-right,
  .backup-dropbox-right {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ── CSV Imports/Exports tab — boxed sections ────────────────── */
.csv-tab-section {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  max-width: 900px;
}
.csv-tab-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.csv-tab-section-icon {
  font-size: 26px;
  line-height: 1;
}
.csv-tab-section-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy-text);
}

.backup-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

.backup-card-icon {
  font-size: 36px;
  margin-bottom: var(--space-2);
}

.backup-card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.backup-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.backup-stat-line {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

.backup-stat-line strong {
  color: var(--navy-text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
}

.backup-card-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-3);
  font-style: italic;
}

.backup-meta {
  margin-top: var(--space-5);
  padding: var(--space-3);
  background: var(--gray-50);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ── Roles panel ────────────────────────────────────────────── */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.roles-tile {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-4);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  user-select: none;
}

.roles-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.roles-tile-selected {
  background: var(--gray-50);
  box-shadow: 0 0 0 2px var(--navy), var(--shadow);
}

.roles-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.roles-tile-count {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  line-height: 1;
}

.roles-tile-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--navy-text);
  line-height: 1.3;
}

.roles-tile-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 4px;
}

.roles-tile-norole {
  background: var(--gray-50);
}

.roles-roster-area {
  margin-top: var(--space-4);
}

/* ── Duplicate Manager ──────────────────────────────────────── */
.dup-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.dup-group {
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.dup-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
}

.dup-group-type {
  font-size: 18px;
}

.dup-group-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--navy-text);
  flex: 1;
}

.dup-group-count {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--weight-semibold);
  background: var(--white);
  border: 1px solid var(--border);
  padding: 2px 9px;
  border-radius: var(--radius-full);
}

.dup-skip-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  margin-left: var(--space-2);
}

.dup-records {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1px;
  background: var(--border);
}

.dup-record {
  background: var(--bg-panel);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dup-keeper-radio {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  background: var(--gray-50);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
}

.dup-keeper-radio:hover {
  background: #ecfdf5;
  border-color: var(--emerald);
}

.dup-keeper-radio:has(input:checked) {
  background: #ecfdf5;
  border-color: var(--emerald);
  color: #065f46;
}

.dup-keeper-label {
  font-weight: var(--weight-bold);
}

.dup-record-fields {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--text-sm);
}

.dup-rec-nameline {
  font-size: var(--text-base);
  margin-bottom: 4px;
}

.dup-rec-row {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.45;
}

.dup-fld {
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 10px;
}

.dup-rec-notes {
  background: var(--gray-50);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  margin-top: 3px;
}

.dup-action-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

/* ── Month picker (Reports → New Members by Month) ──────────── */
.month-year-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mp-year-btn {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  background: var(--bg-panel);
  color: var(--text-primary);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.mp-year-btn:hover {
  background: var(--bg-hover);
  border-color: var(--navy);
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.mp-month-btn {
  padding: 9px 4px;
  border: 1px solid var(--border-strong);
  background: var(--bg-panel);
  color: var(--text-primary);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.mp-month-btn:hover {
  background: var(--bg-hover);
  border-color: var(--navy);
}

.mp-active {
  background: var(--navy) !important;
  color: #ffffff !important;
  border-color: var(--navy) !important;
}

/* ── Annual Renewal Register ────────────────────────────────── */

/* Header band, on screen and in print.
   This is a working document: the Membership Secretary reads it under
   whatever light the club has and marks it up by hand. A solid dark panel
   with pale text on it was hard to read and wasted ink; a light band with
   near-black text is legible on any printer and takes a pen mark. */
.ar-print-header {
  display: block;
  background: var(--reg-band-bg);
  color: var(--reg-band-ink);
  border-bottom: 2px solid var(--reg-band-rule);
  padding: 12px 16px;
  margin-bottom: 0;
}

.ar-org {
  font-size: 10px;
  color: var(--reg-band-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--reg-band-ink);
  margin: 3px 0 2px;
}

.ar-meta {
  font-size: 11px;
  color: var(--reg-band-dim);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.ar-policy {
  background: #fffbeb;
  border-left: 4px solid var(--gold);
  padding: 8px 14px;
  font-size: 12px;
  color: #78350f;
  line-height: 1.5;
}

.ar-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
}

.ar-table thead {
  display: table-header-group;
}

.ar-table th {
  padding: 8px 10px;
  font-size: 10px;
  color: var(--reg-th-ink);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--reg-th-bg);
  border-bottom: 1.5px solid var(--reg-band-rule);
  font-weight: var(--weight-bold);
}

.ar-table td {
  border-bottom: 1px solid var(--border);
}

/* Print-only behavior */
@media print {
  .ar-table th {
    background: var(--reg-th-bg) !important;
    color: var(--reg-th-ink) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ar-print-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ar-blank-box {
    border: 1px solid #999 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Show the standard binder-print-header on all reports when printing */
  .binder-print-header {
    display: block !important;
  }
  /* But hide it for the Annual Renewal Register — it has its own navy header */
  .has-ar-header .binder-print-header {
    display: none !important;
  }
}

/* ── Key Card Labels ────────────────────────────────────────── */

.kcl-step {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.kcl-step-header {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--navy-text);
  margin-bottom: var(--space-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Step 1 — format selection */
.kcl-format-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 620px;
}

.kcl-format-card {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  user-select: none;
}

.kcl-format-card:hover {
  border-color: var(--navy-text);
  transform: translateY(-1px);
}

.kcl-format-card.kcl-selected {
  border-color: var(--navy-text);
  background: var(--gray-50);
  box-shadow: 0 0 0 2px var(--navy);
}

.kcl-format-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.kcl-format-title {
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--navy-text);
}

.kcl-format-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 3px;
}

/* Step 2 — filters and member list */
.kcl-filters {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.kcl-print-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.kcl-selected-count {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}

.kcl-print-btn {
  font-size: 16px;
  font-weight: 700;
  padding: 14px 28px;
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .kcl-print-action {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
}

.kcl-step2-body {
  display: block;
}
.kcl-step2-with-avery {
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  gap: var(--space-4);
  align-items: start;
}
.kcl-step2-list-col {
  min-width: 0;
}
.kcl-step2-avery-col {
  min-width: 0;
}
.kcl-step2-avery-col .kcl-avery-start {
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .kcl-step2-with-avery {
    grid-template-columns: 1fr;
  }
}

.kcl-filter-info {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 8px;
  min-height: 18px;
}

.kcl-member-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  margin-bottom: var(--space-3);
}

.kcl-member-row {
  display: grid;
  grid-template-columns: 22px 60px 1fr 60px 100px;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  user-select: none;
}

.kcl-member-row:hover {
  background: var(--gray-50);
}

.kcl-member-num {
  font-family: var(--font-mono);
  color: var(--amber);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
}

.kcl-member-name {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.kcl-member-status {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
}

.kcl-member-join {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Avery starting position picker */
.kcl-avery-start {
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.kcl-avery-label {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.kcl-avery-sheet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 280px;
}

.kcl-avery-cell {
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 2px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.kcl-avery-cell:hover {
  background: var(--gray-100);
  border-color: var(--navy-text);
}

.kcl-avery-used {
  background: repeating-linear-gradient(45deg,
    var(--gray-100),
    var(--gray-100) 4px,
    var(--gray-200) 4px,
    var(--gray-200) 8px);
  color: var(--gray-400);
  cursor: pointer;
}

.kcl-avery-current {
  background: var(--navy) !important;
  color: var(--white) !important;
  border-color: var(--navy) !important;
}

/* Step 3 — preview area */
.kcl-preview-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.kcl-print-area {
  padding: var(--space-3);
  background: var(--gray-100);
  border-radius: var(--radius);
}

/* Thermal preview lays labels in a column */
.kcl-thermal-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Avery preview lays out as a 3-column grid resembling the sheet */
.kcl-avery-area {
  display: grid;
  grid-template-columns: repeat(3, 2.625in);
  gap: 0;
  justify-content: center;
}

/* ── Thermal label (3" × 1") — black on white ─────────────────
   Critical: thermal printers can only print black ink on white paper.
   No backgrounds, no colors, no fancy fonts. */
.key-card {
  width: 2.85in;
  height: 0.92in;
  background: white;
  border: 1px solid #ccc;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

.kc-header {
  background: white;
  border-bottom: 1.5px solid #000;
  padding: 2px 8px;
  text-align: center;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #000;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

.kc-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  padding: 0 8px;
}

.kc-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.kc-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 3px 0 4px 8px;
  flex-shrink: 0;
  border-left: 1px solid #000;
  margin-left: 6px;
  min-width: 50px;
}

.kc-name {
  font-size: 13px;
  color: #000;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc-firstname {
  font-size: 10px;
  color: #000;
  font-weight: 400;
  margin-top: 1px;
}

.kc-info {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}

.kc-num {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #000;
}

.kc-status-badge {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #000;
  border: 1px solid #000;
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
}

.kc-since {
  font-size: 7px;
  color: #000;
  font-weight: 700;
  margin-top: 2px;
}

.kc-year {
  font-size: 20px;
  font-weight: 900;
  color: #000;
  line-height: 1;
  letter-spacing: -0.5px;
}

.kc-valid {
  font-size: 7px;
  color: #000;
  font-weight: 700;
  text-align: right;
  margin-top: 2px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Avery 5960 label (2.625" × 1") — color OK ──────────────── */
.key-card-avery {
  width: 2.625in;
  height: 1in;
  background: white;
  border: 1px solid #222;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

/* The banner strip on each key card label.
   It was a solid dark band with white text. On a black and white laser that
   printed as a near-black bar on every one of roughly a thousand labels:
   heavy on toner, and liable to smear on cheap label stock.

   Reversed type at 6.5px is also the worst case for a laser - the toner
   spreads into the letterforms and the text fills in. Dark text on white
   at this size is sharper as well as cheaper.

   The rule underneath keeps the strip reading as a header. */
.kca-header {
  background: var(--kca-header-bg);
  /* The rule replaces one pixel of padding rather than adding to it, so the
     banner is EXACTLY the height it was before. Avery cells are die-cut and
     any drift accumulates down the sheet. */
  padding: 2px 7px 1px;
  text-align: center;
  font-size: 6.5px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--kca-header-ink);
  border-bottom: 1px solid var(--kca-header-rule);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  /* Show an ellipsis rather than cutting mid-word. A name too long for the
     label is then obvious in the preview instead of looking like the text
     was simply saved wrong. */
  text-overflow: ellipsis;
}

.kca-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  padding: 0 7px;
}

.kca-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.kca-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 3px 0 4px 7px;
  flex-shrink: 0;
  border-left: 1px solid #ccc;
  margin-left: 5px;
  min-width: 52px;
}

.kca-name {
  font-size: 14px;
  color: #000;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kca-firstname {
  font-size: 11px;
  color: #111;
  font-weight: 700;
  margin-top: 2px;
}

.kca-info {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.kca-num {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 800;
  color: #000;
}

.kca-badge {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #222;
  border: 1.5px solid #888;
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: 600;
  white-space: nowrap;
}

.kca-year {
  font-size: 20px;
  font-weight: 900;
  color: #000;
  line-height: 1;
  letter-spacing: -0.5px;
}

.kca-valid {
  font-size: 7px;
  color: #000;
  font-weight: 700;
  text-align: right;
  margin-top: 2px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.kca-since {
  font-size: 7px;
  color: #000;
  font-weight: 700;
  margin-top: 1px;
}

.kcl-avery-blank {
  border: 1px dashed #ccc;
  background: transparent;
}

/* ── Ubiquiti Export panel ──────────────────────────────────── */
.ub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
  max-width: 1320px;
  margin-bottom: var(--space-4);
}

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

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

.ub-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

.ub-card-icon {
  font-size: 28px;
  margin-bottom: var(--space-2);
}

.ub-card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.ub-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.ub-bullets {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-3) var(--space-4);
  padding: 0;
}

.ub-bullets li {
  margin-bottom: 4px;
}

.ub-bullets code {
  font-family: var(--font-mono);
  background: var(--gray-100);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--navy-text);
}

.ub-stats {
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-3);
}

.ub-stats strong {
  font-size: var(--text-lg);
  font-family: var(--font-mono);
  color: var(--navy-text);
  margin-right: 4px;
}

.ub-result-line {
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

/* ── Export History list ─────────────────────────────────────── */
.ub-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
}

.ub-history-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--gray-50);
}

.ub-history-main {
  flex: 1;
  min-width: 0;
}

.ub-history-filename {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}

.ub-history-meta {
  margin-top: 2px;
  line-height: 1.4;
}

.ub-redownload-btn {
  flex-shrink: 0;
}

.ub-preview-section {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 920px;
}

.ub-preview-header {
  background: var(--gray-50);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

.ub-preview {
  padding: var(--space-3);
  background: var(--gray-100);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  overflow-x: auto;
  max-height: 240px;
}

.ub-preview pre {
  margin: 0;
  white-space: pre;
}

/* ── CSV Import panel ───────────────────────────────────────── */
.csv-import-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.csv-review {
  max-width: 1100px;
}

.csv-summary {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.csv-file-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.csv-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.csv-stat {
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.csv-stat-num {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
}

.csv-stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.csv-stat-new  { background: #ecfdf5; border-color: var(--emerald); }
.csv-stat-new  .csv-stat-num { color: var(--emerald); }
.csv-stat-upd  { background: #eff6ff; border-color: #3b82f6; }
.csv-stat-upd  .csv-stat-num { color: #1d4ed8; }
.csv-stat-cnf  { background: #fffbeb; border-color: var(--amber); }
.csv-stat-cnf  .csv-stat-num { color: #b45309; }
.csv-stat-skip { background: var(--gray-50); }
.csv-stat-skip .csv-stat-num { color: var(--text-muted); }

.csv-section {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.csv-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
}

.csv-section-icon {
  font-size: 18px;
}

.csv-section-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--navy-text);
  flex: 1;
}

.csv-section-count {
  background: var(--white);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 2px 9px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}

.csv-section-actions {
  display: flex;
  gap: 6px;
}

.csv-section-hint {
  padding: 6px var(--space-4);
  background: var(--gray-50);
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.csv-rows {
  max-height: 400px;
  overflow-y: auto;
}

.csv-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.csv-row:last-child {
  border-bottom: none;
}

.csv-row:hover {
  background: var(--gray-50);
}

.csv-row-cb-wrap {
  padding-top: 2px;
}

.csv-row-cb-spacer {
  color: var(--text-muted);
  font-size: 18px;
  padding: 0 4px;
}

.csv-row-body {
  flex: 1;
  min-width: 0;
}

.csv-row-name {
  font-size: var(--text-sm);
  margin-bottom: 4px;
}

.csv-row-detail {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

.csv-diffs {
  margin-top: 6px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font-size: var(--text-xs);
  border: 1px solid var(--border);
}

.csv-diff-row {
  display: grid;
  grid-template-columns: 130px 1fr 20px 1fr;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
}

.csv-diff-field {
  font-family: var(--font-mono);
  color: var(--navy-text);
  font-weight: var(--weight-semibold);
  font-size: 11px;
}

.csv-diff-from {
  color: var(--red);
  text-decoration: line-through;
  text-decoration-color: rgba(220, 38, 38, 0.4);
}

.csv-diff-arrow {
  color: var(--text-muted);
  text-align: center;
  font-weight: var(--weight-bold);
}

.csv-diff-to {
  color: var(--emerald);
  font-weight: var(--weight-semibold);
}

.csv-match-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  margin-right: 6px;
}

.csv-match-id   { background: #ecfdf5; color: #065f46; }
.csv-match-nmb  { background: #eff6ff; color: #1e40af; }

.csv-apply-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: sticky;
  bottom: 0;
}

.backup-csv-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

/* ── Batch Mark Dues Paid ───────────────────────────────────── */
.bd-controls {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.bd-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--white);
}

.bd-toggle:has(input:checked) {
  background: var(--amber);
  color: var(--white);
  border-color: var(--amber);
  font-weight: var(--weight-semibold);
}

.bd-toggle input[type="checkbox"] {
  cursor: pointer;
}

.bd-counts {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.bd-count-pill {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 3px 11px;
  border-radius: var(--radius-full);
}

.bd-count-renewed { background: #ecfdf5; color: #065f46; }
.bd-count-dnr     { background: #fef2f2; color: #b91c1c; }
.bd-count-other   { background: var(--gray-100); color: var(--text-secondary); }

.bd-cb-cell {
  text-align: center;
  cursor: pointer;
}

.bd-cb {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.bd-sortable {
  cursor: pointer;
  user-select: none;
}

.bd-sortable:hover {
  background: var(--gray-100);
}

.bd-yr-cell {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
}

.bd-yr-renewed {
  color: var(--emerald);
}

.bd-yr-dnr {
  color: var(--red);
}

.bd-yr-other {
  color: var(--text-muted);
}

/* ── Dashboard (rich layout) ────────────────────────────────── */
.dash-section-label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 14px 0 6px;
}

.dash-section-label:first-child {
  margin-top: 0;
}

.dash-banner {
  margin-bottom: 10px;
}

.dash-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

@media (max-width: 820px) {
  .dash-lower { grid-template-columns: 1fr; }
}

.dash-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.dash-card-title {
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--navy-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-3);
}

/* ── Dashboard main two-column layout (tiles | trends) ──────── */
.dash-main {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-4);
  align-items: start;
}

/* On narrower screens the trend frame drops below the tiles */
@media (max-width: 1100px) {
  .dash-main { grid-template-columns: 1fr; }
}

.dash-main-left { min-width: 0; }

.dash-trend {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.dash-trend-block {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.dash-trend-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.dash-trend-head {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--navy-text);
  margin-bottom: 2px;
}

.dash-trend-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.4;
}

/* ── Dashboard (redesigned: tile rows + embedded quick search) ─ */
.dash-row { margin-bottom: var(--space-3); }
.dash-row:last-child { margin-bottom: 0; }

/* All three rows are a uniform 6-up grid so every tile is the same width
   and the six render evenly on one row on a laptop or iPad. Below 700px
   they fall back to auto-fill wrapping for phones. */
@media (min-width: 700px) {
  #dash-tiles .dash-row { grid-template-columns: repeat(6, 1fr); }
}

/* "Coming Soon" tile */
.stat-card-soon {
  opacity: 0.7;
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stat-soon-pill {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--amber);
  background: var(--amber-bg, #fffbeb);
  border: 1px solid var(--amber-border, #fde68a);
  padding: 2px 8px;
  border-radius: var(--radius-full, 999px);
}

/* ── Membership Application (printable form) ────────────────── */
/* All colors are pure black/white/gray — safe for B&W laser printers */
.app-form {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  padding: 40px 48px;
  font-family: Georgia, 'Times New Roman', serif;
  color: #000;
}

.af-head { text-align: center; margin-bottom: 18px; }
.af-org {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #000;
  font-family: Georgia, serif;
}
.af-org-sub {
  font-size: 17px;
  font-weight: 600;
  color: #000;
  margin-top: 1px;
}
.af-title {
  font-size: 15px;
  font-style: italic;
  color: #333;
  margin-top: 6px;
  letter-spacing: 0.3px;
}

.af-banner {
  text-align: center;
  background: #000;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px;
  border-radius: 3px;
  margin: 0 0 16px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.af-notice {
  font-size: 11.5px;
  line-height: 1.55;
  color: #333;
  text-align: center;
  font-family: Arial, sans-serif;
  border: 1px solid #999;
  background: #f4f4f4;
  border-radius: 4px;
  padding: 9px 14px;
  margin-bottom: 22px;
}

.af-section { margin-bottom: 24px; }

.af-section-title {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #000;
  border-bottom: 2px solid #000;
  padding-bottom: 4px;
  margin-bottom: 16px;
}

.af-row {
  display: flex;
  gap: 22px;
  align-items: flex-end;
  margin-bottom: 18px;
  flex-wrap: nowrap;
}

.af-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.af-label {
  font-family: Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #333;
  margin-bottom: 3px;
  white-space: nowrap;
}

.af-line {
  border-bottom: 1.3px solid #000;
  height: 20px;
  min-width: 40px;
}

.af-felony { align-items: center; gap: 16px; }
.af-felony .af-label { font-size: 12px; margin-bottom: 0; white-space: normal; }

.af-checkbox {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  color: #000;
}
.af-box {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1.5px solid #000;
  border-radius: 2px;
  margin-left: 4px;
}

.af-caution {
  font-family: Arial, sans-serif;
  font-size: 10.5px;
  font-style: italic;
  color: #333;
  background: #f4f4f4;
  border-left: 3px solid #000;
  padding: 7px 12px;
  margin-top: 14px;
  border-radius: 0 4px 4px 0;
  line-height: 1.45;
}

.af-official {
  border: 1.5px solid #000;
  border-radius: 4px;
  padding: 16px 20px 18px;
  background: #f8f8f8;
}
.af-official .af-section-title { border-bottom-color: #000; }

.af-official-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.af-official-head {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #000;
  text-align: center;
  margin-bottom: 22px;
}
.af-sign-line { border-bottom: 1.3px solid #000; height: 30px; margin-bottom: 8px; }

.af-decision {
  display: flex;
  gap: 40px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed #999;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #333;
}
.af-decision-item { display: flex; align-items: flex-end; }
.af-decision .af-line { border-bottom: 1.3px solid #000; height: 16px; }

.af-footer {
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 9.5px;
  color: #666;
  margin-top: 24px;
  padding-top: 10px;
  border-top: 1px solid #ccc;
  letter-spacing: 0.5px;
}

/* ── Membership Application: past-member question ───────────── */
.af-pastmember {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  margin-bottom: 22px;
  padding: 10px 14px;
  background: #f0f0f0;
  border: 1px solid #999;
  border-radius: 4px;
}
.af-pastmember .af-label { white-space: nowrap; margin-bottom: 0; }
.af-pastmember .af-field { flex-direction: column; }


/* ── Members address → Google Maps links ────────────────────── */
.m-addr-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--border-strong);
  cursor: pointer;
}
.m-addr-link:hover {
  color: var(--navy-text);
  border-bottom-color: var(--navy-text);
}

/* ── Members "Suspended only" toggle ────────────────────────── */
.m-susp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  padding: 6px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--white);
  white-space: nowrap;
}
.m-susp-toggle:has(input:checked) {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  font-weight: 600;
}
.m-susp-toggle input { cursor: pointer; }

/* ── Members sortable headers ───────────────────────────────── */
th.m-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.m-sortable:hover { background: var(--gray-100); }

/* ── Membership Application: past-member question ───────────── */
.af-pastmember {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  margin-bottom: 22px;
  padding: 10px 14px;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.af-pastmember .af-label { white-space: nowrap; margin-bottom: 0; }
.af-pastmember .af-field { flex-direction: column; }

/* ── Configuration panel ────────────────────────────────────── */
.cfg-note { background:var(--note-bg); border:1px solid var(--note-line); color:var(--note-ink); padding:11px 14px; border-radius:8px; font-size:13px; margin:14px 0 20px; line-height:1.5; }
.cfg-section { margin-bottom:26px; }
.cfg-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cfg-section-head h3 { margin:0; font-size:15px; color:var(--navy-text); }
.cfg-table th { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); }
.cfg-table td { vertical-align:middle; }
.cfg-in { font-family:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--border-strong); border-radius:6px; }
.cfg-code { font-weight:700; letter-spacing:.5px; }
.cfg-code-locked { display:inline-block; font-weight:700; letter-spacing:.5px; padding:5px 10px; background:var(--gray-100,#f1f5f9); border:1px solid var(--border); border-radius:6px; color:var(--navy-text); }
.cfg-del { border:none; background:transparent; color:#c0392b; font-size:15px; cursor:pointer; padding:4px 8px; border-radius:6px; }
.cfg-del:hover { background:#fdecea; }
.cfg-actions { display:flex; align-items:center; gap:12px; padding-top:6px; border-top:1px solid var(--border); margin-top:8px; }
.cfg-dirty { color:#b45309; font-size:12.5px; font-style:italic; }
.btn-sm { font-size:12.5px; padding:5px 11px; }

/* ── Config panel tab interface ──────────────────────────────── */
.cfg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-5);
  padding: 8px 10px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #1a2744 0%, #1e3352 100%);
  border-radius: 14px 14px 0 0;
}
[data-theme="dark"] .cfg-tabs {
  background: linear-gradient(135deg, #0f172a 0%, #162035 100%);
}
.cfg-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--subnav-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  font-family: inherit;
}
.cfg-tab-btn:hover {
  background: var(--subnav-line);
  color: var(--subnav-ink-active);
}
.cfg-tab-active {
  background: var(--subnav-active) !important;
  color: var(--subnav-ink-active) !important;
  box-shadow: inset 0 0 0 1px var(--subnav-active);
}
.cfg-tab-icon {
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--subnav-line);
  flex-shrink: 0;
}
.cfg-tab-active .cfg-tab-icon {
  background: var(--subnav-active);
}
.cfg-tab-content {
  min-height: 300px;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: var(--bg-card);
  padding: var(--space-5);
  position: relative;
  z-index: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
[data-theme="dark"] .cfg-tab-content {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.cfg-form-table { width: 100%; }
.cfg-form-label {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 16px 8px 0;
  white-space: nowrap;
  width: 240px;
}
.cfg-inuse { font-size:11px; color:#b45309; margin-left:6px; font-style:italic; }
.cfg-del-locked { opacity:0.3; cursor:not-allowed; }
.cfg-user-form {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-4);
  max-width: 560px;
}
.cfg-note-danger { background:#fdecea; border-color:#f5c6cb; color:#8b1a1a; }

@media (max-width: 480px) {
  .cfg-tabs { gap: 2px; padding: 6px 6px; }
  .cfg-tab-btn { padding: 6px 8px; font-size: 11px; }
  .cfg-tab-label { display: none; }
  .cfg-tab-icon { font-size: 16px; width: 24px; height: 24px; }
  .cfg-form-label { width: auto; display: block; }
}

/* ── Dashboard primary action buttons (moved from the top bar) ── */
.dash-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: 8px;
  max-width: 1100px;
}
.dash-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 90px;
  padding: 20px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
  overflow: hidden;
}
.dash-action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.dash-action-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}
.dash-action-btn:active { transform: translateY(0); }
.dash-action-ico {
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.dash-action-label {
  font-size: 13px;
  letter-spacing: .3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ── Configuration: in-use indicator + locked delete ────────── */
.cfg-inuse { display:inline-block; margin-left:8px; font-size:10.5px; font-weight:600; color:#92400e; background:#fef3c7; border:1px solid #fde68a; border-radius:10px; padding:1px 7px; vertical-align:middle; }
.cfg-del-locked { color:var(--gray-400,#9ca3af); cursor:not-allowed; }
.cfg-del-locked:hover { background:transparent; }

/* ── Roles page: merged "Quick Counts" (Misc) section ───────── */
.roles-misc-section { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--border); }
.roles-misc-heading { margin: 0 0 4px; font-size: 15px; color: var(--navy-text); }


/* ══════════════════════════════════════════════════════════════
   DARK MODE — V4 CONSOLIDATED
   Single authoritative block. No !important except where
   inline style="" attributes force it. All rules use the
   [data-theme="dark"] ancestor + specific descendant selector
   for clean specificity without conflicts.
   ══════════════════════════════════════════════════════════════ */

/* ── Global body ────────────────────────────────────────────── */
[data-theme="dark"] { color: var(--text-primary); }

/* ── Sidebar ────────────────────────────────────────────────── */
[data-theme="dark"] .nav-section-label    { color: var(--text-muted); opacity: 1; }
[data-theme="dark"] .nav-item-label       { color: var(--text-primary); }
[data-theme="dark"] .nav-item-desc        { color: var(--text-muted); }
[data-theme="dark"] .nav-item:hover       { background: var(--bg-hover); }
[data-theme="dark"] .nav-item.active      { background: rgba(106,176,245,.1); border-left-color: #6ab0f5; }
[data-theme="dark"] .nav-section          { border-bottom-color: rgba(255,255,255,.05); }
[data-theme="dark"] .sidebar-user         { background: var(--gray-100); border-top-color: var(--border); }
[data-theme="dark"] .sidebar-user-email   { color: var(--text-primary) !important; }
[data-theme="dark"] .sidebar-user-role    { color: var(--text-muted) !important; }
[data-theme="dark"] .sidebar-footer       { background: var(--gray-100); border-top-color: var(--border); color: var(--text-secondary) !important; }
[data-theme="dark"] .sidebar-footer-label { color: var(--text-muted) !important; opacity: 1 !important; }
[data-theme="dark"] .sidebar-footer-line  { color: var(--text-secondary) !important; }

/* ── Topbar ─────────────────────────────────────────────────── */
[data-theme="dark"] .topbar-btn           { color: #d0d9eb; }
[data-theme="dark"] .topbar-btn:hover     { background: rgba(255,255,255,.08); }

/* ── Panel chrome ───────────────────────────────────────────── */
[data-theme="dark"] .panel-header         { border-bottom-color: var(--border); background: var(--bg-panel); }
[data-theme="dark"] .panel-title          { color: var(--text-primary) !important; }

/* ── Stat tiles ─────────────────────────────────────────────── */
[data-theme="dark"] .stat-card            { background: var(--bg-panel) !important; border-color: var(--border) !important; }
[data-theme="dark"] .stat-num             { filter: brightness(2.0) saturate(0.8) !important; }
[data-theme="dark"] .stat-num[style]      { filter: brightness(2.0) saturate(0.8) !important; }
[data-theme="dark"] .stat-label           { color: var(--gray-600) !important; }

/* ── Badges / pills ─────────────────────────────────────────── */
[data-theme="dark"] .badge                { filter: brightness(1.15) saturate(.9); }
[data-theme="dark"] .badge-secondary[style] { filter: brightness(1.5) saturate(.85) !important; }

/* ── Alert boxes ────────────────────────────────────────────── */
[data-theme="dark"] .alert                { background: var(--gray-100); color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .alert-info           { background: #0a1f3d; border-color: #1e3a70; color: #93c5fd; }
[data-theme="dark"] .alert-warn           { background: #261d0a; border-color: #4d3a10; color: #fbbf24; }
[data-theme="dark"] .alert-error          { background: #2a0f0f; border-color: #6b1f1f; color: #fca5a5; }
[data-theme="dark"] .alert-success        { background: #0a1f12; border-color: #14532d; color: #86efac; }

/* ── Data tables ────────────────────────────────────────────── */
[data-theme="dark"] table.data-table th                   { background: #1e2d40; color: rgba(255,255,255,0.75); border-bottom-color: rgba(255,255,255,0.10); }
[data-theme="dark"] table.data-table td                   { border-bottom-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] table.data-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
[data-theme="dark"] table.data-table tbody tr:hover td    { background: rgba(255,255,255,0.06); box-shadow: inset 3px 0 0 var(--gold); }
[data-theme="dark"] td[style*="color:#c07a1a"]            { color: #f59e0b !important; }
[data-theme="dark"] td[style*="color: #c07a1a"]           { color: #f59e0b !important; }

/* ── View modal fields ──────────────────────────────────────── */
[data-theme="dark"] .view-field           { border-bottom-color: var(--border); }
[data-theme="dark"] .view-field-label     { color: var(--text-muted); }
[data-theme="dark"] .view-field-value     { color: var(--text-primary); }

/* ── Modal chrome ───────────────────────────────────────────── */
[data-theme="dark"] .modal                { background: var(--bg-panel); color: var(--text-primary); }
[data-theme="dark"] .modal-header         { background: var(--bg-panel); border-bottom-color: var(--border); }
[data-theme="dark"] .modal-footer         { background: var(--bg-panel); border-top-color: var(--border); }
[data-theme="dark"] .modal-body           { color: var(--text-primary); background: var(--bg-panel); }
[data-theme="dark"] .modal-title          { color: var(--text-primary) !important; }
[data-theme="dark"] .modal-body strong    { color: var(--text-primary); }
[data-theme="dark"] .modal div[style*="color:var(--navy)"]  { color: #6ab0f5 !important; }
[data-theme="dark"] .modal div[style*="color: var(--navy)"] { color: #6ab0f5 !important; }
[data-theme="dark"] .modal-body [style*="color:var(--navy)"]  { color: #6ab0f5 !important; }
[data-theme="dark"] .modal-body [style*="color: var(--navy)"] { color: #6ab0f5 !important; }
[data-theme="dark"] .modal-body a[href^="tel:"],
[data-theme="dark"] .modal-body a[href^="mailto:"]        { color: #6ab0f5 !important; }
[data-theme="dark"] .modal-body div[style*="background:var(--gray-50)"] { background: var(--gray-200) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .modal-body div[style*="font-size:22px"] { color: #6ab0f5 !important; }
[data-theme="dark"] .modal div[style*="background:#fffbeb"] { background: #2a2110 !important; border-color: #5c4a1e !important; }
[data-theme="dark"] .modal div[style*="background:#eff6ff"] { background: #0d1e33 !important; border-color: #1e3a6e !important; }

/* ── Form elements ──────────────────────────────────────────── */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea              { background: var(--gray-100) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-muted) !important; }
[data-theme="dark"] select option         { background: var(--gray-100); color: var(--text-primary); }

/* ── Inline validation error ────────────────────────────────── */
[data-theme="dark"] .form-inline-error    { background: #2a0f0f; border-color: #6b1f1f; }

/* ── Batch dues ─────────────────────────────────────────────── */
[data-theme="dark"] .bd-count-renewed     { background: #0a1f12; color: #4ade80; border-color: #14532d; }
[data-theme="dark"] .bd-count-dnr         { background: #2a0f0f; color: #fca5a5; border-color: #6b1f1f; }
[data-theme="dark"] .bd-count-other       { background: var(--gray-100); color: var(--text-secondary); }
[data-theme="dark"] tr[style*="background:#f9fafb"] { background: var(--gray-50) !important; }

/* ── CSV import stats ───────────────────────────────────────── */
[data-theme="dark"] .csv-stat-upd         { background: #0a1530; border-color: #1e40af; }
[data-theme="dark"] .csv-stat-upd .csv-stat-num { color: #93c5fd; }
[data-theme="dark"] .csv-stat-cnf         { background: #261d0a; border-color: #92400e; }
[data-theme="dark"] .csv-stat-cnf .csv-stat-num { color: #fbbf24; }

/* ── Duplicate manager ──────────────────────────────────────── */
[data-theme="dark"] .dup-keeper-radio:has(input:checked) { background: #0a1f12; border-color: var(--emerald); color: #4ade80; }
[data-theme="dark"] .dup-record-fields    { background: #2a2110; border-left-color: var(--gold); color: #fbbf24; }

/* ── Config panel ───────────────────────────────────────────── */
[data-theme="dark"] .cfg-note             { background: #0a1f3d; border-color: #1e3a70; color: #93c5fd; }
[data-theme="dark"] .cfg-inuse            { background: #261d0a; border-color: #4d3a10; color: #fbbf24; }
[data-theme="dark"] .cfg-code-locked      { background: var(--gray-200); border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .cfg-in               { background: var(--gray-100); color: var(--text-primary); border-color: var(--border-strong); }
[data-theme="dark"] .cfg-section-head h3  { color: #6ab0f5; }
[data-theme="dark"] .cfg-table th         { color: var(--text-muted); }
[data-theme="dark"] .cfg-dirty            { color: #fbbf24; }
[data-theme="dark"] .cfg-del:hover        { background: #2a1416; }
[data-theme="dark"] div[style*="background:#fef3f2"] { background: #2a0f0f !important; border-color: #6b1f1f !important; color: #fca5a5 !important; }

/* ── Roles panel ────────────────────────────────────────────── */
[data-theme="dark"] .roles-tile           { background: var(--bg-panel); border-color: var(--border); }
[data-theme="dark"] .roles-tile:hover     { background: var(--bg-hover); }
[data-theme="dark"] .roles-tile-count     { color: var(--text-primary); }
[data-theme="dark"] .roles-tile-label     { color: var(--text-muted); }
[data-theme="dark"] .roles-misc-heading   { color: #6ab0f5; }
[data-theme="dark"] .roles-misc-section   { border-top-color: var(--border); }

/* ── Annual renewal table ───────────────────────────────────── */
[data-theme="dark"] .ar-table th          { background: var(--gray-100); color: var(--text-muted); border-bottom-color: var(--border); }
[data-theme="dark"] .ar-table td          { border-bottom-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] span[style*="color:#16a34a"] { color: #4ade80 !important; }

/* ── Dash banner / dashboard cards ─────────────────────────── */
[data-theme="dark"] .dash-card            { background: var(--bg-panel); border-color: var(--border); }
[data-theme="dark"] .dash-card-title      { color: #6ab0f5; }

/* ── Empty state ─────────────────────────────────────────────── */
[data-theme="dark"] .empty-state-icon     { opacity: .6; }
[data-theme="dark"] .empty-state-title    { color: var(--text-primary) !important; }
[data-theme="dark"] .empty-state-msg      { color: var(--text-muted) !important; }

/* ── Membership Application (stays white — it's a print form) ── */
[data-theme="dark"] .app-form             { background: #fff !important; color: #1a2535 !important; }
[data-theme="dark"] .app-form .af-pastmember { background: #eef2f7 !important; border-color: #c5cfe0 !important; }
[data-theme="dark"] .app-form .af-label   { color: #444 !important; }
[data-theme="dark"] .app-form .af-checkbox { color: #222 !important; }
[data-theme="dark"] .app-form .af-box     { border-color: #333 !important; }
[data-theme="dark"] .app-form .af-notice  { color: #444; background: #f3f4f6; }
[data-theme="dark"] .app-form .af-caution { color: #b45309; background: #fffbeb; }
[data-theme="dark"] .app-form .af-official { background: #fafbfc; }

/* ── Search box ─────────────────────────────────────────────── */
[data-theme="dark"] .search-box           { background: var(--gray-100); color: var(--text-primary); border-color: var(--border-strong); }

/* ── Inline form error ──────────────────────────────────────── */
.form-inline-error                        { display:none; background:#fef2f2; border:1px solid #fecaca; border-radius:6px; padding:9px 12px; margin:8px 0 14px; font-size:13px; }

/* ── Progress bar modal (restore/import) ────────────────────── */
#bk-progress-modal .modal-progress-bar   { background: var(--navy); }

/* ── Smooth transitions for theme switch ─────────────────────── */
.stat-card, .stat-num, .stat-label, .badge, .alert,
.modal, .modal-header, .modal-body, .modal-footer,
.hg-card, .hg-tab, .hg-hero,
.nav-item-label, .nav-section-label, .sidebar-user, .sidebar-footer,
.view-field, .view-field-label, .view-field-value,
.roles-tile, .dash-card, .panel-title,
.bd-count-renewed, .bd-count-dnr, .cfg-note, .cfg-inuse,
table.data-table th, table.data-table td {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}

/* ══════════════════════════════════════════════════════════════
   PHASE 2 — NEW COMPONENTS
   ══════════════════════════════════════════════════════════════ */

/* ── Clear filters button (Members page) ─────────────────────── */
#m-clear-filters {
  align-items: center;
  gap: 4px;
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
  font-size: 12px;
}
#m-clear-filters:hover { background: #92400e; border-color: #92400e; }
[data-theme="dark"] #m-clear-filters { background: #4d3a10; color: #fbbf24; border-color: #4d3a10; }
[data-theme="dark"] #m-clear-filters:hover { background: #5c4a1e; }

/* ── Role onboarding banner ──────────────────────────────────── */
#role-onboard-banner {
  animation: slideUpFade .3s ease-out;
}
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Boot retry error state ──────────────────────────────────── */
#boot-retry-btn { min-width: 140px; }

/* ── Search box placeholder hint ────────────────────────────── */
.search-box::placeholder { color: var(--text-muted); font-style: italic; font-size: 12px; }

/* ══════════════════════════════════════════════════════════════
   INLINE STYLES MIGRATION — Phase 2
   Named CSS classes replacing inline style="" attributes in JS.
   All JS feature files should use these classes instead of
   inline styles, making dark mode and theming maintainable.
   ══════════════════════════════════════════════════════════════ */

/* ── Text color utilities ────────────────────────────────────── */
.t-navy      { color: var(--navy-text); }
.t-muted     { color: var(--text-muted); }
.t-secondary { color: var(--text-secondary); }
.t-green     { color: var(--green); font-weight: 700; }
.t-red       { color: var(--red); }
.t-gold      { color: #c07a1a; }
.t-sm        { font-size: 13px; }
.t-xs        { font-size: 12px; }
.t-xxs       { font-size: 11px; }
.t-bold      { font-weight: 700; }
.t-semibold  { font-weight: 600; }
.t-mono      { font-family: var(--font-mono); }
.t-upper     { text-transform: uppercase; letter-spacing: 0.5px; }
.t-italic    { font-style: italic; }
.t-muted-sm  { font-size: 12px; color: var(--text-muted); }
.t-muted-xs  { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.t-secondary-sm { font-size: 13px; color: var(--text-secondary); }
.t-secondary-xs { font-size: 12px; color: var(--text-secondary); }
.t-navy-sm   { font-size: 12px; font-weight: 700; color: var(--navy-text); text-transform: uppercase; letter-spacing: 1px; }
.t-navy-md   { font-size: 16px; font-weight: 700; color: var(--navy-text); }
.t-nmb       { font-family: var(--font-mono); font-weight: 600; color: #c07a1a; }

/* ── Layout utilities ────────────────────────────────────────── */
.d-flex-sb   { display: flex; justify-content: space-between; align-items: center; }
.d-flex-end  { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-bottom: 12px; }
.d-flex-gap  { display: flex; gap: 12px; align-items: center; }
.mb-3        { margin-bottom: 3px; }
.mb-5        { margin-bottom: 5px; }
.mb-8        { margin-bottom: 8px; }
.mb-10       { margin-bottom: 10px; }
.mb-12       { margin-bottom: 12px; }
.mb-14       { margin-bottom: 14px; }
.mb-16       { margin-bottom: 16px; }
.mt-2        { margin-top: 2px; }
.mt-7        { margin-top: 7px; }
.ml-6        { margin-left: 6px; }
.ml-8        { margin-left: 8px; }
.flex-1      { flex: 1; }

/* ── Card / container utilities ─────────────────────────────── */
.card-panel  { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 7px; padding: 14px; }
.card-info   { background: var(--gray-50); border: 1px solid var(--border); border-radius: 7px; padding: 11px; margin-bottom: 14px; font-size: 13px; line-height: 1.6; }
.code-chip   { display: inline-block; padding: 3px 9px; margin: 3px; background: var(--gray-100); border: 1px solid var(--border); border-radius: 12px; font-family: var(--font-mono); font-size: 13px; }

/* ── SUSPENDED badge (inline in report rows) ─────────────────── */
.badge-suspended { background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin-left: 4px; letter-spacing: .5px; }
[data-theme="dark"] .badge-suspended { background: #2a0f0f; color: #fca5a5; }

/* ── LT Status modal row styles ─────────────────────────────── */
.lt-row-ready      { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #fffbeb; border: 1px solid var(--gold); border-radius: 8px; margin-bottom: 8px; }
.lt-row-approach   { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; margin-bottom: 8px; }
.lt-row-name       { font-weight: 700; font-size: 14px; }
.lt-row-detail     { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.lt-section-head   { font-size: 12px; font-weight: 700; color: var(--navy-text); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
[data-theme="dark"] .lt-row-ready    { background: #2a2110; border-color: #5c4a1e; }
[data-theme="dark"] .lt-row-approach { background: #0d1e33; border-color: #1e3a6e; }
[data-theme="dark"] .lt-section-head { color: #6ab0f5; }
[data-theme="dark"] .lt-row-detail   { color: var(--text-muted); }

/* ── View field utilities ────────────────────────────────────── */
.view-meta       { font-size: 11px; margin-bottom: 2px; }
.view-sub        { font-size: 12px; margin-top: 7px; }
.view-sub-muted  { font-size: 12px; margin-left: 8px; color: var(--text-muted); font-weight: 400; }
.view-sub-muted2 { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 8px; }
.view-paid-y     { color: var(--green); font-weight: 700; }
.view-paid-n     { color: var(--red); }
[data-theme="dark"] .view-paid-y { color: #4ade80; }
[data-theme="dark"] .view-paid-n { color: #f87171; }

/* ── Progress bar (batch-dues / backup) ─────────────────────── */
.progress-track  { background: var(--gray-200); border-radius: 5px; height: 14px; overflow: hidden; }
.progress-fill   { background: var(--navy); border-radius: 3px; height: 22px; margin: 0 auto; }
.progress-cell   { border: 1px solid #999; border-radius: 3px; height: 22px; width: 90px; margin: 0 auto; }
[data-theme="dark"] .progress-track { background: var(--gray-300); }

/* ── Report row utilities ────────────────────────────────────── */
.rpt-year-col    { text-align: center; font-family: var(--font-mono); color: #c07a1a; }
.rpt-name-bold   { font-weight: 700; }
.rpt-detail      { color: var(--text-secondary); font-size: 12px; }
[data-theme="dark"] .rpt-year-col  { color: #f59e0b; }
[data-theme="dark"] .rpt-detail    { color: var(--text-secondary); }
[data-theme="dark"] .pulse-year    { color: rgba(255,255,255,0.75); }
[data-theme="dark"] .pulse-row-current .pulse-year { color: #fff; }
[data-theme="dark"] .pulse-count   { color: rgba(255,255,255,0.75); }
[data-theme="dark"] .pulse-bar-track { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .demo-city     { color: rgba(255,255,255,0.75); }

/* Dark mode fixes for previously unhandled elements */
[data-theme="dark"] .bd-toggle      { background: var(--bg-panel); color: var(--text-primary); border-color: var(--border-strong); }
[data-theme="dark"] .m-susp-toggle  { background: var(--bg-panel); color: var(--text-primary); border-color: var(--border-strong); }
[data-theme="dark"] .dup-group-count { background: var(--gray-100); color: var(--text-secondary); }
[data-theme="dark"] .csv-section-count { background: var(--gray-100); color: var(--text-secondary); }
[data-theme="dark"] .cfg-in         { background: var(--bg-panel); color: var(--text-primary); border-color: var(--border-strong); }
[data-theme="dark"] .cfg-in:focus   { border-color: var(--navy-light); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
[data-theme="dark"] .cfg-note       { background: var(--gray-50); color: var(--text-secondary); border-color: var(--border); }
[data-theme="dark"] .cfg-table      { color: var(--text-primary); }
[data-theme="dark"] .cfg-form-label { color: var(--text-secondary); }
[data-theme="dark"] .cfg-code-locked { color: var(--text-primary); background: var(--gray-100); border-color: var(--border-strong); }
[data-theme="dark"] .prem-content   { background: var(--bg-panel); color: var(--text-primary); }
[data-theme="dark"] .cfg-section-head h3 { color: var(--text-primary); }
[data-theme="dark"] .rpt-result-title { color: var(--text-primary); }
[data-theme="dark"] .rpt-result-count { color: var(--text-muted); }
[data-theme="dark"] .rpt-card       { background: var(--bg-panel); border-color: var(--border); }
[data-theme="dark"] .rpt-card-name  { color: var(--text-primary); }
[data-theme="dark"] .rpt-card-desc  { color: var(--text-muted); }
[data-theme="dark"] .qs-result-title { color: var(--text-primary); }
[data-theme="dark"] .qs-result-count { color: var(--text-muted); }

/* ── Quick-search result row header ─────────────────────────── */
.qs-section-head { font-size: 12px; font-weight: 700; color: var(--navy-text); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; margin-top: 16px; }
[data-theme="dark"] .qs-section-head { color: #6ab0f5; }

/* ── Dashboard utilities ─────────────────────────────────────── */
.dash-action-bar { display: flex; gap: 12px; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 20px; }

/* ── Dues history section (new) ──────────────────────────────── */
.dues-hist-row    { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; border-radius: 5px; font-size: 13px; }
.dues-hist-row:nth-child(even) { background: var(--gray-50); }
.dues-hist-yr     { font-family: var(--font-mono); font-weight: 600; color: var(--navy-text); min-width: 48px; }
.dues-hist-paid   { color: var(--green); font-weight: 600; font-size: 12px; }
.dues-hist-unpaid { color: var(--text-muted); font-size: 12px; }
[data-theme="dark"] .dues-hist-yr     { color: #6ab0f5; }
[data-theme="dark"] .dues-hist-paid   { color: #4ade80; }
[data-theme="dark"] .dues-hist-row:nth-child(even) { background: var(--gray-100); }

/* ══════════════════════════════════════════════════════════════
   BUTTON DARK MODE FIXES + PERSISTENT TOAST
   ══════════════════════════════════════════════════════════════ */

/* ── Buttons in dark mode ───────────────────────────────────────
   The navy primary button is too dark on dark surfaces. Lift it to
   a brighter, readable blue. Ghost buttons need a dark surface. */
[data-theme="dark"] .btn-primary {
  background: #3b6ea5;          /* brighter blue — readable on dark */
  border-color: #3b6ea5;
  color: #ffffff;
}
[data-theme="dark"] .btn-primary:hover:not(:disabled) {
  background: #4a82bd;
  border-color: #4a82bd;
}
[data-theme="dark"] .btn-ghost {
  background: var(--gray-100);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
[data-theme="dark"] .btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
}
[data-theme="dark"] .btn-success {
  background: #1f9d57;
  border-color: #1f9d57;
  color: #fff;
}
[data-theme="dark"] .btn-success:hover:not(:disabled) {
  background: #25b566;
}
[data-theme="dark"] .btn-warn {
  background: #b87514;
  border-color: #b87514;
  color: #fff;
}
[data-theme="dark"] .btn-warn:hover:not(:disabled) {
  background: #d18a1e;
}
[data-theme="dark"] .btn-danger {
  background: #cc3434;
  border-color: #cc3434;
  color: #fff;
}
[data-theme="dark"] .btn-danger:hover:not(:disabled) {
  background: #e04444;
}
/* Plain .btn with no modifier (e.g. "Reset to Defaults") */
[data-theme="dark"] .btn:not(.btn-primary):not(.btn-ghost):not(.btn-success):not(.btn-warn):not(.btn-danger):not(.btn-link) {
  background: var(--gray-100);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
[data-theme="dark"] .btn:not(.btn-primary):not(.btn-ghost):not(.btn-success):not(.btn-warn):not(.btn-danger):not(.btn-link):hover:not(:disabled) {
  background: var(--bg-hover);
}
/* Small buttons inherit the same treatment automatically via the classes above */

/* ── Persistent toast with close button ────────────────────────
   Toasts now stay until dismissed. Layout the text + close button. */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 420px;
  word-break: break-word;
}
.toast-text {
  flex: 1;
  line-height: 1.5;
  white-space: pre-wrap;       /* preserve newlines in error messages */
}
.toast-close {
  flex-shrink: 0;
  background: rgba(255,255,255,0.2);
  border: none;
  color: inherit;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  padding: 0;
  margin-top: 1px;
}
.toast-close:hover {
  background: rgba(255,255,255,0.35);
}
/* Allow text selection so users can copy error messages */
.toast-text { user-select: text; cursor: text; }

/* ── Hardcoded-color replacements (council finding #3) ─────────── */
.t-prepaid     { font-size: 9px; color: var(--green); font-weight: 400; }
.t-danger-bold { color: var(--red); font-weight: 600; }
.t-conflict    { color: var(--red); }
.t-gold-nmb    { font-family: var(--font-mono); font-weight: 600; color: #c07a1a; }
.cfg-note-danger { background: #fef3f2; border-color: #f6c9c4; color: #8a2c22; }
[data-theme="dark"] .t-prepaid     { color: #4ade80; }
[data-theme="dark"] .t-danger-bold { color: #f87171; }
[data-theme="dark"] .t-conflict    { color: #f87171; }
[data-theme="dark"] .t-gold-nmb    { color: #f59e0b; }
[data-theme="dark"] .cfg-note-danger { background: #2a0f0f; border-color: #6b1f1f; color: #fca5a5; }
/* Dashboard quick-add buttons — use success/warn semantics */
.dash-add-sm { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); border-color: #14532d; box-shadow: 0 4px 14px rgba(22,163,74,0.35); }
.dash-add-pn { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); border-color: #78350f; box-shadow: 0 4px 14px rgba(217,119,6,0.35); }
.dash-add-lt { background: var(--accent-blue-grad); border-color: var(--accent-blue-deep); box-shadow: 0 4px 14px rgba(37,99,235,0.35); }
[data-theme="dark"] .dash-add-sm { background: linear-gradient(135deg, #1f9d57 0%, #166534 100%); }
[data-theme="dark"] .dash-add-pn { background: linear-gradient(135deg, #b87514 0%, #92400e 100%); }
[data-theme="dark"] .dash-add-lt { background: var(--accent-blue-grad); }

/* ══════════════════════════════════════════════════════════════
   MOBILE — iPhone (≤ 480px) — ADDITIVE ONLY
   All rules below are inside max-width: 480px.
   Zero impact on desktop, laptop, or iPad.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Modals — full width, no side clipping ─────────────────── */
  .modal {
    width: 96vw;
    max-width: 96vw;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .modal-wide, .modal-xl {
    width: 96vw;
    max-width: 96vw;
  }
  .modal-body {
    padding: var(--space-3);
  }
  .modal-footer {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .modal-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* ── View modal fields — stack label/value vertically ─────── */
  .view-grid {
    grid-template-columns: 1fr;
  }

  /* ── Stat tiles (dashboard member counts) — single column ─── */
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Dashboard action buttons — stack vertically ──────────── */
  .dash-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .dash-action-btn {
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    justify-content: flex-start;
    gap: 12px;
  }
  .dash-action-ico {
    font-size: 18px;
  }
  .dash-action-label {
    font-size: 14px;
  }

  /* ── Members table — scrollable, don't clip ───────────────── */
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  table.data-table {
    min-width: 480px;
  }

  /* ── Roles tiles — single column ──────────────────────────── */
  .rpt-grid {
    grid-template-columns: 1fr;
  }

  /* ── Backup grid — single column ──────────────────────────── */
  .backup-grid {
    grid-template-columns: 1fr !important;
    max-width: 100%;
  }
  .backup-cloud-right,
  .backup-dropbox-right,
  .backup-grid > .backup-card:nth-child(1),
  .backup-grid > .backup-card:nth-child(2),
  .backup-grid > .backup-csv-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  /* ── Report grid — single column ──────────────────────────── */
  .rpt-grid {
    grid-template-columns: 1fr;
  }

  /* ── General: prevent any card/panel overflowing viewport ─── */
  .backup-card, .stat-card, .roles-tile, .dash-banner {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* ── Panel titles — prevent overflow ──────────────────────── */
  .panel-title {
    font-size: 18px;
  }

  /* ── Buttons in toolbar rows — allow wrapping ─────────────── */
  .toolbar, .filter-row {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

/* ── Member View modal tabs ──────────────────────────────────── */
.mv-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--border);
  padding: 0 var(--space-4);
  background: var(--bg-card);
}
.mv-tab-btn {
  padding: 8px 16px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: -2px;
  transition: background .1s, color .1s;
}
.mv-tab-btn:hover { background: var(--bg-hover); color: var(--text); }
.mv-tab-active {
  background: var(--bg-card);
  color: var(--navy-text);
  border-color: var(--border);
  border-bottom-color: var(--bg-card);
  font-weight: 700;
}

/* Documents tab — always larger and bolder than other tabs so it stands
   out as a distinct area of the member record. Amber accent works in
   both light and dark themes. */
.mv-tab-docs-btn {
  font-size: 14px;
  font-weight: 700;
  color: var(--amber);
}
.mv-tab-docs-btn:hover {
  color: var(--amber);
  background: var(--yellow-bg);
}
.mv-tab-docs-btn.mv-tab-active {
  color: var(--amber);
  background: var(--yellow-bg);
  border-color: var(--yellow-border);
  border-bottom-color: var(--yellow-bg);
}

/* ── Dashboard Membership Trends ─────────────────────────────── */
.dash-trends {
  margin-top: var(--space-5);
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}
.dash-trend-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-3);
}
.dash-trend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.dash-trend-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-3);
}
@media (max-width: 480px) {
  .dash-trend-grid { grid-template-columns: 1fr; }
}

/* ── Dashboard Backup Health Check ───────────────────────────── */
.dash-health-wrap {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.dash-health-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--space-3);
}
.dash-health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
  max-width: 1100px;
}
.dash-health-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--space-4);
}
.dash-health-loading { opacity: 0.5; }
.dash-health-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.dash-health-green    { background: var(--green); }
.dash-health-amber    { background: #f59e0b; }
.dash-health-red      { background: var(--red); }
.dash-health-checking { background: var(--border); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.dash-health-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.dash-health-file {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  word-break: break-all;
}
.dash-health-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
}
.dash-health-caveat {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.4;
  font-style: italic;
}
@media (max-width: 900px) {
  .dash-health-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .dash-health-grid { grid-template-columns: 1fr; }
}

/* ── New Member Pulse & Demographics ─────────────────────────── */
.dash-pulse-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
  max-width: 1100px;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.dash-pulse-row .dash-health-wrap {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.dash-pulse-row .pulse-grid {
  max-width: none;
}
.dash-pulse-row #dash-pulse .pulse-grid {
  grid-template-columns: 1fr;
}
.dash-pulse-row #dash-demographics .pulse-grid {
  grid-template-columns: 1fr;
}
.demo-city {
  width: auto;
  min-width: 110px;
  white-space: nowrap;
}
.demo-row-other .demo-city,
.demo-row-other .pulse-count {
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .dash-pulse-row { grid-template-columns: 1fr; }
}
.pulse-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 700px;
}
.pulse-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pulse-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pulse-row-current .pulse-year { font-weight: 700; color: var(--text-primary); }
.pulse-year {
  width: 50px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.pulse-bar-track {
  flex: 1;
  background: var(--border);
  border-radius: 3px;
  height: 16px;
  overflow: hidden;
}
.pulse-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
  min-width: 2px;
}
.pulse-count {
  width: 32px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  font-weight: 700;
  color: var(--text);
}
@media (max-width: 480px) {
  .pulse-grid { grid-template-columns: 1fr; }
}

/* ── Backup & Restore page tabs (file-folder style) ──────────── */
.bk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-5);
  padding: 8px 10px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #1a2744 0%, #1e3352 100%);
  border-radius: 14px 14px 0 0;
}
[data-theme="dark"] .bk-tabs {
  background: linear-gradient(135deg, #0f172a 0%, #162035 100%);
}
.bk-tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--subnav-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  font-family: inherit;
}
.bk-tab-btn:hover {
  background: var(--subnav-line);
  color: var(--subnav-ink-active);
}
.bk-tab-active {
  background: var(--subnav-active) !important;
  color: var(--subnav-ink-active) !important;
  box-shadow: inset 0 0 0 1px var(--subnav-active);
}
.bk-tab-active:hover { color: #fff; }
.bk-tab-icon {
  font-size: 18px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--subnav-line);
  flex-shrink: 0;
}
.bk-tab-active .bk-tab-icon {
  background: var(--subnav-active);
}
.bk-tab-content-box {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: var(--bg-card);
  padding: var(--space-5);
  position: relative;
  z-index: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
[data-theme="dark"] .bk-tab-content-box {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
@media (max-width: 600px) {
  .bk-tabs { padding: 6px 6px; }
  .bk-tab-btn { padding: 8px 14px; font-size: 12px; flex: 1 1 auto; justify-content: center; }
  .bk-tab-btn span:not(.bk-tab-icon) { display: none; }
  .bk-tab-icon { font-size: 16px; width: 26px; height: 26px; }
  .bk-tab-content-box { padding: var(--space-3); }
}

/* ── Label Printer Settings — two-column layout ──────────────── */
.label-printer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.label-printer-col {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-3);
  background: var(--bg-hover);
}
.label-printer-col-head {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.label-printer-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
@media (max-width: 700px) {
  .label-printer-grid { grid-template-columns: 1fr; }
}

/* ── Viewer (read-only) role — global write-action hiding ─────
   When body[data-role="readonly"], hide all write/destructive UI:
   add, edit, save, delete, archive, suspend, restore, upgrade,
   role/status/reason management, user management, and the
   Dashboard's new-member action buttons. Read-only actions
   (view, print, export/csv, search, select-all/clear, run reports)
   remain visible. This is UI-level convenience — Supabase RLS is
   the real enforcement boundary. */
body[data-role="readonly"] [data-act="add"],
body[data-role="readonly"] [data-act="add-reason"],
body[data-role="readonly"] [data-act="add-role"],
body[data-role="readonly"] [data-act="add-status"],
body[data-role="readonly"] [data-act="archive"],
body[data-role="readonly"] [data-act="activate"],
body[data-role="readonly"] [data-act="ban-user"],
body[data-role="readonly"] [data-act="unban-user"],
body[data-role="readonly"] [data-act="change-date"],
body[data-role="readonly"] [data-act="create-user"],
body[data-role="readonly"] [data-act="show-add-user"],
body[data-role="readonly"] [data-act="edit-user"],
body[data-role="readonly"] [data-act="save-edit-user"],
body[data-role="readonly"] [data-act="cancel-edit-user"],
body[data-role="readonly"] [data-act="cancel-add-user"],
body[data-role="readonly"] [data-act="reset-password"],
body[data-role="readonly"] [data-act="del-reason"],
body[data-role="readonly"] [data-act="del-role"],
body[data-role="readonly"] [data-act="del-status"],
body[data-role="readonly"] [data-act="delete"],
body[data-role="readonly"] [data-act="delete-entry"],
body[data-role="readonly"] [data-act="edit"],
body[data-role="readonly"] [data-act="end-suspension"],
body[data-role="readonly"] [data-act="reset"],
body[data-role="readonly"] [data-act="restore"],
body[data-role="readonly"] [data-act="save"],
body[data-role="readonly"] [data-act="save-add"],
body[data-role="readonly"] [data-act="save-exit"],
body[data-role="readonly"] [data-act="suspend"],
body[data-role="readonly"] [data-act="upgrade"],
body[data-role="readonly"] [data-act="upgrade-lt"],
body[data-role="readonly"] .m-edit-btn,
body[data-role="readonly"] .dash-action-btn,
body[data-role="readonly"] #mv-footer-edit,
body[data-role="readonly"] #bd-mark-btn,
body[data-role="readonly"] #dh-backfill,
body[data-role="readonly"] .dh-edit-btn,
body[data-role="readonly"] [data-doc-delete],
body[data-role="readonly"] .viewer-hide {
  display: none !important;
}

/* Viewer banner shown at the top of the Dashboard */
.viewer-banner {
  background: var(--yellow-bg);
  border: 1px solid var(--yellow-border);
  color: var(--amber);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 13px;
  font-weight: 600;
}

/* ================================================================
   PREMIUM SIDE-NAV LAYOUT — shared by Configuration & Backup pages
   Mirrors the Help guide's dark sidebar + content panel design.
   ================================================================ */
.prem-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  min-height: 500px;
  margin-top: var(--space-4);
}
[data-theme="dark"] .prem-layout {
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* ── Side nav ──────────────────────────────────────────────── */
.prem-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  background: var(--subnav-bg);
  overflow-y: auto;
}
[data-theme="dark"] .prem-nav {
  background: #1e2d40;
}
.prem-nav-header {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--subnav-line);
  margin-bottom: 6px;
}
.prem-nav-brand {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--subnav-ink-dim);
}
/* This sub-nav was a dark slate panel, so the heading was white. The panel
   is light now and the heading was white on white - invisible. */
.prem-nav-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--subnav-ink-active);
  margin-top: 2px;
}
.prem-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 0 8px;
  border: none;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--subnav-ink);
  font-family: inherit;
  text-align: left;
  width: calc(100% - 16px);
  transition: all .15s;
}
.prem-tab:hover {
  background: var(--subnav-line);
  color: var(--subnav-ink-active);
}
.prem-tab-active {
  font-weight: 700;
  color: var(--subnav-ink-active) !important;
  background: var(--subnav-active) !important;
  box-shadow: inset 0 0 0 1px var(--subnav-line);
}
.prem-tab-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  background: var(--subnav-hover);
}
.prem-tab-active .prem-tab-icon {
  background: var(--subnav-line);
}
.prem-tab-label { flex: 1; line-height: 1.3; }

/* ── Content panel ─────────────────────────────────────────── */
.prem-content {
  background: var(--bg-card);
  padding: var(--space-5);
  overflow-y: auto;
  max-height: calc(100vh - 180px);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .prem-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .prem-nav {
    flex-direction: row;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--subnav-hover);
  }
  .prem-nav-header { display: none; }
  .prem-tab {
    padding: 8px 10px;
    border-radius: 8px;
    margin: 0 2px;
    width: auto;
    white-space: nowrap;
  }
  .prem-tab-label { display: none; }
  .prem-tab-icon { width: 26px; height: 26px; font-size: 14px; }
  .prem-content { max-height: none; }
}

/* ── Member Modification Request Form (printable) ─────────────── */
/* All colors are pure black/white/gray — safe for B&W laser printers */
.mrf-form {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  padding: 28px 32px 32px;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
}

.mrf-title {
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 20px;
}

/* One request. The heavy border is what makes each one read as a
   separate item at a glance. */
.mrf-block {
  border: 2px solid #000;
  margin-bottom: 14px;
}
.mrf-block:last-child { margin-bottom: 0; }

/* Heights are declared on the rows, so padding must sit inside them or
   the block grows past what the print rules allow for. */
.mrf-form, .mrf-form * { box-sizing: border-box; }

.mrf-row { display: flex; }
.mrf-row-top,
.mrf-row-bottom { border-bottom: 1px solid #000; }
.mrf-row-bottom { border-bottom: none; }

/* Cells carry a centred label with room to write underneath. */
.mrf-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 5px 6px 0;
  border-right: 1px solid #000;
}
.mrf-cell:last-child { border-right: none; }

.mrf-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mrf-write { display: block; height: 34px; }

/* The request itself: tick boxes, then one wide line for anything that
   needs writing out, such as a new address. */
.mrf-issue {
  flex-direction: column;
  border-bottom: 1px solid #000;
  padding: 8px 10px 6px;
}
.mrf-boxes {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}
.mrf-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.mrf-box {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1.3px solid #000;
  flex: 0 0 13px;
}

.mrf-details {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.mrf-details-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  padding-bottom: 2px;
  white-space: nowrap;
}
.mrf-details-line {
  flex: 1;
  border-bottom: 1.3px solid #000;
  height: 16px;
}

/* ── Version badge ─────────────────────────────────────────────
   The single on-screen version, top right of the topbar. The value
   is read from /version.json at boot; nothing else on the page
   displays it, so there is only ever one number to keep current. */
.topbar-version {
  font-family: var(--mono, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  /* Inverted rather than outlined: solid brand colour with white text, so
     it reads from across the room instead of fading into the white bar. */
  background: var(--version-bg);
  color: var(--version-ink);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 5px 10px;
  white-space: nowrap;
  align-self: center;
}

/* version.json could not be read, so this number came from the code and
   may not match what is deployed. Deliberately NOT another warm tone: a
   cool slate reads as clearly different from the brand red rather than as
   a shade of it, and the "?" in the label carries the same meaning without
   depending on colour at all. */
.topbar-version.topbar-version-unverified {
  background: var(--version-bg-warn);
  color: var(--version-ink-warn);
  border-color: var(--version-line-warn);
}