/**
 * LLSystem PDV — Estilos Globais, Whitelabel Dinâmico e Dark Mode
 */

:root {
    --color-primary: #006494;
    --color-primary-rgb: 0, 100, 148;
    --color-secondary: #0077b6;
    --color-secondary-rgb: 0, 119, 182;
    --color-accent: #00a8e8;
    --color-accent-rgb: 0, 168, 232;
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-dim: #e2e8f0;
    --color-text-main: #0f172a;
    --color-text-muted: #64748b;
    --color-border: #e2e8f0;
    --color-danger: #ba1a1a;
    --color-success: #1b873f;
    --color-warning: #b78103;
}

html.dark, :root.dark {
    --color-bg: #0b1120;
    --color-surface: #1e293b;
    --color-surface-dim: #334155;
    --color-text-main: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-border: #334155;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(114, 119, 130, 0.25);
    border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(114, 119, 130, 0.45);
}

html.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
}

html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.45);
}

/* Base Body Styles */
body {
    font-family: var(--font-family, 'Montserrat'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text-main);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   DINÂMICA WHITELABEL — CORES PRIMÁRIA, SECUNDÁRIA E ACENTUAÇÕES
   ========================================================================== */

/* Topbar & Sidebar com a Cor Primária */
#main-topbar,
#main-sidebar,
aside#main-sidebar,
aside,
#sidebar,
.bg-nav-bg {
    background-color: var(--color-primary, #00182E) !important;
}

/* Botões de Ação, Abas Ativas e Destaques Secundários */
.bg-secondary,
button.bg-secondary,
a.bg-secondary,
.tab-btn.bg-secondary,
#btn-save-branding,
#btn-save-empresa,
#btn-save-pdv-params,
#btn-finalizar {
    background-color: var(--color-secondary, #0077b6) !important;
    color: #ffffff !important;
}

.bg-secondary:hover,
button.bg-secondary:hover,
a.bg-secondary:hover {
    filter: brightness(1.1);
}

.text-secondary {
    color: var(--color-secondary, #0077b6) !important;
}

.border-secondary {
    border-color: var(--color-secondary, #0077b6) !important;
}

.bg-primary {
    background-color: var(--color-primary, #006494) !important;
}

.text-primary {
    color: var(--color-primary, #006494) !important;
}

/* Itens Ativos de Navegação no Sidebar */
.nav-link.active,
.nav-item-btn.active {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    border-left: 4px solid var(--color-accent, #00a8e8) !important;
}

.nav-link.active .nav-icon,
.nav-item-btn.active .nav-icon {
    color: var(--color-accent, #40c2fd) !important;
}

/* Badges e Tags com Fundo Transparente da Cor Secundária / Destaque */
.bg-secondary\/10,
#badge-tenant-role {
    background-color: rgba(var(--color-secondary-rgb, 0, 119, 182), 0.15) !important;
    color: var(--color-secondary, #0077b6) !important;
}

.badge-accent {
    background-color: rgba(var(--color-accent-rgb, 0, 168, 232), 0.15) !important;
    color: var(--color-accent, #00a8e8) !important;
}

/* Responsive Modal Background Transition */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

/* ==========================================================================
   DARK MODE ADAPTIVE STYLES
   ========================================================================== */

html.dark body {
    background-color: #0b1120 !important;
    color: #f8fafc !important;
}

/* Containers, Cards e Superfícies */
html.dark .bg-white,
html.dark .bg-surface-container-lowest,
html.dark .bg-surface {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark .bg-slate-50,
html.dark .bg-gray-50,
html.dark .bg-slate-100,
html.dark .bg-gray-100 {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark .bg-background {
    background-color: #0b1120 !important;
}

/* Tipografia e Textos */
html.dark .text-on-surface,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
    color: #f8fafc !important;
}

html.dark .text-on-surface-variant,
html.dark .text-slate-600,
html.dark .text-slate-500,
html.dark .text-gray-600,
html.dark .text-gray-500,
html.dark .text-outline {
    color: #94a3b8 !important;
}

/* Inputs, Selects e Textareas */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: var(--color-secondary, #0077b6) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-secondary-rgb, 0, 119, 182), 0.25) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

/* Tabelas e Linhas */
html.dark table thead,
html.dark thead tr {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

html.dark table th {
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html.dark table td {
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark table tbody tr:hover {
    background-color: rgba(51, 65, 85, 0.35) !important;
}

/* Bordas e Divisores */
html.dark .border-outline-variant\/10,
html.dark .border-outline-variant\/20,
html.dark .border-outline-variant\/30,
html.dark .border-outline-variant,
html.dark .border-slate-200,
html.dark .border-gray-200,
html.dark .border-gray-100 {
    border-color: #334155 !important;
}

html.dark .divide-slate-100,
html.dark .divide-slate-200,
html.dark .divide-gray-100 {
    border-color: #334155 !important;
}

/* Modais e Caixas de Diálogo */
html.dark .modal-content,
html.dark [role="dialog"],
html.dark .bg-white.p-6.rounded-2xl,
html.dark .bg-white.p-6.rounded-xl {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Badges e Chips */
html.dark .tab-btn.text-outline:hover {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark #tenant-slug-badge {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}