/* Navbar */
.navbar {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #fff;
  font-weight: 700;
  font-size: var(--font-size-lg);
  letter-spacing: 0.02em;
}
.navbar-brand-mark { width: 32px; height: 32px; border-radius: 8px; }
.navbar-brand span { color: var(--color-accent-light); }
.navbar-brand-tag {
  color: rgba(255,255,255,0.6) !important;
  font-weight: 500;
  font-size: var(--font-size-sm);
  letter-spacing: normal;
  border-left: 1px solid rgba(255,255,255,0.25);
  padding-left: var(--space-2);
}
.navbar-links { display: flex; gap: var(--space-4); align-items: center; }
.navbar-links a { color: rgba(255,255,255,0.85); font-weight: 500; }
.navbar-links a:hover { color: #fff; text-decoration: none; }

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card-hover:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.btn:active { transform: scale(0.97); }
.btn[disabled], .btn.is-submitting { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-light); }
.btn-accent { background: var(--color-accent); color: #1f2430; }
.btn-accent:hover { background: var(--color-accent-light); }
.btn-outline { background: transparent; border: 1.5px solid var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: var(--font-size-sm); }

/* Forms */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; margin-bottom: var(--space-1); font-size: var(--font-size-sm); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(44, 66, 112, 0.15);
}
.field .hint { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.field-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 200px; }

/* Password field: eye toggle + caps-lock warning */
.password-input-wrapper { position: relative; }
.password-input-wrapper input { padding-right: 44px; }
.password-toggle-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.password-toggle-btn:hover { color: var(--color-primary); background: var(--color-bg); }
.password-toggle-btn svg { width: 20px; height: 20px; pointer-events: none; }
.caps-lock-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-warning);
}
.caps-lock-warning[hidden] { display: none; }

/* Search / filter pane */
.filter-pane {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.filter-pane .field { margin-bottom: 0; min-width: 180px; }

/* Alerts */
.alert { border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--font-size-sm); }
.alert-success { background: #e6f6ee; color: var(--color-success); border: 1px solid #b7e6cc; }
.alert-error { background: #fdecea; color: var(--color-danger); border: 1px solid #f5c6c0; }
.alert-warning { background: #fdf3d9; color: var(--color-warning); border: 1px solid #f0dda0; }
.alert-info { background: #e8eef8; color: var(--color-primary-light); border: 1px solid #c7d4ea; }

/* Badges */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--font-size-sm); font-weight: 600; }
.badge-pending { background: #fdf3d9; color: var(--color-warning); }
.badge-paid { background: #e6f6ee; color: var(--color-success); }
.badge-cancelled { background: #fdecea; color: var(--color-danger); }
.badge-contacted { background: #e8eef8; color: var(--color-primary-light); }
.badge-draft { background: #f0f1f5; color: var(--color-text-muted); }
.badge-active { background: #e6f6ee; color: var(--color-success); }
.badge-closed { background: #e8eef8; color: var(--color-primary-light); }
.badge-active-yes { background: #e6f6ee; color: var(--color-success); }
.badge-active-no { background: #f0f1f5; color: var(--color-text-muted); }
.badge-sent { background: #e6f6ee; color: var(--color-success); }
.badge-not-sent { background: #fdf3d9; color: var(--color-warning); }

/* Tables */
.data-table th, .data-table td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.data-table th { color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; }
.data-table tr { transition: background var(--transition-fast); }
.data-table tbody tr:nth-child(4n+1) { background: rgba(212, 160, 23, 0.07); }
.data-table tbody tr:nth-child(4n+2) { background: rgba(27, 42, 74, 0.06); }
.data-table tbody tr:nth-child(4n+3) { background: rgba(28, 138, 82, 0.07); }
.data-table tbody tr:nth-child(4n+4) { background: rgba(192, 57, 43, 0.06); }
.data-table tbody tr:hover { background: var(--color-bg); }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.hero h1 { color: #fff; }
.hero p { color: rgba(255,255,255,0.85); font-size: var(--font-size-lg); max-width: 640px; margin-left: auto; margin-right: auto; }

/* Footer */
.footer {
  background: var(--color-primary);
  color: rgba(255,255,255,0.7);
  text-align: center;
  padding: var(--space-5) 0;
  font-size: var(--font-size-sm);
}

/* Auth pages (login / forgot / reset) — full-bleed ballot box background photo */
body.auth-page { background: #0a0f1e; }
/* z-index:0 forces .page to establish its own stacking context — without it,
   the negative z-index photo pseudo-elements below stack in the ROOT context,
   where body's own navy background (an in-flow box) paints above negative-z
   content and hides the photo entirely. */
body.auth-page .page { position: relative; z-index: 0; }
body.auth-page .page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/static/img/auth-bg-ballot.jpg') center/cover no-repeat;
  z-index: -2;
}
body.auth-page .page::after {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,15,30,0.55) 0%, rgba(10,15,30,0.3) 45%, rgba(10,15,30,0.6) 100%);
  z-index: -1;
}
body.auth-page .navbar { background: rgba(10,15,30,0.45); box-shadow: none; backdrop-filter: blur(6px); }
body.auth-page .footer { background: transparent; color: rgba(255,255,255,0.75); }
body.auth-page .main { display: flex; align-items: center; min-height: calc(100vh - 140px); padding: var(--space-6) 0; }
body.auth-page .card { box-shadow: 0 24px 64px rgba(0,0,0,0.5); width: 100%; }

/* Keep a generous visible margin of the background photo around the card on
   every screen size — on mobile especially, where the split photo panel below
   is hidden, the page background is the only picture the visitor sees. */
body.auth-page .container { padding: 0 var(--space-5); }
@media (max-width: 480px) {
  body.auth-page .container { padding: 0 var(--space-4); max-width: calc(100% - 24px); }
  body.auth-page .card { border-radius: var(--radius-lg); }
}

/* OAuth "or" divider + Google button, login pages only */
.oauth-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.oauth-divider::before, .oauth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.btn-google { width: 100%; }

/* Auth split card: photo panel + form panel, used on login/forgot/reset pages */
.auth-split-card { display: flex; max-width: 780px; margin: 0 auto; padding: 0; overflow: hidden; }
.auth-split-photo { flex: 1 1 42%; position: relative; min-height: 440px; display: none; }
@media (min-width: 720px) { .auth-split-photo { display: block; } }
.auth-split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-split-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(10,15,30,0.15) 0%, rgba(10,15,30,0.8) 100%);
}
.auth-split-photo-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-5); color: #fff; }
.auth-split-photo-caption h3 { color: #fff; margin-bottom: 4px; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.auth-split-photo-caption p { color: rgba(255,255,255,0.88); margin: 0; font-size: var(--font-size-sm); }
.auth-split-form { flex: 1 1 58%; padding: var(--space-6); min-width: 280px; }
.auth-form-logo { display: block; height: 44px; width: auto; margin-bottom: var(--space-4); }

/* Step-by-step instructions overlaid on the voter portal's theme photo */
.portal-instructions { list-style: none; margin: var(--space-3) 0 0; padding: 0; counter-reset: portal-step; }
.portal-instructions li {
  counter-increment: portal-step;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: rgba(255,255,255,0.92);
  font-size: var(--font-size-sm);
  margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.portal-instructions li::before {
  content: counter(portal-step);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #1f2430;
  font-weight: 700;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Same numbered-step pattern, light-card version for the ballot page (no photo behind it) */
.ballot-instructions {
  list-style: none;
  margin: var(--space-3) 0 var(--space-5);
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  counter-reset: ballot-step;
}
.ballot-instructions li {
  counter-increment: ballot-step;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  margin-bottom: 6px;
}
.ballot-instructions li:last-child { margin-bottom: 0; }
.ballot-instructions li::before {
  content: counter(ballot-step);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #1f2430;
  font-weight: 700;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}