/* Sprint115 - Final dark/light surface consistency for calculator detail screens.
   Goal: remove remaining white islands inside dark calculator pages without adding new UI. */
:root,
html[data-theme="light"]{
  --jg-bg:#f6f8fc;
  --jg-bg-soft:#eef4fb;
  --jg-surface:#ffffff;
  --jg-surface-2:#f1f5f9;
  --jg-surface-3:#eaf1f8;
  --jg-text:#0b1220;
  --jg-text-2:#344054;
  --jg-muted:#64748b;
  --jg-line:#d8e0ec;
  --jg-primary:#1e5bff;
  --jg-primary-2:#0f46d8;
  --jg-accent:#14b8a6;
  --jg-danger:#ef4444;
  --jg-warn:#f59e0b;
  --jg-shadow:0 16px 44px rgba(15,23,42,.10);
}
html[data-theme="dark"],
html.dark,
body[data-theme="dark"],
body.dark{
  --jg-bg:#07111f;
  --jg-bg-soft:#0a1424;
  --jg-surface:#0f1b2d;
  --jg-surface-2:#14243a;
  --jg-surface-3:#1a2f4d;
  --jg-text:#f8fafc;
  --jg-text-2:#e2e8f0;
  --jg-muted:#cbd5e1;
  --jg-line:#334155;
  --jg-primary:#4f83ff;
  --jg-primary-2:#7aa2ff;
  --jg-accent:#2dd4bf;
  --jg-danger:#f87171;
  --jg-warn:#fbbf24;
  --jg-shadow:0 18px 50px rgba(0,0,0,.36);
}
html[data-theme="dark"],
html[data-theme="dark"] body,
html.dark,
html.dark body,
body[data-theme="dark"],
body.dark{
  background:var(--jg-bg)!important;
  color:var(--jg-text)!important;
}

/* Calculator workspace dark surfaces */
html[data-theme="dark"] #workspace,
html.dark #workspace,
body[data-theme="dark"] #workspace,
body.dark #workspace,
html[data-theme="dark"] .calculator-workspace,
html.dark .calculator-workspace,
body[data-theme="dark"] .calculator-workspace,
body.dark .calculator-workspace{
  background:var(--jg-bg)!important;
  color:var(--jg-text)!important;
}

/* Remove white islands in detail sections */
html[data-theme="dark"] #workspace :is(
  .work-head,.input-quality-card,.desktop-compact-summary,.standard-cards,.standard-card,
  .tabs,.form,.form-section,.mobile-step-shell,.compact-input-shell,.input-group,.input-group-head,
  .advanced-fields,.group-field-grid,.field,.field-card,.form-field,.input-card,.input-unit-wrap,
  .scenario-section,.scenario-grid,.scenario,.scenario-card,.scenario-panel,.situation-section,.situation-card,
  .result,.result-panel,.policy-result,.premium-killer-result,.didimdol-result,.runway-result,
  .eligibility-banner,.metric-grid,.metric,.killer-dashboard,.analysis-list,.analysis-item,.checklist,.check,
  .policy-card-grid,.consulting-result-card,.card-badge-row,.card-title-area,.policy-number-box,.policy-card-note,
  .sim-box,.sim-controls,.sim-values,.next-action-box,.guide,.guide-box,.prep-docs-panel,.hub-next-links,
  .m113-shell,.m113-card,.m113-hero,.m113-result,.m113-detail,.m113-detail-body,.m113-field,.m113-group,
  .m113-input-wrap,.m113-kpi,.m113-panel,.m113-unit-cell,.m113-list-card,.m113-tip,.m113-scenario,
  details,summary
),
html.dark #workspace :is(
  .work-head,.input-quality-card,.desktop-compact-summary,.standard-cards,.standard-card,
  .tabs,.form,.form-section,.mobile-step-shell,.compact-input-shell,.input-group,.input-group-head,
  .advanced-fields,.group-field-grid,.field,.field-card,.form-field,.input-card,.input-unit-wrap,
  .scenario-section,.scenario-grid,.scenario,.scenario-card,.scenario-panel,.situation-section,.situation-card,
  .result,.result-panel,.policy-result,.premium-killer-result,.didimdol-result,.runway-result,
  .eligibility-banner,.metric-grid,.metric,.killer-dashboard,.analysis-list,.analysis-item,.checklist,.check,
  .policy-card-grid,.consulting-result-card,.card-badge-row,.card-title-area,.policy-number-box,.policy-card-note,
  .sim-box,.sim-controls,.sim-values,.next-action-box,.guide,.guide-box,.prep-docs-panel,.hub-next-links,
  .m113-shell,.m113-card,.m113-hero,.m113-result,.m113-detail,.m113-detail-body,.m113-field,.m113-group,
  .m113-input-wrap,.m113-kpi,.m113-panel,.m113-unit-cell,.m113-list-card,.m113-tip,.m113-scenario,
  details,summary
),
body[data-theme="dark"] #workspace :is(
  .work-head,.input-quality-card,.desktop-compact-summary,.standard-cards,.standard-card,
  .tabs,.form,.form-section,.mobile-step-shell,.compact-input-shell,.input-group,.input-group-head,
  .advanced-fields,.group-field-grid,.field,.field-card,.form-field,.input-card,.input-unit-wrap,
  .scenario-section,.scenario-grid,.scenario,.scenario-card,.scenario-panel,.situation-section,.situation-card,
  .result,.result-panel,.policy-result,.premium-killer-result,.didimdol-result,.runway-result,
  .eligibility-banner,.metric-grid,.metric,.killer-dashboard,.analysis-list,.analysis-item,.checklist,.check,
  .policy-card-grid,.consulting-result-card,.card-badge-row,.card-title-area,.policy-number-box,.policy-card-note,
  .sim-box,.sim-controls,.sim-values,.next-action-box,.guide,.guide-box,.prep-docs-panel,.hub-next-links,
  .m113-shell,.m113-card,.m113-hero,.m113-result,.m113-detail,.m113-detail-body,.m113-field,.m113-group,
  .m113-input-wrap,.m113-kpi,.m113-panel,.m113-unit-cell,.m113-list-card,.m113-tip,.m113-scenario,
  details,summary
){
  background:var(--jg-surface)!important;
  color:var(--jg-text)!important;
  border-color:var(--jg-line)!important;
  box-shadow:none!important;
}

/* Nested panels are slightly lighter, not white. */
html[data-theme="dark"] #workspace :is(.standard-card,.metric,.analysis-item,.check,.policy-number-box,.m113-field,.m113-input-wrap,.m113-kpi,.m113-detail-body,.m113-unit-cell,.sim-values,.sim-controls,.scenario,.scenario-card,.input-group,.advanced-fields),
html.dark #workspace :is(.standard-card,.metric,.analysis-item,.check,.policy-number-box,.m113-field,.m113-input-wrap,.m113-kpi,.m113-detail-body,.m113-unit-cell,.sim-values,.sim-controls,.scenario,.scenario-card,.input-group,.advanced-fields),
body[data-theme="dark"] #workspace :is(.standard-card,.metric,.analysis-item,.check,.policy-number-box,.m113-field,.m113-input-wrap,.m113-kpi,.m113-detail-body,.m113-unit-cell,.sim-values,.sim-controls,.scenario,.scenario-card,.input-group,.advanced-fields){
  background:var(--jg-surface-2)!important;
}

/* Selected scenario or active chips */
html[data-theme="dark"] #workspace :is(.scenario.active,.scenario.selected,.scenario.is-active,.scenario-card.active,.scenario-card.selected,.scenario-card.is-active,.m113-scenario.is-active,.tab.on,.mobile-step-nav .active),
html.dark #workspace :is(.scenario.active,.scenario.selected,.scenario.is-active,.scenario-card.active,.scenario-card.selected,.scenario-card.is-active,.m113-scenario.is-active,.tab.on,.mobile-step-nav .active),
body[data-theme="dark"] #workspace :is(.scenario.active,.scenario.selected,.scenario.is-active,.scenario-card.active,.scenario-card.selected,.scenario-card.is-active,.m113-scenario.is-active,.tab.on,.mobile-step-nav .active){
  background:linear-gradient(135deg,#112a48,#103b50)!important;
  color:var(--jg-text)!important;
  border-color:var(--jg-accent)!important;
  box-shadow:0 0 0 1px rgba(45,212,191,.28),0 14px 34px rgba(0,0,0,.24)!important;
}

/* Policy recommendation cards: this was the remaining white block in dark mode. */
html[data-theme="dark"] #workspace .policy-card-grid,
html.dark #workspace .policy-card-grid,
body[data-theme="dark"] #workspace .policy-card-grid{background:transparent!important;}
html[data-theme="dark"] #workspace .consulting-result-card,
html.dark #workspace .consulting-result-card,
body[data-theme="dark"] #workspace .consulting-result-card{
  background:var(--jg-surface)!important;
  color:var(--jg-text)!important;
  border:1px solid var(--jg-line)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] #workspace .policy-number-box,
html.dark #workspace .policy-number-box,
body[data-theme="dark"] #workspace .policy-number-box{
  background:var(--jg-surface-2)!important;
  border:1px solid var(--jg-line)!important;
}
html[data-theme="dark"] #workspace .policy-number-box div,
html.dark #workspace .policy-number-box div,
body[data-theme="dark"] #workspace .policy-number-box div{
  background:transparent!important;
  color:var(--jg-text)!important;
  border-color:var(--jg-line)!important;
}
html[data-theme="dark"] #workspace .policy-detail-btn,
html.dark #workspace .policy-detail-btn,
body[data-theme="dark"] #workspace .policy-detail-btn{
  background:#0a1020!important;
  color:var(--jg-text)!important;
  border:1px solid #111827!important;
}

/* Text contrast */
html[data-theme="dark"] #workspace :is(h1,h2,h3,h4,h5,h6,strong,label,summary,.value,.title,.card-title,.result-heading,.card-title-area h4,.m113-score),
html.dark #workspace :is(h1,h2,h3,h4,h5,h6,strong,label,summary,.value,.title,.card-title,.result-heading,.card-title-area h4,.m113-score),
body[data-theme="dark"] #workspace :is(h1,h2,h3,h4,h5,h6,strong,label,summary,.value,.title,.card-title,.result-heading,.card-title-area h4,.m113-score){
  color:var(--jg-text)!important;
}
html[data-theme="dark"] #workspace :is(p,span,small,li,.sub,.desc,.muted,.policy-card-note,.m113-sub,.m113-muted,.card-title-area span,.analysis-item span,.metric span,.field small,.input-group-head span,.standard-card span),
html.dark #workspace :is(p,span,small,li,.sub,.desc,.muted,.policy-card-note,.m113-sub,.m113-muted,.card-title-area span,.analysis-item span,.metric span,.field small,.input-group-head span,.standard-card span),
body[data-theme="dark"] #workspace :is(p,span,small,li,.sub,.desc,.muted,.policy-card-note,.m113-sub,.m113-muted,.card-title-area span,.analysis-item span,.metric span,.field small,.input-group-head span,.standard-card span){
  color:var(--jg-muted)!important;
}

/* Inputs and numeric helper */
html[data-theme="dark"] #workspace :is(input,select,textarea),
html.dark #workspace :is(input,select,textarea),
body[data-theme="dark"] #workspace :is(input,select,textarea){
  background:var(--jg-surface-3)!important;
  color:var(--jg-text)!important;
  border-color:var(--jg-line)!important;
}
html[data-theme="dark"] #workspace :is(input::placeholder,textarea::placeholder),
html.dark #workspace :is(input::placeholder,textarea::placeholder),
body[data-theme="dark"] #workspace :is(input::placeholder,textarea::placeholder){
  color:#94a3b8!important;
}
html[data-theme="dark"] #workspace :is(.unit-suffix,.m113-unit,.jg-amount-helper,.m113-amount-helper),
html.dark #workspace :is(.unit-suffix,.m113-unit,.jg-amount-helper,.m113-amount-helper),
body[data-theme="dark"] #workspace :is(.unit-suffix,.m113-unit,.jg-amount-helper,.m113-amount-helper){
  color:var(--jg-muted)!important;
}

/* Keep light mode clean and not over-darkened */
html[data-theme="light"] #workspace .policy-number-box,
html[data-theme="light"] #workspace .m113-field,
html[data-theme="light"] #workspace .m113-input-wrap{
  background:#f8fbff;
}

@media (max-width: 760px){
  #workspace :is(.policy-card-grid,.metric-grid,.killer-dashboard,.m113-kpis,.m113-fields,.group-field-grid){
    grid-template-columns:1fr!important;
  }
  #workspace :is(.consulting-result-card,.result-panel,.form-section,.m113-card,.m113-result,.m113-detail){
    max-width:100%!important;
    overflow:hidden!important;
  }
}
