/* Eterano v1.20.1b — Light mode consistency hotfix
   Keep the dark Eterano sidebar by design, but make the application workspace
   and all token-based surfaces resolve correctly when Light is selected. */

/* Compatibility aliases used by newer feature modules. Several later modules
   reference these semantic tokens while the original theme only defined
   --paper/--line/--ink. Keeping them as aliases makes both themes resolve from
   one source of truth instead of falling back to dark literal colours. */
:root{
  --surface:var(--paper);
  --surface-soft:color-mix(in srgb,var(--paper) 94%,var(--accent) 6%);
  --panel:var(--paper);
  --border:var(--line);
  --text:var(--ink);
  --primary:var(--brand-blue);
}

html[data-theme="light"]{color-scheme:light}
html[data-theme="light"],
html[data-theme="light"] body{
  color:var(--ink);
  background:#f4f7fc;
}
html[data-theme="light"] body{
  background:
    radial-gradient(circle at 78% -10%,rgba(19,213,255,.10),transparent 25rem),
    linear-gradient(180deg,#f8faff 0,#f3f7fd 100%);
}

/* The app workspace must explicitly return to the light canvas after a live
   dark -> light toggle. The sidebar intentionally remains the navy brand rail. */
html[data-theme="light"] #appPage,
html[data-theme="light"] .app-main{
  color:var(--ink);
  background:
    radial-gradient(circle at 78% -10%,rgba(19,213,255,.08),transparent 25rem),
    linear-gradient(180deg,#f8faff 0,#f3f7fd 100%);
}
html[data-theme="light"] .app-main{min-height:100vh}
html[data-theme="light"] .content{color:var(--ink)}

html[data-theme="light"] .desktop-header,
html[data-theme="light"] .mobile-header{
  color:var(--ink);
  background:rgba(247,250,255,.92);
  border-color:#e1e8f3;
  box-shadow:0 7px 20px rgba(22,45,92,.035);
}
html[data-theme="light"] .desktop-header h1,
html[data-theme="light"] .mobile-header .brand-word{color:#0b1b39}
html[data-theme="light"] .language-btn,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .theme-toggle{
  color:#17325c;
  background:#fff;
  border-color:#d7e4f3;
}
html[data-theme="light"] .language-btn:hover,
html[data-theme="light"] .icon-button:hover,
html[data-theme="light"] .theme-toggle:hover{
  background:#eef6ff;
  border-color:#b9d8f7;
}

/* Reassert the established light surface contract. This protects older and
   newer modules equally when the user changes appearance without reloading. */
html[data-theme="light"] :where(
  .panel,.stat-card,.order-card,.receipt-card,.customer-card,.product-card,
  .modal,.order-detail-section,.public-form,.public-info-card,.public-product,
  .confirmation-summary,.confirmation-next,.date-suggestion,.weekly-row,
  .closed-date-row,.choice-card,.public-choice-card,.mobile-agenda-item,
  .settings-tabs-nav,.journal-entry,.invoice-card,.followup-row1160,
  .open-banking-connection,.open-banking-alert-row
){
  color:var(--ink);
  background:var(--paper);
  border-color:var(--line);
}

html[data-theme="light"] :where(input,textarea,select,.slug-field,.search-field){
  color:var(--ink);
  background:#fbfdff;
  border-color:#dbe4f1;
}
html[data-theme="light"] :where(input,textarea)::placeholder{color:#8290a6}
html[data-theme="light"] select option{color:var(--ink);background:#fff}
html[data-theme="light"] .search-field input{background:transparent}
html[data-theme="light"] input:disabled,
html[data-theme="light"] textarea:disabled,
html[data-theme="light"] select:disabled{color:#71819a}

/* Settings was where the regression was most visible. Keep its page canvas,
   navigation and business cards on the same light hierarchy. */
html[data-theme="light"] #view-settings,
html[data-theme="light"] #settingsTabsShell,
html[data-theme="light"] #settingsTabContent,
html[data-theme="light"] .settings-tab-panel{color:var(--ink)}
html[data-theme="light"] .settings-tabs-nav{
  background:#fff;
  border-color:var(--line);
  box-shadow:0 10px 28px rgba(7,27,90,.06);
}
html[data-theme="light"] .settings-tabs-nav button{color:var(--muted)}
html[data-theme="light"] .settings-tabs-nav button:hover{
  color:var(--ink);
  background:var(--surface-soft);
}
html[data-theme="light"] .settings-tab-intro h2,
html[data-theme="light"] #settingsBusinessPanel .section-heading h2,
html[data-theme="light"] #settingsBusinessPanel label{color:var(--ink)}
html[data-theme="light"] #settingsBusinessPanel>#profileForm,
html[data-theme="light"] #settingsBusinessPanel>#legalBusinessCard1153,
html[data-theme="light"] #settingsBusinessPanel>#setupLaunchCard1200{
  color:var(--ink);
  background:var(--paper)!important;
  border-color:var(--line)!important;
}
html[data-theme="light"] .legal-same-pickup1153,
html[data-theme="light"] .accountant-package-detail1150,
html[data-theme="light"] .refund-balance,
html[data-theme="light"] .stripe-account-info{
  color:var(--ink);
  background:var(--surface-soft);
  border-color:var(--line);
}

/* Newer Danish-accounting/e-invoicing modules used dark fallback literals for
   semantic variables that did not previously exist. The aliases above solve
   the root cause; these explicit light rules ensure readable contrast. */
html[data-theme="light"] .customer-einvoice1170,
html[data-theme="light"] .nemhandel-lookup-footer1171,
html[data-theme="light"] .oioubl-preview-actions1172{
  color:var(--ink);
  background:var(--paper);
  border-color:var(--line);
}
html[data-theme="light"] .einvoice-readiness-item1170,
html[data-theme="light"] .nemhandel-endpoint-list1171,
html[data-theme="light"] .nemhandel-detail-card1171,
html[data-theme="light"] .nemhandel-profile-row1171,
html[data-theme="light"] .oioubl-check1172{
  color:var(--ink);
  border-color:var(--line);
}
html[data-theme="light"] .einvoice-readiness-item1170,
html[data-theme="light"] .nemhandel-detail-card1171{background:color-mix(in srgb,var(--paper) 97%,var(--accent) 3%)}

/* Keep deliberately dark brand/code surfaces dark in Light mode. */
html[data-theme="light"] .sidebar{color:#fff}
html[data-theme="light"] .plan-card{color:#fff}
html[data-theme="light"] .oioubl-code1172{background:#071425;color:#d9eaff}