/*
 * Superficies do tema claro.
 *
 * Mantem os tokens legados como aliases para que telas existentes recebam a
 * nova hierarquia sem perder a personalizacao de cores salva pelo usuario.
 */
:root:not([data-theme-mode="dark"]) {
    --body-bg-rgb: 242, 244, 247;
    --light-rgb: 236, 239, 243;

    --surface-canvas: rgb(var(--body-bg-rgb));
    --surface-navigation: #f7f8fa;
    --surface-panel: #fcfcfd;
    --surface-subtle: rgb(var(--light-rgb));
    --surface-elevated: #fff;
    --surface-border: #dde2e8;

    --default-body-bg-color: var(--surface-canvas);
    --custom-white: var(--surface-panel);
    --default-border: var(--surface-border);
    --header-bg: var(--surface-navigation);
    --header-border-color: var(--surface-border);
    --bootstrap-card-border: var(--surface-border);
    --input-border: var(--surface-border);
    --form-control-bg: var(--surface-subtle);
    --list-hover-focus-bg: var(--surface-subtle);

    --bs-body-color: var(--default-text-color);
    --bs-body-bg: var(--surface-panel);
    --bs-body-bg-rgb: 252, 252, 253;
    --bs-secondary-bg: var(--surface-subtle);
    --bs-tertiary-bg: var(--surface-subtle);
    --bs-border-color: var(--surface-border);
    --bs-border-color-translucent: rgba(15, 23, 42, 0.12);
}

html:not([data-theme-mode="dark"])[data-menu-styles="light"] {
    --menu-bg: var(--surface-navigation);
    --menu-border-color: var(--surface-border);
}

/*
 * O titulo da pagina nunca fica solto sobre o canvas. As telas abaixo usam
 * estruturas proprias, mas compartilham a mesma superficie de cabecalho.
 */
:is(
    .orders-page-heading,
    .units-page-heading,
    .products-page-heading,
    .finance-page-heading,
    .unit-form-header,
    .order-record-header
) {
    padding: 1rem 1.1rem;
    background: var(--surface-panel, var(--custom-white));
    border: 1px solid var(--surface-border, var(--default-border));
    border-radius: 1rem;
    box-shadow: 0 0.55rem 1.5rem rgba(15, 23, 42, 0.035);
}

[data-theme-mode="dark"] :is(
    .orders-page-heading,
    .units-page-heading,
    .products-page-heading,
    .finance-page-heading,
    .unit-form-header,
    .order-record-header
) {
    box-shadow: none;
}

/* Classic e modern forcam o fundo da pagina; o canvas deve ser consistente. */
html:not([data-theme-mode="dark"]) body,
html:not([data-theme-mode="dark"]) .page {
    background-color: var(--surface-canvas);
}

/* Branco puro aparece somente quando o componente ganha foco ou elevacao. */
html:not([data-theme-mode="dark"]) .orders-search:focus-within,
html:not([data-theme-mode="dark"]) .products-search:focus-within,
html:not([data-theme-mode="dark"]) .finance-search:focus-within,
html:not([data-theme-mode="dark"]) .units-search:focus-within,
html:not([data-theme-mode="dark"]) .orders-download-select-trigger[aria-expanded="true"] {
    background: var(--surface-elevated);
}

html:not([data-theme-mode="dark"]) .orders-download-select-menu,
html:not([data-theme-mode="dark"]) .orders-download-modal .modal-content {
    background: var(--surface-elevated);
}

html:not([data-theme-mode="dark"]) .dropdown-menu,
html:not([data-theme-mode="dark"]) .modal-content,
html:not([data-theme-mode="dark"]) .offcanvas {
    background-color: var(--surface-elevated);
    border-color: var(--surface-border);
}