/*
 * FoodBot — prévia visual baseada no Tabler 1.5.1 (MIT)
 * Esta folha altera somente apresentação. Nenhuma regra funcional depende dela.
 * Projeto: https://github.com/tabler/tabler
 */

:root {
    --tblr-primary: #e03146;
    --tblr-primary-rgb: 224, 49, 70;
    --food-primary: #e03146;
    --food-primary-dark: #c2253a;
    --food-primary-light: #fff0f2;
    --food-orange: #f76707;
    --food-blue: #206bc4;
    --food-green: #2fb344;
    --food-yellow: #f59f00;
    --food-purple: #ae3ec9;
    --food-sidebar: #182433;
    --food-sidebar-soft: #243447;
    --food-bg: #f4f6fa;
    --food-card: #ffffff;
    --food-border: #e4e7ec;
    --food-text: #182433;
    --food-muted: #667382;
    --food-radius: 12px;
    --food-shadow: 0 1px 2px rgba(24, 36, 51, .04), 0 8px 24px rgba(24, 36, 51, .06);
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 76px;
}

html {
    min-width: 320px;
    background: var(--food-bg);
    color-scheme: light;
}

*,
*::before,
*::after {
    font-family: var(--tblr-font-sans-serif, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

body {
    min-height: 100vh;
    background: var(--food-bg);
    color: var(--food-text);
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

body.modal-open {
    overflow: hidden;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(var(--tblr-primary-rgb), .2);
    outline-offset: 2px;
}

/* Estrutura padrão do painel */

.app-layout {
    min-height: 100vh;
    background: var(--food-bg);
}

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    padding: 18px 14px;
    border-right: 1px solid rgba(255, 255, 255, .08);
    background: var(--food-sidebar);
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
}

.sidebar-top {
    min-height: 52px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.logo {
    gap: 10px;
}

.logo-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: var(--food-primary);
    box-shadow: none;
    font-size: 21px;
}

.logo h2 {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.logo span {
    color: #8f9baa;
    font-size: 11px;
}

.sidebar-toggle {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #dce2e8;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, .11);
    color: #fff;
}

body.sidebar-collapsed .sidebar-toggle {
    background: var(--food-primary);
}

.nav-btn {
    min-height: 42px;
    gap: 11px;
    margin-bottom: 4px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #aab4c0;
    font-size: 13px;
    font-weight: 500;
}

.nav-btn svg {
    width: 18px;
    height: 18px;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.nav-btn.active {
    border-color: rgba(255, 255, 255, .08);
    background: var(--food-primary);
    color: #fff;
    box-shadow: none;
}

.logout-btn {
    margin-top: 16px;
    color: #ffb2bc;
}

.main {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    padding: clamp(16px, 2.2vw, 30px);
}

/* Cabeçalhos */

.topbar {
    min-height: 92px;
    margin-bottom: 20px;
    padding: 20px 22px;
    border: 1px solid var(--food-border);
    border-radius: var(--food-radius);
    background: var(--food-card);
    box-shadow: var(--food-shadow);
    flex-wrap: wrap;
}

.topbar > :first-child {
    min-width: 0;
    flex: 1 1 250px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.topbar h1 {
    color: var(--food-text);
    font-size: clamp(23px, 2.8vw, 29px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.topbar p {
    margin-top: 5px;
    color: var(--food-muted);
    font-size: 13px;
}

.live-badge {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #bfe6c6;
    border-radius: 999px;
    background: #edf9ef;
    color: #247c34;
    font-size: 12px;
    font-weight: 600;
}

.live-badge span {
    width: 8px;
    height: 8px;
    background: var(--food-green);
}

/* Configurações globais */

.settings-nav-btn {
    appearance: none;
}

.settings-trigger-floating {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    z-index: 250;
    min-height: 39px;
    padding: 8px 12px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    background: #fff;
    color: #3f4b59;
    box-shadow: 0 4px 16px rgba(24, 36, 51, .12);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

/* Compatibilidade com a prévia anterior; o seletor não é mais injetado. */

.theme-picker {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 11px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    background: #fff;
    color: #3f4b59;
    box-shadow: 0 1px 2px rgba(24, 36, 51, .04);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.theme-picker-label {
    color: var(--food-muted);
}

.theme-picker-select {
    min-height: 27px;
    padding: 2px 28px 2px 8px;
    border: 0;
    border-radius: 6px;
    background-color: #f4f6f8;
    color: var(--food-text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    outline: 0;
}

.theme-picker-select:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .16);
}

.theme-picker-floating {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    z-index: 400;
}

/* Resumo */

.summary-grid {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.summary-card {
    position: relative;
    min-height: 122px;
    padding: 19px;
    border: 1px solid var(--food-border);
    border-top: 3px solid var(--food-blue);
    border-left: 1px solid var(--food-border);
    border-radius: var(--food-radius);
    background: var(--food-card);
    box-shadow: var(--food-shadow);
}

.summary-card.green {
    border-top-color: var(--food-green);
}

.summary-card.money {
    border-top-color: var(--food-purple);
}

.summary-card.orange {
    border-top-color: var(--food-yellow);
}

.summary-card p {
    color: var(--food-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.summary-card h2 {
    margin-top: 12px;
    color: var(--food-text);
    font-size: clamp(25px, 3vw, 31px);
    font-weight: 700;
    letter-spacing: -.035em;
}

/* Gráficos */

.charts-grid {
    gap: 14px;
    margin-bottom: 26px;
}

.chart-card,
.panel-card {
    border: 1px solid var(--food-border);
    border-radius: var(--food-radius);
    background: var(--food-card);
    box-shadow: var(--food-shadow);
}

.chart-card {
    padding: 20px;
}

.chart-card h3,
.panel-card h2 {
    color: var(--food-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.chart-card h3 {
    margin-bottom: 18px;
    padding-bottom: 13px;
    border-bottom: 1px solid #edf0f3;
}

.orders-header {
    margin: 0 0 14px;
    padding-inline: 2px;
}

.orders-header h2 {
    color: var(--food-text);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.orders-header p {
    margin-top: 3px;
    color: var(--food-muted);
    font-size: 12px;
}

/* Pedidos */

.orders-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
    gap: 14px;
}

.order-card {
    padding: 18px;
    border: 1px solid var(--food-border);
    border-left: 4px solid #98a2ad;
    border-radius: var(--food-radius);
    background: var(--food-card);
    box-shadow: var(--food-shadow);
}

.order-card.pending { border-left-color: var(--food-yellow); }
.order-card.paid { border-left-color: var(--food-green); }
.order-card.preparing { border-left-color: var(--food-blue); }
.order-card.ready { border-left-color: #0ca678; }
.order-card.awaiting_address { border-left-color: var(--food-purple); }
.order-card.out_for_delivery { border-left-color: var(--food-orange); }
.order-card.delivered { border-left-color: #667382; }
.order-card.cancelled { border-left-color: #e03146; }

.order-card h3 {
    margin-bottom: 13px;
    color: var(--food-text);
    font-size: 16px;
    font-weight: 700;
}

.order-card p {
    margin-bottom: 7px;
    color: #566271;
    font-size: 12px;
    line-height: 1.45;
}

.order-card p strong {
    color: #303b47;
    font-weight: 600;
}

.status-pill,
.payment-pill,
.role-pill,
.active-pill,
.inactive-pill {
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}

.status-pill {
    border-color: #dfe3e8;
    background: #f2f4f7;
    color: #4d5967;
}

.payment-pill {
    border-color: #d9e5f5;
    background: #edf4fc;
    color: #245a98;
}

.address-box {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #f1d39f;
    border-radius: 9px;
    background: #fff8e8;
    color: #8a5a00;
    font-size: 12px;
}

.order-actions {
    gap: 7px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #edf0f3;
}

/* Botões compatíveis com o padrão Tabler */

.primary-btn,
.secondary-btn,
.danger-btn {
    min-height: 39px;
    padding: 9px 13px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

.primary-btn {
    border: 1px solid var(--food-primary-dark);
    background: var(--food-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(24, 36, 51, .08);
}

.primary-btn:hover {
    border-color: #ad1f32;
    background: var(--food-primary-dark);
}

.secondary-btn {
    border: 1px solid #d9dde3;
    background: #fff;
    color: #3f4b59;
}

.secondary-btn:hover {
    border-color: #c9ced6;
    background: #f7f8fa;
}

.danger-btn {
    border: 1px solid #f0c4ca;
    background: #fff0f2;
    color: #b4233a;
}

.danger-btn:hover {
    border-color: #e8abb4;
    background: #ffe4e8;
}

.primary-btn:disabled,
.secondary-btn:disabled,
.danger-btn:disabled {
    cursor: wait;
    opacity: .65;
}

/* Produtos */

.product-toolbar {
    margin-bottom: 15px;
}

.product-toolbar input {
    width: min(460px, 100%);
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(24, 36, 51, .03);
    color: var(--food-text);
}

.product-toolbar input:focus {
    border-color: var(--food-primary);
    box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .11);
}

.products-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: 14px;
}

.product-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--food-border);
    border-radius: var(--food-radius);
    background: var(--food-card);
    box-shadow: var(--food-shadow);
}

.product-image,
.product-placeholder {
    height: 170px;
    margin-bottom: 12px;
    border: 1px solid #edf0f3;
    border-radius: 9px;
    background: #f1f3f5;
}

.product-card h3 {
    margin-bottom: 6px;
    color: var(--food-text);
    font-size: 15px;
    font-weight: 700;
}

.product-card p {
    margin-bottom: 5px;
    color: var(--food-muted);
    font-size: 11px;
    line-height: 1.4;
}

.product-category strong {
    color: #46515e;
}

.product-price {
    margin-top: 9px;
}

.product-price strong {
    color: var(--food-primary-dark);
    font-size: 17px;
    font-weight: 700;
}

.product-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

.product-actions button {
    width: 100%;
}

.product-message-card {
    padding: 20px;
}

/* Modal e campos */

.modal {
    background: rgba(24, 36, 51, .55);
}

.modal-content {
    position: relative;
    max-width: 520px;
    padding: 22px;
    border: 1px solid var(--food-border);
    border-radius: var(--food-radius);
    background: #fff;
    box-shadow: 0 24px 64px rgba(24, 36, 51, .2);
}

.modal-header {
    position: relative;
    align-items: flex-start;
    min-height: 36px;
    padding-right: 42px;
    margin-bottom: 17px;
    padding-bottom: 13px;
    border-bottom: 1px solid #edf0f3;
}

.modal-header h2 {
    color: var(--food-text);
    font-size: 19px;
    font-weight: 700;
}

.modal-header p {
    margin-top: 4px;
    color: var(--food-muted);
    font-size: 12px;
    line-height: 1.4;
}

.modal-header button {
    width: 34px;
    height: 34px;
    border: 1px solid #e0e4e9;
    border-radius: 7px;
    background: #fff;
    color: #65717f;
    display: grid;
    font-size: 23px;
    place-items: center;
}

.modal-header .modal-close {
    position: absolute;
    top: -7px;
    right: -7px;
    margin: 0;
    padding: 0;
}

.modal-content label,
.user-form label,
.setup-form label {
    color: #3e4a57;
    font-size: 12px;
    font-weight: 600;
}

.modal-content input,
.modal-content textarea,
.modal-content select,
.user-form input,
.user-form select,
.setup-form input,
.login-card input {
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    background: #fff;
    color: var(--food-text);
}

.modal-content textarea {
    min-height: 92px;
}

.modal-content-compact {
    max-width: 440px;
}

.modal-form select {
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    background: #fff;
    color: var(--food-text);
}

.modal-form small,
.form-hint {
    display: block;
    margin-top: 6px;
    color: var(--food-muted);
    font-size: 11px;
    line-height: 1.45;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
}

.confirm-text {
    color: var(--food-text);
    font-size: 13px;
    line-height: 1.55;
}

/* Janela de configurações */

.settings-modal-content {
    max-width: 560px;
}

.settings-section {
    padding: 16px;
    border: 1px solid var(--food-border);
    border-radius: 10px;
    background: #fafbfc;
}

.settings-section + .settings-section {
    margin-top: 12px;
}

.settings-section-heading h3 {
    color: var(--food-text);
    font-size: 14px;
    font-weight: 700;
}

.settings-section-heading p,
.settings-section > small {
    color: var(--food-muted);
    font-size: 11px;
    line-height: 1.45;
}

.settings-theme-field {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 13px 0 6px !important;
}

.settings-theme-field select {
    width: min(210px, 54%);
    min-height: 39px;
    padding: 7px 10px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    background: #fff;
    color: var(--food-text);
}

.settings-links {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.settings-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--food-border);
    border-radius: 9px;
    background: #fff;
    color: var(--food-text);
    text-decoration: none;
}

.settings-link:hover {
    border-color: #d9aeb5;
    background: var(--food-primary-light);
    color: var(--food-primary-dark);
}

.settings-link-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    border-radius: 9px;
    background: var(--food-primary-light);
    place-items: center;
}

.settings-link strong,
.settings-link small {
    display: block;
}

.settings-link strong {
    font-size: 13px;
}

.settings-link small {
    margin-top: 2px;
    color: var(--food-muted);
    font-size: 10px;
}

.modal-content input:focus,
.modal-content textarea:focus,
.modal-content select:focus,
.user-form input:focus,
.user-form select:focus,
.user-search input:focus,
.account-form input:focus,
.setup-form input:focus,
.login-card input:focus {
    border-color: var(--food-primary);
    box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .11);
}

/* Usuários */

.user-management-grid {
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 16px;
}

.panel-card {
    padding: 21px;
}

.card-subtitle {
    margin-top: 5px;
    color: var(--food-muted);
    font-size: 12px;
    line-height: 1.45;
}

.user-form {
    margin-top: 18px;
}

.user-card {
    display: block;
    padding: 14px;
    border: 1px solid var(--food-border);
    border-radius: 9px;
    background: #fff;
}

.user-card-inactive {
    opacity: .78;
}

.user-card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.user-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.self-pill {
    padding: 3px 7px;
    border: 1px solid #d7c7f2;
    border-radius: 999px;
    background: #f4effd;
    color: #6742a0;
    font-size: 9px;
    font-weight: 700;
}

.user-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--food-border);
}

.user-card-actions .action-btn {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 10px;
}

.user-card-actions button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.user-search {
    display: block;
    margin-bottom: 10px;
    color: #3e4a57;
    font-size: 11px;
    font-weight: 600;
}

.user-search span {
    display: block;
    margin-bottom: 5px;
}

.user-search input {
    width: 100%;
    min-height: 41px;
    padding: 9px 11px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    background: #fff;
    color: var(--food-text);
}

/* Conta conectada */

.account-grid {
    display: grid;
    grid-template-columns: minmax(240px, .7fr) repeat(2, minmax(290px, 1fr));
    gap: 16px;
    align-items: start;
}

.account-summary-card {
    text-align: center;
}

.account-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    margin: 2px auto 14px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--food-primary), #ff6b35);
    color: #fff;
    box-shadow: 0 9px 22px rgba(var(--tblr-primary-rgb), .2);
    font-size: 28px;
    font-weight: 800;
    place-items: center;
}

.account-badges {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.account-metadata {
    display: grid;
    gap: 9px;
    margin-top: 18px;
    text-align: left;
}

.account-metadata > div {
    padding: 10px;
    border: 1px solid var(--food-border);
    border-radius: 8px;
    background: #fafbfc;
}

.account-metadata dt {
    color: var(--food-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.account-metadata dd {
    margin-top: 3px;
    color: var(--food-text);
    font-size: 11px;
}

.account-form {
    margin-top: 17px;
}

.account-form label {
    display: block;
    margin: 12px 0 6px;
    color: #3e4a57;
    font-size: 12px;
    font-weight: 600;
}

.account-form input {
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    background: #fff;
    color: var(--food-text);
}

.account-form small {
    display: block;
    margin-top: 5px;
    color: var(--food-muted);
    font-size: 10px;
}

.account-form .primary-btn {
    width: 100%;
    margin-top: 6px;
}

.user-details h3 {
    color: var(--food-text);
    font-size: 14px;
    font-weight: 700;
}

.user-details p {
    margin-block: 3px;
    color: #566271;
    font-size: 12px;
}

.user-details small {
    color: #7c8794;
    font-size: 10px;
}

.role-pill {
    border-color: #d9e5f5;
    background: #edf4fc;
    color: #245a98;
}

.role-admin {
    border-color: #f0c4ca;
    background: #fff0f2;
    color: #b4233a;
}

.role-manager {
    border-color: #f2d6b1;
    background: #fff6e9;
    color: #98530e;
}

.active-pill {
    border-color: #bfe6c6;
    background: #edf9ef;
    color: #247c34;
}

.inactive-pill {
    border-color: #e0e3e7;
    background: #f2f4f6;
    color: #5d6976;
}

.empty-state {
    border-color: #d9dde3;
    border-radius: 9px;
    background: #fafbfc;
    color: var(--food-muted);
}

.form-message.success {
    color: #247c34;
}

.form-message.error {
    color: #b4233a;
}

/* Login e configuração inicial */

.login-body,
.setup-body {
    min-height: 100vh;
    padding: 20px;
    background: #edf1f5;
}

.login-card,
.setup-card {
    width: min(410px, 100%);
    padding: 30px;
    border: 1px solid var(--food-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(24, 36, 51, .11);
}

.setup-card {
    width: min(500px, 100%);
}

.brand {
    margin-bottom: 24px;
}

.brand-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 11px;
    background: var(--food-primary);
    color: #fff;
    font-size: 27px;
    place-items: center;
}

.brand h1 {
    margin: 0;
    color: var(--food-text);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.brand p {
    margin-top: 6px;
    color: var(--food-muted);
    font-size: 12px;
}

.login-card input {
    margin-bottom: 12px;
}

.login-card button,
.setup-form button {
    min-height: 43px;
    border: 1px solid var(--food-primary-dark);
    border-radius: 8px;
    background: var(--food-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.login-card button:hover,
.setup-form button:hover {
    background: var(--food-primary-dark);
}

#loginMessage {
    min-height: 18px;
    margin-top: 10px;
    color: var(--food-primary-dark);
    font-size: 11px;
}

.setup-status {
    border: 1px solid var(--food-border);
    border-radius: 8px;
    background: #f7f8fa;
    color: #46515e;
}

.setup-status.ready {
    border-color: #c6daf2;
    background: #edf4fc;
    color: #245a98;
}

.setup-status.success {
    border-color: #bfe6c6;
    background: #edf9ef;
    color: #247c34;
}

.setup-status.warning {
    border-color: #f1d39f;
    background: #fff8e8;
    color: #8a5a00;
}

.setup-status.error {
    border-color: #f0c4ca;
    background: #fff0f2;
    color: #b4233a;
}

.setup-login-link {
    color: var(--food-primary-dark);
    font-size: 12px;
}

/* Responsividade: a mesma linguagem visual em desktop e mobile */

@media (max-width: 1180px) {
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-summary-card {
        grid-column: 1 / -1;
    }
}

/* Desktop: os dois gráficos ocupam caixas com o mesmo tamanho visual.
   O mobile continua usando as regras específicas abaixo. */
@media (min-width: 861px) {
    .charts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-chart-card,
    .status-chart-card {
        height: var(--status-chart-height);
    }

    .sales-chart-card canvas,
    .status-chart-card canvas {
        max-height: calc(var(--status-chart-height) - 70px);
    }
}

@media (max-width: 860px) {
    body.has-mobile-navigation {
        padding-bottom: calc(98px + env(safe-area-inset-bottom));
    }

    .app-layout {
        display: block;
    }

    .main {
        padding: 13px 13px calc(20px + env(safe-area-inset-bottom));
    }

    .topbar {
        min-height: 0;
        margin-bottom: 13px;
        padding: 18px;
    }

    body.has-mobile-navigation #paymentToast,
    body.has-mobile-navigation #newOrderToast,
    body.has-mobile-navigation #panelToast {
        right: 12px !important;
        bottom: calc(92px + env(safe-area-inset-bottom)) !important;
        left: 12px !important;
        max-width: none !important;
    }

    .topbar h1 {
        font-size: 23px;
    }

    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-bottom: 14px;
    }

    .summary-card {
        min-height: 102px;
        height: auto;
        padding: 13px;
        border-radius: 10px;
    }

    .summary-card p {
        font-size: 10px;
    }

    .summary-card h2 {
        margin-top: 8px;
        font-size: clamp(19px, 5vw, 24px);
    }

    .charts-grid {
        gap: 11px;
    }

    .chart-card,
    .panel-card,
    .order-card {
        border-radius: 10px;
    }

    .mobile-floating-nav {
        width: min(520px, calc(100% - 18px));
        min-height: 70px;
        padding: 7px 8px;
        border: 1px solid #dfe3e8;
        border-radius: 16px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 12px 32px rgba(24, 36, 51, .18);
    }

    .mobile-nav-item {
        color: #6c7784;
    }

    .mobile-nav-icon {
        width: 38px;
        height: 34px;
        border-radius: 8px;
    }

    .mobile-nav-label {
        font-size: 9px;
        font-weight: 600;
    }

    .mobile-nav-item.active {
        color: var(--food-primary-dark);
    }

    .mobile-nav-item.active .mobile-nav-icon {
        background: var(--food-primary-light);
    }

    .mobile-nav-orders .mobile-nav-icon,
    .mobile-nav-orders.active .mobile-nav-icon {
        width: 54px;
        height: 54px;
        border: 4px solid var(--food-bg);
        background: var(--food-primary);
        color: #fff;
        box-shadow: 0 8px 20px rgba(var(--tblr-primary-rgb), .3);
    }

    .mobile-nav-logout {
        color: #a12a3b;
    }

    .mobile-orders-backdrop {
        background: rgba(24, 36, 51, .48);
    }

    .mobile-orders-menu {
        bottom: calc(94px + env(safe-area-inset-bottom));
        padding: 17px;
        border: 1px solid #dfe3e8;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 18px 48px rgba(24, 36, 51, .22);
    }

    .mobile-orders-header strong {
        color: var(--food-text);
        font-size: 17px;
        font-weight: 700;
    }

    .mobile-orders-header span {
        color: var(--food-muted);
        font-size: 11px;
    }

    .mobile-orders-header button {
        border: 1px solid #dfe3e8;
        border-radius: 8px;
        background: #fff;
        color: #566271;
    }

    .mobile-order-filter {
        min-height: 56px;
        border: 1px solid #e1e5ea;
        border-radius: 9px;
        background: #f8f9fb;
        color: #46515e;
    }

    .mobile-order-filter > span {
        border: 1px solid #e1e5ea;
        border-radius: 8px;
        background: #fff;
    }

    .mobile-order-filter.active {
        border-color: #efbdc4;
        background: var(--food-primary-light);
        color: var(--food-primary-dark);
    }

    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }

    .product-card {
        padding: 9px;
        border-radius: 10px;
    }

    .product-image,
    .product-placeholder {
        height: clamp(104px, 18vw, 145px);
        border-radius: 7px;
    }

    .user-management-grid {
        grid-template-columns: 1fr;
    }

    .account-grid {
        grid-template-columns: 1fr;
    }

    .account-summary-card {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    .main {
        padding-inline: 9px;
    }

    .topbar {
        gap: 10px;
        padding: 15px;
        border-radius: 10px;
    }

    .topbar h1 {
        font-size: 21px;
    }

    .topbar p {
        font-size: 11px;
    }

    .topbar > .primary-btn {
        width: 100%;
    }

    .theme-picker {
        margin-left: auto;
    }

    .theme-picker-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .theme-picker-floating {
        top: max(9px, env(safe-area-inset-top));
        right: 9px;
    }

    .settings-trigger-floating {
        top: max(9px, env(safe-area-inset-top));
        right: 9px;
    }

    .settings-theme-field {
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
    }

    .settings-theme-field select {
        width: 100%;
    }

    .summary-grid {
        gap: 7px;
    }

    .summary-card {
        min-height: 91px;
        padding: 10px;
        border-radius: 9px;
    }

    .summary-card h2 {
        font-size: clamp(17px, 5.2vw, 21px);
    }

    .chart-card {
        padding: 14px;
        border-radius: 10px;
    }

    .chart-card h3 {
        font-size: 14px;
    }

    .orders-grid {
        gap: 9px;
    }

    .order-card {
        padding: 13px;
    }

    .product-toolbar input {
        min-height: 41px;
        font-size: 12px;
    }

    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .product-card {
        padding: 6px;
        border-radius: 8px;
    }

    .product-image,
    .product-placeholder {
        height: clamp(74px, 22vw, 106px);
        margin-bottom: 6px;
        border-radius: 6px;
    }

    .product-card h3 {
        min-height: 27px;
        margin-bottom: 3px;
        display: -webkit-box;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.2;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .product-card .product-category,
    .product-card .product-description {
        display: none;
    }

    .product-price {
        margin-top: 3px;
    }

    .product-price strong {
        font-size: 11px;
        white-space: nowrap;
    }

    .product-actions {
        gap: 3px;
        margin-top: 6px;
    }

    .product-actions .secondary-btn,
    .product-actions .danger-btn {
        min-height: 27px;
        padding: 4px 1px;
        border-radius: 5px;
        font-size: 8px;
    }

    .panel-card {
        padding: 17px;
    }

    .user-card-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .user-badges {
        justify-content: flex-start;
    }

    .user-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-card-actions .action-btn {
        width: 100%;
    }

    .modal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .modal-actions button {
        width: 100%;
    }

    .modal {
        padding: 8px;
    }

    .modal-content {
        padding: 18px;
        border-radius: 12px 12px 0 0;
    }

    .login-card,
    .setup-card {
        padding: 24px 21px;
        border-radius: 12px;
    }

    .brand h1 {
        font-size: 22px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .summary-card,
    .chart-card,
    .order-card,
    .product-card,
    .panel-card,
    .user-card {
        transition: border-color .18s ease, box-shadow .18s ease;
    }

    .summary-card:hover,
    .chart-card:hover,
    .order-card:hover,
    .product-card:hover,
    .panel-card:hover,
    .user-card:hover {
        border-color: #d5dae1;
        box-shadow: 0 2px 4px rgba(24, 36, 51, .04), 0 12px 28px rgba(24, 36, 51, .08);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Tema escuro — mantém a mesma hierarquia visual do tema claro */

html[data-food-theme="dark"] {
    --food-primary-light: #3a1820;
    --food-sidebar: #0b1220;
    --food-sidebar-soft: #172334;
    --food-bg: #0f1724;
    --food-card: #182433;
    --food-border: #2c3a4b;
    --food-text: #f2f5f8;
    --food-muted: #9eabb9;
    --food-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 30px rgba(0, 0, 0, .18);
    --bg: #0f1724;
    --card: #182433;
    --text: #f2f5f8;
    --muted: #9eabb9;
    --tblr-body-bg: #0f1724;
    --tblr-body-color: #dce5ee;
    --tblr-card-bg: #182433;
    --tblr-border-color: #2c3a4b;
    --tblr-secondary-color: #9eabb9;
    --tblr-tertiary-bg: #202d3c;
    background: var(--food-bg);
    color-scheme: dark;
}

html[data-food-theme="dark"] body,
html[data-food-theme="dark"] .app-layout,
html[data-food-theme="dark"] .login-body,
html[data-food-theme="dark"] .setup-body {
    background: var(--food-bg);
    color: var(--food-text);
}

html[data-food-theme="dark"] .chart-card h3,
html[data-food-theme="dark"] .modal-header,
html[data-food-theme="dark"] .order-actions {
    border-color: var(--food-border);
}

html[data-food-theme="dark"] .order-card p,
html[data-food-theme="dark"] .user-details p,
html[data-food-theme="dark"] .product-card p {
    color: #b8c3ce;
}

html[data-food-theme="dark"] .order-card p strong,
html[data-food-theme="dark"] .product-category strong,
html[data-food-theme="dark"] .modal-content label,
html[data-food-theme="dark"] .user-form label,
html[data-food-theme="dark"] .setup-form label {
    color: #dce5ee;
}

html[data-food-theme="dark"] .status-pill,
html[data-food-theme="dark"] .inactive-pill {
    border-color: #465568;
    background: #263445;
    color: #d8e1ea;
}

html[data-food-theme="dark"] .payment-pill,
html[data-food-theme="dark"] .role-pill,
html[data-food-theme="dark"] .setup-status.ready {
    border-color: #315d8f;
    background: #172e49;
    color: #91c5ff;
}

html[data-food-theme="dark"] .role-admin,
html[data-food-theme="dark"] .setup-status.error {
    border-color: #713744;
    background: #3a1820;
    color: #ff9dad;
}

html[data-food-theme="dark"] .role-manager,
html[data-food-theme="dark"] .setup-status.warning,
html[data-food-theme="dark"] .address-box {
    border-color: #6d5123;
    background: #352a17;
    color: #f5c46d;
}

html[data-food-theme="dark"] .active-pill,
html[data-food-theme="dark"] .setup-status.success,
html[data-food-theme="dark"] .live-badge {
    border-color: #31623c;
    background: #16321f;
    color: #8bd49a;
}

html[data-food-theme="dark"] .secondary-btn,
html[data-food-theme="dark"] .modal-header button,
html[data-food-theme="dark"] .theme-picker,
html[data-food-theme="dark"] .settings-trigger-floating {
    border-color: #3b4a5c;
    background: #202d3c;
    color: #e3eaf1;
}

html[data-food-theme="dark"] .secondary-btn:hover,
html[data-food-theme="dark"] .modal-header button:hover {
    border-color: #526277;
    background: #29384a;
}

html[data-food-theme="dark"] .danger-btn {
    border-color: #713744;
    background: #3a1820;
    color: #ff9dad;
}

html[data-food-theme="dark"] .danger-btn:hover {
    border-color: #914554;
    background: #492029;
}

html[data-food-theme="dark"] .product-toolbar input,
html[data-food-theme="dark"] .modal-content input,
html[data-food-theme="dark"] .modal-content textarea,
html[data-food-theme="dark"] .modal-content select,
html[data-food-theme="dark"] .user-form input,
html[data-food-theme="dark"] .user-form select,
html[data-food-theme="dark"] .user-search input,
html[data-food-theme="dark"] .account-form input,
html[data-food-theme="dark"] .setup-form input,
html[data-food-theme="dark"] .login-card input,
html[data-food-theme="dark"] .theme-picker-select {
    border-color: #3b4a5c;
    background-color: #101a28;
    color: var(--food-text);
}

html[data-food-theme="dark"] input::placeholder,
html[data-food-theme="dark"] textarea::placeholder {
    color: #7f8c9a;
    opacity: 1;
}

html[data-food-theme="dark"] input::file-selector-button {
    border: 0;
    border-right: 1px solid #3b4a5c;
    background: #202d3c;
    color: #dce5ee;
}

html[data-food-theme="dark"] .product-image,
html[data-food-theme="dark"] .product-placeholder,
html[data-food-theme="dark"] .empty-state,
html[data-food-theme="dark"] .setup-status {
    border-color: var(--food-border);
    background: #111c2a;
    color: var(--food-muted);
}

html[data-food-theme="dark"] .modal-content,
html[data-food-theme="dark"] .user-card,
html[data-food-theme="dark"] .login-card,
html[data-food-theme="dark"] .setup-card {
    background: var(--food-card);
}

html[data-food-theme="dark"] .settings-section,
html[data-food-theme="dark"] .account-metadata > div {
    border-color: var(--food-border);
    background: #111c2a;
}

html[data-food-theme="dark"] .settings-link {
    border-color: var(--food-border);
    background: #182433;
    color: var(--food-text);
}

html[data-food-theme="dark"] .settings-link:hover {
    border-color: #873846;
    background: var(--food-primary-light);
    color: #ff9dad;
}

html[data-food-theme="dark"] .settings-theme-field select {
    border-color: #3b4a5c;
    background: #101a28;
    color: var(--food-text);
}

html[data-food-theme="dark"] .user-search,
html[data-food-theme="dark"] .account-form label {
    color: #dce5ee;
}

html[data-food-theme="dark"] .self-pill {
    border-color: #534177;
    background: #2b2140;
    color: #cbb3f5;
}

html[data-food-theme="dark"] .product-price strong,
html[data-food-theme="dark"] .setup-login-link,
html[data-food-theme="dark"] #loginMessage {
    color: #ff91a0;
}

html[data-food-theme="dark"] .mobile-floating-nav {
    border-color: #334255;
    background: rgba(24, 36, 51, .97);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
}

html[data-food-theme="dark"] .mobile-nav-item {
    color: #9eabb9;
}

html[data-food-theme="dark"] .mobile-nav-item.active {
    color: #ff91a0;
}

html[data-food-theme="dark"] .mobile-orders-menu {
    border-color: #334255;
    background: var(--food-card);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}

html[data-food-theme="dark"] .mobile-orders-header button,
html[data-food-theme="dark"] .mobile-order-filter,
html[data-food-theme="dark"] .mobile-order-filter > span {
    border-color: #3b4a5c;
    background: #111c2a;
    color: #c6d0da;
}

html[data-food-theme="dark"] .mobile-order-filter.active {
    border-color: #873846;
    background: #3a1820;
    color: #ff9dad;
}

html[data-food-theme="dark"] .mobile-nav-logout {
    color: #ff9dad;
}

@media (hover: hover) and (pointer: fine) {
    html[data-food-theme="dark"] .summary-card:hover,
    html[data-food-theme="dark"] .chart-card:hover,
    html[data-food-theme="dark"] .order-card:hover,
    html[data-food-theme="dark"] .product-card:hover,
    html[data-food-theme="dark"] .panel-card:hover,
    html[data-food-theme="dark"] .user-card:hover {
        border-color: #435266;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 12px 28px rgba(0, 0, 0, .25);
    }
}

/* ===== Ajustes v1.2.0-preview.4: configurações de notificações e mobile ===== */

.settings-modal-content {
    width: min(620px, 100%);
}

.settings-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px;
    border: 1px solid var(--food-border);
    border-radius: 10px;
    background: #f4f6f8;
    overflow-x: auto;
    scrollbar-width: thin;
}

.settings-tab {
    min-height: 38px;
    flex: 1 0 auto;
    padding: 8px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--food-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.settings-tab:hover {
    color: var(--food-text);
    background: rgba(255, 255, 255, .65);
}

.settings-tab.active {
    background: #fff;
    color: var(--food-primary-dark);
    box-shadow: 0 1px 4px rgba(24, 36, 51, .08);
}

.settings-tab-panel[hidden] {
    display: none !important;
}

.notification-sound-row,
.notification-file-field,
.notification-volume-field {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 13px 0 0 !important;
    padding: 13px;
    border: 1px solid var(--food-border);
    border-radius: 9px;
    background: #fff;
}

.notification-sound-row > div,
.notification-file-field > div:first-child,
.notification-volume-field > span:first-child {
    min-width: 0;
}

.notification-sound-row strong,
.notification-sound-row small,
.notification-file-field strong,
.notification-file-field small,
.notification-volume-field strong,
.notification-volume-field small {
    display: block;
}

.notification-sound-row strong,
.notification-file-field strong,
.notification-volume-field strong {
    color: var(--food-text);
    font-size: 12px;
}

.notification-sound-row small,
.notification-file-field small,
.notification-volume-field small {
    margin-top: 3px;
    color: var(--food-muted);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
}

.notification-sound-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
}

.notification-sound-toggle.is-enabled {
    border-color: #bfe6c6;
    background: #edf9ef;
    color: #247c34;
}

.notification-volume-control {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.notification-volume-control input[type="range"] {
    width: 145px;
    min-height: 28px;
    padding: 0;
    border: 0;
    accent-color: var(--food-primary);
}

.notification-volume-control output {
    min-width: 40px;
    color: var(--food-text);
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.notification-file-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.notification-file-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    cursor: pointer;
}

.visually-hidden-file {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.notification-sound-status {
    min-height: 18px;
    margin-top: 8px;
    color: #247c34;
    font-size: 10px;
    line-height: 1.4;
}

.notification-sound-status.error {
    color: #b4233a;
}

.sales-chart-card {
    overflow: hidden;
}

.sales-chart-card canvas,
.status-chart-card canvas {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 860px) {
    body.has-mobile-navigation {
        padding-bottom: 0;
    }

    .main {
        /* O espaço pertence ao conteúdo rolável; assim a barra fixa nunca cobre o fim da página. */
        padding-bottom: calc(126px + env(safe-area-inset-bottom));
        scroll-padding-bottom: calc(126px + env(safe-area-inset-bottom));
        overflow-y: visible;
    }

    .topbar {
        min-height: 0;
        align-items: stretch;
    }

    .topbar > :first-child {
        width: 100%;
        min-width: 0;
        flex: 0 1 auto;
    }

    .topbar-actions {
        width: 100%;
    }

    .orders-grid,
    .products-grid,
    .user-management-grid,
    .account-grid {
        scroll-margin-bottom: calc(126px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 520px) {
    .topbar {
        gap: 7px;
        margin-bottom: 11px;
        padding: 11px 12px;
    }

    .topbar h1 {
        font-size: 20px;
        line-height: 1.12;
    }

    .topbar p {
        margin-top: 3px;
        font-size: 10px;
        line-height: 1.3;
    }

    .topbar-actions {
        gap: 6px;
    }

    .topbar .live-badge {
        min-height: 31px;
        padding: 5px 9px;
        font-size: 10px;
    }

    .settings-modal-content {
        max-height: min(88dvh, 760px);
        padding: 15px;
    }

    .settings-tabs {
        margin-bottom: 9px;
    }

    .settings-tab {
        min-height: 35px;
        padding: 7px 10px;
        font-size: 11px;
    }

    .settings-section {
        padding: 12px;
    }

    .notification-sound-row,
    .notification-file-field,
    .notification-volume-field {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        padding: 11px;
    }

    .notification-sound-toggle {
        width: 100%;
    }

    .notification-volume-control {
        width: 100%;
        min-width: 0;
    }

    .notification-volume-control input[type="range"] {
        width: 100%;
        flex: 1 1 auto;
    }

    .notification-file-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .notification-file-actions .secondary-btn,
    .notification-file-button {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        padding: 7px 8px;
        font-size: 10px;
    }

    .sales-chart-card {
        height: 242px;
        padding-right: 10px;
        padding-left: 10px;
    }
}

html[data-food-theme="dark"] .settings-tabs {
    border-color: #344150;
    background: #131b26;
}

html[data-food-theme="dark"] .settings-tab {
    color: #9ca9b8;
}

html[data-food-theme="dark"] .settings-tab:hover {
    background: #202b38;
    color: #eef3f8;
}

html[data-food-theme="dark"] .settings-tab.active {
    background: #263241;
    color: #fff;
}

html[data-food-theme="dark"] .notification-sound-row,
html[data-food-theme="dark"] .notification-file-field,
html[data-food-theme="dark"] .notification-volume-field {
    border-color: #344150;
    background: #18222e;
}

html[data-food-theme="dark"] .notification-sound-toggle.is-enabled {
    border-color: #285c38;
    background: #163522;
    color: #91dda4;
}
.settings-link-icon svg{width:22px;height:22px;display:block}.brand-runtime-logo{width:100%;height:100%;object-fit:contain;border-radius:inherit}

/* Visualizador interno de comprovantes */
.proof-viewer-modal {
    padding: 20px;
    background: rgba(24, 36, 51, .76);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}
.proof-viewer-content {
    width: auto;
    max-width: min(96vw, 1000px);
    max-height: 92dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.proof-viewer-content.is-image { width: fit-content; }
.proof-viewer-content.is-pdf {
    width: min(96vw, 1000px);
    height: min(90dvh, 860px);
}
.proof-viewer-header { flex: 0 0 auto; }
.proof-viewer-body {
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    border: 1px solid var(--food-border);
    border-radius: 12px;
    background: #f7f8fa;
}
.proof-viewer-content.is-image .proof-viewer-body {
    flex: 0 1 auto;
    width: fit-content;
    max-width: 100%;
    max-height: calc(92dvh - 110px);
}
.proof-viewer-content.is-pdf .proof-viewer-body {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.proof-viewer-image {
    display: block;
    width: auto;
    height: auto;
    max-width: min(90vw, 900px);
    max-height: calc(92dvh - 120px);
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
}
.proof-viewer-frame {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
    background: #fff;
}
.proof-viewer-loading,
.proof-viewer-error {
    min-width: min(420px, 80vw);
    padding: 34px 24px;
    text-align: center;
    color: var(--food-muted);
}
.proof-viewer-error { color: #b42336; }
html[data-food-theme="dark"] .proof-viewer-body { background: #101927; }
@media (max-width: 860px) {
    .proof-viewer-modal { padding: 8px; align-items: center; }
    .proof-viewer-content,
    .proof-viewer-content.is-image,
    .proof-viewer-content.is-pdf {
        width: min(100%, 720px);
        max-width: 100%;
        max-height: 94dvh;
        padding: 14px;
        border-radius: 14px;
    }
    .proof-viewer-content.is-pdf { height: 92dvh; }
    .proof-viewer-content.is-image .proof-viewer-body { width: 100%; }
    .proof-viewer-image {
        max-width: 100%;
        max-height: calc(94dvh - 110px);
    }
    .proof-viewer-frame { min-height: 300px; }
}
.inline-link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--food-primary-dark);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* ===== Refinamento visual do painel e da página de configurações ===== */
:root {
    --admin-surface: #ffffff;
    --admin-surface-soft: #f8fafc;
    --admin-surface-strong: #eef2f7;
    --admin-input-bg: #ffffff;
    --admin-border: #dfe5ec;
    --admin-border-strong: #cbd5df;
    --admin-text-strong: #172033;
    --admin-text-soft: #65758a;
    --admin-hover: #f3f6fa;
    --admin-ring: rgba(224, 49, 70, .18);
    --admin-card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .055);
    --admin-card-shadow-hover: 0 2px 5px rgba(15, 23, 42, .06), 0 16px 34px rgba(15, 23, 42, .08);
}

html[data-food-theme="light"] {
    --food-bg: #f5f7fb;
    --food-card: #ffffff;
    --food-border: #dfe5ec;
    --food-text: #172033;
    --food-muted: #65758a;
    --food-sidebar: #111a2a;
    --food-sidebar-soft: #1b293b;
    --food-shadow: var(--admin-card-shadow);
    --bg: var(--food-bg);
    --card: var(--food-card);
    --text: var(--food-text);
    --muted: var(--food-muted);
    --border: var(--admin-border);
    --surface: var(--admin-surface-soft);
}

html[data-food-theme="dark"] {
    --food-primary-light: #3b1821;
    --food-sidebar: #080f1b;
    --food-sidebar-soft: #142033;
    --food-bg: #0b1220;
    --food-card: #121d2c;
    --food-border: #2a3a4f;
    --food-text: #f5f7fb;
    --food-muted: #9cabbd;
    --food-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 14px 34px rgba(0, 0, 0, .22);
    --admin-surface: #121d2c;
    --admin-surface-soft: #172438;
    --admin-surface-strong: #1d2d43;
    --admin-input-bg: #0d1726;
    --admin-border: #2a3a4f;
    --admin-border-strong: #3b4e66;
    --admin-text-strong: #f5f7fb;
    --admin-text-soft: #9cabbd;
    --admin-hover: #1a293d;
    --admin-ring: rgba(255, 126, 144, .22);
    --admin-card-shadow: 0 1px 2px rgba(0, 0, 0, .24), 0 14px 34px rgba(0, 0, 0, .2);
    --admin-card-shadow-hover: 0 2px 5px rgba(0, 0, 0, .3), 0 18px 38px rgba(0, 0, 0, .26);
    --bg: var(--food-bg);
    --card: var(--food-card);
    --text: var(--food-text);
    --muted: var(--food-muted);
    --border: var(--admin-border);
    --surface: var(--admin-surface-soft);
}

html[data-food-theme="light"] body,
html[data-food-theme="light"] .app-layout,
html[data-food-theme="dark"] body,
html[data-food-theme="dark"] .app-layout {
    background:
        radial-gradient(circle at 92% 0%, rgba(224, 49, 70, .045), transparent 24rem),
        var(--food-bg);
}

html[data-food-theme="dark"] body,
html[data-food-theme="dark"] .app-layout {
    background:
        radial-gradient(circle at 92% 0%, rgba(224, 49, 70, .07), transparent 26rem),
        linear-gradient(180deg, #0b1220 0%, #0d1524 100%);
}

.topbar,
.summary-card,
.chart-card,
.order-card,
.product-card,
.panel-card,
.settings-page-card {
    border: 1px solid var(--admin-border);
    background: var(--admin-surface);
    box-shadow: var(--admin-card-shadow);
}

.topbar {
    position: relative;
    overflow: hidden;
}

.topbar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--primary, var(--food-primary));
    opacity: .9;
}

.topbar h1,
.summary-card h2,
.chart-card h3,
.panel-card h2,
.order-card h3,
.product-card h3 {
    color: var(--admin-text-strong);
}

.topbar p,
.card-subtitle,
.orders-header p,
.product-card p,
.order-card p,
.user-details p {
    color: var(--admin-text-soft);
}

.product-toolbar input,
.modal-content input,
.modal-content textarea,
.modal-content select,
.user-form input,
.user-form select,
.user-search input,
.account-form input,
.setup-form input,
.login-card input,
.settings-page-field select {
    border: 1px solid var(--admin-border);
    background: var(--admin-input-bg);
    color: var(--admin-text-strong);
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .025);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.product-toolbar input:hover,
.modal-content input:hover,
.modal-content textarea:hover,
.modal-content select:hover,
.user-form input:hover,
.user-form select:hover,
.user-search input:hover,
.account-form input:hover,
.setup-form input:hover,
.login-card input:hover,
.settings-page-field select:hover {
    border-color: var(--admin-border-strong);
}

.product-toolbar input:focus,
.modal-content input:focus,
.modal-content textarea:focus,
.modal-content select:focus,
.user-form input:focus,
.user-form select:focus,
.user-search input:focus,
.account-form input:focus,
.setup-form input:focus,
.login-card input:focus,
.settings-page-field select:focus {
    border-color: var(--primary, var(--food-primary));
    box-shadow: 0 0 0 3px var(--admin-ring);
}

.secondary-btn {
    border: 1px solid var(--admin-border);
    background: var(--admin-surface-soft);
    color: var(--admin-text-strong);
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.secondary-btn:hover:not(:disabled) {
    border-color: var(--admin-border-strong);
    background: var(--admin-hover);
    transform: translateY(-1px);
}

.primary-btn {
    box-shadow: 0 7px 18px rgba(224, 49, 70, .16);
    transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

.primary-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(.97);
    box-shadow: 0 10px 24px rgba(224, 49, 70, .2);
}

.sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 32%),
        var(--food-sidebar);
}

.nav-btn {
    transition: background .14s ease, color .14s ease, transform .14s ease, border-color .14s ease;
}

.nav-btn:hover {
    transform: translateX(2px);
}

.nav-btn.active {
    box-shadow: 0 7px 18px rgba(0, 0, 0, .14);
}

/* Página de configurações */
.settings-page-main {
    max-width: 1500px;
}

.settings-page-header {
    min-height: 126px;
    align-items: center;
    padding: 24px 26px;
    background:
        linear-gradient(112deg, rgba(224, 49, 70, .06), transparent 48%),
        var(--admin-surface);
}

html[data-food-theme="dark"] .settings-page-header {
    background:
        linear-gradient(112deg, rgba(224, 49, 70, .12), transparent 52%),
        var(--admin-surface);
}

.settings-page-eyebrow {
    display: inline-flex;
    margin-bottom: 7px;
    color: var(--primary, var(--food-primary));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.settings-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    max-width: min(100%, 330px);
    padding: 7px 11px;
    border: 1px solid var(--admin-border);
    border-radius: 999px;
    background: var(--admin-surface-soft);
    color: var(--admin-text-soft);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-user-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .12);
}

.settings-page-grid {
    align-items: start;
}

.settings-page-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 22px;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.settings-page-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--primary, var(--food-primary)), transparent 70%);
    opacity: .42;
}

@media (hover: hover) and (pointer: fine) {
    .settings-page-card:hover {
        transform: translateY(-2px);
        border-color: var(--admin-border-strong);
        box-shadow: var(--admin-card-shadow-hover);
    }
}

.settings-card-heading {
    align-items: center;
}

.settings-card-heading h2 {
    color: var(--admin-text-strong);
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -.018em;
}

.settings-card-heading p,
.settings-card-footnote {
    color: var(--admin-text-soft);
    line-height: 1.5;
}

.settings-card-footnote {
    display: block;
    padding-top: 2px;
    font-size: 11px;
}

.settings-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: 1px solid rgba(224, 49, 70, .14);
    border-radius: 14px;
    background: rgba(224, 49, 70, .08);
    color: var(--primary, var(--food-primary));
}

html[data-food-theme="dark"] .settings-card-icon {
    border-color: rgba(255, 126, 144, .18);
    background: rgba(224, 49, 70, .14);
    color: #ff9cad;
}

.settings-page-field > span {
    color: var(--admin-text-strong);
    font-size: 12px;
    letter-spacing: .01em;
}

.settings-page-link {
    position: relative;
    padding: 14px 42px 14px 15px;
    border-color: var(--admin-border);
    background: var(--admin-surface-soft);
    color: var(--admin-text-strong);
}

.settings-page-link::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 15px;
    color: var(--admin-text-soft);
    font-size: 17px;
    transform: translateY(-50%);
    transition: transform .16s ease, color .16s ease;
}

.settings-page-link:hover {
    border-color: rgba(224, 49, 70, .36);
    background: var(--admin-hover);
}

.settings-page-link:hover::after {
    color: var(--primary, var(--food-primary));
    transform: translate(2px, -50%);
}

.settings-page-link strong {
    font-size: 12px;
}

.settings-page-link span {
    color: var(--admin-text-soft);
    line-height: 1.4;
}

/* Escolha visual de tema */
.theme-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.theme-choice {
    position: relative;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--admin-border);
    border-radius: 13px;
    background: var(--admin-surface-soft);
    color: var(--admin-text-strong);
    text-align: left;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.theme-choice:hover {
    border-color: var(--admin-border-strong);
    background: var(--admin-hover);
    transform: translateY(-1px);
}

.theme-choice.active {
    border-color: var(--primary, var(--food-primary));
    background: var(--admin-surface);
    box-shadow: 0 0 0 3px var(--admin-ring), var(--admin-card-shadow);
}

.theme-choice-preview {
    position: relative;
    display: block;
    height: 74px;
    overflow: hidden;
    margin-bottom: 9px;
    border: 1px solid rgba(100, 116, 139, .18);
    border-radius: 9px;
}

.theme-choice-preview-light {
    background: #f5f7fb;
}

.theme-choice-preview-dark {
    background: #0b1220;
}

.theme-choice-preview .preview-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 22%;
    background: #111a2a;
}

.theme-choice-preview-dark .preview-sidebar {
    background: #080f1b;
}

.theme-choice-preview .preview-header {
    position: absolute;
    top: 10px;
    right: 9px;
    width: 61%;
    height: 13px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

.theme-choice-preview-dark .preview-header {
    background: #182538;
}

.theme-choice-preview .preview-card {
    position: absolute;
    bottom: 10px;
    width: 27%;
    height: 31px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

.theme-choice-preview-dark .preview-card {
    background: #172438;
}

.theme-choice-preview .preview-card-a { left: 31%; }
.theme-choice-preview .preview-card-b { right: 9px; }
.theme-choice-preview-auto { display: grid; grid-template-columns: 1fr 1fr; background: transparent; }
.theme-choice-preview-auto .preview-half { display: block; height: 100%; }
.theme-choice-preview-auto .preview-half-light { background: linear-gradient(150deg, #fff 0 25%, #f5f7fb 25%); }
.theme-choice-preview-auto .preview-half-dark { background: linear-gradient(150deg, #172438 0 25%, #0b1220 25%); }
.theme-choice-preview-auto .preview-auto-dot {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 18px;
    height: 18px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--primary, var(--food-primary));
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    transform: translate(-50%, -50%);
}

.theme-choice-copy {
    display: grid;
    gap: 2px;
    padding-right: 22px;
}

.theme-choice-copy strong {
    font-size: 12px;
}

.theme-choice-copy small {
    color: var(--admin-text-soft);
    font-size: 9px;
    line-height: 1.35;
}

.theme-choice-check {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary, var(--food-primary));
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .15s ease, transform .15s ease;
}

.theme-choice.active .theme-choice-check {
    opacity: 1;
    transform: scale(1);
}

.settings-theme-fallback {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Blocos internos de configurações */
.settings-page-card .notification-sound-row,
.settings-page-card .notification-file-field,
.settings-page-card .notification-volume-field {
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: var(--admin-surface-soft);
    box-shadow: none;
}

.settings-page-card .notification-sound-row:hover,
.settings-page-card .notification-file-field:hover,
.settings-page-card .notification-volume-field:hover {
    border-color: var(--admin-border-strong);
}

.notification-volume-control output {
    min-width: 44px;
    padding: 4px 6px;
    border-radius: 7px;
    background: var(--admin-surface-strong);
    color: var(--admin-text-strong);
    text-align: center;
}

.notification-volume-control input[type="range"] {
    accent-color: var(--primary, var(--food-primary));
}

.notification-sound-status:not(:empty) {
    min-height: 0;
    padding: 8px 10px;
    border: 1px solid rgba(34, 197, 94, .18);
    border-radius: 9px;
    background: rgba(34, 197, 94, .07);
}

.notification-sound-status.error:not(:empty) {
    border-color: rgba(239, 68, 68, .2);
    background: rgba(239, 68, 68, .08);
}

/* Tema escuro: elimina áreas claras residuais do painel */
html[data-food-theme="dark"] .topbar,
html[data-food-theme="dark"] .summary-card,
html[data-food-theme="dark"] .chart-card,
html[data-food-theme="dark"] .order-card,
html[data-food-theme="dark"] .product-card,
html[data-food-theme="dark"] .panel-card,
html[data-food-theme="dark"] .settings-page-card,
html[data-food-theme="dark"] .modal-content,
html[data-food-theme="dark"] .user-card,
html[data-food-theme="dark"] .login-card,
html[data-food-theme="dark"] .setup-card {
    background: var(--admin-surface);
    border-color: var(--admin-border);
}

html[data-food-theme="dark"] .settings-page-link,
html[data-food-theme="dark"] .settings-page-card .notification-sound-row,
html[data-food-theme="dark"] .settings-page-card .notification-file-field,
html[data-food-theme="dark"] .settings-page-card .notification-volume-field,
html[data-food-theme="dark"] .secondary-btn {
    background: var(--admin-surface-soft);
    border-color: var(--admin-border);
    color: var(--admin-text-strong);
}

html[data-food-theme="dark"] .settings-page-link:hover,
html[data-food-theme="dark"] .secondary-btn:hover:not(:disabled) {
    background: var(--admin-hover);
    border-color: var(--admin-border-strong);
}

html[data-food-theme="dark"] .notification-sound-toggle.is-enabled {
    border-color: #315f3d;
    background: #153421;
    color: #9be2ac;
}

html[data-food-theme="dark"] .product-toolbar input,
html[data-food-theme="dark"] .modal-content input,
html[data-food-theme="dark"] .modal-content textarea,
html[data-food-theme="dark"] .modal-content select,
html[data-food-theme="dark"] .user-form input,
html[data-food-theme="dark"] .user-form select,
html[data-food-theme="dark"] .user-search input,
html[data-food-theme="dark"] .account-form input,
html[data-food-theme="dark"] .setup-form input,
html[data-food-theme="dark"] .login-card input,
html[data-food-theme="dark"] .settings-page-field select {
    background: var(--admin-input-bg);
    border-color: var(--admin-border);
    color: var(--admin-text-strong);
}

html[data-food-theme="dark"] select option {
    background: var(--admin-input-bg);
    color: var(--admin-text-strong);
}

/* Rolagem coerente com o tema */
html[data-food-theme="dark"] {
    scrollbar-color: #40526a #0b1220;
}

html[data-food-theme="light"] {
    scrollbar-color: #c3ccd8 #eef2f7;
}

@media (max-width: 900px) {
    .settings-page-header {
        min-height: 0;
        align-items: flex-start;
        padding: 19px;
    }

    .settings-user-chip {
        max-width: 100%;
    }

    .theme-choice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .settings-page-header {
        gap: 12px;
        padding: 16px;
    }

    .settings-user-chip {
        width: 100%;
        justify-content: center;
    }

    .settings-page-card {
        padding: 16px;
        border-radius: 14px;
    }

    .theme-choice-grid {
        grid-template-columns: 1fr;
    }

    .theme-choice {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        align-items: center;
        gap: 11px;
    }

    .theme-choice-preview {
        height: 62px;
        margin: 0;
    }

    .theme-choice-copy {
        padding-right: 22px;
    }

    .theme-choice-copy small {
        font-size: 10px;
    }

    .notification-file-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .theme-choice {
        grid-template-columns: 88px minmax(0, 1fr);
        padding: 8px;
    }

    .theme-choice-preview {
        height: 56px;
    }
}

/* =========================================================
   Identidade global — cor principal como ACENTO, nunca como texto base
   ========================================================= */
:root {
    --brand-primary: var(--food-primary, #e03146);
    --brand-on-primary: #ffffff;
    --primary: var(--brand-primary);
    --food-primary: var(--brand-primary);
    --food-primary-dark: color-mix(in srgb, var(--brand-primary) 82%, #000);
    --food-primary-light: color-mix(in srgb, var(--brand-primary) 11%, var(--food-card));
    --brand-accent-soft: color-mix(in srgb, var(--brand-primary) 10%, var(--food-card));
    --brand-accent-border: color-mix(in srgb, var(--brand-primary) 34%, var(--food-border));
    --brand-accent-shadow: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    --admin-ring: color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

/* Componentes de ação/seleção seguem a identidade. */
.logo-icon,
body.sidebar-collapsed .sidebar-toggle,
.nav-btn.active,
.primary-btn,
.login-card button,
.setup-form button,
.mobile-nav-orders .mobile-nav-icon,
.mobile-nav-orders.active .mobile-nav-icon,
.theme-choice-check {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

.primary-btn:hover:not(:disabled),
.login-card button:hover,
.setup-form button:hover {
    background: var(--food-primary-dark);
    border-color: var(--food-primary-dark);
    color: var(--brand-on-primary);
}

.nav-btn.active {
    color: var(--brand-on-primary);
    box-shadow: 0 7px 18px var(--brand-accent-shadow);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-color: color-mix(in srgb, var(--brand-primary) 26%, transparent);
}

.product-toolbar input:focus,
.modal-content input:focus,
.modal-content textarea:focus,
.modal-content select:focus,
.user-form input:focus,
.user-form select:focus,
.user-search input:focus,
.account-form input:focus,
.setup-form input:focus,
.login-card input:focus,
.settings-page-field select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--admin-ring);
}

.topbar::before,
.settings-page-card::after {
    background: linear-gradient(90deg, var(--brand-primary), transparent 70%);
}

.settings-page-header {
    background:
        linear-gradient(112deg, color-mix(in srgb, var(--brand-primary) 7%, transparent), transparent 48%),
        var(--admin-surface);
}

html[data-food-theme="dark"] .settings-page-header {
    background:
        linear-gradient(112deg, color-mix(in srgb, var(--brand-primary) 13%, transparent), transparent 52%),
        var(--admin-surface);
}

.settings-card-icon {
    border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--admin-border));
    background: color-mix(in srgb, var(--brand-primary) 10%, var(--admin-surface));
    color: var(--brand-primary);
}

html[data-food-theme="dark"] .settings-card-icon {
    border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--admin-border));
    background: color-mix(in srgb, var(--brand-primary) 14%, var(--admin-surface));
    color: var(--brand-primary);
}

.settings-page-link:hover,
.theme-choice.active,
.mobile-order-filter.active {
    border-color: var(--brand-accent-border);
}

.theme-choice.active {
    box-shadow: 0 0 0 3px var(--admin-ring), var(--admin-card-shadow);
}

.mobile-order-filter.active,
.mobile-nav-item.active .mobile-nav-icon,
.settings-link:hover {
    background: var(--brand-accent-soft);
}

/* A identidade NÃO substitui texto normal. */
.product-price strong,
.settings-link:hover,
.mobile-nav-item.active,
.mobile-order-filter.active,
.settings-tab.active,
.settings-page-eyebrow {
    color: var(--admin-text-strong, var(--food-text));
}

.mobile-nav-item.active .mobile-nav-icon {
    color: var(--brand-primary);
}

.settings-tab.active {
    box-shadow: inset 0 -2px 0 var(--brand-primary), 0 1px 4px rgba(24, 36, 51, .08);
}

/* Links continuam com cor própria de navegação, não com a cor da marca. */
.setup-login-link,
.inline-link-button {
    color: var(--food-blue);
}

/* Mensagens técnicas/erros mantêm semântica própria. */
#loginMessage {
    color: #b4233a;
}
html[data-food-theme="dark"] #loginMessage {
    color: #ff9eaa;
}

/* Sombras e fundos decorativos acompanham a identidade sem alterar textos. */
.primary-btn {
    box-shadow: 0 7px 18px var(--brand-accent-shadow);
}
.primary-btn:hover:not(:disabled) {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary) 28%, transparent);
}

html[data-food-theme="light"] body,
html[data-food-theme="light"] .app-layout,
html[data-food-theme="dark"] body,
html[data-food-theme="dark"] .app-layout {
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--brand-primary) 6%, transparent), transparent 24rem),
        var(--food-bg);
}
html[data-food-theme="dark"] body,
html[data-food-theme="dark"] .app-layout {
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 26rem),
        linear-gradient(180deg, #0b1220 0%, #0d1524 100%);
}
/* Docyla: imagens do cardápio sempre inteiras dentro do quadro fixo */
.products-grid img.product-image {
    width: 100%;
    object-fit: contain;
    object-position: center;
    background: #f3f4f6;
}


/* Docyla: regra final da tela Produtos — foto quadrada e preenchida */
.products-grid img.product-image,
.products-grid .product-placeholder {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #f3f4f6;
}

.products-grid img.product-image {
    object-fit: fill !important;
    object-position: center !important;
}


/* Visual limpo: remove ornamentos puramente decorativos e mantém foco funcional. */
html[data-food-theme="light"] body,
html[data-food-theme="light"] .app-layout,
html[data-food-theme="dark"] body,
html[data-food-theme="dark"] .app-layout {
    background: var(--food-bg);
}

.topbar,
.settings-page-header,
.sidebar {
    background-image: none;
}

.topbar::before,
.settings-page-card::after {
    display: none;
}

.settings-page-card,
.summary-card,
.chart-card,
.order-card,
.product-card,
.panel-card {
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

html[data-food-theme="dark"] .settings-page-card,
html[data-food-theme="dark"] .summary-card,
html[data-food-theme="dark"] .chart-card,
html[data-food-theme="dark"] .order-card,
html[data-food-theme="dark"] .product-card,
html[data-food-theme="dark"] .panel-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .24);
}

.settings-page-card,
.settings-page-card:hover,
.primary-btn,
.primary-btn:hover:not(:disabled),
.secondary-btn,
.secondary-btn:hover:not(:disabled),
.nav-btn,
.nav-btn:hover,
.settings-page-link,
.settings-page-link:hover,
.theme-choice,
.theme-choice:hover {
    transform: none;
}

.primary-btn,
.primary-btn:hover:not(:disabled),
.nav-btn.active,
.theme-choice.active {
    box-shadow: none;
}

.settings-page-card {
    border-radius: 12px;
}

.settings-card-icon,
.settings-page-link,
.theme-choice {
    border-radius: 10px;
}

/* ===== Seletor administrativo de tema global ===== */
.global-theme-panel { padding: 22px; }
.global-theme-info { margin-bottom: 18px; }
.global-theme-info p { margin: 5px 0 0; color: var(--food-muted); }
.global-theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.global-theme-card { position:relative; display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid var(--food-border); border-radius:var(--food-radius); background:var(--food-card); color:var(--food-text); text-align:left; cursor:pointer; }
.global-theme-card:hover { border-color:var(--food-primary); }
.global-theme-card[aria-pressed="true"] { border:2px solid var(--food-primary); padding:11px; }
.global-theme-preview { position:relative; display:block; height:116px; overflow:hidden; border:1px solid rgba(127,127,127,.25); border-radius:8px; background:#f5f7fb; }
.theme-preview-sidebar { position:absolute; inset:0 auto 0 0; width:27%; background:#111a2a; }
.theme-preview-top { position:absolute; left:27%; top:0; right:0; height:25%; background:#fff; border-bottom:1px solid #dfe5ec; }
.theme-preview-card { position:absolute; top:39%; height:42%; background:#fff; border:1px solid #dfe5ec; border-radius:5px; }
.theme-preview-card.a { left:34%; width:26%; }.theme-preview-card.b { left:66%; width:26%; }
.preview-flatly { background:#f4f7f7 }.preview-flatly .theme-preview-sidebar{background:#2c3e50}.preview-minty{background:#f6faf9}.preview-minty .theme-preview-sidebar{background:#35524a}
.preview-darkly{background:#181818}.preview-darkly .theme-preview-sidebar{background:#111}.preview-darkly .theme-preview-top,.preview-darkly .theme-preview-card{background:#222;border-color:#3a3a3a}
.preview-slate{background:#272b30}.preview-slate .theme-preview-sidebar{background:#1c1f22}.preview-slate .theme-preview-top,.preview-slate .theme-preview-card{background:#32383e;border-color:#4a5057}
.preview-solar{background:#002b36}.preview-solar .theme-preview-sidebar{background:#001f27}.preview-solar .theme-preview-top,.preview-solar .theme-preview-card{background:#073642;border-color:#31535b}
.global-theme-copy { display:grid; gap:3px; }.global-theme-copy strong{font-size:15px}.global-theme-copy small{color:var(--food-muted)}.global-theme-copy em{font-style:normal;font-size:11px;color:var(--food-muted)}
.global-theme-check { position:absolute; right:10px; top:10px; width:24px; height:24px; border-radius:50%; display:none; place-items:center; background:var(--food-primary); color:var(--brand-on-primary,#fff); font-weight:800; }
.global-theme-card[aria-pressed="true"] .global-theme-check { display:grid; }
.global-theme-actions { display:flex; align-items:center; gap:14px; margin-top:20px; flex-wrap:wrap; }
@media(max-width:900px){.global-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}@media(max-width:560px){.global-theme-grid{grid-template-columns:1fr;}}

/* Temas adicionais */
.preview-cerulean{background:#f3f8fc}.preview-cerulean .theme-preview-sidebar{background:#2fa4e7}
.preview-cosmo{background:#f8f9fa}.preview-cosmo .theme-preview-sidebar{background:#2780e3}
.preview-journal{background:#fffaf8}.preview-journal .theme-preview-sidebar{background:#eb6864}
.preview-lumen{background:#f8f9fb}.preview-lumen .theme-preview-sidebar{background:#158cba}
.preview-sandstone{background:#f7f6f1}.preview-sandstone .theme-preview-sidebar{background:#3e3f3a}
.preview-zephyr{background:#f7f8fc}.preview-zephyr .theme-preview-sidebar{background:#3459e6}
.global-theme-copy em{display:none!important}
.global-theme-copy small{display:none!important}
.global-theme-card{transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.global-theme-card:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(15,23,42,.08)}
@media(prefers-reduced-motion:reduce){.global-theme-card{transition:none}.global-theme-card:hover{transform:none}}

/* Responsividade final das configurações */
.settings-page-grid,.settings-page-card,.settings-card-heading,.settings-card-heading>div,#notificationSettingsCard,#notificationSettingsCard *{min-width:0;box-sizing:border-box}
#notificationSettingsCard{overflow:visible;width:100%;max-width:100%}
#notificationSettingsCard .notification-sound-row,#notificationSettingsCard .notification-volume-field,#notificationSettingsCard .notification-file-field{width:100%;max-width:100%;flex-wrap:wrap;align-items:flex-start}
#notificationSettingsCard .notification-sound-row>div,#notificationSettingsCard .notification-volume-field>span:first-child,#notificationSettingsCard .notification-file-field>div:first-child{flex:1 1 220px;overflow-wrap:anywhere}
#notificationSettingsCard .notification-volume-control{min-width:0;width:min(100%,300px);flex:1 1 220px}
#notificationSettingsCard .notification-volume-control input[type="range"]{width:100%;min-width:0;flex:1 1 auto}
#notificationSettingsCard .notification-file-actions{width:auto;max-width:100%;flex:1 1 280px;justify-content:flex-end}
#notificationSettingsCard .notification-file-actions>*{max-width:100%}
@media(max-width:1180px){.settings-page-grid{grid-template-columns:1fr}}
@media(max-width:720px){
 .settings-page-header,.topbar{min-width:0;overflow:visible}.settings-page-header>div,.topbar>div{min-width:0;max-width:100%}
 .settings-page-header h1,.settings-page-header p,.settings-user-chip{max-width:100%;overflow-wrap:anywhere}
 #notificationSettingsCard .notification-sound-row,#notificationSettingsCard .notification-volume-field,#notificationSettingsCard .notification-file-field{display:grid!important;grid-template-columns:minmax(0,1fr);gap:12px}
 #notificationSettingsCard .notification-volume-control,#notificationSettingsCard .notification-file-actions{width:100%;max-width:none}
 #notificationSettingsCard .notification-file-actions{display:grid;grid-template-columns:1fr}
}


/* Font Awesome local: protege a fonte dos ícones contra regras globais de tema. */
.fa-solid, .fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
.fa-regular, .far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}
.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}
.fa-solid::before, .fas::before,
.fa-regular::before, .far::before,
.fa-brands::before, .fab::before {
    font-family: inherit !important;
    font-style: normal !important;
}

/* Mobile: seleção de temas sempre em duas colunas. */
@media (max-width: 560px) {
    .global-theme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
    .global-theme-card {
        min-width: 0;
        padding: 9px !important;
        gap: 7px;
    }
    .global-theme-card[aria-pressed="true"] { padding: 8px !important; }
    .global-theme-preview { height: 88px; }
    .global-theme-copy strong {
        display: block;
        min-width: 0;
        font-size: 13px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
    .global-theme-check {
        right: 6px;
        top: 6px;
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
}

/* Pré-visualizações dos temas revisadas */
.global-theme-preview { box-shadow: inset 0 0 0 1px rgba(15,23,42,.025); }
.preview-tabler{background:#f4f6fa}.preview-tabler .theme-preview-sidebar{background:#162033}
.preview-flatly{background:#f3f7f7}.preview-flatly .theme-preview-sidebar{background:#20384b}
.preview-minty{background:#f4faf7}.preview-minty .theme-preview-sidebar{background:#245348}
.preview-darkly{background:#151618}.preview-darkly .theme-preview-sidebar{background:#111214}.preview-darkly .theme-preview-top,.preview-darkly .theme-preview-card{background:#202226;border-color:#393c42}
.preview-slate{background:#202832}.preview-slate .theme-preview-sidebar{background:#273241}.preview-slate .theme-preview-top,.preview-slate .theme-preview-card{background:#2b3643;border-color:#465566}
.preview-solar{background:#f7f1df}.preview-solar .theme-preview-sidebar{background:#27464d}.preview-solar .theme-preview-top,.preview-solar .theme-preview-card{background:#fffaf0;border-color:#ddd1ad}
.preview-cerulean{background:#eef7fc}.preview-cerulean .theme-preview-sidebar{background:#145b8a}.preview-cerulean .theme-preview-top,.preview-cerulean .theme-preview-card{border-color:#c9deea}
.preview-cosmo{background:#f5f6fb}.preview-cosmo .theme-preview-sidebar{background:#3c4f8f}.preview-cosmo .theme-preview-top,.preview-cosmo .theme-preview-card{border-color:#d8dced}
.preview-journal{background:#f8f3ee}.preview-journal .theme-preview-sidebar{background:#7b403c}.preview-journal .theme-preview-top,.preview-journal .theme-preview-card{background:#fffdfa;border-color:#e4d6cc}
.preview-lumen{background:#f6f9fb}.preview-lumen .theme-preview-sidebar{background:#17617c}.preview-lumen .theme-preview-top,.preview-lumen .theme-preview-card{border-color:#d8e2e8}
.preview-sandstone{background:#f4f2e9}.preview-sandstone .theme-preview-sidebar{background:#48493f}.preview-sandstone .theme-preview-top,.preview-sandstone .theme-preview-card{background:#fffef9;border-color:#ddd9ca}
.preview-zephyr{background:#f4f6fc}.preview-zephyr .theme-preview-sidebar{background:#344b9b}.preview-zephyr .theme-preview-top,.preview-zephyr .theme-preview-card{border-color:#d7ddef}