/* Dark-mode contrast layer.
   Every surface owns its foreground; legacy light-page declarations must not
   turn headings, labels or ghost buttons invisible when the theme changes. */
:root[data-theme="dark"] {
  --dark-canvas: #160d29;
  --dark-surface: #302048;
  --dark-surface-raised: #382453;
  --dark-border: #665483;
  --dark-text: #f8f5ff;
  --dark-muted: #ded2f3;
  --dark-ink: #1b1035;
  --dark-input: #faf8ff;
  --dark-input-placeholder: #625475;
  --dark-on-light: #000;
  --dark-accent: #ffcb42;
  --dark-accent-text: #ffda68;
  --dark-tile: #eae3fa;
  --dark-tile-hover: #eee8ff;
  --dark-field: #211333;
  --dark-field-border: #a998cb;
  --dark-field-placeholder: #d5caec;
  --dark-ghost-border: #cab7ed;
  --dark-line-light: #ded6eb;
  --dark-danger: #ff719f;
  --events-texto-suave: #d0c3e8;
  --events-borda-suave: #65537d;
}

/* App: page background, navigation, and content headings. */
:root[data-theme="dark"] .app-frame,
:root[data-theme="dark"] .app-frame .layout,
:root[data-theme="dark"] .app-frame .content,
:root[data-theme="dark"] .app-frame:has(.analytics-page) .content {
  background: var(--dark-canvas);
  color: var(--dark-text);
  color-scheme: dark;
}
:root[data-theme="dark"] .app-frame .page-head :is(h1,p),
:root[data-theme="dark"] .app-frame .event-page-head :is(h1,p),
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-page-head :is(h1,p),
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-section-title :is(h2,p),
:root[data-theme="dark"] .app-frame .content > .section-header :is(h2,p),
:root[data-theme="dark"] .app-frame .content > .empty { color: var(--dark-text); }
:root[data-theme="dark"] .app-frame .content > .page-head .eyebrow,
:root[data-theme="dark"] .app-frame:has(.analytics-page) :is(.analytics-page-head,.analytics-section-title) .eyebrow { color: var(--dark-accent-text); }
:root[data-theme="dark"] .app-frame .topbar .theme-toggle,
:root[data-theme="dark"] .app-frame .topbar .account-info,
:root[data-theme="dark"] .app-frame .topbar :is(.account-name,.account-role,.account-chevron),
:root[data-theme="dark"] .app-frame .sidebar .nav button:not(.active) { color: var(--dark-text); }
:root[data-theme="dark"] .app-frame .topbar .btn.ghost.menu-button {
  background: var(--sol);
  border-color: var(--sol);
  color: var(--tinta);
}
:root[data-theme="dark"] .app-frame .topbar .btn.ghost.menu-button:hover:not(:disabled) {
  background: var(--neblina);
  border-color: var(--neblina);
  color: var(--tinta);
}
:root[data-theme="dark"] .app-frame .topbar .btn.ghost.menu-button:focus-visible {
  outline-color: var(--events-branco);
}
:root[data-theme="dark"] .app-frame .topbar .account-dropdown {
  background: var(--dark-surface);
  color: var(--dark-text);
  border-color: var(--dark-border);
}
:root[data-theme="dark"] .app-frame .topbar .account-dropdown :is(button,a) { color: var(--dark-text); }
:root[data-theme="dark"] .app-frame .topbar .account-dropdown :is(button,a):hover { background: var(--dark-surface-raised); color: var(--events-branco); }

/* Ordinary panels are dark, not off-white with inherited white text. */
:root[data-theme="dark"] .app-frame .content :is(.card,.event-card,.finance-metric,.analytics-panel,.event-share),
:root[data-theme="dark"] .app-frame:has(.event-page-head) .content .card:not(.reception-form):not(:has(#groupSummary)),
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-panel {
  background: var(--dark-surface);
  color: var(--dark-text);
  border-color: var(--dark-border);
}
:root[data-theme="dark"] .app-frame .content :is(.card,.event-card,.finance-metric,.analytics-panel,.event-share)
  :is(h1,h2,h3,h4,p,.muted,.small,.empty,.eyebrow,label,.event-meta,.event-business,.event-detail-description,
      .analytics-panel-head p,.analytics-bar-label,.review-average,.review-distribution-row,.review-comments blockquote),
:root[data-theme="dark"] .app-frame:has(.event-page-head) .content .card:not(.reception-form):not(:has(#groupSummary))
  :is(h2,h3,p,label,.small,.muted,.eyebrow),
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-panel
  :is(.analytics-panel-head h2,.analytics-panel-head p,.analytics-panel-head .eyebrow,.analytics-bar-label,.review-average span,.review-distribution-row) {
  color: var(--dark-text);
}
:root[data-theme="dark"] .app-frame .content :is(.card,.event-card,.analytics-panel,.event-share) :is(.muted,.small,.event-meta,.event-business) {
  color: var(--dark-muted);
}
:root[data-theme="dark"] .app-frame .event-body :is(h3,p,.event-meta,.event-business),
:root[data-theme="dark"] .app-frame .event-body > a,
:root[data-theme="dark"] .app-frame .finance-metric :is(span,small,strong),
:root[data-theme="dark"] .app-frame .event-share :is(h2,p,label) { color: var(--dark-text); }
:root[data-theme="dark"] .app-frame .content .card a:not(.btn):not(.badge),
:root[data-theme="dark"] .app-frame .content .analytics-panel a:not(.btn):not(.badge) { color: #e4d5ff; }
:root[data-theme="dark"] .app-frame .content .card a:not(.btn):not(.badge):hover,
:root[data-theme="dark"] .app-frame .content .analytics-panel a:not(.btn):not(.badge):hover { color: var(--events-branco); }

/* Light panels and the two dark event panels keep their own foreground colors. */
:root[data-theme="dark"] .app-frame .content :is(.welcome-panel,.notice,.profile-prompt,.school-group-section),
:root[data-theme="dark"] .app-frame:has(.event-page-head) .content .card:has(#groupSummary) {
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .company-public-card,
:root[data-theme="dark"] .app-frame .event-appearance { color: var(--events-branco); }
/* Dark panels only. Light panels (welcome, notice, profile prompt, school group)
   take their foreground from the "light informational surfaces" block below. */
:root[data-theme="dark"] .app-frame .content :is(.company-public-card,.event-appearance,.card.reception-form)
  :is(h1,h2,h3,h4,p,span,strong,label,.muted,.small,.eyebrow,.empty),
:root[data-theme="dark"] .app-frame:has(.event-page-head) .content .reception-form :is(h2,p,label,.eyebrow,.muted),
:root[data-theme="dark"] .app-frame:has(.event-page-head) #groupSummary .table td {
  color: var(--dark-text);
}
:root[data-theme="dark"] .app-frame .content .card.reception-form { background: var(--events-superficie-escura); border-top-color: var(--sol); }
:root[data-theme="dark"] .app-frame .content .card:has(#groupSummary) { background: var(--ceu); }
:root[data-theme="dark"] .app-frame .content .company-public-card { background: var(--events-superficie-escura); }
:root[data-theme="dark"] .app-frame .content .event-appearance { background: var(--uva); }
:root[data-theme="dark"] .app-frame .event-cover :is(.date-stamp,strong,span) { color: var(--dark-ink); }

/* Stats, status pills and analytics metrics use foregrounds matching each tile. */
:root[data-theme="dark"] .app-frame .content .grid > .stat:first-child { background: var(--dark-tile); color: var(--dark-ink); }
:root[data-theme="dark"] .app-frame .content .grid > .stat:nth-child(4n+2) { background: var(--uva); color: var(--events-branco); }
:root[data-theme="dark"] .app-frame .content .grid > .stat:nth-child(4n+3) { background: var(--rosa); color: var(--dark-ink); }
:root[data-theme="dark"] .app-frame .content .grid > .stat:nth-child(4n+4) { background: var(--ceu); color: var(--dark-ink); }
:root[data-theme="dark"] .app-frame .content .grid > .stat :is(.num,.muted,span,strong,a) { color: inherit; }
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-metric:not(.present):not(.pending):not(.absent):not(.waitlist) { background: var(--dark-tile); color: var(--dark-ink); }
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-metric.present { background: var(--uva); color: var(--events-branco); }
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-metric:is(.pending,.absent,.waitlist) { color: var(--dark-ink); }
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-metric :is(span,strong,small) { color: inherit; }
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-occupancy :is(h2,p,small,.eyebrow,.analytics-progress-note),
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-occupancy .analytics-progress-note strong { color: var(--dark-text); }
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-attendance :is(h2,p,.eyebrow,.analytics-attendance-key) { color: var(--events-branco); }
:root[data-theme="dark"] .app-frame .content .badge { background: var(--dark-tile); color: var(--dark-ink); }
:root[data-theme="dark"] .app-frame .content .badge:is(.ok,.info,.warn,.bad) { color: var(--dark-ink); }
:root[data-theme="dark"] .app-frame .content .participant-profile dt { color: var(--dark-muted); }
:root[data-theme="dark"] .app-frame .content .participant-profile dd { color: var(--dark-text); }

/* Tables: dark header/rows on dark panels, light tables on cyan cards. */
:root[data-theme="dark"] .app-frame .content .table :is(th,td) { border-color: var(--dark-border); }
:root[data-theme="dark"] .app-frame .content .card:not(:has(#groupSummary)) .table th,
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-panel .table th {
  background: var(--dark-field);
  color: var(--dark-text);
}
:root[data-theme="dark"] .app-frame .content .card:not(:has(#groupSummary)) .table td,
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-panel .table td { color: var(--dark-text); }
:root[data-theme="dark"] .app-frame .content .card:not(:has(#groupSummary)) .table tbody tr:hover,
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-panel .table tbody tr:hover { background: #3c2a5b; }
:root[data-theme="dark"] .app-frame .content .card:has(#groupSummary) .table th {
  background: #c9f3fb;
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .card:has(#groupSummary) .table td { color: var(--dark-ink); }
:root[data-theme="dark"] .app-frame .content .card:has(#groupSummary) .table tbody tr:hover { background: #b8ecf6; }

/* Buttons: primary gold, secondary filled violet, ghost outlined/legible. */
:root[data-theme="dark"] .app-frame .content .btn:not(.secondary):not(.ghost):not(.danger),
:root[data-theme="dark"] dialog.modal .btn:not(.secondary):not(.ghost):not(.danger) {
  background: var(--dark-accent);
  color: var(--dark-ink);
  border-color: var(--dark-accent);
}
:root[data-theme="dark"] .app-frame .content .btn.secondary,
:root[data-theme="dark"] dialog.modal .btn.secondary { background: var(--uva); color: var(--events-branco); border-color: var(--uva); }
:root[data-theme="dark"] .app-frame .content .btn.ghost,
:root[data-theme="dark"] dialog.modal .btn.ghost { background: transparent; color: var(--events-branco); border-color: var(--dark-ghost-border); }
:root[data-theme="dark"] .app-frame .content :is(.card:has(#groupSummary),.company-public-card,.event-appearance) .btn.ghost {
  color: var(--dark-ink);
  border-color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .btn.danger,
:root[data-theme="dark"] dialog.modal .btn.danger { color: var(--dark-ink); border-color: var(--dark-danger); background: var(--dark-danger); }
:root[data-theme="dark"] .app-frame .content .btn:hover:not(:disabled),
:root[data-theme="dark"] dialog.modal .btn:hover:not(:disabled) {
  background: var(--dark-tile-hover);
  color: var(--dark-ink);
  border-color: var(--dark-tile-hover);
}
:root[data-theme="dark"] .app-frame .content .btn.ghost:hover:not(:disabled),
:root[data-theme="dark"] dialog.modal .btn.ghost:hover:not(:disabled) {
  background: #493261;
  border-color: #d7c7f3;
  color: var(--events-branco);
}
:root[data-theme="dark"] .app-frame .content .card:has(#groupSummary) .btn.ghost:hover:not(:disabled) {
  background: var(--dark-ink);
  color: var(--events-branco);
  border-color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .pagination .btn:disabled { color: #5b4d71; background: var(--dark-line-light); border-color: var(--dark-line-light); }

/* Fields on every panel are white with dark input text. */
:root[data-theme="dark"] .app-frame .content :is(input:not([type=checkbox]):not([type=radio]),select,textarea),
:root[data-theme="dark"] dialog.modal :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
  background: var(--dark-input);
  color: var(--dark-ink);
  border-color: var(--dark-field-border);
  color-scheme: light;
}
:root[data-theme="dark"] .app-frame .content :is(input,textarea)::placeholder,
:root[data-theme="dark"] dialog.modal :is(input,textarea)::placeholder { color: var(--dark-input-placeholder); opacity: 1; }
:root[data-theme="dark"] .app-frame .content .field label { color: var(--dark-text); }
:root[data-theme="dark"] .app-frame .content :is(.card:has(#groupSummary),.company-public-card) .field label { color: var(--dark-ink); }
:root[data-theme="dark"] .app-frame .content :is(input,select,textarea):focus-visible,
:root[data-theme="dark"] dialog.modal :is(input,select,textarea):focus-visible { outline-color: var(--dark-accent); }

/* Modal is a dark surface, even when rendered outside #app. */
:root[data-theme="dark"] dialog.modal,
:root[data-theme="dark"] dialog.modal .card {
  background: var(--dark-surface);
  color: var(--dark-text);
  border-color: var(--dark-border);
}
:root[data-theme="dark"] dialog.modal :is(h1,h2,h3,p,label,.muted,.small,.field label) { color: var(--dark-text); }
:root[data-theme="dark"] dialog.modal .event-appearance { background: var(--uva); color: var(--events-branco); }
:root[data-theme="dark"] dialog.modal .event-appearance :is(h3,p,label,span,strong,.small,.muted) { color: var(--events-branco); }
:root[data-theme="dark"] dialog.modal .event-color-option { background: var(--events-branco); color: var(--tinta); }
:root[data-theme="dark"] dialog.modal .event-color-option :is(span,strong,label) { color: var(--tinta); }

/* Authentication: login stays on a white card, registration stays on a dark card. */
:root[data-theme="dark"] .auth-shell:has(#forgotPassword) .auth-card {
  background: var(--events-branco);
  color: var(--dark-ink);
  color-scheme: light;
}
:root[data-theme="dark"] .auth-shell:has(#forgotPassword) .auth-card :is(h2,p,label,.muted,.small,.auth-switch,.auth-switch .muted) { color: var(--dark-ink); }
:root[data-theme="dark"] .auth-shell:has(#forgotPassword) .auth-card .eyebrow,
:root[data-theme="dark"] .auth-shell:has(#forgotPassword) .auth-card :is(.text-button,.auth-switch a) { color: #5323d7; }
:root[data-theme="dark"] .auth-shell:has(#forgotPassword) .auth-card input { background: var(--events-branco); color: var(--dark-ink); color-scheme: light; }
:root[data-theme="dark"] .auth-shell:has(#forgotPassword) .auth-card input::placeholder { color: #605475; }
:root[data-theme="dark"] .auth-shell:has(#forgotPassword) .auth-card .auth-submit { background: var(--dark-accent); color: var(--dark-ink); }
:root[data-theme="dark"] .auth-shell:has(#forgotPassword) .auth-card .auth-submit:hover:not(:disabled) { background: var(--dark-tile); color: var(--dark-ink); }
:root[data-theme="dark"] .auth-shell:has(#forgotPassword) .auth-hero .admission-ticket :is(strong,span,p,.eyebrow) { color: var(--events-branco); }
:root[data-theme="dark"] .auth-shell:has(#forgotPassword) .auth-hero .ticket-stub :is(span,strong) { color: var(--dark-ink); }
:root[data-theme="dark"] .auth-shell.auth-register .auth-card,
:root[data-theme="dark"] .auth-shell.auth-register .auth-card :is(h2,p,label,.muted,.small) { color: var(--dark-text); }
:root[data-theme="dark"] .auth-shell.auth-register .auth-card :is(input,select) { background: var(--dark-field); color: var(--events-branco); border-color: var(--dark-field-border); color-scheme: dark; }
:root[data-theme="dark"] .auth-shell.auth-register .auth-card :is(input,select)::placeholder { color: var(--dark-field-placeholder); }
:root[data-theme="dark"] .auth-shell.auth-register .role-tabs button.active { background: var(--dark-accent); color: var(--dark-ink); }
:root[data-theme="dark"] .auth-shell.auth-register .role-tabs button:not(.active) { background: var(--dark-field); color: var(--events-branco); }
:root[data-theme="dark"] .auth-shell.auth-register .auth-submit { background: var(--dark-accent); color: var(--dark-ink); }
:root[data-theme="dark"] .auth-shell.auth-register .invite-auth-choices p { color: var(--dark-muted); }
:root[data-theme="dark"] .auth-shell:has(#forgotPassword) .invite-auth-choices p { color: var(--dark-ink); }

/* Public pages: avoid text inheriting the dark global tokens on light surfaces. */
:root[data-theme="dark"] .business-page .business-event-card { background: var(--dark-surface); color: var(--dark-text); }
:root[data-theme="dark"] .business-page .business-event-card :is(h2,p,.business-event-foot,span,strong) { color: var(--dark-text); }
:root[data-theme="dark"] .business-page .business-event-card .btn { background: var(--dark-accent); color: var(--dark-ink); border-color: var(--dark-accent); }
:root[data-theme="dark"] .privacy-page .privacy-document { background: var(--dark-surface); color: var(--dark-text); }
:root[data-theme="dark"] .privacy-page .privacy-document :is(h1,h2,h3,p,li,strong) { color: var(--dark-text); }
:root[data-theme="dark"] .privacy-page .privacy-document a { color: #f1d7ff; }
:root[data-theme="dark"] .privacy-page .privacy-draft { color: var(--dark-ink); }

/* Legacy selectors have :not() specificity; match them to keep text visible. */
:root[data-theme="dark"] .app-frame .content .card:not(.reception-form,.stat,.profile-prompt,.welcome-panel,.notice,.school-group-section):not(:has(.analytics-page))
  :is(h1,h2,h3,h4,p,label,.muted,.small,.empty,.eyebrow),
:root[data-theme="dark"] .app-frame .content .card:not(.reception-form,.stat,.profile-prompt,.welcome-panel,.notice,.school-group-section):not(:has(.analytics-page))
  :is(.event-meta,.event-business,.event-detail-description) {
  color: var(--dark-text);
}
:root[data-theme="dark"] .app-frame .content .card:not(.reception-form,.stat,.profile-prompt,.welcome-panel,.notice,.school-group-section):not(:has(.analytics-page)) :is(.muted,.small) { color: var(--dark-muted); }
:root[data-theme="dark"] .app-frame .content .card:has(#groupSummary) :is(h1,h2,h3,p,label,.muted,.small,.eyebrow),
:root[data-theme="dark"] .app-frame .content .card .notice :is(h2,h3,p,label,small,span,strong,.small,.muted) { color: var(--dark-ink); }
:root[data-theme="dark"] #app .app-frame .content .event-appearance .event-color-option,
:root[data-theme="dark"] #app .app-frame .content .event-appearance .event-color-option span:last-child { color: var(--tinta); }
:root[data-theme="dark"] .app-frame .welcome-panel .btn {
  background: var(--dark-ink);
  border-color: var(--dark-ink);
  color: var(--events-branco);
}
:root[data-theme="dark"] .app-frame .welcome-panel .btn:hover:not(:disabled) {
  background: var(--events-branco);
  border-color: var(--events-branco);
  color: var(--dark-ink);
}

/* #forgotPassword in the old :not(:has()) rule increases its specificity.
   Include that same condition so the registration card actually turns dark. */
:root[data-theme="dark"] .auth-shell:not(:has(#forgotPassword)).auth-register .auth-card {
  background: var(--dark-surface);
  border-color: var(--dark-border);
  color: var(--dark-text);
  color-scheme: dark;
}
:root[data-theme="dark"] .auth-shell:not(:has(#forgotPassword)).auth-register .auth-card
  :is(h1,h2,h3,p,label,.small,.muted,.field label) { color: var(--dark-text); }
:root[data-theme="dark"] .auth-shell:not(:has(#forgotPassword)).auth-register .auth-card .eyebrow { color: var(--dark-accent-text); }
:root[data-theme="dark"] .auth-shell:not(:has(#forgotPassword)).auth-register .auth-card .field :is(input,select,textarea) {
  background: var(--dark-field);
  border-color: var(--dark-field-border);
  color: var(--events-branco);
  color-scheme: dark;
}
:root[data-theme="dark"] .auth-shell:not(:has(#forgotPassword)).auth-register .auth-card .btn.auth-submit {
  background: var(--dark-accent);
  color: var(--dark-ink);
  border-color: var(--dark-accent);
}
:root[data-theme="dark"] .auth-shell:not(:has(#forgotPassword)).auth-register .auth-card .btn.auth-submit:hover:not(:disabled) {
  background: var(--events-branco);
  color: var(--dark-ink);
}

:root[data-theme="dark"] .app-frame .content .welcome-panel .btn:not(.secondary):not(.ghost):not(.danger) {
  background: var(--dark-ink);
  color: var(--events-branco);
  border-color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .welcome-panel .btn:not(.secondary):not(.ghost):not(.danger):hover:not(:disabled) {
  background: var(--events-branco);
  border-color: var(--events-branco);
  color: var(--dark-ink);
}
:root[data-theme="dark"] .auth-shell:not(:has(#forgotPassword)).auth-register .role-tabs {
  background: var(--dark-field);
  border: 1px solid var(--dark-border);
}
:root[data-theme="dark"] .auth-shell:not(:has(#forgotPassword)).auth-register .auth-card input::placeholder {
  color: var(--dark-field-placeholder);
  opacity: 1;
}
:root[data-theme="dark"] .auth-shell:not(:has(#forgotPassword)).auth-register .role-tabs button:not(.active) {
  background: var(--dark-surface);
  color: var(--events-branco);
}


/* 2026-10-15 fixes: keep dashboard cards vivid and status colors readable in dark mode. */
:root[data-theme="dark"] .app-frame .content .grid > .stat,
:root[data-theme="dark"] .app-frame .content .grid > .stat:first-child,
:root[data-theme="dark"] .app-frame .content .grid > .stat:nth-child(4n+2),
:root[data-theme="dark"] .app-frame .content .grid > .stat:nth-child(4n+3),
:root[data-theme="dark"] .app-frame .content .grid > .stat:nth-child(4n+4) {
  border: 0;
}
:root[data-theme="dark"] .app-frame .content .grid > .stat:first-child {
  background: var(--dark-tile-hover);
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .grid > .stat:nth-child(4n+2) {
  background: var(--uva);
  color: var(--events-branco);
}
:root[data-theme="dark"] .app-frame .content .grid > .stat:nth-child(4n+3) {
  background: var(--rosa);
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .grid > .stat:nth-child(4n+4) {
  background: var(--ceu);
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .grid > .stat :is(.num,.muted,.small,span,strong,a) {
  color: inherit;
}
:root[data-theme="dark"] .app-frame .content .event-card {
  background: var(--dark-surface);
  color: var(--dark-text);
  border-color: var(--dark-border);
}
:root[data-theme="dark"] .app-frame .content .event-card :is(h2,h3,p,.muted,.small,.event-meta,.event-business,.event-name,span,strong) {
  color: inherit;
}
:root[data-theme="dark"] .app-frame .content .event-card .event-cover {
  background-color: var(--neblina);
}
:root[data-theme="dark"] .app-frame .content .event-card .event-cover :is(.date-stamp, .date-stamp span, .date-stamp strong) {
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame:has(.event-page-head) .event-page-head {
  background: var(--dark-surface);
  border-top-color: var(--event-accent);
}
:root[data-theme="dark"] .app-frame:has(.event-page-head) .event-page-head .eyebrow {
  background: var(--event-accent);
  color: var(--event-accent-ink);
}

.invite-page .invite-entry-actions .invite-action-primary {
  background: var(--event-accent);
  border-color: var(--event-accent);
  color: var(--event-accent-ink);
}
:root[data-theme="dark"] .invite-page .invite-layout { background: var(--tinta); }
:root[data-theme="dark"] .invite-page .invite-topbar { border-bottom: var(--events-espaco-1) solid var(--event-accent); }
:root[data-theme="dark"] .invite-page .invite-story > .eyebrow,
:root[data-theme="dark"] .invite-page .btn,
:root[data-theme="dark"] .invite-page .invite-entry-actions .invite-action-primary {
  background: var(--event-accent);
  border-color: var(--event-accent);
  color: var(--event-accent-ink);
}
:root[data-theme="dark"] .app-frame .content .event-card .actions .btn.secondary {
  background: var(--dark-accent);
  border-color: var(--dark-accent);
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .event-card .actions .btn.ghost,
:root[data-theme="dark"] .app-frame .content .event-card .actions .btn.ghost:disabled {
  background: transparent;
  border-color: var(--dark-ghost-border);
  color: var(--events-branco);
  opacity: 1;
}
:root[data-theme="dark"] .app-frame .content .badge.ok {
  background: var(--events-verde);
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .badge.info {
  background: var(--ceu);
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .badge.warn {
  background: var(--sol);
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .badge.bad {
  background: var(--events-vermelho);
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .badge.neutral {
  background: var(--dark-tile-hover);
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .table .badge {
  font-weight: 800;
}

/* Analytics compact metrics: color is a property of the NUMBER, not the tile.
   This deliberately overrides the legacy saturated metric backgrounds in both themes. */
:root .app-frame:has(.analytics-page) .analytics-status > .analytics-metric {
  background: transparent !important;
  border-radius: 30;
  box-shadow: none;
  color: var(--tinta);
}
:root:not([data-theme="dark"]) .app-frame:has(.analytics-page) .analytics-status > .analytics-metric > span {
  color: #3a2b53;
}
:root:not([data-theme="dark"]) .app-frame:has(.analytics-page) .analytics-status > .analytics-metric > small {
  color: #625477;
}
:root:not([data-theme="dark"]) .app-frame:has(.analytics-page) .analytics-status > .analytics-metric > strong {
  color: var(--tinta);
}
:root:not([data-theme="dark"]) .app-frame:has(.analytics-page) .analytics-status > .analytics-metric.pending > strong { color: var(--events-status-amarelo-texto); }
:root:not([data-theme="dark"]) .app-frame:has(.analytics-page) .analytics-status > .analytics-metric.present > strong { color: var(--events-status-verde-texto); }
:root:not([data-theme="dark"]) .app-frame:has(.analytics-page) .analytics-status > .analytics-metric.absent > strong { color: var(--events-status-vermelho-texto); }
:root:not([data-theme="dark"]) .app-frame:has(.analytics-page) .analytics-status > .analytics-metric.waitlist > strong { color: var(--events-status-amarelo-texto); }
:root:not([data-theme="dark"]) .app-frame:has(.analytics-page) .analytics-status > .analytics-metric.cancelled > strong { color: var(--events-status-vermelho-texto); }

:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-status > .analytics-metric {
  background: transparent !important;
  color: var(--dark-text);
}
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-status > .analytics-metric > span {
  color: #f1eafd;
}
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-status > .analytics-metric > small {
  color: var(--events-texto-suave);
}
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-status > .analytics-metric > strong {
  color: var(--dark-text);
}
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-status > .analytics-metric.pending > strong { color: #ffd15c; }
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-status > .analytics-metric.present > strong { color: var(--events-verde); }
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-status > .analytics-metric.absent > strong { color: var(--events-vermelho); }
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-status > .analytics-metric.waitlist > strong { color: var(--sol); }
:root[data-theme="dark"] .app-frame:has(.analytics-page) .analytics-status > .analytics-metric.cancelled > strong { color: var(--events-vermelho); }

:root[data-theme="dark"]
.app-frame:has(.analytics-page)
.analytics-age-footer strong {
    color: var(--events-branco);
}


/* Plan cards have their own surfaces; keep their text readable in dark mode. */
:root[data-theme="dark"] .app-frame .content .plans-intro {
  background: var(--dark-surface);
  border-color: var(--dark-border);
  color: var(--dark-text);
}
:root[data-theme="dark"] .app-frame .content .plans-intro :is(h2, p:not(.notice), .eyebrow) { color: var(--dark-text); }
:root[data-theme="dark"] .app-frame .content .plans-intro .eyebrow { color: var(--dark-accent-text); }
:root[data-theme="dark"] .app-frame .content .plans-intro .notice {
  background: transparent;
  border: 1px solid var(--dark-muted);
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .plans-intro .notice :is(h1, h2, h3, h4, p, span, strong, label, .muted, .small, .eyebrow) { color: var(--tinta); }
:root[data-theme="dark"] .app-frame .content .plan-card {
  background: var(--dark-surface);
  border-color: var(--dark-border);
  color: var(--dark-text);
  box-shadow: none;
}
:root[data-theme="dark"] .app-frame .content .plan-card.is-current { border-color: var(--dark-accent); }
:root[data-theme="dark"] .app-frame .content .plan-card :is(h2, p, span, li, strong) { color: var(--dark-text); }
:root[data-theme="dark"] .app-frame .content .plan-card .eyebrow { color: var(--dark-accent-text); }
:root[data-theme="dark"] .app-frame .content .plan-card :is(.plan-card-note, .plan-card-limits li) { color: var(--dark-muted); }
:root[data-theme="dark"] .app-frame .content .plan-card .plan-card-limits strong { color: var(--dark-text); }
:root[data-theme="dark"] .app-frame .content .plan-card .role-pill { background: var(--dark-accent); color: var(--dark-ink); border-color: var(--dark-accent); }


/* In dark mode, event metadata cards use a light surface with black text.
   Keep the surface and its foreground paired to avoid white-on-white or
   black-on-dark combinations. */
:root[data-theme="dark"] #app .app-frame:has(.event-page-head) .content .event-details-grid .detail-card {
  background: var(--events-branco);
  color: var(--dark-on-light);
}
:root[data-theme="dark"] #app .app-frame:has(.event-page-head) .content .event-details-grid .detail-card > span,
:root[data-theme="dark"] #app .app-frame:has(.event-page-head) .content .event-details-grid .detail-card > strong {
  color: var(--dark-on-light);
}

/* WhatsApp: green outline and green text in both themes. Keep the normal
   state transparent; the green fill is only a hover affordance. */
#app .app-frame .content .event-share .event-share-controls .actions a.btn.event-share-whatsapp,
#app .app-frame .content .event-share .event-share-controls .actions a.btn.event-share-whatsapp:visited {
  border: 1px solid var(--events-whatsapp);
  background: transparent;
  color: var(--events-whatsapp-texto);
}
#app .app-frame .content .event-share .event-share-controls .actions a.btn.event-share-whatsapp:hover:not(:disabled) {
  border-color: var(--events-whatsapp);
  background: var(--events-whatsapp-fundo);
  color: var(--events-whatsapp-escuro);
}
:root[data-theme="dark"] #app .app-frame .content .event-share .event-share-controls .actions a.btn.event-share-whatsapp,
:root[data-theme="dark"] #app .app-frame .content .event-share .event-share-controls .actions a.btn.event-share-whatsapp:visited {
  border-color: var(--events-whatsapp);
  background: transparent;
  color: var(--events-whatsapp);
}
:root[data-theme="dark"] #app .app-frame .content .event-share .event-share-controls .actions a.btn.event-share-whatsapp:hover:not(:disabled) {
  border-color: var(--events-whatsapp);
  background: var(--events-whatsapp);
  color: var(--dark-on-light);
}


/* Final contrast pass: component-specific foregrounds for light surfaces in
   dark mode. Keep this block last so legacy/theme selectors cannot wash out
   text on white or pastel cards. Dark surfaces retain the light foreground. */
:root[data-theme="dark"] #app .app-frame .content #eventRaffle .raffle-panel,
:root[data-theme="dark"] #app .app-frame .content #eventRaffle .raffle-panel-head {
  background: var(--events-branco);
  color: var(--dark-on-light);
}
:root[data-theme="dark"] #app .app-frame .content #eventRaffle .raffle-panel :is(h1,h2,h3,h4,p,span,strong,label,small,.muted,.small,.eyebrow,.raffle-step-label,.raffle-inline-note),
:root[data-theme="dark"] #app .app-frame .content #eventRaffle .raffle-panel-head :is(h1,h2,h3,h4,p,span,strong,label,small,.muted,.small,.eyebrow) {
  color: var(--dark-on-light);
}
:root[data-theme="dark"] #app .app-frame .content #eventRaffle .raffle-panel .raffle-status-pill {
  color: var(--dark-ink);
}

/* Light informational surfaces used across the application. */
:root[data-theme="dark"] .app-frame .content :is(.detail-card,.notice,.profile-prompt,.school-group-section,.welcome-panel),
:root[data-theme="dark"] dialog.modal :is(.notice,.profile-prompt,.school-group-section,.welcome-panel) {
  color: var(--dark-on-light);
}
:root[data-theme="dark"] #app .app-frame .content :is(.detail-card,.notice,.profile-prompt,.school-group-section,.welcome-panel)
  :is(h1,h2,h3,h4,p,span,strong,label,small,.muted,.small,.eyebrow,.empty),
:root[data-theme="dark"] dialog.modal :is(.notice,.profile-prompt,.school-group-section,.welcome-panel)
  :is(h1,h2,h3,h4,p,span,strong,label,small,.muted,.small,.eyebrow,.empty) {
  color: var(--dark-on-light);
}
:root[data-theme="dark"] .app-frame .content .detail-card {
  background: var(--events-branco);
  border-color: var(--dark-line-light);
}
:root[data-theme="dark"] .app-frame .content .welcome-panel {
  background: var(--dark-accent);
}
:root[data-theme="dark"] .app-frame .content .notice {
  background: var(--dark-text);
  border-color: var(--dark-muted);
}
:root[data-theme="dark"] .app-frame .content .profile-prompt,
:root[data-theme="dark"] .app-frame .content .school-group-section {
  background: var(--events-branco);
  border-color: var(--dark-line-light);
}

/* Table controls, descriptions and helper text must follow the panel surface,
   not inherit pale muted colors onto a light table/card. */
:root[data-theme="dark"] .app-frame .content .table :is(input,select,textarea) {
  background: var(--dark-input);
  color: var(--dark-ink);
}
:root[data-theme="dark"] .app-frame .content .table :is(input,select,textarea)::placeholder {
  color: var(--dark-input-placeholder);
  opacity: 1;
}

/* Raffle labels use pale legacy tokens in site-theme.css; on its white panels
   force black text, including the exact title shown in the reported screenshot. */
:root[data-theme="dark"] #app .app-frame .content #eventRaffle .raffle-panel-heading h3,
:root[data-theme="dark"] #app .app-frame .content #eventRaffle .raffle-panel-heading p,
:root[data-theme="dark"] #app .app-frame .content #eventRaffle .raffle-step-label {
  color: var(--dark-on-light);
}

/* Pagination summary sits on the dark card surface. */
:root[data-theme="dark"] .app-frame .content .pagination > span { color: var(--dark-muted); }

/* Stat tiles repeat their four-color cycle; the fifth tile starts the cycle again. */
:root[data-theme="dark"] .app-frame .content .grid > .stat:nth-child(4n+5) {
  background: var(--dark-tile-hover);
  color: var(--dark-ink);
}
/* Sol hero on the event finance page carries dark text, eyebrow included. */
:root[data-theme="dark"] .app-frame .content .finance-hero .eyebrow { color: var(--dark-ink); }
/* Helper text on the uva appearance panel and the organizer logo placeholder. */
:root[data-theme="dark"] #app .app-frame .content .event-appearance :is(.muted,.small) { color: var(--events-branco); }
/* Color chips are white in both contexts, so their names stay dark. */
:root[data-theme="dark"] dialog.modal .event-appearance .event-color-option > span:not(.event-color-swatch) { color: var(--tinta); }
:root[data-theme="dark"] .app-frame .content .business-logo-preview > span { color: var(--dark-text); }
:root[data-theme="dark"] .app-frame .site-footer a { color: var(--events-branco); }
/* The profile prompt's secondary action sits on a light surface. */
:root[data-theme="dark"] .app-frame .content .profile-prompt .text-button { color: var(--tinta); }

/* Personalizar origem: os itens claros mantêm a tinta escura; o botão de adicionar usa o destaque do modo escuro. */
:root[data-theme="dark"] :is(.app-frame .content, dialog.modal) .event-origin :is(.event-origin-item, .event-origin-rule),
:root[data-theme="dark"] :is(.app-frame .content, dialog.modal) .event-origin :is(.event-origin-item, .event-origin-rule) :is(span, label) { color: var(--tinta); }
:root[data-theme="dark"] :is(.app-frame .content, dialog.modal) .event-origin .event-origin-item .btn.ghost { color: var(--tinta); border-color: transparent; }
:root[data-theme="dark"] :is(.app-frame .content, dialog.modal) .event-origin .event-origin-add .btn.secondary { background: var(--dark-accent, var(--sol)); border-color: var(--dark-accent, var(--sol)); color: var(--tinta); }
:root[data-theme="dark"] :is(.app-frame .content, dialog.modal) .event-origin .event-origin-raffle { border-top-color: rgb(255 255 255 / .28); }
:root[data-theme="dark"] :is(.app-frame .content, dialog.modal) .event-origin .event-origin-empty { color: var(--events-branco); }