/* ================================================================
   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(--navy-light) 0%, var(--navy) 100%);
  border-color: var(--navy-dark);
  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, #162d4e 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: linear-gradient(135deg, #2563eb 0%, #1e3a5f 100%);
  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(--navy);
  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 ────────────────────────────────── */

/* Navy header band — shown on screen and in print */
.ar-print-header {
  display: block;
  background: var(--navy);
  color: var(--white);
  padding: 12px 16px;
  margin-bottom: 0;
}

.ar-org {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 1px;
}

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

.ar-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  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: rgba(255,255,255,0.88);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--navy);
  font-weight: var(--weight-bold);
}

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

/* Print-only behavior */
@media print {
  .ar-table th {
    background: var(--navy) !important;
    color: rgba(255,255,255,0.88) !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;
}

.kca-header {
  background: var(--navy);
  padding: 2px 7px;
  text-align: center;
  font-size: 6.5px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

.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:#eef4fb; border:1px solid #cfe0f2; color:#1e3a5f; 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: rgba(255,255,255,0.82);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  font-family: inherit;
}
.cfg-tab-btn:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.95);
}
.cfg-tab-active {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.cfg-tab-icon {
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.cfg-tab-active .cfg-tab-icon {
  background: rgba(255,255,255,0.15);
}
.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: linear-gradient(135deg, #2563eb 0%, #1e3a5f 100%); border-color: #1e3a5f; 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: linear-gradient(135deg, #3b6ea5 0%, #1e3a5f 100%); }

/* ══════════════════════════════════════════════════════════════
   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: rgba(255,255,255,0.82);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  font-family: inherit;
}
.bk-tab-btn:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.95);
}
.bk-tab-active {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.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: rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.bk-tab-active .bk-tab-icon {
  background: rgba(255,255,255,0.15);
}
.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: #2c3e55;
  overflow-y: auto;
}
[data-theme="dark"] .prem-nav {
  background: #1e2d40;
}
.prem-nav-header {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 6px;
}
.prem-nav-brand {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.prem-nav-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  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: rgba(255,255,255,0.72);
  font-family: inherit;
  text-align: left;
  width: calc(100% - 16px);
  transition: all .15s;
}
.prem-tab:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
.prem-tab-active {
  font-weight: 700;
  color: #fff !important;
  background: rgba(255,255,255,0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.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: rgba(255,255,255,0.08);
}
.prem-tab-active .prem-tab-icon {
  background: rgba(255,255,255,0.18);
}
.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 rgba(255,255,255,0.08);
  }
  .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; }
}