/* Camada de TEMA — carregada por último (override).
 * Tema ÚNICO "Claro" (chave interna data-theme="light3"). Tudo via variáveis CSS.
 * Não toca em componentes/JS — só aparência.
 */

:root {
    --bg:            #eef1f5;
    --surface:       #ffffff;
    --surface-2:     #f6f8fb;
    --text:          #2b3138;
    --text-muted:    #6b7785;
    --border:        #e3e8ef;
    --accent:        #008bb9;
    --accent-2:      #337ab7;
    --accent-soft:   rgba(0,139,185,.15);
    --radius:        8px;
    --radius-sm:     6px;
    --shadow:        0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
    --navbar-bg:     #ffffff;
}

/* ===== Tema "Claro" (chave light3 — estilo "pro": acento slate + chrome navy) =====
   Inspirado em apps modernos (ex.: LotusVet): fundo cinza-azulado claro,
   texto navy, primária azul royal e o "chrome" (navbar/menu) em navy escuro. */
html[data-theme="light3"] {
    --bg:            #f5f7fb;   /* cinza-azulado bem claro */
    --surface:       #ffffff;
    --surface-2:     #eef2f8;   /* azulado claro (hover / zebra) */
    --text:          #1e293b;   /* navy slate */
    --text-muted:    #64748b;   /* slate */
    --border:        #e3e8f1;
    --accent:        #3d5d8c;   /* azul-slate dessaturado — mesma família do navy do menu (#1e293b), menos vivo */
    --accent-2:      #324c73;   /* slate-blue mais escuro (hover / botões) */
    --accent-soft:   rgba(61,93,140,.14);
    --radius:        10px;
    --radius-sm:     8px;
    --shadow:        0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
    --navbar-bg:     #1e293b;   /* chrome navy (topo/menu escuro, como a referência) */
}

/* ===== Tema "Escuro" (chave dark3 — par escuro do Claro) =====
   Mesma família slate/navy do light3, porém escuro SEM ser preto: fundo slate,
   superfícies levemente elevadas, acento azul-slate mais claro p/ destacar no escuro. */
html[data-theme="dark3"] {
    --bg:            #182331;   /* slate escuro (não preto) */
    --surface:       #222f41;   /* cards (levemente elevados) */
    --surface-2:     #2c3b50;   /* hover / zebra */
    --text:          #e7edf5;   /* off-white (não branco puro) */
    --text-muted:    #9aa8bd;   /* slate claro */
    --border:        #36475e;
    --accent:        #5f8cd1;   /* azul-slate mais claro (pop no escuro) */
    --accent-2:      #4e79bd;   /* hover */
    --accent-soft:   rgba(95,140,209,.20);
    --radius:        10px;
    --radius-sm:     8px;
    --shadow:        0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30);
    --navbar-bg:     #131b27;   /* chrome (topo/menu) mais escuro que o conteúdo */
}


/* ---------- Base ---------- */
/* Remove o wallpaper (vinha inline via bodyStyle do homeController) e aplica fundo limpo */
body {
    background: var(--bg) !important;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, label, .control-label { color: var(--text); }
.text-muted, small, .help-block { color: var(--text-muted) !important; }
a:not(.btn):not(.navbar-brand):not(.dropdown-toggle):not(.grid-title) { color: var(--accent); }
a:not(.btn):not(.navbar-brand):not(.grid-title):hover { color: var(--accent-2); }
/* Títulos clicáveis de ordenação do grid ficam sobre o cabeçalho teal → mantêm branco */
.th-primary a, .grid-title, a.grid-title, a.grid-title:hover, a.grid-title:focus { color: #ffffff; }
hr { border-top-color: var(--border); }

/* ---------- Navbar ---------- */
.navbar-default {
    background: var(--navbar-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: var(--shadow);
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a { color: var(--text) !important; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a {
    background: var(--surface-2) !important;
    color: var(--accent) !important;
}

/* ---------- Superfícies (cards/painéis/modais/dropdowns) ---------- */
.panel, .well, .modal-content, .list-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
}
.panel-default > .panel-heading,
.panel-heading {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
.panel-footer { background: var(--surface-2); border-top: 1px solid var(--border); color: var(--text); }
.modal-header, .modal-footer { border-color: var(--border); }
.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.dropdown-menu > li > a { color: var(--text); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--surface-2); color: var(--accent); }
.dropdown-menu .divider { background-color: var(--border); }
.list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); }

/* bs-callout (usado no login etc.) — inline style="background:#fff" é vencido pelo !important */
.bs-callout { background: var(--surface) !important; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); color: var(--text); }

/* ---------- Formulários ---------- */
.form-control {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: none;
}
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-control::placeholder { color: var(--text-muted); }
.input-group-addon { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }

/* ngTagsInput (tags-input): a lib traz fundo branco/gradiente fixos e não respeita o tema.
   Consome as variáveis (vale em light3 e dark3). Cobre todos os usos (clientes, serviços, consultores, etc.). */
html[data-skin="pro"] tags-input .tags {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: none;
    color: var(--text);
}
html[data-skin="pro"] tags-input .tags.focused {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
html[data-skin="pro"] tags-input .tags .input {
    background: transparent;
    color: var(--text);
}
html[data-skin="pro"] tags-input .tags .input::placeholder { color: var(--text-muted); }
html[data-skin="pro"] tags-input .tags .tag-item {
    background: var(--accent);
    border-color: var(--accent-2);
    color: #fff;
}
html[data-skin="pro"] tags-input .tags .tag-item .remove-button { color: rgba(255,255,255,.85); }
html[data-skin="pro"] tags-input .tags .tag-item .remove-button:hover { color: #fff; }
html[data-skin="pro"] tags-input[disabled] .tags,
html[data-skin="pro"] tags-input[disabled] .tags .input { background: var(--surface-2); }
html[data-skin="pro"] tags-input .autocomplete {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
html[data-skin="pro"] tags-input .autocomplete .suggestion-item,
html[data-skin="pro"] tags-input .autocomplete .suggestion-item em {
    background: var(--surface);
    color: var(--text);
}
html[data-skin="pro"] tags-input .autocomplete .suggestion-item.selected,
html[data-skin="pro"] tags-input .autocomplete .suggestion-item.selected em {
    background: var(--accent);
    color: #fff;
}

/* FullCalendar v3 (Agenda de Compromissos): grid/cabeçalho/dias/hoje/eixo de horas e list view vêm
   com fundo branco e bordas #ddd fixos. Consome as variáveis (vale em light3 e dark3).
   Cobre todas as views: Mês, Semana, Dia e Compromissos (lista). */
html[data-skin="pro"] .fc { color: var(--text); }
html[data-skin="pro"] .fc-view-container,
html[data-skin="pro"] .fc-view,
html[data-skin="pro"] .fc-view > table { background: var(--surface); }
/* bordas */
html[data-skin="pro"] .fc-unthemed th,
html[data-skin="pro"] .fc-unthemed td,
html[data-skin="pro"] .fc-unthemed thead,
html[data-skin="pro"] .fc-unthemed tbody,
html[data-skin="pro"] .fc-unthemed .fc-divider,
html[data-skin="pro"] .fc-unthemed .fc-row,
html[data-skin="pro"] .fc-unthemed .fc-content,
html[data-skin="pro"] .fc-unthemed .fc-popover,
html[data-skin="pro"] .fc-unthemed .fc-list-view,
html[data-skin="pro"] .fc-unthemed .fc-list-heading td { border-color: var(--border); }
/* cabeçalho dos dias (Dom, Seg...) e eixo de horas */
html[data-skin="pro"] .fc-day-header,
html[data-skin="pro"] th.fc-widget-header { background: var(--surface-2); color: var(--text); }
html[data-skin="pro"] .fc-day-number,
html[data-skin="pro"] .fc-day-top,
html[data-skin="pro"] .fc-time-grid .fc-axis,
html[data-skin="pro"] .fc-list-heading .fc-list-heading-main,
html[data-skin="pro"] .fc-list-heading .fc-list-heading-alt { color: var(--text); }
/* hoje / dia desabilitado */
html[data-skin="pro"] .fc-unthemed td.fc-today { background: var(--accent-soft); }
html[data-skin="pro"] .fc-unthemed .fc-disabled-day { background: var(--surface-2); }
/* título (ex.: "Julho 2026") */
html[data-skin="pro"] .fc-toolbar h2 { color: var(--text); }
/* popover "mais eventos" */
html[data-skin="pro"] .fc-unthemed .fc-popover { background: var(--surface); }
html[data-skin="pro"] .fc-unthemed .fc-divider,
html[data-skin="pro"] .fc-unthemed .fc-popover .fc-header,
html[data-skin="pro"] .fc-unthemed .fc-list-heading td { background: var(--surface-2); }
/* list view (Compromissos) */
html[data-skin="pro"] .fc-list-table td { color: var(--text); }
html[data-skin="pro"] .fc-unthemed .fc-list-item:hover td { background: var(--surface-2); }
html[data-skin="pro"] .fc-list-empty { background: var(--surface); color: var(--text-muted); }

/* ---------- Tabelas ---------- */
.table { color: var(--text); }
.table > thead > tr > th { border-bottom: 2px solid var(--border); color: var(--text-muted); font-weight: 600; }
.table > tbody > tr > td, .table > tbody > tr > th,
.table > tfoot > tr > td { border-top: 1px solid var(--border); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-2); }
.table-hover > tbody > tr:hover { background: var(--accent-soft); }

/* ---------- Botões ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 500; }
.btn-primary { background: var(--accent-2); border-color: var(--accent-2); }
.btn-primary:hover, .btn-primary:focus { background: var(--accent); border-color: var(--accent); }
.btn-default { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-default:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }

/* ---------- Sidebar (app) ---------- */
.sidebar, .sidebar-nav { background: var(--surface); border-color: var(--border); }
.sidebar a { color: var(--text); }
.sidebar a:hover, .sidebar .active > a { background: var(--surface-2); color: var(--accent); }

/* ---------- Selects "chosen" (third-party) → usar as variáveis do tema ----------
   O chosen.js trazia cores fixas (fundo #fff, caixa com gradiente, destaque
   #3875d7→#2a62bc, bordas #aaa). Aqui ele passa a usar a paleta do tema (flat),
   ficando consistente com os inputs em TODOS os temas. */
.chosen-container .chosen-drop { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; }
.chosen-container-single .chosen-single {
    background: var(--surface) !important;   /* remove o gradiente Web 2.0 */
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    color: var(--text) !important;
}
.chosen-container-single .chosen-default { color: var(--text-muted) !important; }
.chosen-container-active .chosen-single,
.chosen-container-active .chosen-choices { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.chosen-container-active.chosen-with-drop .chosen-single { background: var(--surface) !important; }
/* lista de resultados: fundo do tema + texto legível (o chosen-bootstrap forçava .chosen-results
   e os li em #fff/cinza escuro — invisível/branco no dark). !important vence o seletor mais
   específico do chosen-bootstrap (select.form-control + .chosen-container ...). */
.chosen-container .chosen-results { background: var(--surface) !important; color: var(--text) !important; }
.chosen-container .chosen-results li,
.chosen-container .chosen-results li.active-result { background-color: transparent !important; color: var(--text) !important; }
.chosen-container .chosen-results li.highlighted,
.chosen-container .chosen-results li.active-result:hover,
.chosen-container .chosen-results li:hover { background: var(--accent) !important; color: #fff !important; }
.chosen-container .chosen-results li.result-selected { background: var(--surface-2) !important; color: var(--text) !important; }
.chosen-container .chosen-results li.group-result { color: var(--text-muted) !important; background: transparent !important; }
.chosen-container .chosen-results li.disabled-result { color: var(--text-muted) !important; }
.chosen-container .chosen-results li.no-results { background: var(--surface-2) !important; color: var(--text-muted) !important; }
/* campo de busca dentro do dropdown */
.chosen-container-single .chosen-search input[type=text],
.chosen-container .chosen-search input[type=text] {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
/* multi-select (tags) */
.chosen-container-multi .chosen-choices { background: var(--surface) !important; border: 1px solid var(--border) !important; }
.chosen-container-multi .chosen-choices li.search-choice {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    color: var(--text) !important;
}
.chosen-container-multi .chosen-choices li.search-field input[type=text] { color: var(--text) !important; }

/* ---------- Calendário (bootstrap-datepicker) → variáveis do tema ----------
   Tinha cores fixas (ativo #08c/#04c, hoje amarelo #fde19a, selecionado cinza,
   com gradientes). Aqui usa a paleta (flat) e fica consistente em todos os temas. */
.datepicker {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    color: var(--text);
}
/* a <table> interna (.table-condensed) herdava o `table { background:#fff }` global do app.css
   → fundo branco sobre o popup. Transparente p/ mostrar o popup do tema (vale em todos os temas). */
.datepicker table { background: transparent !important; }
.datepicker table tr td, .datepicker table tr th,
.datepicker thead th.datepicker-switch, .datepicker thead th.prev,
.datepicker thead th.next, .datepicker tfoot th { color: var(--text); }
.datepicker table tr td.old, .datepicker table tr td.new,
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover,
.datepicker table tr td span.disabled { color: var(--text-muted) !important; background: transparent !important; }
.datepicker table tr td.day:hover, .datepicker table tr td.focused,
.datepicker table tr td span:hover,
.datepicker thead th.datepicker-switch:hover, .datepicker thead th.prev:hover,
.datepicker thead th.next:hover, .datepicker tfoot th:hover { background: var(--surface-2) !important; }
/* hoje: realce sutil de accent (sem o amarelo) */
.datepicker table tr td.today, .datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover {
    background: var(--accent-soft) !important; background-image: none !important;
    color: var(--text) !important; border-color: var(--accent) !important;
}
/* selecionado/ativo: primária (sem gradiente/sombra de texto) */
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active, .datepicker table tr td.active:active,
.datepicker table tr td.selected, .datepicker table tr td.selected:hover,
.datepicker table tr td span.active, .datepicker table tr td span.active:hover {
    background: var(--accent) !important; background-image: none !important;
    color: #fff !important; text-shadow: none !important; border-color: var(--accent) !important;
}

/* ---------- Tabs ---------- */
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs > li > a { color: var(--text-muted); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover {
    background: var(--surface); color: var(--accent);
    border-color: var(--border) var(--border) transparent;
}

/* ---------- Rodapé ---------- */
.calima-footer {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--border) !important;
}
.calima-footer, .calima-footer .copy, .calima-footer a { color: var(--text-muted); }

/* ---------- Título empresa (topo direito) ---------- */
.title-empresa { color: var(--text-muted); }

/* ---------- Selects nativos / well / alerts ---------- */
select.form-control { background: var(--surface); color: var(--text); }
.well { background: var(--surface-2); }
.alert-info { background: var(--surface-2); border-color: var(--border); color: var(--text); }

/* ---------- Paginação ---------- */
/* cobre hover E focus (o app.css tinha :focus com azul Bootstrap) + remove o anel
   de foco do navegador; usa !important p/ vencer a especificidade do legado. */
.pagination > li > a, .pagination > li > span { background: var(--surface) !important; border-color: var(--border) !important; color: var(--accent) !important; }
.pagination > li > a:hover, .pagination > li > a:focus,
.pagination > li > span:hover, .pagination > li > span:focus {
    background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--accent) !important; outline: none !important;
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span:hover, .pagination > .active > span:focus {
    background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; outline: none !important;
}
.pagination > .disabled > a, .pagination > .disabled > span,
.pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
    background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-muted) !important;
}

/* ---------- Campos "fake" (div estilizada como input) ---------- */
.form-control-div { background: var(--surface); color: var(--text); border-color: var(--border); }

/* ---------- Dropdowns longos do menu (ex.: Nitrus) não estouram a tela ---------- */
.navbar-nav .dropdown-menu {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---------- App shell (top bar + menu lateral) ---------- */
/* O layout (app-shell.css) já consome estas variáveis, então herda os 4 temas.
   Aqui ficam só os ajustes finos de tema. */

/* item ativo do menu lateral (Bootstrap/ngRoute marca .active no <li>) */
.app-nav__group.active > .app-nav__item,
.app-nav__group .active > .app-nav__item {
    border-left-color: var(--accent);
    background: var(--surface-2);
    color: var(--accent);
}

/* barra de rolagem discreta na sidebar (dark inclusive) */
.app-sidebar { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.app-sidebar::-webkit-scrollbar { width: 8px; }
.app-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }

/* glyphicons da top bar e da sidebar acompanham a cor do texto/tema */
.app-topbar .glyphicons, .app-topbar .glyphicon,
.app-sidebar .glyphicons { color: inherit; }

/* ===== TEMA 3 (Claro 3): chrome navy com texto claro + acento azul royal ===== */
/* Navbar legado (chrome) em navy → textos/links claros (vencem o color:var(--text) padrão) */
html[data-skin="pro"] .navbar-default { border-bottom-color: rgba(255,255,255,.10) !important; }
html[data-skin="pro"] .navbar-default .navbar-brand,
html[data-skin="pro"] .navbar-default .navbar-brand span,
html[data-skin="pro"] .navbar-default .navbar-nav > li > a { color: #dbe3f0 !important; }
html[data-skin="pro"] .navbar-default .navbar-nav > li > a:hover,
html[data-skin="pro"] .navbar-default .navbar-nav > .open > a,
html[data-skin="pro"] .navbar-default .navbar-nav > .active > a {
    background: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
}
/* hambúrguer (navbar-toggle) e seus traços visíveis no navy */
html[data-skin="pro"] .navbar-default .navbar-toggle { border-color: rgba(255,255,255,.25) !important; }
html[data-skin="pro"] .navbar-default .navbar-toggle .icon-bar { background: #dbe3f0 !important; }

/* ----- Claro 3: APP SHELL — top bar DIVIDIDA (zona da marca navy + resto branco) ----- */
/* a zona da marca segue o tema do menu (navy) e o resto (sobre o conteúdo) é branco */
html[data-skin="pro"] .app-topbar {
    background: linear-gradient(to right, var(--navbar-bg) 0, var(--navbar-bg) var(--chrome-split), var(--surface) var(--chrome-split)) !important;
    border-bottom-color: var(--border);
}
html[data-skin="pro"] .app-sidebar { background: var(--navbar-bg); border-right-color: rgba(255,255,255,.08); }
/* zona da marca (navy) → logo/hambúrguer em tom claro */
html[data-skin="pro"] .app-topbar__brand,
html[data-skin="pro"] .app-topbar__brand span,
html[data-skin="pro"] .app-topbar__burger { color: #dbe3f0 !important; }
html[data-skin="pro"] .app-topbar__burger:hover { background: rgba(255,255,255,.12); color: #ffffff !important; }
/* ações (lado branco) → grafite */
html[data-skin="pro"] .app-topbar__actions > li > a,
html[data-skin="pro"] .app-topbar__actions > li > .app-topbar__btn { color: var(--text) !important; }
html[data-skin="pro"] .app-topbar__actions > li > a:hover,
html[data-skin="pro"] .app-topbar__actions > li.open > a,
html[data-skin="pro"] .app-topbar__actions > li > .app-topbar__btn:hover { background: var(--surface-2); color: var(--accent) !important; }
/* mobile: sem divisão (sidebar é off-canvas) — topo branco uniforme, marca em grafite */
@media (max-width: 768px) {
    html[data-skin="pro"] .app-topbar { background: var(--surface) !important; }
    html[data-skin="pro"] .app-topbar__brand,
    html[data-skin="pro"] .app-topbar__brand span,
    html[data-skin="pro"] .app-topbar__burger { color: var(--text) !important; }
}
/* navegação lateral: itens claros; hover e ativo destacados */
html[data-skin="pro"] .app-nav__item { color: #cdd6e5 !important; }
html[data-skin="pro"] .app-nav__item:hover,
html[data-skin="pro"] .app-nav__item:focus { background: rgba(255,255,255,.08); color: #ffffff !important; }
html[data-skin="pro"] .app-nav__submenu { background: rgba(0,0,0,.20); }
html[data-skin="pro"] .app-nav__subitem { color: #aab6c9 !important; }
html[data-skin="pro"] .app-nav__subitem:hover,
html[data-skin="pro"] .app-nav__subitem:focus { background: rgba(255,255,255,.06); color: #ffffff !important; }
html[data-skin="pro"] .app-nav__divider { background: rgba(255,255,255,.10); }
/* item ativo: realce azul + texto branco + barra de acento */
html[data-skin="pro"] .app-nav__group.active > .app-nav__item,
html[data-skin="pro"] .app-nav__group .active > .app-nav__item {
    border-left-color: var(--accent);
    background: rgba(56,117,215,.30);
    color: #ffffff !important;
}
/* flyout do mini-rail em superfície navy */
html[data-skin="pro"] body.sidebar-rail .app-nav__group:hover > .app-nav__submenu {
    background: #243049; border-color: rgba(255,255,255,.10);
}
/* scrollbar da sidebar mais clara sobre o navy */
html[data-skin="pro"] .app-sidebar { scrollbar-color: rgba(255,255,255,.25) transparent; }
html[data-skin="pro"] .app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); }
/* switcher de módulo (cabeçalho no topo da sidebar navy) → texto claro
   (!important vence a regra genérica de link do light3). A lista de módulos
   (.app-module__list/.app-module__item) usa --surface/--text → painel branco legível. */
html[data-skin="pro"] .app-module { border-bottom-color: rgba(255,255,255,.10); }
html[data-skin="pro"] .app-module__current { color: #dbe3f0 !important; }
html[data-skin="pro"] .app-module__current:hover,
html[data-skin="pro"] .app-module__current:focus { background: rgba(255,255,255,.08); color: #ffffff !important; }

/* Texto de dados (grids, listas, links em geral) em grafite/navy — NÃO azul.
   O azul fica reservado a botões e ao hover (feedback do Fábio: estava "tudo azul",
   a referência usa texto grafite e azul só nas ações). */
html[data-skin="pro"] a:not(.btn):not(.navbar-brand):not(.dropdown-toggle):not(.grid-title) { color: var(--text); }
html[data-skin="pro"] a:not(.btn):not(.navbar-brand):not(.grid-title):hover,
html[data-skin="pro"] a:not(.btn):not(.navbar-brand):not(.grid-title):focus { color: var(--accent); }
/* itens de menu (dropdown) também grafite, azul só no hover */
html[data-skin="pro"] .dropdown-menu > li > a { color: var(--text); }
html[data-skin="pro"] .dropdown-menu > li > a:hover,
html[data-skin="pro"] .dropdown-menu > li > a:focus { background: var(--surface-2); color: var(--accent); }

/* títulos de seção em navy (como a referência: títulos escuros, não azuis) */
html[data-skin="pro"] .sub-title-label { color: var(--text) !important; }
/* .text-primary: grafite (não azul) — azul fica só em botões/links/realces (feedback: "fontes todas azuis") */
html[data-skin="pro"] .text-primary { color: var(--text) !important; }

/* cabeçalho de grids: superfície clara + texto navy (em vez do teal padrão) */
html[data-skin="pro"] .th-primary {
    background-color: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-skin="pro"] .th-primary .grid-title,
html[data-skin="pro"] .th-primary a.grid-title { color: var(--text) !important; }

/* =====================================================================
   TEMA 3 (Claro 3) — PADRONIZAÇÃO DE PALETA / COMPONENTES
   O app misturava paletas (Bootstrap #337ab7/#286090/#428bca, teal
   #008bb9/#008cba, greens/oranges/reds variados). Aqui TODOS os componentes
   semânticos passam a usar UMA paleta coerente (flat/moderna), só no light3.
   Centralizado nas vars abaixo → trocar a paleta = editar estes hex.
   ===================================================================== */
html[data-theme="light3"] {
    --primary:   var(--accent);  --primary-2:  var(--accent-2);   /* fonte única = --accent */
    /* Paleta dessaturada (família slate, p/ não competir com o menu navy) — menos viva que a vívida original */
    --success:   #45855f;  --success-2:  #386c4d;   /* verde sálvia */
    --warning:   #b27c34;  --warning-2:  #946328;   /* âmbar suave */
    --danger:    #bd534f;  --danger-2:   #a0403c;   /* vermelho tijolo */
    --info:      #4885a0;  --info-2:     #3a6c83;   /* azul-petróleo suave */
}
/* Escuro (dark3): mesmos tons, um pouco mais claros p/ contraste no fundo escuro.
   No dark, os "-2" são mais CLAROS (texto semântico legível + hover que clareia). */
html[data-theme="dark3"] {
    --primary:   var(--accent);  --primary-2:  var(--accent-2);
    --success:   #4e9d72;  --success-2:  #62b489;   /* verde sálvia (mais claro) */
    --warning:   #c2913f;  --warning-2:  #d4a456;   /* âmbar suave */
    --danger:    #cf6562;  --danger-2:   #e08380;   /* vermelho tijolo */
    --info:      #5499b0;  --info-2:     #6bb0c6;   /* azul-petróleo */
}

/* ---- Botões sólidos ---- */
html[data-skin="pro"] .btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
html[data-skin="pro"] .btn-primary:hover, html[data-skin="pro"] .btn-primary:focus, html[data-skin="pro"] .btn-primary:active, html[data-skin="pro"] .btn-primary.active { background: var(--primary-2) !important; border-color: var(--primary-2) !important; }
html[data-skin="pro"] .btn-info { background: var(--info) !important; border-color: var(--info) !important; color: #fff !important; }
html[data-skin="pro"] .btn-info:hover, html[data-skin="pro"] .btn-info:focus, html[data-skin="pro"] .btn-info:active { background: var(--info-2) !important; border-color: var(--info-2) !important; }
html[data-skin="pro"] .btn-success { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
html[data-skin="pro"] .btn-success:hover, html[data-skin="pro"] .btn-success:focus, html[data-skin="pro"] .btn-success:active { background: var(--success-2) !important; border-color: var(--success-2) !important; }
html[data-skin="pro"] .btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }
html[data-skin="pro"] .btn-warning:hover, html[data-skin="pro"] .btn-warning:focus, html[data-skin="pro"] .btn-warning:active { background: var(--warning-2) !important; border-color: var(--warning-2) !important; }
html[data-skin="pro"] .btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
html[data-skin="pro"] .btn-danger:hover, html[data-skin="pro"] .btn-danger:focus, html[data-skin="pro"] .btn-danger:active { background: var(--danger-2) !important; border-color: var(--danger-2) !important; }
html[data-skin="pro"] .btn-default { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-skin="pro"] .btn-default:hover, html[data-skin="pro"] .btn-default:focus { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-skin="pro"] .btn-link { color: var(--primary) !important; }

/* botões custom (login/treinamento) → paleta */
html[data-skin="pro"] .btn-login, html[data-skin="pro"] .btn-proximo { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
html[data-skin="pro"] .btn-login:hover, html[data-skin="pro"] .btn-proximo:hover { background: var(--primary-2) !important; border-color: var(--primary-2) !important; }
html[data-skin="pro"] .btn-voltar:hover, html[data-skin="pro"] .btn-voltar.btn-marcado { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }

/* ---- Botões outline ---- */
html[data-skin="pro"] .btn-primary.btn-outline { color: var(--primary) !important; border-color: var(--primary) !important; background: transparent !important; }
html[data-skin="pro"] .btn-success.btn-outline { color: var(--success) !important; border-color: var(--success) !important; background: transparent !important; }
html[data-skin="pro"] .btn-info.btn-outline    { color: var(--info) !important; border-color: var(--info) !important; background: transparent !important; }
html[data-skin="pro"] .btn-warning.btn-outline { color: var(--warning) !important; border-color: var(--warning) !important; background: transparent !important; }
html[data-skin="pro"] .btn-danger.btn-outline  { color: var(--danger) !important; border-color: var(--danger) !important; background: transparent !important; }
html[data-skin="pro"] .btn-primary.btn-outline:hover { background: var(--primary) !important; color: #fff !important; }
html[data-skin="pro"] .btn-success.btn-outline:hover { background: var(--success) !important; color: #fff !important; }
html[data-skin="pro"] .btn-info.btn-outline:hover    { background: var(--info) !important; color: #fff !important; }
html[data-skin="pro"] .btn-warning.btn-outline:hover { background: var(--warning) !important; color: #fff !important; }
html[data-skin="pro"] .btn-danger.btn-outline:hover  { background: var(--danger) !important; color: #fff !important; }

/* ---- Texto semântico ---- */
html[data-skin="pro"] .text-primary { color: var(--text) !important; }  /* grafite, não azul */
html[data-skin="pro"] .text-success { color: var(--success-2) !important; }
html[data-skin="pro"] .text-danger  { color: var(--danger) !important; }
html[data-skin="pro"] .text-warning { color: var(--warning-2) !important; }
html[data-skin="pro"] .text-info    { color: var(--info-2) !important; }

/* ---- Badges ---- */
html[data-skin="pro"] .badge-primary { background-color: var(--primary) !important; color: #fff !important; }
html[data-skin="pro"] .badge-success { background-color: var(--success) !important; color: #fff !important; }
html[data-skin="pro"] .badge-info    { background-color: var(--info) !important; color: #fff !important; }
html[data-skin="pro"] .badge-warning { background-color: var(--warning) !important; color: #fff !important; }
html[data-skin="pro"] .badge-danger  { background-color: var(--danger) !important; color: #fff !important; }

/* ---- Labels ---- */
html[data-skin="pro"] .label-primary { background-color: var(--primary) !important; }
html[data-skin="pro"] .label-success { background-color: var(--success) !important; }
html[data-skin="pro"] .label-info    { background-color: var(--info) !important; }
html[data-skin="pro"] .label-warning { background-color: var(--warning) !important; }
html[data-skin="pro"] .label-danger  { background-color: var(--danger) !important; }

/* ---- Alerts (tons suaves coerentes) ---- */
html[data-skin="pro"] .alert-info    { background: rgba(8,145,178,.10) !important; border-color: rgba(8,145,178,.28) !important; color: var(--info-2) !important; }
html[data-skin="pro"] .alert-success { background: rgba(22,163,74,.10) !important; border-color: rgba(22,163,74,.28) !important; color: var(--success-2) !important; }
html[data-skin="pro"] .alert-warning { background: rgba(217,119,6,.10) !important; border-color: rgba(217,119,6,.28) !important; color: var(--warning-2) !important; }
html[data-skin="pro"] .alert-danger  { background: rgba(220,38,38,.10) !important; border-color: rgba(220,38,38,.28) !important; color: var(--danger-2) !important; }

/* ---- Callouts (borda esquerda + título) ----
   "primary" é usado como container genérico (62×) → neutro (borda/título sem azul,
   cara de card limpo). As variantes semânticas abaixo mantêm cor. */
html[data-skin="pro"] .bs-callout-primary { border-left-color: var(--border) !important; }
html[data-skin="pro"] .bs-callout-primary h4 { color: var(--text) !important; }
html[data-skin="pro"] .bs-callout-success { border-left-color: var(--success) !important; }
html[data-skin="pro"] .bs-callout-success h4 { color: var(--success-2) !important; }
html[data-skin="pro"] .bs-callout-info,
html[data-skin="pro"] .bs-callout-top-danger { border-left-color: var(--info) !important; border-top-color: var(--info) !important; }
html[data-skin="pro"] .bs-callout-info h4 { color: var(--info-2) !important; }
html[data-skin="pro"] .bs-callout-warning { border-left-color: var(--warning) !important; }
html[data-skin="pro"] .bs-callout-warning h4 { color: var(--warning-2) !important; }
html[data-skin="pro"] .bs-callout-danger { border-left-color: var(--danger) !important; }
html[data-skin="pro"] .bs-callout-danger h4 { color: var(--danger) !important; }
html[data-skin="pro"] .bs-callout-default { border-left-color: var(--text-muted) !important; }
/* Título h5 dos callouts (ex.: cards de "Pendências em Aberto" na home) era colorido/vermelho
   (#d9534f do app.css) e competia com a borda (que já indica o status) → texto normal legível.
   E o título de seção "Pendências em Aberto" (sub-title-label-red) deixa de ser vermelho. */
html[data-skin="pro"] .bs-callout h5 { color: var(--text) !important; }
html[data-skin="pro"] .sub-title-label-red { color: var(--text) !important; }

/* ---- Panels semânticos ---- */
/* panel-primary é usado como painel/grid genérico (dashboards SINF etc.) → header
   NEUTRO (surface-2 + texto escuro), igual às grids do resto do sistema. Sem azul. */
html[data-skin="pro"] .panel-primary { border-color: var(--border) !important; }
html[data-skin="pro"] .panel-primary > .panel-heading,
html[data-skin="pro"] .panel-ocupacao-instancia.panel-primary .panel-heading { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-skin="pro"] .panel-info { border-color: var(--info) !important; }
html[data-skin="pro"] .panel-info > .panel-heading { background: var(--info) !important; border-color: var(--info) !important; color: #fff !important; }
html[data-skin="pro"] .panel-success { border-color: var(--success) !important; }
html[data-skin="pro"] .panel-success > .panel-heading { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
html[data-skin="pro"] .panel-warning { border-color: var(--warning) !important; }
html[data-skin="pro"] .panel-warning > .panel-heading { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }
html[data-skin="pro"] .panel-danger { border-color: var(--danger) !important; }
html[data-skin="pro"] .panel-danger > .panel-heading { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }

/* ---- Modal headers coloridos ---- */
html[data-skin="pro"] .modal-header-primary { background-color: var(--primary) !important; }
html[data-skin="pro"] .modal-header-info { background-color: var(--info) !important; }
html[data-skin="pro"] .modal-header-success { background-color: var(--success) !important; }
html[data-skin="pro"] .modal-header-warning { background-color: var(--warning) !important; }
html[data-skin="pro"] .modal-header-danger { background-color: var(--danger) !important; }

/* ---- Azuis/teais avulsos → primária ---- */
html[data-skin="pro"] .nav-tabs > li.active > a,
html[data-skin="pro"] .agendamento-treinamento-extrato .nav-tabs > li.active > a { color: var(--primary) !important; }
html[data-skin="pro"] .agendamento-treinamento .full-width { background: var(--primary) !important; }
html[data-skin="pro"] #loading-bar .bar { background: var(--primary) !important; }
html[data-skin="pro"] .loader, html[data-skin="pro"] .loader-mini { border-top-color: var(--primary) !important; }
/* ícone/realce teal do preview de cursos → primária */
html[data-skin="pro"] .panel-cursos .detail .glyphicons,
html[data-skin="pro"] .curso-preview .glyphicons { color: var(--primary) !important; }
/* hover dos cards de curso: era #f2f2f2 + sombra teal (#53a7ea), off-palette →
   superfície + anel sutil de accent (consistente com o tema) */
html[data-skin="pro"] .panel-cursos:hover {
    background-color: var(--surface-2) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow) !important;
}
/* "(Não liberado para os Clientes)": o vermelho (#a53736) chamava atenção demais e não
   precisa de destaque → texto neutro/discreto, em qualquer tema (light3/dark3). */
html[data-skin="pro"] .panel-cursos .title .nao-liberado { color: var(--text-muted) !important; }

/* =====================================================================
   TEMA ESCURO (dark3) — vence as cores fixas (hardcoded) claras do app.css
   (fundos #fff/#fafafa → surface; textos #333/#505763 → texto claro).
   As regras base/globais já usam vars; estas tratam só onde o app.css força claro.
   ===================================================================== */
/* Tabelas/grids: o app.css força fundo branco → escurece (todas as células) */
html[data-theme="dark3"] .table,
html[data-theme="dark3"] .table > thead > tr > th,
html[data-theme="dark3"] .table > tbody > tr,
html[data-theme="dark3"] .table > tbody > tr > td,
html[data-theme="dark3"] .table > tbody > tr > th,
html[data-theme="dark3"] .table > tfoot > tr > td {
    background-color: var(--surface) !important;
    color: var(--text);
    border-color: var(--border) !important;
}
html[data-theme="dark3"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark3"] .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--surface-2) !important; }
html[data-theme="dark3"] .table-hover > tbody > tr:hover,
html[data-theme="dark3"] .table-hover > tbody > tr:hover > td { background-color: var(--accent-soft) !important; }
html[data-theme="dark3"] .table > thead > tr > th { color: var(--text-muted); }

/* Superfícies claras hardcoded → escuras */
html[data-theme="dark3"] #footer,
html[data-theme="dark3"] .panel-several-info,
html[data-theme="dark3"] .sidebar-default,
html[data-theme="dark3"] .curso-preview .box-information {
    background-color: var(--surface) !important;
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark3"] .modal-header,
html[data-theme="dark3"] .modal-footer { background-color: var(--surface-2) !important; color: var(--text); border-color: var(--border); }

/* Textos escuros hardcoded → claros (texto de grids/listas/pre) */
html[data-theme="dark3"] .text-grid-default,
html[data-theme="dark3"] .text-grid-default-bold,
html[data-theme="dark3"] .pre-default-font { color: var(--text); }

/* Cards de curso (lista /cursos): título e textos eram escuros (#29303b/#505763) → claros no dark */
html[data-theme="dark3"] .panel-cursos .title { color: var(--text); }
html[data-theme="dark3"] .panel-cursos .subtitle,
html[data-theme="dark3"] .panel-cursos .detail { color: var(--text-muted); }

/* Inputs/selects nativos: garante superfície escura mesmo onde o app.css força branco */
html[data-theme="dark3"] .form-control,
html[data-theme="dark3"] select.form-control,
html[data-theme="dark3"] textarea.form-control { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* Calendário (bootstrap-datepicker) no Escuro: o popup é .datepicker.datepicker-dropdown.dropdown-menu
   e herdava o branco do .dropdown-menu. Override por tema (alta especificidade + !important) cobrindo
   o popup, a setinha, cabeçalho (mês/«/»/dias-da-semana) e as células — vale em todas as telas. */
html[data-theme="dark3"] .datepicker,
html[data-theme="dark3"] .datepicker.dropdown-menu,
html[data-theme="dark3"] .datepicker.datepicker-dropdown {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
/* setinha do dropdown (border-bottom/top #fff) → cor da superfície */
html[data-theme="dark3"] .datepicker-dropdown:after { border-bottom-color: var(--surface) !important; }
html[data-theme="dark3"] .datepicker-dropdown.datepicker-orient-top:after { border-top-color: var(--surface) !important; }
html[data-theme="dark3"] .datepicker-dropdown:before { border-bottom-color: var(--border) !important; }
html[data-theme="dark3"] .datepicker-dropdown.datepicker-orient-top:before { border-top-color: var(--border) !important; }
/* cabeçalho/rodapé e células: texto claro, fundo transparente sobre o popup escuro */
html[data-theme="dark3"] .datepicker table tr td,
html[data-theme="dark3"] .datepicker table tr th,
html[data-theme="dark3"] .datepicker thead th.datepicker-switch,
html[data-theme="dark3"] .datepicker thead th.prev,
html[data-theme="dark3"] .datepicker thead th.next,
html[data-theme="dark3"] .datepicker thead th.dow,
html[data-theme="dark3"] .datepicker tfoot th { background-color: transparent !important; color: var(--text) !important; }
html[data-theme="dark3"] .datepicker table tr td.old,
html[data-theme="dark3"] .datepicker table tr td.new,
html[data-theme="dark3"] .datepicker table tr td.disabled,
html[data-theme="dark3"] .datepicker table tr td span.disabled { color: var(--text-muted) !important; background: transparent !important; }
html[data-theme="dark3"] .datepicker table tr td.day:hover,
html[data-theme="dark3"] .datepicker table tr td.focused,
html[data-theme="dark3"] .datepicker table tr td span:hover,
html[data-theme="dark3"] .datepicker thead th.datepicker-switch:hover,
html[data-theme="dark3"] .datepicker thead th.prev:hover,
html[data-theme="dark3"] .datepicker thead th.next:hover { background: var(--surface-2) !important; color: var(--text) !important; }
html[data-theme="dark3"] .datepicker table tr td.today,
html[data-theme="dark3"] .datepicker table tr td.today:hover,
html[data-theme="dark3"] .datepicker table tr td.today.disabled { background: var(--accent-soft) !important; background-image: none !important; color: var(--text) !important; border-color: var(--accent) !important; }
html[data-theme="dark3"] .datepicker table tr td.active,
html[data-theme="dark3"] .datepicker table tr td.active:hover,
html[data-theme="dark3"] .datepicker table tr td.selected,
html[data-theme="dark3"] .datepicker table tr td span.active { background: var(--accent) !important; background-image: none !important; color: #fff !important; border-color: var(--accent) !important; text-shadow: none !important; }
/* visão de mês/ano/década: os spans tinham hover #eee (claro) → tema escuro */
html[data-theme="dark3"] .datepicker table tr td span { color: var(--text) !important; }
html[data-theme="dark3"] .datepicker table tr td span:hover,
html[data-theme="dark3"] .datepicker table tr td span.focused { background: var(--surface-2) !important; color: var(--text) !important; }
html[data-theme="dark3"] .datepicker table tr td span.old,
html[data-theme="dark3"] .datepicker table tr td span.new { color: var(--text-muted) !important; }

/* ---------- Banners (Central do Cliente: academy / treinamento) ----------
   Título branco — vence o h2{color:var(--text)} global do tema (que o deixava navy/ilegível). */
.banner-academy, .banner-academy h2, .banner-academy h3,
.banner-treinamento, .banner-treinamento h2, .banner-treinamento h3 { color: #ffffff !important; }
/* A imagem (faixa larga) é ancorada à esquerda e preenche bem as telas até ~a largura dela
   (comportamento original, responsivo). Só em telas MAIORES que a imagem (onde sobrava espaço
   vazio à direita) ela passa a ficar centralizada. (O treinamento já é center no app.css.) */
@media (min-width: 1540px) {
    .banner-academy { background-position: center !important; }
}

/* =====================================================================
   Tela de LOGIN — split "branded": painel navy (identidade do chrome) à
   esquerda + formulário à direita. Theme-aware: o painel é navy nos dois
   temas; o lado do formulário segue o tema (claro no light3, escuro no dark3).
   ===================================================================== */
.login-screen { display: flex; min-height: 100vh; background: var(--bg); }

/* Painel da marca — navy com leve brilho de acento (assinatura), texto claro em ambos os temas */
.login-brand {
    flex: 0 0 42%;
    max-width: 560px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
    color: #dbe3f0;
    background:
        radial-gradient(120% 80% at 18% 22%, rgba(120,160,230,.18), transparent 60%),
        linear-gradient(160deg, var(--navbar-bg), #0f1722);
    overflow: hidden;
}
.login-brand__inner { position: relative; z-index: 1; max-width: 380px; }
.login-brand__logo { width: 56px; height: 56px; margin-bottom: 22px; }
.login-brand__name { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -.01em; color: #fff; line-height: 1.05; }
.login-brand__name::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 18px; border-radius: 3px; background: var(--accent); }
.login-brand__tagline { margin: 20px 0 0; font-size: 16px; line-height: 1.5; color: #aab6c9; }
.login-brand__foot { position: relative; z-index: 1; margin-top: auto; padding-top: 28px; font-size: 13px; letter-spacing: .04em; color: #7e8ba3; }

/* Lado do formulário */
.login-panel { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 40px 24px; overflow-y: auto; }
.login-stack { width: 100%; max-width: 440px; }
.login-screen img { max-width: 100%; }

/* Card do formulário (panel-login) dentro do login: limpo, sem a barra teal — vence o .panel-info do tema */
html[data-skin="pro"] .login-screen .panel-login { border-color: var(--border) !important; }
html[data-skin="pro"] .login-screen .panel-login .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
    padding: 16px 18px 14px;
}
html[data-skin="pro"] .login-screen .panel-login .panel-heading .panel-title { color: var(--text) !important; font-size: 18px; font-weight: 600; }

/* Responsivo: empilha (marca vira faixa compacta no topo) */
@media (max-width: 860px) {
    .login-screen { flex-direction: column; }
    .login-brand { flex: 0 0 auto; max-width: none; padding: 26px 22px; justify-content: flex-start; }
    .login-brand__inner { max-width: none; }
    .login-brand__logo { width: 38px; height: 38px; margin-bottom: 10px; }
    .login-brand__name { font-size: 26px; }
    .login-brand__name::after { margin-top: 12px; }
    .login-brand__tagline { font-size: 14px; margin-top: 12px; }
    .login-brand__foot { display: none; }
    .login-panel { padding: 26px 16px 44px; }
}

/* Páginas públicas (login/cadastro/recuperação): sem top bar → zera margin/padding legados
   do bodyStyle (padding-top:60px etc.), que deixavam faixa branca no topo + barra de rolagem. */
body:not(.app-authenticated) { margin: 0 !important; padding: 0 !important; }
body:not(.app-authenticated) .login-screen { min-height: 100vh; }

/* Autofill do Chrome: por padrão pinta o input de branco com texto preto, quebrando o tema
   (no Escuro o texto preenchido fica ilegível). Usa CORES EXPLÍCITAS por tema — var() dentro
   de :-webkit-autofill é instável no Chrome. Cobre :-webkit-autofill e o padrão :autofill. */
html[data-theme="dark3"] input:-webkit-autofill,
html[data-theme="dark3"] input:-webkit-autofill:hover,
html[data-theme="dark3"] input:-webkit-autofill:focus,
html[data-theme="dark3"] input:-webkit-autofill:active,
html[data-theme="dark3"] textarea:-webkit-autofill,
html[data-theme="dark3"] input:autofill,
html[data-theme="dark3"] textarea:autofill {
    -webkit-box-shadow: 0 0 0 1000px #222f41 inset !important;
    box-shadow: 0 0 0 1000px #222f41 inset !important;
    -webkit-text-fill-color: #e7edf5 !important;
    caret-color: #e7edf5;
    border-color: #36475e !important;
}
html[data-theme="light3"] input:-webkit-autofill,
html[data-theme="light3"] input:-webkit-autofill:hover,
html[data-theme="light3"] input:-webkit-autofill:focus,
html[data-theme="light3"] input:-webkit-autofill:active,
html[data-theme="light3"] textarea:-webkit-autofill,
html[data-theme="light3"] input:autofill,
html[data-theme="light3"] textarea:autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #1e293b !important;
    caret-color: #1e293b;
    border-color: #e3e8f1 !important;
}