/*
 * Camada visual "moderna" por cima do tema Atlant (theme-default) e do style.min.css.
 * Carregada por último nos index; para reverter basta remover o <link>.
 * Só mexe em cor, borda, raio, sombra e transição; evita alterar medidas que quebrem o layout.
 * No menu lateral só a tipografia é ajustada; as cores ficam as do tema.
 */
:root {
    --om-bg: #f3f5f8;
    --om-surface: #fff;
    --om-border: #e2e7ee;
    --om-border-forte: #cfd7e1;
    --om-linha: #edf0f4;
    --om-texto: #2b3a4a;
    --om-texto-suave: #6b7a8c;
    --om-primaria: #2f6fb3;
    --om-foco: rgba(47, 111, 179, .18);
    --om-raio: 8px;
    --om-raio-sm: 6px;
    --om-sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
    --om-sombra-alta: 0 10px 30px rgba(16, 24, 40, .14);
}

/* ---------- Base ---------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-content {
    background: var(--om-bg) !important;
}

/* ---------- Menu lateral: só tipografia (cores ficam as do tema) ---------- */
.x-navigation:not(.x-navigation-horizontal) .xn-text {
    font-size: 14px;
    font-weight: 400;
}

/* Menu do usuário (canto superior direito): mesmo cinza da sidebar, branco no hover */
.lista-menu-vertical li:not(.subtitulo) a {
    color: #C9CDD1;
    /* Sem transição de background: o li:hover do base.css é #FFF e aparecia por trás do <a> durante o fade (flash branco) */
    transition: color .15s ease;
}

.lista-menu-vertical li:not(.subtitulo):hover a {
    color: #FFF;
}

/* ---------- Barra superior ---------- */
.x-navigation.x-navigation-horizontal {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 2px 8px rgba(16, 24, 40, .12);
}

.x-navigation .xn-search input.pesquisa-toolbar {
    border-radius: var(--om-raio-sm);
    transition: background .15s ease, border-color .15s ease;
}

/* ---------- Botões ---------- */
.btn {
    border-radius: var(--om-raio-sm);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.btn-default {
    border-color: var(--om-border-forte);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.btn-default:hover,
.btn-default:focus {
    background: #f7f9fb;
    border-color: #b9c4d1;
}

.botao-primario, .botao-secundario, .botao-primario-modal, .botao-secundario-modal,
.botao-cancelamento-modal, .botao-alerta {
    border-radius: var(--om-raio-sm);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.botao-primario, .botao-primario-modal, .botao-alerta {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}

.botao-secundario, .botao-secundario-modal {
    background: var(--om-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.botao-secundario:not([disabled]):hover,
.botao-secundario-modal:not([disabled]):hover {
    background: #f4f7fa;
    border-color: #b9c4d1 !important;
}

/* Bloquear horário na agenda: mantém o hover vermelho do base.css (ícone é branco no hover) */
.botao-agenda.bloquear:not([disabled]):hover {
    background: #E04B4A;
    border-color: #A8403F !important;
    color: #FFF;
}

.btn:focus, .btn:active:focus,
.botao-primario:focus, .botao-secundario:focus,
.botao-primario-modal:focus, .botao-secundario-modal:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--om-foco);
}

/* ---------- Campos ---------- */
.form-control {
    border-radius: var(--om-raio-sm);
    border-color: var(--om-border-forte);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus {
    border-color: var(--om-primaria);
    box-shadow: 0 0 0 3px var(--om-foco);
}

.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* ---------- Painéis, modais e dropdowns ---------- */
.panel {
    border: 1px solid var(--om-border);
    border-radius: var(--om-raio);
    box-shadow: var(--om-sombra);
}

.panel > .panel-heading {
    border-top-left-radius: var(--om-raio);
    border-top-right-radius: var(--om-raio);
}

.modal-content {
    border: none;
    border-radius: 10px;
    box-shadow: var(--om-sombra-alta);
    overflow: hidden;
}

.modal-header {
    border-bottom-color: var(--om-linha);
}

.modal-footer {
    border-top-color: var(--om-linha);
}

.modal-backdrop.in {
    opacity: .4;
}

.dropdown-menu {
    border: 1px solid var(--om-border);
    border-radius: var(--om-raio);
    box-shadow: var(--om-sombra-alta);
}

/* ---------- Tabelas ---------- */
.tabela-padrao {
    color: var(--om-texto);
}

.tabela-padrao td {
    border-color: var(--om-linha);
}

.tabela-padrao thead th {
    background: #f8fafc;
    border-top-color: var(--om-border);
    border-bottom: 1px solid var(--om-border);
    color: var(--om-texto-suave);
}

.tabela-padrao th:first-child, .tabela-padrao td:first-child {
    border-left-color: var(--om-border);
}

.tabela-padrao th:last-child, .tabela-padrao td:last-child {
    border-right-color: var(--om-border);
}

/* Hover na <tr>, não nas <td>: a agenda pinta a linha com style inline (cor do agendamento),
   que vence esta regra; pintar as <td> cobria essa cor e o texto branco do status sumia */
.tabela-padrao.table-hover > tbody > tr:hover {
    background-color: #f5f8fc;
}

/* ---------- Agenda: calendário e widgets laterais ---------- */
.container-agenda .calendario div.datepicker,
.container-lembrete,
.container-resumo-financeiro .container-aniversario {
    border-color: var(--om-border);
    border-radius: var(--om-raio);
    box-shadow: var(--om-sombra);
    overflow: hidden;
}

.container-lembrete {
    margin-bottom: 8px;
}

.container-lembrete .header,
.container-lembrete .header-financeiro,
.container-lembrete .header-aniversario {
    padding: 8px 10px;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
    border-radius: var(--om-raio-sm);
}

.datepicker table tr td.day:hover {
    border-radius: var(--om-raio-sm);
}

/* ---------- Rolagem ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #c3ccd7;
    border: 2px solid transparent;
    border-radius: 10px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a9b5c3;
}

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

/* ---------- Impressão: sem sombras nem fundos decorativos ---------- */
@media print {
    .page-content { background: #fff !important; }
    .panel, .modal-content, .container-lembrete,
    .container-agenda .calendario div.datepicker,
    .btn, .botao-primario, .botao-secundario {
        box-shadow: none !important;
    }
}