/*
 * Design system OperaGastro.
 *
 * - Telas da EQUIPE: identidade da plataforma (azul petróleo + laranja), definida aqui.
 * - Telas do CLIENTE (body.tela-cliente) e cupom: identidade do RESTAURANTE, vinda do banco
 *   e injetada em base.html como --marca-* (cores validadas por contraste em app/services/marca.py).
 * - KDS (body.tema-kds): tema escuro de alto contraste para monitor de cozinha.
 *
 * Todos os pares texto/fundo usados aqui têm contraste WCAG ≥ 4,5:1 (conferido na implementação).
 */

:root {
    /* Identidade OperaGastro */
    --og-primaria: #0F4C5C;          /* branco por cima: 9,5:1 */
    --og-primaria-escura: #083B4A;
    --og-profunda: #062F3A;
    --og-acao: #F28C28;              /* SEMPRE com texto grafite (branco reprova: 2,4:1) */
    --og-acao-hover: #E57B18;
    --og-acao-forte: #C2410C;        /* alternativa com texto branco: 5,2:1 */

    /* Estados (cores de preenchimento com texto) */
    --og-sucesso: #15803D;           /* branco: 5,0:1 (o #16A34A reprova com texto) */
    --og-sucesso-borda: #16A34A;     /* só borda/indicador, sem texto */
    --og-aviso: #EAB308;             /* SEMPRE com texto grafite: 8,5:1 */
    --og-preparo: #F97316;           /* com texto grafite: 5,8:1 */
    --og-perigo: #DC2626;            /* branco: 4,8:1 */
    --og-info: #2563EB;              /* branco: 5,2:1 */
    --og-indisponivel: #64748B;

    /* Estrutura */
    --og-fundo: #F7F8F6;
    --og-superficie: #FFFFFF;
    --og-texto: #172126;
    --og-texto-secundario: #52656A;  /* 5,7:1 no fundo */
    --og-borda: #E2E8E6;

    /* Cores por função da equipe */
    --og-papel-gerente: #0F4C5C;
    --og-papel-garcom: #2563EB;
    --og-papel-cozinha: #C2410C;
    --og-papel-caixa: #15803D;
    --og-papel-superadmin: #7C3AED;

    /* Bootstrap 5.3 usa estas variáveis em .bg-*, .text-*, .badge, bordas e links */
    --bs-primary: #0F4C5C;   --bs-primary-rgb: 15, 76, 92;
    --bs-success: #15803D;   --bs-success-rgb: 21, 128, 61;
    --bs-danger: #DC2626;    --bs-danger-rgb: 220, 38, 38;
    --bs-warning: #EAB308;   --bs-warning-rgb: 234, 179, 8;
    --bs-info: #2563EB;      --bs-info-rgb: 37, 99, 235;
    --bs-dark: #083B4A;      --bs-dark-rgb: 8, 59, 74;
    --bs-secondary-rgb: 82, 101, 106;
    --bs-body-bg: #F7F8F6;
    --bs-body-color: #172126;
    --bs-secondary-color: #52656A;
    --bs-border-color: #E2E8E6;
    --bs-link-color: #0F4C5C;  --bs-link-color-rgb: 15, 76, 92;
    --bs-link-hover-color: #062F3A;
    --bs-light: #F7F8F6;     --bs-light-rgb: 247, 248, 246;
    --bs-tertiary-bg: #EEF2F1;
    --bs-secondary-bg: #E2E8E6;
    --bs-focus-ring-color: rgba(15, 76, 92, 0.3);

    /* Fundos suaves dos avisos (alert) e realces, derivados da paleta */
    --bs-primary-bg-subtle: #E3EEF0;  --bs-primary-border-subtle: #A9C7CE;  --bs-primary-text-emphasis: #083B4A;
    --bs-success-bg-subtle: #E8F7EE;  --bs-success-border-subtle: #A7DDB9;  --bs-success-text-emphasis: #166534;
    --bs-warning-bg-subtle: #FEF3C7;  --bs-warning-border-subtle: #F5D565;  --bs-warning-text-emphasis: #854D0E;
    --bs-danger-bg-subtle: #FDE8E8;   --bs-danger-border-subtle: #F4A9A9;   --bs-danger-text-emphasis: #991B1B;
    --bs-info-bg-subtle: #E6EEFD;     --bs-info-border-subtle: #A9C1F5;     --bs-info-text-emphasis: #1E40AF;
    --bs-light-bg-subtle: #FFFFFF;    --bs-light-border-subtle: #E2E8E6;    --bs-light-text-emphasis: #52656A;
    --bs-secondary-bg-subtle: #EEF2F1; --bs-secondary-border-subtle: #CBD5D7; --bs-secondary-text-emphasis: #172126;
}

body, body.bg-light { background-color: var(--og-fundo) !important; color: var(--og-texto); }
.text-muted { color: var(--og-texto-secundario) !important; }
.text-success { color: var(--og-sucesso) !important; }
/* Laranja forte em fundo claro (5,2:1); o laranja normal só em fundo escuro (4,9:1 no petróleo) */
.text-warning { color: var(--og-acao-forte) !important; }
.bg-dark .text-warning, .navbar .text-warning, .modal-content.bg-dark .text-warning, .tema-kds .text-warning { color: var(--og-acao) !important; }
/* Telas do cliente não usam o petróleo da plataforma nas áreas escuras */
.tela-cliente .bg-dark { background-color: #172126 !important; }
.card { border-color: var(--og-borda); }
/* Texto secundário sobre fundos coloridos: 50% de opacidade (padrão Bootstrap) fica ilegível */
.text-white-50 { color: rgba(255, 255, 255, 0.9) !important; }
.bg-success .text-white-50, .bg-danger .text-white-50, .bg-info .text-white-50 { color: #FFFFFF !important; }   /* fundos de 4,8–5,2:1 */
code { color: var(--og-primaria); }
.btn-outline-secondary {
    --bs-btn-color: var(--og-texto-secundario); --bs-btn-border-color: var(--og-texto-secundario);
    --bs-btn-hover-bg: var(--og-texto-secundario); --bs-btn-hover-border-color: var(--og-texto-secundario); --bs-btn-hover-color: #fff;
}

/* ---------------------------------------------------------------- Botões (equipe) */
.btn-primary {
    --bs-btn-bg: var(--og-primaria); --bs-btn-border-color: var(--og-primaria); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--og-primaria-escura); --bs-btn-hover-border-color: var(--og-primaria-escura); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--og-profunda); --bs-btn-active-border-color: var(--og-profunda);
    --bs-btn-disabled-bg: var(--og-primaria); --bs-btn-disabled-border-color: var(--og-primaria);
}
.btn-outline-primary {
    --bs-btn-color: var(--og-primaria); --bs-btn-border-color: var(--og-primaria);
    --bs-btn-hover-bg: var(--og-primaria); --bs-btn-hover-border-color: var(--og-primaria); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--og-primaria-escura);
}
/* Ação principal = laranja OperaGastro com texto grafite */
.btn-warning, .btn-acao {
    --bs-btn-bg: var(--og-acao); --bs-btn-border-color: var(--og-acao); --bs-btn-color: var(--og-texto);
    --bs-btn-hover-bg: var(--og-acao-hover); --bs-btn-hover-border-color: var(--og-acao-hover); --bs-btn-hover-color: var(--og-texto);
    --bs-btn-active-bg: var(--og-acao-hover); --bs-btn-active-color: var(--og-texto);
    --bs-btn-disabled-bg: var(--og-acao); --bs-btn-disabled-border-color: var(--og-acao); --bs-btn-disabled-color: var(--og-texto);
}
/* Mudança de estado da mesa (solicitar fechamento) = amarelo com texto grafite */
.btn-estado {
    --bs-btn-bg: var(--og-aviso); --bs-btn-border-color: var(--og-aviso); --bs-btn-color: var(--og-texto);
    --bs-btn-hover-bg: #CA9A06; --bs-btn-hover-border-color: #CA9A06; --bs-btn-hover-color: var(--og-texto);
}
.btn-success {
    --bs-btn-bg: var(--og-sucesso); --bs-btn-border-color: var(--og-sucesso); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534; --bs-btn-hover-color: #fff;
}
.btn-outline-success {
    --bs-btn-color: var(--og-sucesso); --bs-btn-border-color: var(--og-sucesso);
    --bs-btn-hover-bg: var(--og-sucesso); --bs-btn-hover-border-color: var(--og-sucesso); --bs-btn-hover-color: #fff;
}
.btn-danger { --bs-btn-bg: var(--og-perigo); --bs-btn-border-color: var(--og-perigo); --bs-btn-hover-bg: #B91C1C; --bs-btn-hover-border-color: #B91C1C; }
.btn-outline-danger {
    --bs-btn-color: #B91C1C; --bs-btn-border-color: var(--og-perigo);
    --bs-btn-hover-bg: var(--og-perigo); --bs-btn-hover-border-color: var(--og-perigo); --bs-btn-hover-color: #fff;
}
/* Bootstrap põe texto preto no .btn-info; com o azul do OperaGastro o texto é branco */
.btn-info, .btn-info:hover, .btn-info:focus { --bs-btn-bg: var(--og-info); --bs-btn-border-color: var(--og-info); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #1D4ED8; --bs-btn-hover-border-color: #1D4ED8; --bs-btn-hover-color: #fff; color: #fff; }
.text-bg-info, .badge.bg-info { color: #fff !important; }

/* Cinza e preto do Bootstrap → neutros da paleta */
.btn-secondary {
    --bs-btn-bg: var(--og-texto-secundario); --bs-btn-border-color: var(--og-texto-secundario); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #3E4F53; --bs-btn-hover-border-color: #3E4F53; --bs-btn-hover-color: #fff;
}
.btn-outline-dark {
    --bs-btn-color: var(--og-texto); --bs-btn-border-color: var(--og-texto);
    --bs-btn-hover-bg: var(--og-texto); --bs-btn-hover-border-color: var(--og-texto); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--og-texto); --bs-btn-active-border-color: var(--og-texto); --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--og-texto); --bs-btn-disabled-border-color: var(--og-texto);
}
.btn-light {
    --bs-btn-bg: #FFFFFF; --bs-btn-border-color: #FFFFFF; --bs-btn-color: var(--og-texto);
    --bs-btn-hover-bg: var(--og-fundo); --bs-btn-hover-border-color: var(--og-fundo); --bs-btn-hover-color: var(--og-texto);
}
.btn-outline-warning {
    --bs-btn-color: var(--og-texto); --bs-btn-border-color: var(--og-acao);
    --bs-btn-hover-bg: var(--og-acao); --bs-btn-hover-border-color: var(--og-acao); --bs-btn-hover-color: var(--og-texto);
}
/* "Em preparo": laranja com texto grafite (mesmo selo no KDS, na comanda e no celular) */
.bg-preparo { background-color: var(--og-preparo) !important; color: var(--og-texto) !important; }
.btn-preparo {
    --bs-btn-bg: var(--og-preparo); --bs-btn-border-color: var(--og-preparo); --bs-btn-color: var(--og-texto);
    --bs-btn-hover-bg: #EA580C; --bs-btn-hover-border-color: #EA580C; --bs-btn-hover-color: var(--og-texto);
    --bs-btn-active-bg: #EA580C; --bs-btn-active-color: var(--og-texto);
}
/* Formulários: marcação e foco no petróleo, não no azul do Bootstrap */
.form-check-input:checked { background-color: var(--og-primaria); border-color: var(--og-primaria); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #6F9DA8; box-shadow: 0 0 0 0.25rem rgba(15, 76, 92, 0.25);
}
.table-light { --bs-table-bg: #EEF2F1; --bs-table-color: var(--og-texto); --bs-table-border-color: var(--og-borda); }
.table-warning { --bs-table-bg: #FEF3C7; --bs-table-color: var(--og-texto); --bs-table-border-color: #F5D565; }
.progress { --bs-progress-bg: var(--og-borda); --bs-progress-bar-bg: var(--og-primaria); }
.alert-light { --bs-alert-color: var(--og-texto-secundario); }

/* ---------------------------------------------------------------- Navegação da equipe */
.navbar-operagastro { background: var(--og-primaria-escura) !important; }
.marca-operagastro { color: #fff; font-weight: 800; letter-spacing: -0.01em; }
.marca-operagastro .marca-acento { color: var(--og-acao); }               /* 4,9:1 sobre o petróleo escuro */
.marca-operagastro .marca-restaurante { color: #D7E3E6; font-weight: 600; }
.navbar-operagastro .text-light { color: #FFFFFF !important; }

/* ---------------------------------------------------------------- Função da equipe (crachá) */
.badge.papel-gerente { background: var(--og-papel-gerente); }
.badge.papel-garcom { background: var(--og-papel-garcom); }
.badge.papel-cozinha { background: var(--og-papel-cozinha); }
.badge.papel-caixa { background: var(--og-papel-caixa); }
.badge.papel-superadmin { background: var(--og-papel-superadmin); }

/* ---------------------------------------------------------------- Mapa do salão */
.mesa-box { border: 2px solid transparent; }
.mesa-livre { background: #F8FAFA !important; border-color: #CBD5D7 !important; color: var(--og-texto) !important; }
.mesa-ocupada { background: #E8F7EE !important; border-color: var(--og-sucesso-borda) !important; color: #166534 !important; }
.mesa-aguardando { background: #FEF3C7 !important; border-color: var(--og-aviso) !important; color: #854D0E !important; }

/* ---------------------------------------------------------------- KDS: tema escuro de cozinha */
body.tema-kds { background: #0B2027 !important; color: #FFFFFF; }
/* Selos (.badge) ficam de fora: têm o próprio par de cores (ex.: amarelo com texto grafite) */
.tema-kds h2, .tema-kds h5, .tema-kds .text-dark:not(.badge) { color: #FFFFFF !important; }
.tema-kds .text-muted:not(.badge), .tema-kds .text-secondary:not(.badge), .tema-kds small:not(.badge) { color: #B8C7CA !important; }
.tema-kds .badge.bg-warning, .tema-kds .badge.text-dark { color: var(--og-texto) !important; }
.tema-kds .kds-card { background: #102D35; border: 2px solid #1E4A55; color: #FFFFFF; }
.tema-kds .kds-card .border-top, .tema-kds .kds-card .border-bottom { border-color: #1E4A55 !important; }
.tema-kds .kds-card.em-preparo { border-left: 6px solid var(--og-preparo); }
.tema-kds .kds-card.pronto { border-left: 6px solid #22C55E; }
.tema-kds .kds-card .badge.bg-dark { background: #FFFFFF !important; color: #102D35 !important; }
.tema-kds .kds-card .text-primary { color: #7DD3FC !important; }
.tema-kds .kds-tempo.bg-success { background: #15803D !important; }
.tema-kds .kds-tempo.bg-danger { background: #B91C1C !important; }
.tema-kds .btn-outline-success { --bs-btn-color: #22C55E; --bs-btn-border-color: #22C55E; }
.tema-kds .btn-outline-secondary { --bs-btn-color: #D7E3E6; --bs-btn-border-color: #D7E3E6; --bs-btn-hover-bg: #D7E3E6; --bs-btn-hover-color: #0B2027; }
.tema-kds .alert-warning { color: #3F2A00; }
.tema-kds .kds-card.em-preparo .badge.bg-preparo { color: var(--og-texto) !important; }
.tema-kds .kds-card.kds-atrasado { border-color: #EF4444 !important; }

/* ---------------------------------------------------------------- Telas do cliente: identidade do RESTAURANTE */
.tela-cliente .marca-topo { background: var(--marca-primaria) !important; color: var(--marca-primaria-texto) !important; }
.tela-cliente .marca-topo .text-white-50 { color: var(--marca-primaria-texto) !important; opacity: 0.85; }
.tela-cliente .navbar-restaurante { background: var(--marca-primaria) !important; }
.tela-cliente .navbar-restaurante .navbar-brand { color: var(--marca-primaria-texto) !important; }
.tela-cliente .btn-primary, .tela-cliente .btn-marca {
    --bs-btn-bg: var(--marca-primaria); --bs-btn-border-color: var(--marca-primaria); --bs-btn-color: var(--marca-primaria-texto);
    --bs-btn-hover-bg: var(--marca-primaria); --bs-btn-hover-border-color: var(--marca-primaria); --bs-btn-hover-color: var(--marca-primaria-texto);
    --bs-btn-active-bg: var(--marca-primaria); --bs-btn-active-color: var(--marca-primaria-texto);
}
.tela-cliente .btn-hover-sombra:hover, .tela-cliente .btn-primary:hover { filter: brightness(0.92); }
.tela-cliente .btn-outline-primary {
    --bs-btn-color: var(--og-texto); --bs-btn-border-color: var(--marca-primaria);
    --bs-btn-hover-bg: var(--marca-primaria); --bs-btn-hover-border-color: var(--marca-primaria); --bs-btn-hover-color: var(--marca-primaria-texto);
}
/* Destaques em texto no cliente: cor da marca quando legível sobre o fundo claro, senão grafite
   (--marca-destaque calculada no servidor, app/services/marca.py) */
.tela-cliente { --bs-link-color: var(--marca-destaque); --bs-link-color-rgb: var(--marca-destaque-rgb); --bs-link-hover-color: var(--marca-destaque); }
.tela-cliente .text-primary, .tela-cliente .text-warning, .tela-cliente .titulo-categoria { color: var(--marca-destaque) !important; }
.tela-cliente .alert-info, .tela-cliente .alert-light {
    --bs-alert-bg: #FFFFFF; --bs-alert-color: var(--og-texto); --bs-alert-border-color: var(--og-borda);
    border-left: 4px solid var(--marca-primaria);
}
.tela-cliente .alert-info .fa-circle-info { color: var(--marca-destaque); }
.tela-cliente .text-dark { color: var(--og-texto) !important; }
.tela-cliente .marca-no-escuro { color: var(--marca-destaque-escuro) !important; }
.tela-cliente .barra-pedidos { border-top: 3px solid var(--marca-secundaria) !important; }
.tela-cliente .marca-secundaria { background: var(--marca-secundaria) !important; color: var(--marca-secundaria-texto) !important; }
.tela-cliente .icone-categoria { color: var(--marca-primaria); }
.tela-cliente .banner-restaurante { width: 100%; max-height: 180px; object-fit: cover; }
.tela-cliente .logo-restaurante { height: 32px; width: auto; border-radius: 6px; }
.tela-cliente .badge.bg-primary { background-color: var(--marca-primaria) !important; color: var(--marca-primaria-texto) !important; }

/* Escolha do estilo do cardápio (/admin): a opção marcada fica sólida e com ✓ */
.opcao-estilo { transition: none; background: #FFFFFF; color: var(--og-texto); border-color: var(--og-borda); }
.opcao-estilo:hover { background: #EEF2F1; color: var(--og-texto); border-color: var(--og-primaria); }
.opcao-estilo .marca-escolhida { display: none; }
.btn-check:checked + .opcao-estilo { background: var(--og-primaria); color: #FFFFFF; border-color: var(--og-primaria); }
.btn-check:checked + .opcao-estilo .marca-escolhida { display: inline-block; }
.btn-check:focus-visible + .opcao-estilo { box-shadow: 0 0 0 0.25rem rgba(15, 76, 92, 0.35); }