/* ==========================================================
   Tema Global do Sistema — Restaurante Cabana
   A paleta ativa é definida por /js/theme-global.js.
   ========================================================== */

:root {
    --theme-primary: var(--accent, #1c1917);
    --theme-primary-hover: var(--accent-hover, #000000);
    --theme-primary-soft: var(--accent-soft, rgba(28,25,23,.08));
    --theme-secondary: #8b5e34;
    --theme-admin-bg: var(--bg-main, #f4f6f8);
    --theme-admin-surface-soft: var(--bg-surface-hover, #f8fafc);
}

html[data-system-theme] body {
    background-color: var(--bg-main);
    color: var(--text-primary);
}

html[data-system-theme] .btn-primary,
html[data-system-theme] .btn.btn-primary,
html[data-system-theme] button.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

html[data-system-theme] .btn-primary:hover,
html[data-system-theme] .btn.btn-primary:hover,
html[data-system-theme] button.btn-primary:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

html[data-system-theme] input:focus,
html[data-system-theme] select:focus,
html[data-system-theme] textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Dashboard profissional passa a consumir a mesma paleta global. */
html[data-system-theme] body.admin-dashboard-pro {
    --admin-bg: var(--theme-admin-bg);
    --admin-surface: var(--bg-surface);
    --admin-surface-soft: var(--theme-admin-surface-soft);
    --admin-ink: var(--text-primary);
    --admin-muted: var(--text-secondary);
    --admin-line: var(--border);
    --admin-brand: var(--accent);
    --admin-brand-2: var(--accent-hover);
}

html[data-system-theme] .admin-dashboard-pro .sidebar-item.active,
html[data-system-theme] .admin-dashboard-pro .executive-kpi-card--hero {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

html[data-system-theme] .admin-dashboard-pro .admin-brand-copy span,
html[data-system-theme] .admin-dashboard-pro .admin-sidebar-kicker,
html[data-system-theme] .admin-dashboard-pro .admin-eyebrow,
html[data-system-theme] .admin-dashboard-pro .admin-panel-kicker {
    color: var(--theme-secondary) !important;
}

html[data-system-theme] .admin-dashboard-pro .operator-share-track i,
html[data-system-theme] .admin-dashboard-pro .payment-track > span {
    background-color: var(--accent);
}

/* Seletor de tema — visível somente na área administrativa. */
.theme-settings-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.theme-settings-head h1 { margin: 4px 0 6px; font-size: 1.9rem; letter-spacing: -.035em; }
.theme-settings-head p { margin: 0; color: var(--text-secondary); max-width: 720px; line-height: 1.5; }
.theme-settings-eyebrow { display: block; color: var(--theme-secondary); font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.theme-settings-status { padding: 9px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-surface); color: var(--text-secondary); font-size: .74rem; font-weight: 800; white-space: nowrap; }
.theme-settings-status.is-saving { color: var(--warning); }
.theme-settings-status.is-ok { color: var(--success); }
.theme-settings-status.is-error { color: var(--danger); }

.theme-info-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: start;
    padding: 16px 18px;
    margin-bottom: 20px;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    border-radius: 16px;
}
.theme-info-card__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--accent); color: #fff; font-weight: 900; }
.theme-info-card strong { display: block; margin-bottom: 3px; color: var(--text-primary); }
.theme-info-card p { margin: 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.5; }

.theme-palette-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.theme-palette-card {
    position: relative;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.theme-palette-card:hover { transform: translateY(-2px); border-color: var(--palette-primary); box-shadow: 0 12px 30px rgba(15,23,42,.09); }
.theme-palette-card:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; }
.theme-palette-card.is-active { border-color: var(--palette-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--palette-primary) 22%, transparent), 0 12px 30px rgba(15,23,42,.08); }
.theme-palette-preview { min-height: 132px; padding: 16px; background: var(--palette-bg); }
.theme-palette-preview__bar { height: 14px; border-radius: 8px; background: var(--palette-primary); margin-bottom: 12px; }
.theme-palette-preview__layout { display: grid; grid-template-columns: 32% 1fr; gap: 10px; min-height: 78px; }
.theme-palette-preview__side { border-radius: 10px; background: var(--palette-surface); border: 1px solid var(--palette-border); }
.theme-palette-preview__main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-content: start; }
.theme-palette-preview__box { height: 34px; border-radius: 9px; background: var(--palette-surface); border: 1px solid var(--palette-border); }
.theme-palette-preview__box--accent { background: color-mix(in srgb, var(--palette-primary) 12%, var(--palette-surface)); border-color: color-mix(in srgb, var(--palette-primary) 26%, var(--palette-border)); }
.theme-palette-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px 16px; }
.theme-palette-meta strong { display: block; font-size: .92rem; }
.theme-palette-meta small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: .69rem; }
.theme-palette-check { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; background: var(--palette-primary); color: #fff; opacity: 0; transform: scale(.8); transition: .16s ease; }
.theme-palette-card.is-active .theme-palette-check { opacity: 1; transform: scale(1); }

.theme-settings-footnote { margin-top: 18px; color: var(--text-secondary); font-size: .76rem; line-height: 1.5; }

@media (max-width: 1050px) {
    .theme-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .theme-settings-head { align-items: flex-start; flex-direction: column; }
    .theme-settings-status { white-space: normal; }
    .theme-palette-grid { grid-template-columns: 1fr; }
}

/* Adaptadores visuais para telas internas que possuem CSS próprio. */
html[data-system-theme] .btnx:not(.alt),
html[data-system-theme] .cx-primary,
html[data-system-theme] .dv-btn--primary {
    background: var(--accent) !important;
}
html[data-system-theme] .btnx:not(.alt):hover,
html[data-system-theme] .cx-primary:hover,
html[data-system-theme] .dv-btn--primary:hover {
    background: var(--accent-hover) !important;
}

html[data-system-theme] .login-form-side {
    background: color-mix(in srgb, var(--bg-surface) 86%, transparent) !important;
}
html[data-system-theme] .form-eyebrow { color: var(--theme-secondary) !important; }
html[data-system-theme] .form-title,
html[data-system-theme] .field label { color: var(--text-primary) !important; }
html[data-system-theme] .form-desc { color: var(--text-secondary) !important; }
html[data-system-theme] .field input { border-color: var(--border) !important; color: var(--text-primary) !important; background: var(--bg-surface) !important; }
html[data-system-theme] .field input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
html[data-system-theme] .btn-login { background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important; }
html[data-system-theme] .employee-home-btn:hover { border-color: var(--accent) !important; }

html[data-system-theme] .comanda-header { background: var(--accent) !important; }
html[data-system-theme] .metric.main,
html[data-system-theme] .billing-overview__main { border-color: color-mix(in srgb, var(--accent) 24%, var(--border)) !important; background: linear-gradient(135deg, var(--accent-soft), var(--bg-surface)) !important; }
html[data-system-theme] .metric.main .value,
html[data-system-theme] .billing-balance strong,
html[data-system-theme] .billing-eyebrow,
html[data-system-theme] .products-head strong { color: var(--accent) !important; }

html[data-system-theme] .dv-date-card { background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important; }
html[data-system-theme] .dv-kicker { color: var(--accent) !important; }
html[data-system-theme] .dv-topbar { border-bottom-color: var(--border) !important; }

html[data-system-theme] .tab.active,
html[data-system-theme] .tab.on { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }