/* Thème clair : seules les couleurs changent, jamais la mise en page.
   Palette froide de la même famille que le bleu nuit du thème sombre,
   avec des bordures et des textes secondaires plus contrastés. */
html:not([data-theme='dark']) {
  --app-background: #eae0dc;
  --page: #efe8e1;
  --paper: #fcf9f8;
  --border: #ddd0ca;
  --text: #3a1f17;
  --muted: #76645d;
  --red: #b03c3c;
  --green: #3a7625;
  --olive: #9a4f12;
  --blue: #905136;
  --sidebar: #43241a;
  /* Survols centralisés : même intensité partout. */
  --danger-bg: #f8e5e5;
  --hover-surface: #f9f1ee;
  --hover-control: #f6ece8;
  --pressed: #f0e1db;
  --hover-button: #efdcd4;
  --pressed-button: #e9cfc4;
}

/* Textes : principal, secondaire et discret (hors menu latéral, qui reste foncé). */
html:not([data-theme='dark'])
  :is(
    .operations-toolbar .icon,
    .budget-cell b,
    .row-action,
    .account-table-order button,
    .account-table-favorite button,
    .envelope-rest strong
  ) {
  color: var(--text-secondary);
}
html:not([data-theme='dark'])
  :is(
    .kpi-tab.active,
    .op-name,
    .config-row > button,
    .forecast-actions > button:not(.forecast-apply),
    .allocation-editor button,
    .dialog-actions button:not(.save-button),
    #dropdown-menu button,
    .account-table-action button,
    .forecast-table button,
    input,
    select,
    textarea
  ) {
  color: var(--text);
}
html:not([data-theme='dark'])
  :is(
    .kpi-title .icon,
    .kpi-caption,
    .kpi-tab,
    .mini-row,
    .envelope-top span,
    .envelope-rest,
    .envelope-rest .icon,
    .op-sub,
    .budget-cell,
    .budget-cell .budget-extra,
    .config-note,
    .config-row > .icon,
    .config-row > span:not(.icon),
    .forecast-account > summary span,
    .dialog-heading button,
    .edit-field,
    .allocation-editor p,
    #dropdown-menu .menu-date,
    .sort-menu-heading small,
    .sort-rank,
    .sort-add,
    .empty-state,
    .empty-row td,
    .associations-kpi #account-associations,
    .account-table-name .icon,
    .app-version,
    .release-entry time,
    .auth-card p,
    .auth-card label,
    #new-user-form label,
    .user-row span,
    #dropdown-menu .menu-section-title,
    #dropdown-menu .month-filter-empty,
    #release-close,
    #import-close
  ) {
  color: var(--muted);
}
html:not([data-theme='dark']) :is(th, .accounts-table th) {
  color: var(--text-secondary);
}
html:not([data-theme='dark']) :is(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, var(--paper));
}

/* Surfaces. */
html:not([data-theme='dark'])
  :is(
    .kpi-tabs,
    .account-group h3,
    .account-group-heading,
    .forecast-group-heading,
    .accounts-table th
  ) {
  background: color-mix(in srgb, var(--app-background) 55%, var(--paper));
}
html:not([data-theme='dark']) :is(.table-scroll, .operations-frame) {
  background: var(--page);
}
html:not([data-theme='dark'])
  :is(
    .config-row,
    .forecast-account,
    .accounts-table,
    .action-list button,
    .config-row > button,
    .forecast-actions > button:not(.forecast-apply),
    .allocation-editor button,
    .dialog-actions button:not(.save-button),
    .forecast-table button
  ) {
  background: var(--paper);
}
html:not([data-theme='dark']) :is(th, .group-row td) {
  background: color-mix(in srgb, var(--app-background) 45%, var(--paper));
}
html:not([data-theme='dark']) .operations-toolbar button.active {
  background: var(--pressed);
  color: var(--accent);
}
html:not([data-theme='dark']) .column-sort.active {
  background: var(--pressed);
  color: var(--accent);
}
html:not([data-theme='dark']) .progress {
  background: var(--border);
}
html:not([data-theme='dark'])
  :is(
    .search,
    .operations-toolbar .search,
    .category-search,
    .icon-picker summary,
    .icon-picker-options,
    .icon-picker-options button,
    .icon-picker-search,
    #dropdown-menu.month-filter-menu .month-search,
    .account-table-order button,
    .account-table-favorite button,
    .account-table-action button
  ) {
  background: var(--hover-control);
}
html:not([data-theme='dark'])
  :is(
    .edit-field input,
    .edit-field select,
    .allocation-row input,
    .allocation-row select,
    .sort-rule select,
    .sort-add select,
    .account-filter select,
    #dropdown-menu .menu-date input,
    #dropdown-menu.month-filter-menu .month-search input,
    .auth-card input,
    #new-user-form input,
    .choice-trigger,
    .choice-search
  ) {
  background: var(--field);
  color: var(--text);
  border-color: var(--border);
}
html:not([data-theme='dark']) :is(.icon-picker summary, .category-search, .icon-picker-options) {
  border-color: var(--border);
}
html:not([data-theme='dark'])
  :is(
    #editor-dialog,
    #action-dialog,
    #dropdown-menu,
    #release-dialog,
    #users-dialog,
    #import-dialog
  ) {
  background: var(--paper);
  color: var(--text);
  border-color: var(--border);
}

@media (hover: hover) and (pointer: fine) {
/* États interactifs. */
html:not([data-theme='dark'])
  :is(
    tbody tr:hover,
    .config-row:hover,
    .category-group .config-row:hover,
    .accounts-table tbody tr:hover,
    .forecast-account > summary:hover,
    .envelope-card:hover,
    .search:hover,
    .category-search:hover,
    .icon-picker summary:hover,
    .icon-picker-options button:hover,
    .action-list button:hover,
    .group-row button:hover,
    .account-heading:hover,
    #release-close:hover,
    #import-close:hover
  ) {
  background: var(--hover-surface);
}
}
html:not([data-theme='dark'])
  :is(
    .forecast-account > summary:active,
    .envelope-card:active,
    .icon-picker-options button:active,
    .action-list button:active,
    .group-row button:active,
    #release-close:active,
    #import-close:active
  ) {
  background: var(--pressed);
}
@media (hover: hover) and (pointer: fine) {
html:not([data-theme='dark'])
  :is(
    .operations-toolbar button:not(.active):hover,
    .month-controls button:hover,
    #dropdown-menu button:hover,
    .row-action:hover,
    .panel-add:hover,
    .kpi-tab:not(.active):hover,
    .config-row > button:hover,
    .forecast-actions > button:not(.forecast-apply):hover,
    .forecast-table button:hover,
    .account-table-action button:hover,
    .config-toolbar button:hover,
    .account-table-order button:hover:not(:disabled),
    .account-table-favorite button:hover,
    .choice-options button:hover,
    .category-order button:hover:not(:disabled),
    .dialog-actions button:not(.save-button):hover,
    .month-fallback-menu button:hover
  ) {
  background: var(--hover-control);
}
}
html:not([data-theme='dark'])
  :is(
    .operations-toolbar button:not(.active):active,
    .month-controls button:active,
    #dropdown-menu button:active,
    .row-action:active,
    .panel-add:active,
    .kpi-tab:not(.active):active,
    .config-row > button:active,
    .forecast-actions > button:not(.forecast-apply):active,
    .forecast-table button:active,
    .account-table-action button:active,
    .config-toolbar button:active,
    .account-table-order button:active:not(:disabled),
    .account-table-favorite button:active,
    .choice-options button:active,
    .category-order button:active:not(:disabled),
    .dialog-actions button:not(.save-button):active,
    .month-fallback-menu button:active
  ) {
  background: var(--pressed);
}
@media (hover: hover) and (pointer: fine) {
html:not([data-theme='dark']) .operations-toolbar button.active:hover {
  background: var(--hover-button);
}
}
html:not([data-theme='dark']) .operations-toolbar button.active:active {
  background: var(--pressed-button);
}
html:not([data-theme='dark']) :is(.search:focus-within, .category-search:focus-within) {
  background: var(--field);
}
html:not([data-theme='dark'])
  :is(
    #dropdown-menu button[aria-checked='true'],
    .icon-picker-options button[aria-selected='true'],
    .action-list button[aria-current='true'],
    .choice-options button[aria-selected='true']
  ) {
  background: var(--pressed);
}

/* Menu latéral : même bleu nuit que le thème sombre. */
html:not([data-theme='dark']) .sidebar .nav-item.active {
  background: var(--nav-active);
}
@media (hover: hover) and (pointer: fine) {
html:not([data-theme='dark']) .sidebar .nav-item:not(.active):hover {
  background: var(--nav-hover);
}
}
html:not([data-theme='dark']) .sidebar .nav-item:not(.active):active {
  background: var(--nav-pressed);
}
html:not([data-theme='dark']) .sidebar .user-section {
  border-top-color: var(--nav-line);
}
html:not([data-theme='dark']) .sidebar .nav-section {
  border-bottom-color: var(--nav-line);
}