/* PWA Dark Mode — fires only in standalone + dark-mode class */
@media (display-mode: standalone) {

  /* ── Base ─────────────────────────────────────────────── */
  .dark-mode,
  .dark-mode body {
    background-color: #0F0B1A !important;
    color: #E5E7EB !important;
  }

  /* ── Header / Nav ──────────────────────────────────────── */
  .dark-mode .header {
    background: rgba(15, 11, 26, 0.97) !important;
    border-bottom-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .mobile-nav {
    background: rgba(15, 11, 26, 0.98) !important;
    border-top-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .mobile-nav a {
    color: #D1D5DB !important;
    border-bottom-color: rgba(124, 58, 237, 0.15) !important;
  }
  .dark-mode .nav-links a { color: #D1D5DB !important; }
  .dark-mode .lang-btn {
    color: #9CA3AF !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
  }

  /* ── Hero ──────────────────────────────────────────────── */
  .dark-mode .hero {
    background: linear-gradient(135deg, #1a0f2e 0%, #2D1B69 100%) !important;
  }
  .dark-mode .hero h1 { color: #E9D5FF !important; }
  .dark-mode .hero .subtitle { color: #C4B5FD !important; }
  .dark-mode .badge {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #D8B4FE !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
  }

  /* ── Calculator ────────────────────────────────────────── */
  .dark-mode .calc-card,
  .dark-mode .calc-wide {
    background: rgba(20, 12, 40, 0.97) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .calc-tabs {
    background: rgba(15, 10, 35, 0.98) !important;
    border-bottom-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .tab-btn {
    background: rgba(45, 27, 105, 0.5) !important;
    color: #9CA3AF !important;
    border-bottom-color: transparent !important;
  }
  .dark-mode .tab-btn.active {
    background: #7C3AED !important;
    color: white !important;
    border-bottom-color: #7C3AED !important;
  }
  .dark-mode .tab-panel { background: rgba(20, 12, 40, 0.97) !important; }
  .dark-mode .form-group label { color: #D1D5DB !important; }
  .dark-mode .form-hint { color: #9CA3AF !important; }

  /* ── Inputs / Selects ──────────────────────────────────── */
  .dark-mode input,
  .dark-mode select,
  .dark-mode textarea {
    background: rgba(45, 27, 105, 0.45) !important;
    color: #E5E7EB !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
  }
  .dark-mode input::placeholder,
  .dark-mode textarea::placeholder { color: rgba(196, 181, 253, 0.5) !important; }
  .dark-mode select option { background: #1a0f2e; color: #E5E7EB; }

  /* ── Result panel ──────────────────────────────────────── */
  .dark-mode #result-panel {
    background: rgba(20, 12, 40, 0.97) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .result-item {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .result-item .r-label { color: #9CA3AF !important; }
  .dark-mode .result-item .r-value { color: #F3F4F6 !important; }
  .dark-mode .result-item .r-sub   { color: #9CA3AF !important; }

  /* ── Sections ──────────────────────────────────────────── */
  .dark-mode .section-alt {
    background: rgba(18, 10, 36, 0.95) !important;
  }
  .dark-mode .section-header h2 { color: #F3F4F6 !important; }
  .dark-mode .section-header p  { color: #9CA3AF !important; }

  /* ── Step cards (how-it-works) ─────────────────────────── */
  .dark-mode .step-card {
    background: rgba(30, 18, 60, 0.9) !important;
    color: #E5E7EB !important;
  }
  .dark-mode .step-card h3 { color: #F3F4F6 !important; }
  .dark-mode .step-card p  { color: #9CA3AF !important; }

  /* ── Trimester cards ───────────────────────────────────── */
  .dark-mode .trimester-card {
    border-color: rgba(124, 58, 237, 0.25) !important;
  }
  .dark-mode .trimester-body {
    background: rgba(30, 18, 60, 0.9) !important;
  }
  .dark-mode .t1 .trimester-header { background: rgba(79, 50, 150, 0.6) !important; }
  .dark-mode .t2 .trimester-header { background: rgba(100, 40, 90, 0.6) !important; }
  .dark-mode .t3 .trimester-header { background: rgba(30, 80, 70, 0.5) !important; }
  .dark-mode .trimester-card h3 { color: #F3F4F6 !important; }
  .dark-mode .trimester-card p  { color: #9CA3AF !important; }
  .dark-mode .trimester-card a  { color: #A78BFA !important; }

  /* ── Tool cards ────────────────────────────────────────── */
  .dark-mode .tool-card {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
    color: #E5E7EB !important;
  }
  .dark-mode .tool-card h3 { color: #F3F4F6 !important; }
  .dark-mode .tool-card p  { color: #9CA3AF !important; }

  /* ── FAQ / details ─────────────────────────────────────── */
  .dark-mode .faq-item {
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode details summary {
    background: rgba(30, 18, 60, 0.9) !important;
    color: #D1D5DB !important;
  }
  .dark-mode details[open] summary {
    background: rgba(60, 30, 120, 0.7) !important;
    color: #C4B5FD !important;
  }
  .dark-mode .faq-answer {
    background: rgba(20, 12, 40, 0.95) !important;
    color: #D1D5DB !important;
  }

  /* ── Card (generic) ────────────────────────────────────── */
  .dark-mode .card {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }

  /* ── Subscription card ─────────────────────────────────── */
  .dark-mode .email-subscribe-card {
    background: linear-gradient(135deg, rgba(30, 18, 60, 0.9), rgba(50, 25, 90, 0.8)) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
  }
  .dark-mode .subscribe-title { color: #F3F4F6 !important; }
  .dark-mode .subscribe-desc  { color: #9CA3AF !important; }
  .dark-mode .subscribe-input {
    background: rgba(45, 27, 105, 0.45) !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
    color: #E5E7EB !important;
  }
  .dark-mode .subscribe-privacy { color: #6B7280 !important; }

  /* ── Welcome/returning user cards ─────────────────────── */
  .dark-mode .welcome-back-card,
  .dark-mode .returning-user-card {
    background: linear-gradient(135deg, rgba(60, 30, 120, 0.7), rgba(80, 30, 80, 0.6)) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
  }
  .dark-mode .cycle-passed-card {
    background: rgba(80, 40, 20, 0.5) !important;
    border-color: rgba(180, 100, 30, 0.3) !important;
  }

  /* ── Week pages ─────────────────────────────────────────── */
  .dark-mode .week-section {
    background: rgba(25, 15, 50, 0.97) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .week-section-title { color: #F3F4F6 !important; }
  .dark-mode .week-detail-item {
    background: rgba(40, 22, 80, 0.6) !important;
    border-right-color: #7C3AED !important;
    color: #D1D5DB !important;
  }
  .dark-mode .info-card {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .info-card h4 { color: #F3F4F6 !important; }
  .dark-mode .info-card p  { color: #9CA3AF !important; }
  .dark-mode .week-nav a {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
    color: #D1D5DB !important;
  }
  .dark-mode .week-card {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
    color: #E5E7EB !important;
  }
  .dark-mode .week-card .wc-size { color: #9CA3AF !important; }
  .dark-mode .weeks-jump-box {
    background: rgba(25, 15, 50, 0.97) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .weeks-jump-input {
    background: rgba(45, 27, 105, 0.45) !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
    color: #E5E7EB !important;
  }

  /* ── Ovulation results ─────────────────────────────────── */
  .dark-mode .ov-result-item {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .ov-result-item .or-label { color: #9CA3AF !important; }
  .dark-mode .ov-result-item .or-value { color: #F3F4F6 !important; }

  /* ── Period forecast ───────────────────────────────────── */
  .dark-mode .forecast-item {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .forecast-item .fi-date     { color: #F3F4F6 !important; }
  .dark-mode .forecast-item .fi-duration { color: #9CA3AF !important; }
  .dark-mode .forecast-item .fi-days {
    background: rgba(124, 58, 237, 0.25) !important;
    color: #C4B5FD !important;
  }

  /* ── Symptom items ─────────────────────────────────────── */
  .dark-mode .symptom-item {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .symptom-item h4 { color: #F3F4F6 !important; }
  .dark-mode .symptom-item p  { color: #9CA3AF !important; }
  .dark-mode .symptoms-section > h2 {
    background: linear-gradient(135deg, rgba(45, 27, 105, 0.6), rgba(80, 30, 80, 0.5)) !important;
    color: #F3F4F6 !important;
  }
  .dark-mode .danger-box {
    background: rgba(60, 10, 10, 0.6) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
  }
  .dark-mode .danger-box h3 { color: #FCA5A5 !important; }
  .dark-mode .danger-box p  { color: #D1D5DB !important; }

  /* ── Name cards ────────────────────────────────────────── */
  .dark-mode .name-card {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .name-card h4 { color: #F3F4F6 !important; }
  .dark-mode .name-card p  { color: #9CA3AF !important; }
  .dark-mode .names-tab {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
    color: #D1D5DB !important;
  }
  .dark-mode .names-tab.active {
    background: #7C3AED !important;
    color: white !important;
  }
  .dark-mode .name-category {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #C4B5FD !important;
  }

  /* ── Gender / baby pills ───────────────────────────────── */
  .dark-mode .gender-pill {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
    color: #D1D5DB !important;
  }

  /* ── Holiday / special card ────────────────────────────── */
  .dark-mode .holiday-card {
    background: linear-gradient(135deg, rgba(50, 30, 10, 0.8), rgba(60, 40, 10, 0.7)) !important;
    border-color: rgba(180, 120, 20, 0.3) !important;
  }

  /* ── Button secondary ──────────────────────────────────── */
  .dark-mode .btn-secondary {
    background: rgba(45, 27, 105, 0.4) !important;
    color: #C4B5FD !important;
    border-color: rgba(124, 58, 237, 0.4) !important;
  }
  .dark-mode .btn-primary {
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4) !important;
  }

  /* ── Articles page ─────────────────────────────────────── */
  .dark-mode .article-card {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .article-card h3 { color: #F3F4F6 !important; }
  .dark-mode .article-card p  { color: #9CA3AF !important; }

  /* ── Dashboard components ──────────────────────────────── */
  .dark-mode .dashboard-container .dash-card {
    background: rgba(30, 18, 60, 0.85) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .dash-card-label { color: #9CA3AF !important; }
  .dark-mode .dash-card-value { color: #F3F4F6 !important; }
  .dark-mode .dashboard-mood {
    background: rgba(30, 18, 60, 0.85) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .dashboard-mood h3 { color: #E5E7EB !important; }
  .dark-mode .mood-btn {
    background: rgba(124, 58, 237, 0.15) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
  }
  .dark-mode .mood-label { color: #D1D5DB !important; }
  .dark-mode .dashboard-progress {
    background: rgba(30, 18, 60, 0.85) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .progress-labels span { color: #9CA3AF !important; }
  .dark-mode .progress-bar-bg { background: rgba(124, 58, 237, 0.2) !important; }
  .dark-mode .dashboard-insight {
    background: linear-gradient(135deg, rgba(30, 18, 60, 0.9), rgba(45, 27, 105, 0.6)) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
  }
  .dark-mode .dashboard-insight p { color: #D1D5DB !important; }

  /* ── Footer ────────────────────────────────────────────── */
  .dark-mode footer,
  .dark-mode .footer { background: rgba(10, 5, 20, 0.98) !important; }

  /* ── Cookie banner ─────────────────────────────────────── */
  .dark-mode #cookie-banner {
    background: rgba(20, 12, 40, 0.97) !important;
    color: #D1D5DB !important;
  }

  /* ── Bottom nav ────────────────────────────────────────── */
  .dark-mode #pwa-bottom-nav {
    background: rgba(10, 5, 20, 0.95) !important;
    border-top-color: rgba(124, 58, 237, 0.2) !important;
  }

  /* ── Disclaimers / medical notices ────────────────────── */
  .dark-mode .disclaimer,
  .dark-mode .medical-disclaimer,
  .dark-mode [class*="disclaimer"],
  .dark-mode [class*="notice"] {
    background: rgba(45, 27, 105, 0.3) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
    color: #D1D5DB !important;
  }

  /* ── Warning inline box (background:#FFFBEB) ───────────── */
  .dark-mode [style*="background:#FFFBEB"],
  .dark-mode [style*="background: #FFFBEB"] {
    background: rgba(60, 40, 5, 0.7) !important;
    border-color: rgba(180, 120, 20, 0.4) !important;
    color: #FDE68A !important;
  }

  /* ── iOS install modal steps (background:#FAF5FF) ──────── */
  .dark-mode [style*="background:#FAF5FF"],
  .dark-mode [style*="background: #FAF5FF"] {
    background: rgba(40, 22, 80, 0.7) !important;
    color: #E5E7EB !important;
  }

  /* ── iOS modal wrapper (background:white) ──────────────── */
  .dark-mode [style*="background:white"],
  .dark-mode [style*="background: white"],
  .dark-mode [style*="background:#fff"],
  .dark-mode [style*="background: #fff"],
  .dark-mode [style*="background:#FFF"],
  .dark-mode [style*="background: #FFF"],
  .dark-mode [style*="background-color:white"],
  .dark-mode [style*="background-color: white"],
  .dark-mode [style*="background-color:#fff"],
  .dark-mode [style*="background-color: #fff"] {
    background: rgba(25, 15, 50, 0.97) !important;
    color: #E5E7EB !important;
  }

  /* ── All headings ──────────────────────────────────────── */
  .dark-mode h1, .dark-mode h2, .dark-mode h3,
  .dark-mode h4, .dark-mode h5, .dark-mode h6 {
    color: #F3F4F6 !important;
  }

  /* ── Body text ─────────────────────────────────────────── */
  .dark-mode p, .dark-mode li, .dark-mode label,
  .dark-mode td, .dark-mode th, .dark-mode span {
    color: #D1D5DB;
  }

  /* ── Links ─────────────────────────────────────────────── */
  .dark-mode a:not(.pwa-nav-item):not(.btn-primary):not(.tab-btn):not(.names-tab) {
    color: #A78BFA !important;
  }

  /* ── Tables ────────────────────────────────────────────── */
  .dark-mode table { background: rgba(25, 15, 50, 0.95) !important; }
  .dark-mode th {
    background: rgba(45, 27, 105, 0.5) !important;
    color: #E5E7EB !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode td {
    background: rgba(30, 18, 60, 0.8) !important;
    border-color: rgba(124, 58, 237, 0.15) !important;
  }

  /* ── Scrollbar ─────────────────────────────────────────── */
  .dark-mode ::-webkit-scrollbar { background: #0F0B1A; }
  .dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.3);
    border-radius: 4px;
  }

  /* ── Global border softening ───────────────────────────── */
  .dark-mode * { border-color: rgba(124, 58, 237, 0.15); }

  /* ── Week hero (gradient light purple like .hero) ──────── */
  .dark-mode .week-hero {
    background: linear-gradient(135deg, #1a0f2e 0%, #2D1B69 100%) !important;
  }
  .dark-mode .week-hero h1 { color: #E9D5FF !important; }
  .dark-mode .breadcrumb a { color: #9CA3AF !important; }
  .dark-mode .breadcrumb .current { color: #D1D5DB !important; }

  /* ── Week illustration panel ───────────────────────────── */
  .dark-mode .week-illustration {
    background: linear-gradient(135deg, rgba(40, 22, 80, 0.7), rgba(50, 20, 50, 0.6)) !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
  }
  .dark-mode .illustration-measurements {
    background: rgba(30, 18, 60, 0.8) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .measurement-label { color: #9CA3AF !important; }
  .dark-mode .measurement-value { color: #C4B5FD !important; }
  .dark-mode .measurement-divider { background: rgba(124, 58, 237, 0.2) !important; }
  .dark-mode .illustration-label { color: #9CA3AF !important; }
  .dark-mode .fruit-name { color: #D1D5DB !important; }
  .dark-mode .illustration-disclaimer { color: #6B7280 !important; }
  .dark-mode .illustration-divider { color: #6B7280 !important; }

  /* ── Info card children ─────────────────────────────────── */
  .dark-mode .info-card .i-label { color: #9CA3AF !important; }
  .dark-mode .info-card .i-value { color: #F3F4F6 !important; }
  .dark-mode .info-card .i-sub   { color: #9CA3AF !important; }

  /* ── Week progress bar ─────────────────────────────────── */
  .dark-mode .progress-bar {
    background: rgba(124, 58, 237, 0.2) !important;
  }

  /* ── Inline var(--primary-light) CTA boxes ─────────────── */
  .dark-mode [style*="background:var(--primary-light)"],
  .dark-mode [style*="background: var(--primary-light)"] {
    background: rgba(45, 27, 105, 0.4) !important;
    color: #E5E7EB !important;
  }

  /* ── Inline #f8f9fa background (article tip boxes) ─────── */
  .dark-mode [style*="background:#f8f9fa"],
  .dark-mode [style*="background: #f8f9fa"],
  .dark-mode [style*="background:#F8F9FA"],
  .dark-mode [style*="background: #F8F9FA"] {
    background: rgba(30, 18, 60, 0.85) !important;
    color: #D1D5DB !important;
  }

  /* ── Inline #F9FAFB, var(--bg-soft) blocks ─────────────── */
  .dark-mode [style*="background:#F9FAFB"],
  .dark-mode [style*="background: #F9FAFB"] {
    background: rgba(25, 15, 50, 0.9) !important;
    color: #D1D5DB !important;
  }

  /* ── Week tip box ───────────────────────────────────────── */
  .dark-mode .tip-box {
    background: rgba(30, 20, 60, 0.9) !important;
    border-right-color: #7C3AED !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
  }
  .dark-mode .tip-label { color: #A78BFA !important; }
  .dark-mode .tip-box p { color: #D1D5DB !important; }

  /* ── Period warning card (inline background:var(--accent-light)) ── */
  .dark-mode [style*="background:var(--accent-light)"],
  .dark-mode [style*="background: var(--accent-light)"] {
    background: rgba(45, 27, 105, 0.3) !important;
    border-color: rgba(234, 179, 8, 0.3) !important;
    color: #D1D5DB !important;
  }

  /* ── Hamburger icon lines ───────────────────────────────── */
  .dark-mode .hamburger span {
    background: #E5E7EB !important;
  }

  /* ── Gender selector card ───────────────────────────────── */
  .dark-mode .gender-selector-section {
    background: rgba(30, 18, 60, 0.9) !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
  }
  .dark-mode .gender-selector-label { color: #D1D5DB !important; }

  /* ── Weeks jump hint notice ─────────────────────────────── */
  .dark-mode .weeks-jump-hint {
    background: rgba(45, 27, 105, 0.35) !important;
    color: #C4B5FD !important;
  }

  /* ── Week sidebar list items ────────────────────────────── */
  .dark-mode .card li {
    border-bottom-color: rgba(124, 58, 237, 0.15) !important;
    color: #D1D5DB !important;
  }

  /* ── Period / ovulation calendar ───────────────────────── */
  .dark-mode .cal-month-header { color: #F3F4F6 !important; }
  .dark-mode .cal-day-header   { color: #9CA3AF !important; }
  .dark-mode .cal-day          { color: #D1D5DB !important; }
  .dark-mode .cal-day.other-month { opacity: 0.2 !important; }
  .dark-mode .cal-day.period {
    background: rgba(220, 38, 38, 0.25) !important;
    color: #FCA5A5 !important;
  }
  .dark-mode .cal-day.fertile {
    background: rgba(180, 83, 9, 0.25) !important;
    color: #FDE68A !important;
  }
  .dark-mode .cal-day.ovulation {
    background: rgba(5, 150, 105, 0.3) !important;
    color: #6EE7B7 !important;
  }
  .dark-mode .cal-day.today {
    border-color: #A78BFA !important;
  }
}