/* ── CredVault Theme System ── */
/* Light mode: html[data-theme="light"] overrides */
/* Dark mode: default (no attribute needed) */

/* ── Smooth transitions on theme switch ── */
body,
header nav, .app-nav,
.feature-card, .pricing-card, .auth-card, .stat-card,
.progress-section, .cred-card, .share-card, .cred-category,
.cred-category-header, .cred-category-body,
.modal, .form-input, .form-select, .form-textarea,
.search-input, .btn-secondary, .cat-tab, .cat-collapse-btn,
.toast, .form-error, footer, .pricing-divider,
.share-url, .share-status-badge, .btn-remove-recipient,
.nav-link, .nav-btn-logout, .text-link,
a, button, h1, h2, h3, h4, p, span, div {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.15s ease,
    box-shadow 0.25s ease;
}

/* ── Theme Toggle Button ── */
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--mist);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border-color: rgba(255,255,255,0.16);
}

/* ── Sun icon: visible in dark mode (click → go light) ── */
.theme-icon-sun { display: flex; }
/* ── Moon icon: visible in light mode (click → go dark) ── */
.theme-icon-moon { display: none; }

/* ── LIGHT MODE OVERRIDES ── */
html[data-theme="light"] {
  --ink: #f4f7fa;
  --slate: #eaeef4;
  --steel: #8899aa;
  --mist: #5a6a7d;
  --cloud: #2c3a4a;
  --frost: #d4dde8;
  --white: #0a1019;
  --vault-green: #00b36d;
  --vault-teal: #008f87;
  --vault-glow: rgba(0, 179, 109, 0.10);
  --danger: #d93025;
  --warning: #c87e00;
}

/* Toggle: show moon in light mode, hide sun */
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: flex; }

/* ── Light: Button overrides ── */
html[data-theme="light"] .theme-toggle-btn {
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  color: var(--mist);
}
html[data-theme="light"] .theme-toggle-btn:hover {
  background: rgba(0,0,0,0.08);
  color: var(--white);
  border-color: rgba(0,0,0,0.16);
}

/* ── Light: Nav ── */
html[data-theme="light"] header nav,
html[data-theme="light"] .app-nav {
  background: rgba(244, 247, 250, 0.94);
  border-bottom-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
html[data-theme="light"] .nav-link:hover {
  background: rgba(0,0,0,0.04);
  color: var(--white);
}
html[data-theme="light"] .nav-link.active {
  background: var(--vault-glow);
  color: var(--vault-green);
}
html[data-theme="light"] .nav-btn-logout {
  border-color: rgba(0,0,0,0.10);
}
html[data-theme="light"] .nav-btn-logout:hover {
  color: var(--danger);
  border-color: rgba(211, 48, 37, 0.25);
}
html[data-theme="light"] .nav-tag {
  border-color: rgba(0,179,109,0.3);
}

/* ── Light: Feature cards ── */
html[data-theme="light"] .feature-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] .feature-card:hover {
  border-color: rgba(0,179,109,0.25);
}

/* ── Light: Pricing cards ── */
html[data-theme="light"] .pricing-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] .pricing-card--featured {
  background: linear-gradient(180deg, rgba(0,179,109,0.04) 0%, #ffffff 100%);
  border-color: rgba(0,179,109,0.3);
  box-shadow: 0 0 60px rgba(0,179,109,0.06), 0 4px 24px rgba(0,0,0,0.08);
}
html[data-theme="light"] .pricing-divider {
  background: rgba(0,0,0,0.07);
}
html[data-theme="light"] .pricing-badge--free {
  background: rgba(0,179,109,0.08);
  border-color: rgba(0,179,109,0.25);
}
html[data-theme="light"] .pricing-urgency {
  background: rgba(255,180,0,0.06);
  border-color: rgba(255,180,0,0.18);
}
html[data-theme="light"] .cta-btn-outline {
  border-color: rgba(0,179,109,0.25);
}
html[data-theme="light"] .cta-btn-outline:hover {
  background: rgba(0,179,109,0.06);
}

/* ── Light: Auth card ── */
html[data-theme="light"] .auth-card {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

/* ── Light: Stat cards ── */
html[data-theme="light"] .stat-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] .stat-card.green .stat-num { color: var(--vault-green); }
html[data-theme="light"] .stat-card.yellow .stat-num { color: var(--warning); }
html[data-theme="light"] .stat-card.red .stat-num { color: var(--danger); }

/* ── Light: Progress section ── */
html[data-theme="light"] .progress-section {
  background: #ffffff;
  border-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] .progress-bar-track {
  background: rgba(0,0,0,0.07);
}

/* ── Light: Credential categories ── */
html[data-theme="light"] .cred-category {
  background: #ffffff;
  border-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] .cred-category-header {
  background: rgba(244, 247, 250, 0.9);
}
html[data-theme="light"] .cred-category-header:hover {
  background: rgba(234, 238, 244, 1);
}
html[data-theme="light"] .cred-category-body {
  background: #ffffff;
}
html[data-theme="light"] .cat-collapse-btn {
  background: rgba(0,0,0,0.04);
}
html[data-theme="light"] .cat-collapse-btn:hover {
  background: rgba(0,0,0,0.08);
  color: var(--white);
}

/* ── Light: Cred cards ── */
html[data-theme="light"] .cred-card {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] .cred-card:hover {
  border-color: rgba(0,0,0,0.14);
}

/* ── Light: Share cards ── */
html[data-theme="light"] .share-card {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] .share-url {
  background: rgba(0,179,109,0.07);
  color: #007a4d;
}
html[data-theme="light"] .share-url:hover {
  background: rgba(0,179,109,0.12);
}
html[data-theme="light"] .share-status-badge.active  { background: rgba(0,179,109,0.12); color: #006840; }
html[data-theme="light"] .share-status-badge.expired { background: rgba(211,48,37,0.10); color: #d93025; }
html[data-theme="light"] .share-status-badge.viewed  { background: rgba(49,130,206,0.12); color: #2b6cb0; }
html[data-theme="light"] .share-count-badge          { background: rgba(0,179,109,0.12); color: #006840; }
html[data-theme="light"] .btn-remove-recipient {
  border-color: rgba(0,0,0,0.12);
}
html[data-theme="light"] .btn-remove-recipient:hover {
  background: rgba(211,48,37,0.10);
  color: #d93025;
  border-color: rgba(211,48,37,0.25);
}

/* ── Light: Form inputs ── */
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-textarea,
html[data-theme="light"] .search-input {
  background: #ffffff;
  border-color: rgba(0,0,0,0.14);
  color: var(--white);
}
html[data-theme="light"] .form-input::placeholder,
html[data-theme="light"] .form-textarea::placeholder,
html[data-theme="light"] .search-input::placeholder {
  color: var(--mist);
}
html[data-theme="light"] .form-select option {
  background: #ffffff;
  color: #0a1019;
}

/* ── Light: Buttons ── */
html[data-theme="light"] .btn-secondary {
  background: rgba(0,0,0,0.04);
  color: var(--cloud);
  border-color: rgba(0,0,0,0.10);
}
html[data-theme="light"] .btn-secondary:hover {
  border-color: rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.07);
}
html[data-theme="light"] .btn-danger {
  background: rgba(211,48,37,0.08);
  border-color: rgba(211,48,37,0.2);
}
html[data-theme="light"] .cta-btn-outline {
  border-color: rgba(0,0,0,0.12);
  color: var(--cloud);
}
html[data-theme="light"] .cta-btn-outline:hover {
  border-color: rgba(0,179,109,0.4);
  color: var(--vault-green);
}
html[data-theme="light"] .cta-btn-solid {
  background: #0a1019;
  color: #f8fafb;
}

/* ── Light: Category tabs ── */
html[data-theme="light"] .cat-tab {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
  color: var(--mist);
}
html[data-theme="light"] .cat-tab:hover {
  border-color: rgba(0,179,109,0.3);
  color: var(--cloud);
}
html[data-theme="light"] .cat-tab.active {
  background: var(--vault-glow);
  color: var(--vault-green);
  border-color: rgba(0,179,109,0.3);
}

/* ── Light: Modal ── */
html[data-theme="light"] .modal {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
html[data-theme="light"] .modal-overlay {
  background: rgba(0,0,0,0.35);
}

/* ── Light: Toast ── */
html[data-theme="light"] .toast-success {
  background: rgba(0,179,109,0.10);
  color: #006840;
  border-color: rgba(0,179,109,0.3);
}
html[data-theme="light"] .toast-error {
  background: rgba(211,48,37,0.08);
  color: var(--danger);
  border-color: rgba(211,48,37,0.2);
}

/* ── Light: Form error ── */
html[data-theme="light"] .form-error {
  background: rgba(211,48,37,0.07);
  border-color: rgba(211,48,37,0.2);
}

/* ── Light: Footer ── */
html[data-theme="light"] footer {
  border-top-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] footer p {
  color: var(--mist);
}

/* ── Light: Hero ── */
html[data-theme="light"] .hero-stats {
  border-top-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] .hero::before {
  opacity: 0.5;
}
html[data-theme="light"] .closing::before {
  opacity: 0.4;
}

/* ── Light: Problem section ── */
html[data-theme="light"] .timeline::before {
  background: linear-gradient(to bottom, var(--danger), var(--vault-green));
}
html[data-theme="light"] .timeline-dot.old {
  background: rgba(211,48,37,0.10);
  border-color: rgba(211,48,37,0.25);
}
html[data-theme="light"] .timeline-dot.new {
  background: rgba(0,179,109,0.10);
  border-color: rgba(0,179,109,0.25);
}

/* ── Light: Features section ── */
html[data-theme="light"] .features {
  background: linear-gradient(180deg, transparent, rgba(0,179,109,0.015), transparent);
}
html[data-theme="light"] .feature-icon {
  background: rgba(0,179,109,0.08);
}
html[data-theme="light"] .cred-category-icon,
html[data-theme="light"] .cred-icon,
html[data-theme="light"] .empty-state .empty-icon {
  background: rgba(0,179,109,0.08);
}

/* ── Light: Badges ── */
html[data-theme="light"] .badge-active {
  background: rgba(0,179,109,0.12);
  color: #007048;
}
html[data-theme="light"] .badge-expiring {
  background: rgba(200,126,0,0.12);
  color: #a06200;
}
html[data-theme="light"] .badge-expired {
  background: rgba(211,48,37,0.10);
  color: var(--danger);
}
html[data-theme="light"] .badge-not-uploaded {
  background: rgba(90,106,125,0.10);
  color: var(--mist);
}

/* ── Light: Dots ── */
html[data-theme="light"] .dot-green { background: var(--vault-green); }
html[data-theme="light"] .dot-yellow { background: var(--warning); }
html[data-theme="light"] .dot-red { background: var(--danger); }
html[data-theme="light"] .dot-gray { background: var(--mist); }

/* ── Light: Pricing featured top-bar ── */
html[data-theme="light"] .pricing-card--featured::before {
  background: linear-gradient(to right, var(--vault-green), var(--vault-teal));
}

/* ── Light: Pricing section top border ── */
html[data-theme="light"] .pricing::before {
  background: linear-gradient(to right, transparent, rgba(0,179,109,0.2), transparent);
}

/* ── Light: No-results / empty state ── */
html[data-theme="light"] .no-results h3 { color: var(--white); }
html[data-theme="light"] .empty-state h3 { color: var(--white); }

/* ── Light: Search clear button ── */
html[data-theme="light"] .search-clear {
  color: var(--mist);
}
html[data-theme="light"] .search-clear:hover {
  color: var(--cloud);
}

/* ── Light: Verify page (server-rendered, uses its own CSS vars) ── */
/* Override the verify page's local :root variables */
html[data-theme="light"] {
  --bg: #f4f7fa;
  --surf: #ffffff;
  --surf2: #eaeef4;
  --bd: rgba(0,0,0,0.08);
  --bd2: rgba(0,0,0,0.05);
  --t1: #0a1019;
  --t2: #2c3a4a;
  --tm: #5a6a7d;
  --green: #00b36d;
  --gbg: rgba(0,179,109,0.08);
  --gbd: rgba(0,179,109,0.2);
  --yellow: #c87e00;
  --ybg: rgba(200,126,0,0.08);
  --ybd: rgba(200,126,0,0.2);
  --red: #d93025;
  --rbg: rgba(217,48,37,0.08);
  --rbd: rgba(217,48,37,0.2);
}

/* Verify page nav */
html[data-theme="light"] .nav {
  background: rgba(244,247,250,0.94) !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}

/* Verify page doctor header / prog card / cat section */
html[data-theme="light"] .doc-header,
html[data-theme="light"] .prog-card,
html[data-theme="light"] .cat-section {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.07) !important;
}
html[data-theme="light"] .crow {
  border-bottom-color: rgba(0,0,0,0.05) !important;
}
html[data-theme="light"] .crow:hover {
  background: rgba(0,0,0,0.02) !important;
}
html[data-theme="light"] .crow-missing {
  opacity: 0.65;
}
html[data-theme="light"] .cat-header {
  border-bottom-color: rgba(0,0,0,0.07) !important;
}
html[data-theme="light"] .ctable-head {
  background: rgba(0,0,0,0.02) !important;
  border-bottom-color: rgba(0,0,0,0.07) !important;
}
html[data-theme="light"] .prog-track {
  background: rgba(0,0,0,0.07) !important;
}
html[data-theme="light"] .cicon {
  background: rgba(0,0,0,0.04) !important;
}
html[data-theme="light"] .chip {
  background: #f0f4f8 !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: var(--t2) !important;
}
html[data-theme="light"] .vfooter {
  background: rgba(0,179,109,0.05) !important;
  border-color: rgba(0,179,109,0.2) !important;
}
html[data-theme="light"] .sbadge-active {
  background: rgba(0,179,109,0.10) !important;
  color: #007048 !important;
  border-color: rgba(0,179,109,0.2) !important;
}
html[data-theme="light"] .sbadge-expiring {
  background: rgba(200,126,0,0.10) !important;
  color: #a06200 !important;
  border-color: rgba(200,126,0,0.2) !important;
}
html[data-theme="light"] .sbadge-expired {
  background: rgba(217,48,37,0.08) !important;
  color: #d93025 !important;
  border-color: rgba(217,48,37,0.2) !important;
}
html[data-theme="light"] .sbadge-missing {
  background: rgba(90,106,125,0.08) !important;
  color: #5a6a7d !important;
  border-color: rgba(90,106,125,0.15) !important;
}
html[data-theme="light"] .cat-count {
  background: #f0f4f8 !important;
  border-color: rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .cat-count-done {
  background: rgba(0,179,109,0.10) !important;
  border-color: rgba(0,179,109,0.2) !important;
  color: #007048 !important;
}
html[data-theme="light"] .nav-pill {
  background: rgba(0,179,109,0.10) !important;
  border-color: rgba(0,179,109,0.2) !important;
  color: #007048 !important;
}

/* ── Settings Page Cards ── */
.setting-card {
  background: rgba(26, 35, 50, 0.6);
  border: 1px solid rgba(255,255,255,0.06);
}
.notif-sched-item {
  background: rgba(255,255,255,0.03);
}
.notif-schedule-section {
  border-top: 1px solid rgba(255,255,255,0.06);
}

html[data-theme="light"] .setting-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.07);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
html[data-theme="light"] .notif-sched-item {
  background: rgba(0,0,0,0.03);
}
html[data-theme="light"] .notif-schedule-section {
  border-top-color: rgba(0,0,0,0.07);
}

/* ── Legal pages (privacy, terms) ── */
/* Reset breadcrumb nav dark background in light mode */
html[data-theme="light"] nav.breadcrumb,
html[data-theme="light"] main nav {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}