/* Sprint130 - Employment subsidy generic renderer theme scope fix
   Purpose: employment-subsidy uses the generic calculator renderer, not the s118 enhanced renderer.
   This file aligns its parent wrappers, form areas, and card gaps with the active light/dark theme without touching calculations. */

:root{
  --s130-light-bg:#f6f8fc;
  --s130-light-surface:#ffffff;
  --s130-light-surface-2:#f1f5f9;
  --s130-light-text:#0b1220;
  --s130-light-muted:#64748b;
  --s130-light-line:#d8e0ec;
  --s130-dark-bg:#07111f;
  --s130-dark-surface:#0f1b2d;
  --s130-dark-surface-2:#14243a;
  --s130-dark-surface-3:#192b44;
  --s130-dark-text:#f8fafc;
  --s130-dark-muted:#cbd5e1;
  --s130-dark-line:#334155;
  --s130-blue:#4f83ff;
  --s130-mint:#2dd4bf;
}

/* Marked by sprint130 JS only for employment-subsidy. This avoids changing other calculators that already look correct. */
body.jg-tool-employment-subsidy #workspace,
body.jg-tool-employment-subsidy .workspace{
  color:var(--s130-light-text);
}

html[data-theme="dark"] body.jg-tool-employment-subsidy,
html.dark body.jg-tool-employment-subsidy,
body.dark.jg-tool-employment-subsidy,
body[data-theme="dark"].jg-tool-employment-subsidy{
  background:var(--s130-dark-bg) !important;
}

html[data-theme="dark"] body.jg-tool-employment-subsidy #workspace,
html.dark body.jg-tool-employment-subsidy #workspace,
body.dark.jg-tool-employment-subsidy #workspace,
body[data-theme="dark"].jg-tool-employment-subsidy #workspace,
html[data-theme="dark"] body.jg-tool-employment-subsidy .workspace,
html.dark body.jg-tool-employment-subsidy .workspace,
body.dark.jg-tool-employment-subsidy .workspace,
body[data-theme="dark"].jg-tool-employment-subsidy .workspace{
  background:linear-gradient(180deg,var(--s130-dark-bg),#081626) !important;
  color:var(--s130-dark-text) !important;
  border-color:var(--s130-dark-line) !important;
}

/* Generic calculator renderer parent wrappers: this is the part previous s118-focused patches missed. */
html[data-theme="dark"] body.jg-tool-employment-subsidy #workspace :is(
  .form,
  form,
  #calcForm,
  .fields,
  .grouped-fields,
  .mobile-stepped-fields,
  .compact-form,
  .compact-input-shell,
  .mobile-step-shell,
  .form-section,
  .input-group,
  .advanced-fields,
  .group-field-grid,
  .standard-cards,
  .desktop-compact-summary,
  .hub-next-links,
  .guide,
  .guide-box,
  .result,
  .result-panel,
  .analysis-list,
  .checklist
),
html.dark body.jg-tool-employment-subsidy #workspace :is(
  .form,
  form,
  #calcForm,
  .fields,
  .grouped-fields,
  .mobile-stepped-fields,
  .compact-form,
  .compact-input-shell,
  .mobile-step-shell,
  .form-section,
  .input-group,
  .advanced-fields,
  .group-field-grid,
  .standard-cards,
  .desktop-compact-summary,
  .hub-next-links,
  .guide,
  .guide-box,
  .result,
  .result-panel,
  .analysis-list,
  .checklist
){
  background:transparent !important;
  color:var(--s130-dark-text) !important;
  box-shadow:none;
}

html[data-theme="dark"] body.jg-tool-employment-subsidy #workspace :is(
  .work-head,
  .input-quality-card,
  .standard-card,
  .desktop-compact-summary > div,
  .form-section,
  .scenario-section,
  .input-group,
  details.advanced-fields,
  .field,
  .choice-field,
  .guide-box,
  .hub-next-links,
  .result-panel,
  .risk-card,
  .metric,
  .analysis-item,
  .check,
  .quick-row,
  .mobile-step-nav,
  .tabs
),
html.dark body.jg-tool-employment-subsidy #workspace :is(
  .work-head,
  .input-quality-card,
  .standard-card,
  .desktop-compact-summary > div,
  .form-section,
  .scenario-section,
  .input-group,
  details.advanced-fields,
  .field,
  .choice-field,
  .guide-box,
  .hub-next-links,
  .result-panel,
  .risk-card,
  .metric,
  .analysis-item,
  .check,
  .quick-row,
  .mobile-step-nav,
  .tabs
){
  background:var(--s130-dark-surface) !important;
  color:var(--s130-dark-text) !important;
  border-color:var(--s130-dark-line) !important;
}

html[data-theme="dark"] body.jg-tool-employment-subsidy #workspace :is(
  .field input,
  .field select,
  input,
  select,
  textarea,
  .choice-card,
  .scenario,
  .tab,
  .mobile-step-nav button,
  .quick-row button,
  .unit-suffix,
  .amount-readout,
  .input-wrap,
  .range-input
),
html.dark body.jg-tool-employment-subsidy #workspace :is(
  .field input,
  .field select,
  input,
  select,
  textarea,
  .choice-card,
  .scenario,
  .tab,
  .mobile-step-nav button,
  .quick-row button,
  .unit-suffix,
  .amount-readout,
  .input-wrap,
  .range-input
){
  background:var(--s130-dark-surface-2) !important;
  color:var(--s130-dark-text) !important;
  border-color:var(--s130-dark-line) !important;
}

html[data-theme="dark"] body.jg-tool-employment-subsidy #workspace :is(.scenario.active,.choice-card.active,.mobile-step-nav button.active,.tab.on),
html.dark body.jg-tool-employment-subsidy #workspace :is(.scenario.active,.choice-card.active,.mobile-step-nav button.active,.tab.on){
  background:linear-gradient(135deg,rgba(79,131,255,.22),rgba(45,212,191,.16)) !important;
  border-color:var(--s130-mint) !important;
  color:var(--s130-dark-text) !important;
  box-shadow:0 0 0 1px rgba(45,212,191,.18) !important;
}

html[data-theme="dark"] body.jg-tool-employment-subsidy #workspace :is(
  h1,h2,h3,h4,strong,label,.value,.metric strong,.analysis-item strong,.result-panel strong,.work-head h2
),
html.dark body.jg-tool-employment-subsidy #workspace :is(
  h1,h2,h3,h4,strong,label,.value,.metric strong,.analysis-item strong,.result-panel strong,.work-head h2
){
  color:var(--s130-dark-text) !important;
}

html[data-theme="dark"] body.jg-tool-employment-subsidy #workspace :is(
  p,small,span,.sub,.field label small,.work-head p,.standard-card span,.input-quality-text,.scenario span,.choice-card span,.metric span,.analysis-item span,.guide-box,.guide-box li,.check,.hub-next-links p
),
html.dark body.jg-tool-employment-subsidy #workspace :is(
  p,small,span,.sub,.field label small,.work-head p,.standard-card span,.input-quality-text,.scenario span,.choice-card span,.metric span,.analysis-item span,.guide-box,.guide-box li,.check,.hub-next-links p
){
  color:var(--s130-dark-muted) !important;
}

html[data-theme="dark"] body.jg-tool-employment-subsidy #workspace input::placeholder,
html.dark body.jg-tool-employment-subsidy #workspace input::placeholder,
html[data-theme="dark"] body.jg-tool-employment-subsidy #workspace textarea::placeholder,
html.dark body.jg-tool-employment-subsidy #workspace textarea::placeholder{
  color:rgba(203,213,225,.58) !important;
}

/* Light mode: keep it clean and avoid excessive black borders. */
html:not([data-theme="dark"]) body.jg-tool-employment-subsidy #workspace :is(.form-section,.input-group,details.advanced-fields,.standard-card,.input-quality-card,.field,.choice-card,.scenario,.result-panel,.guide-box,.hub-next-links),
html[data-theme="light"] body.jg-tool-employment-subsidy #workspace :is(.form-section,.input-group,details.advanced-fields,.standard-card,.input-quality-card,.field,.choice-card,.scenario,.result-panel,.guide-box,.hub-next-links){
  background:var(--s130-light-surface) !important;
  color:var(--s130-light-text) !important;
  border-color:var(--s130-light-line) !important;
}
html:not([data-theme="dark"]) body.jg-tool-employment-subsidy #workspace :is(.field input,.field select,input,select,textarea),
html[data-theme="light"] body.jg-tool-employment-subsidy #workspace :is(.field input,.field select,input,select,textarea){
  background:var(--s130-light-surface-2) !important;
  color:var(--s130-light-text) !important;
  border-color:var(--s130-light-line) !important;
}

/* Desktop width safety: generic renderer should not collapse into narrow columns. */
@media (min-width: 1041px){
  body.jg-tool-employment-subsidy .main-grid{
    grid-template-columns:minmax(520px,1fr) minmax(420px,520px) !important;
    gap:22px !important;
  }
  body.jg-tool-employment-subsidy .workspace{
    max-width:1180px !important;
  }
  body.jg-tool-employment-subsidy #workspace .fields,
  body.jg-tool-employment-subsidy #workspace .group-field-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width: 760px){
  body.jg-tool-employment-subsidy #workspace :is(.fields,.group-field-grid,.standard-cards,.scenario-grid){
    grid-template-columns:1fr !important;
  }
  body.jg-tool-employment-subsidy #workspace{
    overflow:hidden !important;
  }
}