/* Final dark-mode normalization.
   This file is intentionally loaded after every feature stylesheet so newly added
   dashboard, course, admin and demo components cannot fall back to light surfaces. */

html[data-theme="dark"]{
  --surface:#121c26;
  --surface-1:#121c26;
  --surface-2:#17232e;
  --surface-soft:#17222c;
  --surface-muted:#0e1720;
  --surface-elevated:#16232e;
  --field-bg:#0e1720;
  --line-strong:#31404d;
  --text-soft:#b4c0ca;
  --text-faint:#91a0af;
}

html[data-theme="dark"] body,
html[data-theme="dark"] main{
  background:#0b1118;
  color:var(--ink);
}

/* Consistent structural backgrounds. */
html[data-theme="dark"] .dashboard-shell,
html[data-theme="dark"] .portal-home-shell,
html[data-theme="dark"] .platform-shell,
html[data-theme="dark"] .learner-shell,
html[data-theme="dark"] .lesson-shell,
html[data-theme="dark"] .exam-shell,
html[data-theme="dark"] .result-shell,
html[data-theme="dark"] .legal-shell,
html[data-theme="dark"] .pricing-section,
html[data-theme="dark"] .pricing-value-section,
html[data-theme="dark"] .pricing-plans-section,
html[data-theme="dark"] .demo-result-shell{
  background:#0b1118;
}

html[data-theme="dark"] .panel-band,
html[data-theme="dark"] .pricing-included-section,
html[data-theme="dark"] .seo-band{
  background:#0e161f;
}

/* Cards, panels and neutral content surfaces. */
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat-grid article,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .lesson-block:not(.hero-block):not(.prompt-block),
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .partner-card,
html[data-theme="dark"] .partner-demo-card,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .portal-stat,
html[data-theme="dark"] .portal-action-card,
html[data-theme="dark"] .portal-support-band,
html[data-theme="dark"] .account-facts>div,
html[data-theme="dark"] .account-contact-panel,
html[data-theme="dark"] .account-security-panel,
html[data-theme="dark"] .platform-kpi-grid article,
html[data-theme="dark"] .platform-plan-list article,
html[data-theme="dark"] .partner-model-note,
html[data-theme="dark"] .practice-block,
html[data-theme="dark"] .practice-options li,
html[data-theme="dark"] .practice-reveal,
html[data-theme="dark"] .branding-preview,
html[data-theme="dark"] .legal-card,
html[data-theme="dark"] .legal-grid section,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .home-pricing-card,
html[data-theme="dark"] .pricing-benefit-grid article,
html[data-theme="dark"] .pricing-included-grid article,
html[data-theme="dark"] .seo-card-grid article,
html[data-theme="dark"] .seo-portal-preview,
html[data-theme="dark"] .seo-evidence-card,
html[data-theme="dark"] .seo-compare-grid article,
html[data-theme="dark"] .seo-topic-grid a,
html[data-theme="dark"] .seo-process-grid article,
html[data-theme="dark"] .seo-faq-list details,
html[data-theme="dark"] .seo-check-list li{
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink);
}

html[data-theme="dark"] .portal-welcome-card,
html[data-theme="dark"] .portal-action-card.primary-card{
  background:linear-gradient(145deg,color-mix(in srgb,var(--customer-accent,#2B7A78) 12%,var(--surface)),var(--surface) 68%);
  border-color:color-mix(in srgb,var(--customer-accent,#2B7A78) 28%,var(--line));
  box-shadow:0 20px 60px rgba(0,0,0,.20);
}

html[data-theme="dark"] .portal-support-band,
html[data-theme="dark"] .account-security-panel{
  background:color-mix(in srgb,var(--customer-accent,#2B7A78) 7%,var(--surface));
  border-color:color-mix(in srgb,var(--customer-accent,#2B7A78) 22%,var(--line));
}

html[data-theme="dark"] .portal-chip-row span,
html[data-theme="dark"] .invite-link-box,
html[data-theme="dark"] .account-facts>div{
  background:var(--surface-2);
  border-color:var(--line);
}

/* Keep uploaded logos on a neutral logo plate instead of tinting/inverting them. */
html[data-theme="dark"] .portal-customer-mark{
  background:#e9edf0;
  border:1px solid #cfd7dd;
  box-shadow:0 14px 38px rgba(0,0,0,.18);
}
html[data-theme="dark"] .portal-customer-mark img,
html[data-theme="dark"] .customer-brand-logo{
  filter:none;
}

/* Text that newer feature sheets still paint with light-mode navy/grey. */
html[data-theme="dark"] .portal-welcome-card h1,
html[data-theme="dark"] .portal-stat strong,
html[data-theme="dark"] .portal-support-band h2,
html[data-theme="dark"] .account-contact-panel h2,
html[data-theme="dark"] .account-contact-details strong,
html[data-theme="dark"] .platform-kpi-grid strong,
html[data-theme="dark"] .platform-plan-list strong,
html[data-theme="dark"] .partner-model-note h2,
html[data-theme="dark"] .contact-copy h1,
html[data-theme="dark"] .contact-copy strong,
html[data-theme="dark"] .contact-card h2,
html[data-theme="dark"] .home-pricing-teaser h2,
html[data-theme="dark"] .home-pricing-card h3,
html[data-theme="dark"] .pricing-hero h1,
html[data-theme="dark"] .pricing-benefit-grid h3,
html[data-theme="dark"] .pricing-included-grid b,
html[data-theme="dark"] .seo-hero h1,
html[data-theme="dark"] .seo-lead strong,
html[data-theme="dark"] .seo-section-head h2,
html[data-theme="dark"] .seo-split h2,
html[data-theme="dark"] .seo-card-grid h3,
html[data-theme="dark"] .seo-preview-head strong,
html[data-theme="dark"] .seo-preview-row b,
html[data-theme="dark"] .seo-evidence-card h3,
html[data-theme="dark"] .seo-evidence-card strong,
html[data-theme="dark"] .seo-compare-grid h3,
html[data-theme="dark"] .seo-topic-grid strong,
html[data-theme="dark"] .seo-process-grid h3,
html[data-theme="dark"] .seo-faq-list summary{
  color:#edf3f7;
}

html[data-theme="dark"] .portal-welcome-card p,
html[data-theme="dark"] .portal-stat span,
html[data-theme="dark"] .portal-action-card p,
html[data-theme="dark"] .portal-support-band p,
html[data-theme="dark"] .account-contact-panel p,
html[data-theme="dark"] .platform-section-copy,
html[data-theme="dark"] .partner-model-note p,
html[data-theme="dark"] .contact-copy>p,
html[data-theme="dark"] .contact-points span,
html[data-theme="dark"] .contact-intro,
html[data-theme="dark"] .home-pricing-teaser p,
html[data-theme="dark"] .home-pricing-card p,
html[data-theme="dark"] .pricing-hero-copy>p,
html[data-theme="dark"] .price-card-lead,
html[data-theme="dark"] .seo-lead,
html[data-theme="dark"] .seo-trust-row,
html[data-theme="dark"] .seo-card-grid p,
html[data-theme="dark"] .seo-check-list li,
html[data-theme="dark"] .seo-preview-row small,
html[data-theme="dark"] .seo-evidence-card span,
html[data-theme="dark"] .seo-topic-grid span,
html[data-theme="dark"] .seo-process-grid p,
html[data-theme="dark"] .seo-faq-list details p{
  color:var(--text-soft);
}

/* Forms: same dark field treatment in account/admin/platform/contact/branding. */
html[data-theme="dark"] .form-stack label,
html[data-theme="dark"] .contact-form label,
html[data-theme="dark"] .demo-email-field{
  color:#c2ccd5;
}
html[data-theme="dark"] .form-stack input,
html[data-theme="dark"] .form-stack textarea,
html[data-theme="dark"] .form-stack select,
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form textarea,
html[data-theme="dark"] .contact-form select,
html[data-theme="dark"] .inline-plan-form select{
  background:var(--field-bg);
  border-color:var(--line-strong);
  color:#edf3f7;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:#788897;
}
html[data-theme="dark"] .color-field input[type="color"]{
  background:var(--surface-2);
  border-color:var(--line-strong);
}
html[data-theme="dark"] .secondary-button{
  border-color:var(--line-strong);
  background:var(--surface-2);
  color:#e4ebf1;
}
html[data-theme="dark"] .danger-button{
  border-color:#694043;
  color:#efaaaa;
}

/* Tables and neutral badges. */
html[data-theme="dark"] th,
html[data-theme="dark"] td{
  border-color:#283744;
}
html[data-theme="dark"] th{color:#91a1af}
html[data-theme="dark"] td{color:#d8e0e7}
html[data-theme="dark"] .tag,
html[data-theme="dark"] .plan-badge{
  background:#1b2833;
  color:#c7d1da;
}
html[data-theme="dark"] .plan-business{background:#12302c;color:#9ad8cd}
html[data-theme="dark"] .plan-max{background:#20283a;color:#b7c4e8}
html[data-theme="dark"] .plan-enterprise{background:#17283a;color:#bad0e5}
html[data-theme="dark"] .seat-meter{background:#263440}
html[data-theme="dark"] .course-reset-button{color:#d7a461;border-color:#674c2c}
html[data-theme="dark"] .danger-link{color:#e59b9b}
html[data-theme="dark"] .danger-link:hover{background:#2a181a}
html[data-theme="dark"] .qa-status{background:#29233c;color:#c6b9eb}

/* Learning / CBT: no white islands; semantic success/error colors stay semantic. */
html[data-theme="dark"] .slide-nav{
  background:#0e161f;
  border-color:#283744;
}
html[data-theme="dark"] .slide-stage::-webkit-scrollbar-thumb{background:#3a4a57}
html[data-theme="dark"] .slide-stage::-webkit-scrollbar-track{background:transparent}
html[data-theme="dark"] .practice-block{
  background:linear-gradient(145deg,color-mix(in srgb,var(--customer-accent,#2B7A78) 8%,var(--surface)),var(--surface) 62%);
}
html[data-theme="dark"] .practice-question,
html[data-theme="dark"] .practice-reveal summary{
  background:color-mix(in srgb,var(--customer-accent,#2B7A78) 10%,var(--surface-2));
}
html[data-theme="dark"] .practice-options li{background:var(--surface-2)}
html[data-theme="dark"] .scenario,
html[data-theme="dark"] .course-graphic,
html[data-theme="dark"] .graphic-stage{background:#101923}
html[data-theme="dark"] .scenario-options button,
html[data-theme="dark"] .module-answer-options label{
  background:var(--surface);
  color:#e4ebf1;
  border-color:#2d3c49;
}
html[data-theme="dark"] .scenario-options button span,
html[data-theme="dark"] .answer-letter{background:#1b2833;color:#dfe8ef}
html[data-theme="dark"] .note-block{background:#252116;border-color:#8e7135;color:#d7c69b}
html[data-theme="dark"] .note-block h2{color:#ead9ae}
html[data-theme="dark"] .prompt-block pre{background:#080f17;color:#dfe7ef}
html[data-theme="dark"] .btn.disabled,
html[data-theme="dark"] .slide-nav-btn.timer-locked{background:#26313b;color:#8795a2}

/* Dark-mode status surfaces remain recognizably green/red/amber without glare. */
html[data-theme="dark"] .status.done,
html[data-theme="dark"] .alert.success,
html[data-theme="dark"] .scenario-feedback.correct,
html[data-theme="dark"] .scenario-options button.correct{background:#102622;color:#91d8ca;border-color:#285046}
html[data-theme="dark"] .status.open{background:#2a2519;color:#d7b86f}
html[data-theme="dark"] .alert.danger,
html[data-theme="dark"] .scenario-feedback.incorrect,
html[data-theme="dark"] .scenario-options button.incorrect{background:#2a181a;color:#e2a7a7;border-color:#59383b}

/* Commercial/public screens still expose a theme toggle, so they also need full dark coverage. */
html[data-theme="dark"] .contact-shell{
  background:radial-gradient(circle at 12% 12%,rgba(75,182,166,.07),transparent 30%),linear-gradient(180deg,#0b1118,#0e161f);
}
html[data-theme="dark"] .home-pricing-teaser,
html[data-theme="dark"] .pricing-hero{
  background:linear-gradient(180deg,#0b1118,#101923);
}
html[data-theme="dark"] .home-pricing-points span,
html[data-theme="dark"] .pricing-trust-row span{
  background:var(--surface-2);
  border-color:var(--line);
  color:#b8c3cd;
}
html[data-theme="dark"] .pricing-grid-premium .price-card.enterprise{background:linear-gradient(180deg,#121c26,#101923)}
html[data-theme="dark"] .destructive-shell{background:radial-gradient(circle at 15% 10%,#28191b,transparent 30%),#0b1118}
html[data-theme="dark"] .destructive-warning{background:#2a181a;border-color:#684044;color:#e0aaaa}

/* Public demo: the old stylesheet is light-first and needs an explicit dark counterpart. */
html[data-theme="dark"] .demo-entry-shell{
  background:radial-gradient(circle at 12% 18%,rgba(75,182,166,.07),transparent 30%),linear-gradient(180deg,#0b1118,#0e161f);
}
html[data-theme="dark"] .demo-entry-copy h1,
html[data-theme="dark"] .demo-card-head h2,
html[data-theme="dark"] .demo-preview-rail strong,
html[data-theme="dark"] .demo-lesson-card h2,
html[data-theme="dark"] .demo-lead-question,
html[data-theme="dark"] .demo-ability-grid strong,
html[data-theme="dark"] .demo-review-scale strong,
html[data-theme="dark"] .demo-decision-flow strong,
html[data-theme="dark"] .demo-needs-question legend,
html[data-theme="dark"] .demo-nav-center b,
html[data-theme="dark"] .demo-focus-grid h3,
html[data-theme="dark"] .demo-rollout-card h2,
html[data-theme="dark"] .demo-result-cta h2{
  color:#edf3f7!important;
}
html[data-theme="dark"] .demo-entry-lead,
html[data-theme="dark"] .demo-trust-strip,
html[data-theme="dark"] .demo-entry-card>p,
html[data-theme="dark"] .demo-lesson-card>p,
html[data-theme="dark"] .demo-ability-grid small,
html[data-theme="dark"] .demo-review-scale small,
html[data-theme="dark"] .demo-decision-flow small,
html[data-theme="dark"] .demo-needs-options label,
html[data-theme="dark"] .demo-focus-grid p{
  color:var(--text-soft);
}
html[data-theme="dark"] .demo-preview-rail article,
html[data-theme="dark"] .demo-entry-card,
html[data-theme="dark"] .demo-lesson-card,
html[data-theme="dark"] .demo-ability-grid>div,
html[data-theme="dark"] .demo-decision-flow>div,
html[data-theme="dark"] .demo-review-scale>div,
html[data-theme="dark"] .demo-needs-question,
html[data-theme="dark"] .demo-scenario-options button,
html[data-theme="dark"] .demo-focus-grid article,
html[data-theme="dark"] .demo-rollout-card,
html[data-theme="dark"] .demo-result-cta{
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink);
}
html[data-theme="dark"] .demo-hero-card,
html[data-theme="dark"] .demo-practice-card{background:linear-gradient(145deg,#121c26,#101923)}
html[data-theme="dark"] .demo-check-row,
html[data-theme="dark"] .demo-check-row.optional,
html[data-theme="dark"] .demo-needs-options label{background:var(--surface-2);border-color:var(--line);color:#b9c4cd}
html[data-theme="dark"] .demo-email-field input{background:var(--field-bg);border-color:var(--line-strong);color:#edf3f7}
html[data-theme="dark"] .demo-cbt-shell{background:#0e161f}
html[data-theme="dark"] .demo-cbt-main{background:#0e161f}
html[data-theme="dark"] .demo-slide-window{scrollbar-color:#3a4a57 transparent}
html[data-theme="dark"] .demo-top-progress{background:#263440}
html[data-theme="dark"] .demo-slide-topline strong{color:#9eacb9}
html[data-theme="dark"] .demo-slide-nav{border-color:#283744}
html[data-theme="dark"] .demo-needs-options label:has(input:checked){background:#102823;border-color:#438f82;color:#bde1da}
html[data-theme="dark"] .demo-note{background:#252116;border-color:#8e7135;color:#d7c69b}
html[data-theme="dark"] .demo-review-scale>div:last-child{background:#291f17;border-color:#61462e}
html[data-theme="dark"] .demo-scenario-options button b{background:#1b2833;color:#dfe8ef}
html[data-theme="dark"] .demo-scenario-options button.correct,
html[data-theme="dark"] .demo-scenario-feedback.correct{background:#102622;color:#91d8ca;border-color:#285046}
html[data-theme="dark"] .demo-scenario-options button.incorrect{background:#2a181a;color:#e2a7a7;border-color:#59383b}
html[data-theme="dark"] .demo-scenario-feedback.review{background:#2b2118;color:#d7ae82}
html[data-theme="dark"] .demo-scenario-feedback.pending{background:#1b252e;color:#aebac5}

/* The legal/branding preview details should not reintroduce white panels. */
html[data-theme="dark"] .preview-message,
html[data-theme="dark"] .organization-welcome{background:color-mix(in srgb,var(--customer-accent,#2B7A78) 10%,#101923)}
html[data-theme="dark"] .preview-brand-lockup strong,
html[data-theme="dark"] .powered-by strong,
html[data-theme="dark"] .legal-card h1,
html[data-theme="dark"] .legal-grid h2{color:#edf3f7}

/* Mobile: protect readable spacing and keep customer marks fully contained. */
@media(max-width:780px){
  html[data-theme="dark"] .portal-home-shell{background:#0b1118}
  .portal-customer-mark{
    width:100%;
    min-width:0;
    height:auto;
    min-height:96px;
    padding:14px 16px;
    overflow:visible;
  }
  .portal-customer-mark img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:72px;
    object-fit:contain;
    object-position:left center;
  }
}