/* =============================================================================
   ORAEX — Componentes (Fases 1, 2 e 3)
   =============================================================================
   Redesenha os componentes do AdminLTE 2 sobre os tokens de oraex-tokens.css.

   Carregado DEPOIS de oraex.css: precisa vencer a camada legada (~1000
   !important) sem que cada regra daqui tenha de repetir !important. Onde o
   !important aparece, é porque o legado o usa no mesmo seletor — e cada caso
   está comentado.

   O AdminLTE 2 não usa custom properties. Todo componente que precisa da paleta
   nova é redeclarado aqui.

   Especificação: documentation/ESPECIFICACAO_REDESIGN_INTERFACE.md §5, §6, §7
   ============================================================================= */

/* ============================================================================
   1. SKIN ORAEX
   ============================================================================
   Substitui skin-blue/green/yellow. O ambiente deixa de ser sinalizado pela cor
   do cabeçalho (D4) — a topbar é navy em dev, stage e produção, e dev/stage
   ganham a faixa da seção 2.

   Cobre toda a superfície que um skin do AdminLTE cobre; nenhum arquivo de
   skin do tema é carregado para o skin-oraex.
   ============================================================================ */

.skin-oraex .wrapper,
.skin-oraex .main-sidebar,
.skin-oraex .left-side {
    background-color: var(--navy-900);
}

.skin-oraex .content-wrapper,
.skin-oraex .right-side {
    background-color: var(--surface);
}

/* --- Topbar ------------------------------------------------------------- */
.skin-oraex .main-header .navbar {
    background-color: var(--navy-900);
}

.skin-oraex .main-header .navbar .nav > li > a {
    color: rgba(255, 255, 255, 0.85);
}

.skin-oraex .main-header .navbar .nav > li > a:hover,
.skin-oraex .main-header .navbar .nav > li > a:active,
.skin-oraex .main-header .navbar .nav > li > a:focus,
.skin-oraex .main-header .navbar .nav .open > a,
.skin-oraex .main-header .navbar .nav .open > a:hover,
.skin-oraex .main-header .navbar .nav .open > a:focus,
.skin-oraex .main-header .navbar .nav > .active > a {
    background-color: var(--navy-800);
    color: #fff;
}

.skin-oraex .main-header .navbar .sidebar-toggle {
    color: rgba(255, 255, 255, 0.85);
}

.skin-oraex .main-header .navbar .sidebar-toggle:hover {
    color: #fff;
    background-color: var(--navy-800);
}

.skin-oraex .main-header .logo {
    background-color: var(--navy-900);
    color: #fff;
    border-bottom: 0 solid transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.skin-oraex .main-header .logo:hover {
    background-color: var(--navy-800);
}

.skin-oraex .main-header li.user-header {
    background-color: var(--navy-700);
}

@media (max-width: 767px) {
    .skin-oraex .main-header .navbar .dropdown-menu li > a {
        color: rgba(255, 255, 255, 0.85);
    }
    .skin-oraex .main-header .navbar .dropdown-menu li > a:hover {
        background-color: var(--navy-800);
    }
}

/* --- Marca na topbar ---------------------------------------------------- */
/* O logo institucional é branco sobre navy. A palavra MENU abaixo dele vem do
   mockup (item 1.2 do e-mail): identifica a coluna de navegação sem ocupar
   uma linha inteira da sidebar. */
.oraex-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    padding: 0;
}

.oraex-brand img {
    height: 22px;
    display: block;
}

.oraex-brand .oraex-brand-menu {
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1;
}

/* Estado colapsado: só a marca reduzida cabe */
.sidebar-collapse .oraex-brand .oraex-brand-menu {
    display: none;
}

/* --- Sidebar ------------------------------------------------------------ */
.skin-oraex .sidebar-menu > li.header {
    color: rgba(255, 255, 255, 0.38);
    background: var(--navy-900);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 16px 14px 8px;
}

.skin-oraex .sidebar-menu > li > a {
    color: var(--sidebar-item);
    font-size: 13.5px;
    border-left: 2px solid transparent;
    padding: 10px 12px;
    transition: background-color .15s ease, color .15s ease;
}

.skin-oraex .sidebar-menu > li:hover > a,
.skin-oraex .sidebar-menu > li.active > a,
.skin-oraex .sidebar-menu > li.menu-open > a {
    color: #fff;
    background: var(--sidebar-item-active-bg);
    border-left-color: var(--blue-400);
}

/* Item ativo: peso 600 + borda azul. Sem pill colorido cheio (RF-1.2). */
.skin-oraex .sidebar-menu > li.active > a {
    font-weight: 600;
}

.skin-oraex .sidebar-menu > li > .treeview-menu {
    background: rgba(0, 0, 0, 0.14);
}

.skin-oraex .sidebar a {
    color: var(--sidebar-item);
}

.skin-oraex .sidebar a:hover {
    text-decoration: none;
    color: #fff;
}

.skin-oraex .treeview-menu > li > a {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    padding: 7px 5px 7px 22px;
}

.skin-oraex .treeview-menu > li.active > a,
.skin-oraex .treeview-menu > li > a:hover {
    color: #fff;
}

.skin-oraex .treeview-menu > li.active > a {
    font-weight: 600;
}

.skin-oraex .user-panel > .info,
.skin-oraex .user-panel > .info > a {
    color: #fff;
}

/* --- Ícones da sidebar em traço, não preenchidos (RF-1.2) --------------- */
.skin-oraex .sidebar-menu > li > a > .oraex-icon,
.skin-oraex .treeview-menu > li > a > .oraex-icon {
    opacity: .85;
    /* O espaço entre ícone e rótulo vem daqui, não de um   no HTML.
       O menu é montado em CauthManager::formatArrayToHtml() concatenando string;
       um espaço no meio daquela concatenação seria invisível para quem lê o
       código e sumiria na primeira reformatação. */
    margin-right: 10px;
}

/* O chevron do treeview fica dentro de .pull-right-container e NÃO é filho
   direto do <a> — por isso a margem acima não o alcança. */
.skin-oraex .sidebar-menu .pull-right-container > .oraex-icon {
    margin-right: 0;
}

.skin-oraex .sidebar-menu > li.active > a > .oraex-icon,
.skin-oraex .sidebar-menu > li:hover > a > .oraex-icon {
    opacity: 1;
}

/* ============================================================================
   2. FAIXA DE AMBIENTE (RF-1.3)
   ============================================================================
   Substitui o skin colorido por ambiente. Mesmo mecanismo de deslocamento da
   barra de Modo Suporte: fixa, altura conhecida, layout empurrado por ela.
   As duas podem estar ativas ao mesmo tempo — ver .tem-modo-suporte no layout.
   ============================================================================ */

#oraex-env-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1;
    z-index: 1041;
    color: #fff;
}

#oraex-env-bar .oraex-env-detail {
    font-weight: 400;
    letter-spacing: .4px;
    text-transform: none;
    opacity: .85;
}

#oraex-env-bar.env-dev {
    background: #0F766E;
}

#oraex-env-bar.env-stage {
    background: #B45309;
}

body.tem-faixa-ambiente {
    padding-top: 26px;
}

/* O !important não é preguiça: existe uma regra `.main-header { top: 0 !important }`
   no CSS legado, e sem ele a faixa de ambiente ficava POR CIMA do cabeçalho em vez
   de empurrá-lo. O bloco de Modo Suporte logo abaixo já usava !important pelo mesmo
   motivo — aqui tinha ficado de fora, e o defeito só não aparecia porque a faixa
   nunca chegava a ser renderizada (a condição no layout testava YII_ENV, que é
   'prod' em todo ambiente). */
body.tem-faixa-ambiente .main-header {
    top: 26px !important;
}

/* Modo Suporte ativo junto com a faixa: as duas alturas somam. A barra de
   suporte fica ABAIXO da faixa de ambiente — o ambiente é o contexto mais
   externo. */
body.tem-faixa-ambiente.tem-modo-suporte {
    padding-top: 66px;
}

body.tem-faixa-ambiente #support-mode-bar {
    top: 26px;
}

body.tem-faixa-ambiente.tem-modo-suporte .main-header {
    top: 66px !important; /* o tema prende o header em top:0 e carrega depois */
}

/* ============================================================================
   3. CABEÇALHO DE CONTEÚDO (RF-1.4)
   ============================================================================ */

.content-wrapper > .content-header,
.skin-oraex .content-header {
    background: transparent;
    padding: var(--content-pad) var(--content-pad) 0;
}

.content-header > h1 {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: var(--navy-900);
    margin: 0 0 4px;
    line-height: 1.35;
}

.content-header > h1 > small {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    /* slate-700: o subtítulo fica sobre --surface, onde slate-600 dá 4,28:1. */
    color: var(--slate-700);
    margin-left: 8px;
    letter-spacing: 0;
}

.content-header > .breadcrumb {
    position: static;
    float: none;
    background: transparent;
    padding: 0;
    margin: 0 0 18px;
    font-size: 12px;
    color: var(--slate-700);
    border-radius: 0;
}

.content-header > .breadcrumb > li > a {
    /* o breadcrumb assenta sobre --surface */
    color: var(--slate-700);
}

.content-header > .breadcrumb > li > a:hover {
    color: var(--blue-500);
}

.content-header > .breadcrumb > .active {
    color: var(--slate-800);
}

.content-header > .breadcrumb > li + li:before {
    content: "›";
    color: var(--slate-300);
    padding: 0 6px;
}

.content {
    padding: 0 var(--content-pad) var(--content-pad);
}

/* ============================================================================
   4. PAINÉIS — .box (RF-1.5)
   ============================================================================
   Neutraliza os 188 usos de box-primary/success/warning/danger/info sem editar
   as views: a borda superior colorida vira um traço discreto na cor semântica,
   e o header perde o fundo saturado.
   ============================================================================ */

.box {
    background: var(--card);
    border: 1px solid var(--surface-tint);
    border-top: 1px solid var(--surface-tint);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--gap);
}

/* A faixa superior de cor do AdminLTE fica, mas fina e apenas semântica */
.box.box-primary { border-top: 2px solid var(--navy-700); }
.box.box-info    { border-top: 2px solid var(--blue-500); }
.box.box-success { border-top: 2px solid var(--success); }
.box.box-warning { border-top: 2px solid var(--warning); }
.box.box-danger  { border-top: 2px solid var(--danger); }

.box.box-solid > .box-header,
.box > .box-header {
    background: transparent;
    color: var(--navy-900);
    border-bottom: 1px solid var(--surface-tint);
    padding: 14px 18px;
    border-radius: var(--radius) var(--radius) 0 0;
}

/* box-solid pinta o box inteiro no AdminLTE. Aqui ele volta a ser branco. */
.box.box-solid {
    background: var(--card);
    border: 1px solid var(--surface-tint);
}

/* -----------------------------------------------------------------------
   O AdminLTE pinta a borda INTEIRA do box-solid colorido:
       .box.box-solid.box-danger { border: 1px solid #dd4b39 }
   Isso tem especificidade (0,3,0) e vence tanto `.box.box-solid` quanto
   `.box.box-danger` — as duas daqui de cima valem (0,2,0). Resultado: o
   box voltava ao vermelho #dd4b39 do tema antigo, com 1px em vez dos 2px
   da faixa. Repetido no mesmo peso, o comportamento volta a ser o daqui:
   lateral neutra, topo com a cor semântica.
   -------------------------------------------------------------------- */
.box.box-solid.box-primary,
.box.box-solid.box-info,
.box.box-solid.box-success,
.box.box-solid.box-warning,
.box.box-solid.box-danger { border: 1px solid var(--surface-tint); }

.box.box-solid.box-primary { border-top: 2px solid var(--navy-700); }
.box.box-solid.box-info    { border-top: 2px solid var(--blue-500); }
.box.box-solid.box-success { border-top: 2px solid var(--success); }
.box.box-solid.box-warning { border-top: 2px solid var(--warning); }
.box.box-solid.box-danger  { border-top: 2px solid var(--danger); }

.box.box-solid.box-primary > .box-header,
.box.box-solid.box-info > .box-header,
.box.box-solid.box-success > .box-header,
.box.box-solid.box-warning > .box-header,
.box.box-solid.box-danger > .box-header {
    background: transparent;
    color: var(--navy-900);
}

.box .box-header > .box-title {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: var(--navy-900);
    line-height: 1.5;
}

.box .box-header > .box-tools {
    top: 10px;
    right: 12px;
}

.box .box-body {
    padding: 16px 18px;
    border-radius: 0 0 var(--radius) var(--radius);
}

.box .box-footer {
    background: var(--card);
    border-top: 1px solid var(--surface-tint);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 12px 18px;
}

/* Ícone do box-header: traço, tom neutro */
.box .box-header > .oraex-icon,
.box .box-header .box-title > .oraex-icon {
    color: var(--slate-600);
    margin-right: 6px;
    vertical-align: -3px;
}

/* ============================================================================
   5. BOTÕES (RF-1.6)
   ============================================================================ */

.btn {
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    border-width: 1px;
    padding: 7px 14px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--tint-blue);
}

.btn-primary {
    background-color: var(--navy-700);
    border-color: var(--navy-700);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--navy-800);
    border-color: var(--navy-800);
    color: #fff;
}

.btn-default {
    background-color: var(--card);
    border-color: var(--slate-300);
    color: var(--navy-800);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-color: var(--surface);
    border-color: var(--slate-300);
    color: var(--navy-900);
}

.btn-info {
    background-color: var(--blue-500);
    border-color: var(--blue-500);
    color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
    background-color: var(--navy-700);
    border-color: var(--navy-700);
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: var(--success-dark);
    border-color: var(--success-dark);
}

.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    background-color: var(--danger-dark);
    border-color: var(--danger-dark);
}

.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background-color: var(--warning-dark);
    border-color: var(--warning-dark);
    color: #fff;
}

.btn-link {
    color: var(--blue-500);
    font-weight: 600;
}

.btn-xs {
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: 6px;
}

.btn-sm {
    font-size: 12px;
    padding: 5px 11px;
}

.btn-lg {
    font-size: 15px;
    padding: 10px 20px;
}

.btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* --- Cards de ação, no lugar do btn-app (RF-2.5) ------------------------ */
.btn-app {
    background: var(--card);
    border: 1px solid var(--surface-tint);
    border-radius: var(--radius);
    color: var(--navy-800);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-card);
    padding: 14px 10px;
    margin: 0 var(--gap) var(--gap) 0;
    min-width: 104px;
    height: auto;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn-app:hover {
    background: var(--card);
    border-color: var(--blue-400);
    color: var(--navy-900);
    box-shadow: var(--shadow-raised);
}

.btn-app > .oraex-icon {
    display: block;
    margin: 0 auto 8px;
    color: var(--blue-500);
}

/* ============================================================================
   6. FORMULÁRIOS (RF-1.6)
   ============================================================================ */

.form-control,
.input-group .form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-sm);
    color: var(--slate-800);
    font-size: 13px;
    box-shadow: none;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px var(--tint-blue);
}

.form-control[readonly],
.form-control[disabled],
fieldset[disabled] .form-control {
    background-color: var(--surface);
    color: var(--slate-800);
}

label,
.control-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-600);
    letter-spacing: .2px;
}

.help-block {
    font-size: 11.5px;
    color: var(--slate-600);
}

.has-error .form-control {
    border-color: var(--danger);
}

.has-error .help-block,
.has-error .control-label {
    color: var(--danger-dark);
}

.input-group-addon {
    background: var(--surface);
    border-color: var(--slate-300);
    color: var(--slate-600);
    border-radius: var(--radius-sm);
}

/* ============================================================================
   7. TABELAS E GRIDVIEW (RF-1.7)
   ============================================================================
   Header uppercase slate, divisores sutis, sem zebra.
   ============================================================================ */

.table > thead > tr > th {
    background: transparent;
    border-bottom: 1px solid var(--surface-tint);
    border-top: none;
    color: var(--slate-700);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 10px 14px;
    vertical-align: middle;
}

.table > tbody > tr > td {
    border-top: none;
    border-bottom: 1px solid var(--surface-tint);
    color: var(--slate-800);
    font-size: 13px;
    padding: 11px 14px;
    vertical-align: middle;
}

.table > tbody > tr:last-child > td {
    border-bottom: none;
}

/* Sem zebra (RF-1.7): a listra cinza compete com o divisor e polui a leitura */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent;
}

.table-hover > tbody > tr:hover {
    background-color: var(--surface);
}

.table > tbody > tr.active > td,
.table > tbody > tr > td.active {
    background-color: var(--tint-blue);
}

/* Cabeçalho de filtro do GridView */
.grid-view table > thead > tr.filters > td {
    background: var(--surface);
    border-bottom: 1px solid var(--surface-tint);
    padding: 7px 10px;
}

.grid-view .summary {
    font-size: 12px;
    color: var(--slate-600);
    margin-bottom: 10px;
}

.grid-view .empty {
    color: var(--slate-600);
    font-size: 13px;
    padding: 20px;
    text-align: center;
}

/* Paginação */
.pagination > li > a,
.pagination > li > span {
    color: var(--blue-500);
    border-color: var(--surface-tint);
    font-size: 13px;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus {
    background-color: var(--navy-700);
    border-color: var(--navy-700);
    color: #fff;
}

/* ============================================================================
   8. STATUS, LABELS E BADGES (RF-1.7)
   ============================================================================
   Status vira texto + bolinha. Badge sólido só onde é alerta binário — o SLA.
   ============================================================================ */

.label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
}

/* Labels de status: fundo tonal, texto na cor semântica escura. Não sólido. */
.label-primary { background: var(--tint-navy);    color: var(--navy-800); }
.label-info    { background: var(--tint-blue);    color: var(--blue-500); }
.label-default { background: var(--surface);      color: var(--slate-600); }
.label-warning { background: var(--tint-warning); color: var(--warning-dark); }

/* SLA: os dois únicos badges sólidos que se justificam (alerta binário) */
.label-success { background: var(--tint-success); color: var(--success-dark); }
.label-danger  { background: var(--tint-danger);  color: var(--danger-dark); }

.badge {
    background-color: var(--slate-600);
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 3px 8px;
}

/* --- Status como texto + bolinha ---------------------------------------- */
.oraex-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-600);
    white-space: nowrap;
}

.oraex-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.oraex-status--open      { color: var(--blue-500); }
.oraex-status--progress  { color: var(--blue-400); }
.oraex-status--customer  { color: var(--slate-600); }
.oraex-status--done      { color: var(--success-dark); }
.oraex-status--late      { color: var(--danger-dark); }
.oraex-status--neutral   { color: var(--slate-600); }

/* --- Badge de SLA -------------------------------------------------------- */
.oraex-sla {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}

.oraex-sla--ok {
    background: var(--tint-success);
    color: var(--success-dark);
}

.oraex-sla--late {
    background: var(--tint-danger);
    color: var(--danger-dark);
}

/* ============================================================================
   9. CALLOUTS E ALERTAS
   ============================================================================ */

.callout {
    border-radius: var(--radius);
    border: 1px solid var(--surface-tint);
    border-left-width: 3px;
    background: var(--card);
    color: var(--slate-800);
    box-shadow: var(--shadow-card);
    padding: 14px 18px;
    margin-bottom: var(--gap);
}

.callout h4 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy-900);
    margin-top: 0;
}

.callout p {
    font-size: 13px;
    color: var(--slate-800);
}

.callout a {
    color: var(--blue-500);
}

.callout.callout-info    { border-left-color: var(--blue-500); }
.callout.callout-success { border-left-color: var(--success); }
.callout.callout-warning { border-left-color: var(--warning); }
.callout.callout-danger  { border-left-color: var(--danger); }

.alert {
    border-radius: var(--radius);
    border: 1px solid var(--surface-tint);
    border-left-width: 3px;
    font-size: 13px;
    padding: 12px 16px;
}

.alert-success { background: var(--tint-success); border-left-color: var(--success); color: var(--success-dark); }
.alert-info    { background: var(--tint-blue);    border-left-color: var(--blue-500); color: var(--navy-800); }
.alert-warning { background: var(--tint-warning); border-left-color: var(--warning); color: var(--warning-dark); }
.alert-danger  { background: var(--tint-danger);  border-left-color: var(--danger);  color: var(--danger-dark); }

/* ============================================================================
   10. NEUTRALIZAÇÃO DAS CLASSES DE FUNDO SÓLIDO
   ============================================================================
   bg-aqua/green/yellow/red decoravam categorias sem significado — é a causa
   principal da leitura infantilizada. Viram fundo tonal com texto legível,
   de modo que as 35 ocorrências restantes não precisem ser editadas uma a uma.
   A remoção das classes é tarefa da Fase 5.
   ============================================================================ */

.bg-aqua, .bg-light-blue, .bg-blue, .bg-primary,
.bg-green, .bg-olive, .bg-teal,
.bg-yellow, .bg-orange,
.bg-red, .bg-maroon,
.bg-navy, .bg-purple, .bg-fuchsia, .bg-black, .bg-gray {
    background-color: var(--card) !important; /* o AdminLTE declara com !important */
    color: var(--slate-800) !important;
    border: 1px solid var(--surface-tint);
}

/* ============================================================================
   11. INFO-BOX
   ============================================================================ */

.info-box {
    background: var(--card);
    border: 1px solid var(--surface-tint);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    min-height: 84px;
}

.info-box-icon {
    background: var(--surface) !important; /* o tema declara com !important */
    color: var(--blue-500) !important;
    border-radius: var(--radius) 0 0 var(--radius);
    width: 74px;
    height: 84px;
    line-height: 84px;
    font-size: 26px;
}

.info-box-content {
    padding: 12px 14px;
    margin-left: 74px;
}

.info-box-text {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--slate-600);
}

.info-box-content {
    /* Sem isto, o conteúdo dita a largura e estoura a coluna em vez de caber. */
    min-width: 0;
}

/* O número era Michroma (--font-display) a 20px.
   Michroma é uma display muito larga: "8.750,00h" pedia ~190px dentro de um
   info-box de 94px úteis num col-md-2. O excedente não cabia em lugar nenhum,
   subia até .wrapper — que corta com overflow-x: hidden — e virava conteúdo
   inalcançável na tela de saldo de contrato.
   Número de painel também se lê melhor na fonte de texto com algarismos de
   largura fixa, que alinham na vertical entre um card e outro. */
.info-box-number {
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--navy-900);
    overflow-wrap: anywhere;
}

/* ============================================================================
   12. ABAS, MODAIS, DROPDOWNS
   ============================================================================ */

.nav-tabs {
    border-bottom: 1px solid var(--surface-tint);
}

.nav-tabs > li > a {
    color: var(--slate-600);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--navy-900);
    border-color: var(--surface-tint) var(--surface-tint) transparent;
    background: var(--card);
}

.nav-tabs-custom {
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--surface-tint);
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--blue-500);
}

.modal-content {
    border: none;
    border-radius: var(--radius);
    box-shadow: 0 12px 36px rgba(9, 46, 82, 0.18);
}

.modal-header {
    border-bottom: 1px solid var(--surface-tint);
    padding: 16px 20px;
}

.modal-header .modal-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 400;
    color: var(--navy-900);
}

.modal-footer {
    border-top: 1px solid var(--surface-tint);
    padding: 14px 20px;
}

.dropdown-menu {
    border: 1px solid var(--surface-tint);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-raised);
    font-size: 13px;
    padding: 6px 0;
}

.dropdown-menu > li > a {
    padding: 7px 16px;
    color: var(--slate-800);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--surface);
    color: var(--navy-900);
}

/* ============================================================================
   13. CARDS DE KPI (RF-2.2)
   ============================================================================
   Substituem os small-box de fundo sólido. Fundo branco, ícone tonal discreto,
   número em display font, rodapé "Detalhar" sem fundo colorido.
   ============================================================================ */

.oraex-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    margin-bottom: 26px;
}

@media (max-width: 1200px) {
    .oraex-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .oraex-kpi-grid { grid-template-columns: 1fr; }
}

.oraex-kpi {
    background: var(--card);
    border: 1px solid var(--surface-tint);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.oraex-kpi:hover {
    border-color: var(--blue-400);
    box-shadow: var(--shadow-raised);
}

.oraex-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.oraex-kpi-icon--blue    { background: var(--tint-blue);      color: var(--blue-500); }
.oraex-kpi-icon--blue400 { background: var(--tint-blue-400);  color: var(--blue-400); }
.oraex-kpi-icon--slate   { background: var(--tint-slate);     color: var(--slate-600); }
.oraex-kpi-icon--success { background: var(--tint-success);   color: var(--success-dark); }
.oraex-kpi-icon--danger  { background: var(--tint-danger);    color: var(--danger); }
.oraex-kpi-icon--navy    { background: var(--tint-navy);      color: var(--navy-800); }

.oraex-kpi-value {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: .3px;
    color: var(--navy-900);
    margin-top: 10px;
    line-height: 1.2;
}

.oraex-kpi-label {
    font-size: 12.5px;
    color: var(--slate-600);
    margin-top: 2px;
    line-height: 1.35;
}

.oraex-kpi-foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--surface-tint);
    font-size: 12px;
    font-weight: 600;
    color: var(--blue-500);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.oraex-kpi-foot:hover {
    color: var(--navy-700);
    text-decoration: none;
}

/* --danger puro sobre branco dá 3,76:1 e reprova em AA para texto pequeno.
   O tom escuro rende 6,4:1 e mantém a leitura de "isto é crítico". */
.oraex-kpi--critical .oraex-kpi-foot {
    color: var(--danger-dark);
}

.oraex-kpi--critical .oraex-kpi-foot:hover {
    color: var(--danger-dark);
}

.oraex-kpi-trend {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--surface-tint);
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-600);
}

.oraex-kpi-trend--down { color: var(--success-dark); }
.oraex-kpi-trend--up   { color: var(--danger-dark); }

/* --- Cabeçalho de seção -------------------------------------------------- */
.oraex-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.oraex-section-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    /* slate-700: o rótulo de seção fica sobre --surface, onde o slate-600 dá
       4,28:1 e reprova em AA. */
    color: var(--slate-700);
    margin: 0;
}

/* --- Cards de ação rápida (RF-2.5) --------------------------------------- */
.oraex-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.oraex-action {
    flex: 1 1 150px;
    background: var(--card);
    border: 1px solid var(--surface-tint);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 15px 12px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy-800);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.oraex-action:hover,
.oraex-action:focus {
    border-color: var(--blue-400);
    box-shadow: var(--shadow-raised);
    color: var(--navy-900);
    text-decoration: none;
}

.oraex-action-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--blue-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Abas de filtro (RF-2.6) --------------------------------------------- */
.oraex-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 3px;
}

.oraex-tab {
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    /* slate-700, não slate-600: a aba inativa fica sobre --surface, onde o
       slate-600 dá 4,28:1 e reprova em AA. Ver nota do token. */
    color: var(--slate-700);
    line-height: 1.5;
}

.oraex-tab:hover {
    color: var(--navy-800);
    text-decoration: none;
}

.oraex-tab.active,
.oraex-tab.active:hover {
    background: var(--navy-900);
    color: #fff;
}

/* ============================================================================
   14. small-box legado
   ============================================================================
   Ainda usado em task/invoice/index.php. Recebe o mesmo tratamento visual dos
   cards de KPI para não destoar enquanto a Fase 5 não o remove.
   ============================================================================ */

.small-box {
    background: var(--card) !important; /* .bg-* do AdminLTE usa !important */
    border: 1px solid var(--surface-tint);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.small-box:hover {
    transform: none;
    box-shadow: var(--shadow-raised);
}

.small-box > .inner {
    padding: 16px 18px;
}

.small-box h3 {
    font-family: var(--font-display);
    font-size: 24px !important; /* oraex.css fixa 32px com !important */
    font-weight: 400 !important;
    color: var(--navy-900) !important;
    margin: 0 0 4px;
}

.small-box p {
    font-size: 12.5px;
    color: var(--slate-600) !important;
    font-weight: 400 !important;
}

/* O ícone gigante translúcido é a marca do visual antigo (RF-2.2) */
.small-box > .icon {
    display: none;
}

.small-box > .small-box-footer {
    background: transparent !important;
    border-top: 1px solid var(--surface-tint);
    color: var(--blue-500) !important;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 18px;
}

.small-box > .small-box-footer:hover {
    background: var(--surface) !important;
    color: var(--navy-700) !important;
}

/* ============================================================================
   15. RODAPÉ E DIVERSOS
   ============================================================================ */

.main-footer {
    background: var(--card);
    border-top: 1px solid var(--surface-tint);
    color: var(--slate-600);
    font-size: 12px;
    padding: 14px var(--content-pad);
}

.main-footer a {
    color: var(--blue-500);
}

a {
    color: var(--blue-500);
}

a:hover,
a:focus {
    color: var(--navy-700);
}

hr {
    border-top: 1px solid var(--surface-tint);
}

/* Ícones Lucide: herdam a cor do contexto e mantêm traço único de 2px */
.oraex-icon {
    display: inline-block;
    vertical-align: -2px;
    flex: 0 0 auto;
}

/* Nota de escopo do dashboard */
.oraex-scope-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--slate-600);
}

/* ============================================================================
   16. SELETOR DE ÍCONES (widget IconPicker)
   ============================================================================
   O CSS vinha embutido no widget via registerCss. Foi trazido para cá porque
   estilo dentro de widget é justamente o que a Fase 5 elimina — e porque assim
   ele passa a usar os tokens.
   ============================================================================ */

.icon-picker-container {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-picker-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--surface-tint);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--navy-800);
}

.icon-picker-vazio {
    color: var(--slate-600);
    font-size: 12px;
}

.icon-picker-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    overflow: auto;
    background-color: rgba(9, 46, 82, 0.45);
}

.icon-picker-modal-content {
    background: var(--card);
    margin: 5% auto;
    padding: 22px;
    border-radius: var(--radius);
    box-shadow: 0 12px 36px rgba(9, 46, 82, 0.18);
    width: 84%;
    max-width: 920px;
    max-height: 80vh;
    overflow-y: auto;
}

.icon-picker-modal-content h2 {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 400;
    color: var(--navy-900);
    margin: 0 0 6px;
}

.icon-picker-ajuda {
    font-size: 12px;
    color: var(--slate-600);
    margin-bottom: 14px;
}

.icon-picker-ajuda code {
    background: var(--surface);
    color: var(--navy-800);
    border-radius: 4px;
    padding: 1px 5px;
}

.icon-picker-close {
    color: var(--slate-600);
    float: right;
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
}

.icon-picker-close:hover {
    color: var(--navy-900);
}

.icon-picker-search {
    margin-bottom: 16px;
}

.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
    max-height: 52vh;
    overflow-y: auto;
}

.icon-picker-item {
    padding: 12px 6px;
    text-align: center;
    border: 1px solid var(--surface-tint);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--card);
    color: var(--navy-800);
    transition: border-color .15s ease, background-color .15s ease;
}

.icon-picker-item:hover {
    background: var(--surface);
    border-color: var(--blue-400);
}

.icon-picker-item.selected {
    background: var(--tint-blue);
    border-color: var(--blue-500);
    color: var(--navy-900);
}

.icon-picker-item > .oraex-icon {
    display: block;
    margin: 0 auto 6px;
}

.icon-picker-item span {
    font-size: 10.5px;
    display: block;
    word-break: break-word;
    color: var(--slate-600);
    line-height: 1.25;
}

/* ============================================================================
   17. BARRA SUPERIOR — busca, avatar e menu do usuário
   ============================================================================
   Estava tudo em <style> dentro de _navbar.php, com a cor do botão de busca
   variando por ambiente. O ambiente agora é sinalizado pela faixa própria
   (§2), e a busca segue o mockup: campo translúcido sobre o navy.
   ============================================================================ */

.skin-oraex .main-header .navbar {
    display: flex;
    align-items: center;
    min-height: 50px;
}

/* A busca ocupa o meio e empurra o menu do usuário para a direita */
.oraex-navbar-search {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    min-width: 0;
}

.oraex-navbar-search form {
    width: 100%;
    max-width: 520px;
    margin: 0;
}

.oraex-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    margin: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    font-weight: 400;
    transition: background-color .15s ease, border-color .15s ease;
}

.oraex-search-field:focus-within {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--blue-400);
}

.oraex-search-icon {
    color: rgba(255, 255, 255, 0.55);
}

/* Exceção deliberada ao campo branco padrão: aqui o fundo é o navy da topbar.
   O !important responde ao `background-color: #fff !important` que oraex.css
   aplica a todo input do sistema — os dois saem juntos na Fase 5. */
.skin-oraex .main-header .oraex-search-field input[type="text"] {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    outline: none;
    box-shadow: none;
    color: #fff !important;
    font-size: 13px;
    height: 100%;
    padding: 0 !important;
}

.skin-oraex .main-header .oraex-search-field input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* O menu do usuário não encolhe: a busca cede espaço antes dele */
.skin-oraex .main-header .navbar-custom-menu {
    margin-left: auto;
    flex: 0 0 auto;
    float: none;
}

/* --- Avatar com iniciais ------------------------------------------------- */
.oraex-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blue-500);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    margin-right: 8px;
    vertical-align: middle;
}

.oraex-avatar--lg {
    width: 64px;
    height: 64px;
    font-size: 22px;
    margin: 0 auto 10px;
    display: flex;
    background: rgba(255, 255, 255, 0.18);
}

.skin-oraex .main-header .navbar .nav > li.user-menu > a {
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* --- Cartão do usuário no dropdown -------------------------------------- */
.skin-oraex .user-menu .dropdown-menu > li.user-header {
    height: auto;
    padding: 20px 15px 15px;
    text-align: center;
}

.skin-oraex .user-menu .dropdown-menu > li.user-header p {
    color: #fff;
    font-size: 14px;
    margin: 0;
}

.skin-oraex .user-menu .dropdown-menu > li.user-header p > small {
    display: block;
    font-size: 11.5px;
    opacity: .85;
    margin-top: 3px;
}

.oraex-user-papel {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.9);
    color: var(--navy-900);
    font-size: 11px;
    font-weight: 700;
}

.skin-oraex .user-menu .dropdown-menu > .user-footer {
    background: var(--surface);
    padding: 10px;
}

/* ============================================================================
   18. GRÁFICOS (NVD3)
   ============================================================================
   O NVD3 traz estilo próprio pensado para fundo branco genérico: eixos pretos,
   grid escuro e rótulos em fonte serifada do navegador. Aqui ele passa a falar
   a mesma língua do resto da interface.

   A paleta das séries é definida no widget (BlueByteNVD3Graph), não aqui: cor
   de série é dado, não decoração, e precisa valer também no tooltip e na
   legenda, que o NVD3 monta em JS.
   ============================================================================ */

.oraex-chart-box .box-body {
    padding: 12px 8px 4px;
}

.oraex-chart-box svg {
    width: 100%;
}

/* Eixos e grade: cinza muito claro, nunca preto (RF-2.4) */
.nvd3 .nv-axis line,
.nvd3 .nv-axis path {
    stroke: var(--surface-tint);
    fill: none;
}

.nvd3 .nv-axis .tick line {
    stroke: var(--surface-tint);
}

.nvd3 text,
.nvd3 .nv-axis text {
    font-family: var(--font);
    font-size: 11px;
    fill: var(--slate-600);
}

/* Valores sobre as barras: legíveis, sem competir com o número do KPI */
.nvd3 .nv-bar text,
.nvd3 .nv-discretebar .nv-bar text {
    fill: var(--slate-800);
    font-weight: 600;
    font-size: 11px;
}

/* Leve arredondamento no topo da barra (RF-2.4) */
.nvd3 .nv-discretebar .nv-bar rect {
    rx: 3;
    ry: 3;
}

.nvd3 .nv-legend text {
    font-size: 11.5px;
    fill: var(--slate-600);
}

/* Tooltip do NVD3 no padrão dos demais flutuantes do tema */
.nvtooltip {
    font-family: var(--font);
    font-size: 12px;
    border: 1px solid var(--surface-tint);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-raised);
    color: var(--slate-800);
    padding: 8px 10px;
}

.nvtooltip .x-value,
.nvtooltip .key {
    color: var(--navy-900);
    font-weight: 600;
}

/* ============================================================================
   19. CONTRASTE — rede de proteção
   ============================================================================
   O tema legado tinha o hábito de forçar `color: #fff !important` em seletores
   coringa (`.box-header *`, `.kv-panel-before *`). Quando o fundo desses
   contêineres passou de azul escuro para claro, o conteúdo virou branco sobre
   branco: título de gráfico, botão "Filtros" do kanban, abas de filtro do
   dashboard — em toda tela que usasse um .box.

   As regras que causavam isso foram removidas em oraex.css. Esta seção é a
   garantia de que o problema não volta: onde o fundo é claro, o texto e os
   ícones são escuros por padrão, valendo para qualquer página.

   Regra de ouro ao mexer neste tema: cor de texto e cor de fundo se declaram
   JUNTAS, na mesma regra. Separar as duas é como o par ilegível nasce.
   ============================================================================ */

/* Superfícies claras: texto legível por padrão ---------------------------- */
.box,
.box-header,
.box-body,
.box-footer,
.kv-panel-before,
.kv-panel-after,
.panel-body,
.modal-content,
.oraex-kpi,
.oraex-action,
.callout,
.content-wrapper {
    color: var(--slate-800);
}

/* Ícones dentro de superfície clara herdam a cor do texto, nunca branco.
   `currentColor` no SVG faz o resto — este é o ponto em que a migração para
   Lucide ajuda: com webfont, cor de ícone era uma propriedade solta. */
.box .oraex-icon,
.kv-panel-before .oraex-icon,
.panel-body .oraex-icon,
.modal-content .oraex-icon,
.content-wrapper .oraex-icon {
    color: inherit;
}

/* Títulos e ferramentas do cabeçalho de painel ---------------------------- */
.box > .box-header,
.box > .box-header > .box-title,
.box > .box-header > .box-tools,
.box > .box-header > .box-tools a:not(.btn):not(.oraex-tab),
.box > .box-header .dropdown > a {
    color: var(--navy-900);
}

/* Botão de colapsar/remover do AdminLTE: era branco sobre o header azul */
.box > .box-header > .box-tools > .btn-box-tool {
    color: var(--slate-600);
}

.box > .box-header > .box-tools > .btn-box-tool:hover {
    color: var(--navy-900);
}

/* Barra de ferramentas da grid (kartik) ----------------------------------- */
.kv-panel-before .panel-title,
.kv-panel-before .btn-toolbar .btn-default,
.kv-panel-before a:not(.btn) {
    color: var(--navy-900);
}

/* Texto auxiliar continua auxiliar, mas legível (o cinza do Bootstrap 3 é
   #777 sobre branco — passa raspando; aqui sobe para o slate da paleta) */
.text-muted {
    color: var(--slate-600);
}

/* Sobre fundo ESCURO o inverso também precisa valer: se alguma regra legada
   pintar texto escuro dentro da topbar ou da sidebar, ele volta a ser claro. */
.skin-oraex .main-header .navbar,
.skin-oraex .main-header .logo,
.skin-oraex .main-sidebar {
    color: #fff;
}

.skin-oraex .main-header .navbar .oraex-icon,
.skin-oraex .main-sidebar .oraex-icon {
    color: inherit;
}

/* As classes utilitárias de cor do AdminLTE precisam continuar legíveis sobre
   branco — várias views as usam em texto solto e em ícone dentro de tabela.
   O !important é obrigatório: o AdminLTE declara `.text-red{color:#dd4b39
   !important}` e afins, e sem ele a paleta antiga volta por essa porta. */
.text-red    { color: var(--danger-dark) !important; }
.text-yellow { color: var(--warning-dark) !important; }
.text-green  { color: var(--success-dark) !important; }
.text-aqua,
.text-blue,
.text-light-blue { color: var(--blue-500) !important; }
.text-navy   { color: var(--navy-900) !important; }
.text-gray   { color: var(--slate-700) !important; }
.text-black  { color: var(--slate-800) !important; }
.text-muted  { color: var(--slate-700) !important; }
.text-orange { color: var(--warning-dark) !important; }
.text-purple, .text-maroon, .text-fuchsia { color: var(--navy-800) !important; }

/* ============================================================================
   20. NEUTRALIZAÇÃO DO BLOCO `!important` DO ADMINLTE
   ============================================================================
   O AdminLTE.min.css traz um bloco que força, com !important:

     .bg-*, .callout.callout-*, .alert-*, .label-*, .modal-* .modal-body
        -> background-color saturado (#00c0ef, #f39c12, #00a65a, #dd4b39...)
     e 59 seletores
        -> color: #fff !important

   Duas consequências, em todas as telas:

   1. callouts, alertas e labels continuavam com a paleta antiga por cima do
      redesign — as regras das seções 8, 9 e 10 daqui perdiam por falta de
      !important, não por especificidade;

   2. quando alguma regra nossa clareava só o FUNDO, o `color:#fff !important`
      permanecia e produzia branco sobre claro — e, no caminho inverso, texto
      escuro sobre fundo escuro.

   Por isso aqui fundo e cor de texto são SEMPRE declarados no mesmo bloco. É a
   única forma de garantir que o par continue legível quando um dos dois mudar.

   O !important desta seção só existe para vencer o do AdminLTE. Ele sai quando
   o AdminLTE sair (ver ESPECIFICACAO_REDESIGN_INTERFACE.md §14.4).
   ============================================================================ */

/* --- Callouts ------------------------------------------------------------ */
.callout,
.callout.callout-info,
.callout.callout-success,
.callout.callout-warning,
.callout.callout-danger {
    background-color: var(--card) !important;
    color: var(--slate-800) !important;
}

.callout h4,
.callout.callout-info h4,
.callout.callout-success h4,
.callout.callout-warning h4,
.callout.callout-danger h4 {
    color: var(--navy-900) !important;
}

.callout a,
.callout.callout-info a,
.callout.callout-success a,
.callout.callout-warning a,
.callout.callout-danger a {
    color: var(--blue-500) !important;
    font-weight: 600;
}

/* --- Alertas -------------------------------------------------------------- */
.alert-info {
    background-color: var(--tint-blue) !important;
    color: var(--navy-800) !important;
    border-color: var(--blue-500);
}

.alert-success {
    background-color: var(--tint-success) !important;
    color: var(--success-dark) !important;
    border-color: var(--success);
}

.alert-warning {
    background-color: var(--tint-warning) !important;
    color: var(--warning-dark) !important;
    border-color: var(--warning);
}

.alert-danger,
.alert-error {
    background-color: var(--tint-danger) !important;
    color: var(--danger-dark) !important;
    border-color: var(--danger);
}

.alert a,
.alert .close {
    color: inherit !important;
    font-weight: 600;
}

/* --- Labels / badges ------------------------------------------------------ */
/* Fundo tonal com texto na cor semântica escura. O contraste de cada par foi
   verificado: todos passam em AA para texto pequeno em negrito. */
.label-primary { background-color: var(--tint-navy) !important;    color: var(--navy-800) !important; }
.label-info    { background-color: var(--tint-blue) !important;    color: var(--navy-800) !important; }
.label-success { background-color: var(--tint-success) !important; color: var(--success-dark) !important; }
.label-warning { background-color: var(--tint-warning) !important; color: var(--warning-dark) !important; }
.label-danger  { background-color: var(--tint-danger) !important;  color: var(--danger-dark) !important; }
.label-default { background-color: var(--surface) !important;      color: var(--slate-700) !important; }

/* O contador da topbar (sino / envelope) fica sobre o navy: ali o tonal claro
   sumiria. Continua sólido, e é um dos poucos lugares em que isso se justifica —
   é um alerta numérico que precisa saltar. */
.skin-oraex .main-header .navbar .label-warning {
    background-color: var(--warning) !important;
    color: #3d2c00 !important;
}

.skin-oraex .main-header .navbar .label-success {
    background-color: var(--success) !important;
    color: #06351a !important;
}

.skin-oraex .main-header .navbar .label-danger {
    background-color: var(--danger) !important;
    color: #fff !important;
}

/* --- Modais coloridos ----------------------------------------------------- */
.modal-primary .modal-header, .modal-primary .modal-body, .modal-primary .modal-footer,
.modal-info    .modal-header, .modal-info    .modal-body, .modal-info    .modal-footer,
.modal-success .modal-header, .modal-success .modal-body, .modal-success .modal-footer,
.modal-warning .modal-header, .modal-warning .modal-body, .modal-warning .modal-footer,
.modal-danger  .modal-header, .modal-danger  .modal-body, .modal-danger  .modal-footer {
    background-color: var(--card) !important;
    color: var(--slate-800) !important;
}

.modal-primary .modal-header, .modal-info .modal-header,
.modal-success .modal-header, .modal-warning .modal-header,
.modal-danger .modal-header {
    border-bottom: 1px solid var(--surface-tint);
}

/* Faixa fina indicando a natureza do modal, no lugar do fundo inteiro colorido */
.modal-primary .modal-content { border-top: 3px solid var(--navy-700); }
.modal-info    .modal-content { border-top: 3px solid var(--blue-500); }
.modal-success .modal-content { border-top: 3px solid var(--success); }
.modal-warning .modal-content { border-top: 3px solid var(--warning); }
.modal-danger  .modal-content { border-top: 3px solid var(--danger); }

/* --- Classes .bg-* --------------------------------------------------------
   Já neutralizadas na seção 10; aqui entra o par de texto que faltava, para o
   caso de alguma view usar .bg-* em bloco com conteúdo. */
.bg-aqua, .bg-light-blue, .bg-blue, .bg-primary,
.bg-green, .bg-olive, .bg-teal, .bg-lime,
.bg-yellow, .bg-orange,
.bg-red, .bg-maroon,
.bg-navy, .bg-purple, .bg-fuchsia, .bg-black, .bg-gray {
    color: var(--slate-800) !important;
}

/* ============================================================================
   21. BOTÕES — contraste garantido
   ============================================================================
   oraex.css tinha duas regras que, juntas, produziam botão escuro com texto
   escuro:

     .btn-primary { background: linear-gradient(azul escuro) }
     .btn:not(.btn-primary):not(...) { color: #333 !important }

   O `:not()` cobria qualquer botão fora da lista — inclusive botões que outras
   regras pintavam de escuro. Resultado: "Filtrar" e "Limpar Tela" apareciam em
   azul escuro com texto quase preto.

   Aqui cada variante declara fundo E texto juntos, com !important suficiente
   para vencer as duas. Nenhum botão fica dependendo de herança para ter
   contraste.
   ============================================================================ */

.btn-primary,
.btn-primary:focus,
.btn-primary *,
a.btn-primary,
a.btn-primary:visited {
    background: var(--navy-700) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--navy-700) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:hover * {
    background: var(--navy-800) !important;
    background-image: none !important;
    color: #fff !important;
}

.btn-info, .btn-info:focus, .btn-info * {
    background: var(--blue-500) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--blue-500) !important;
}

.btn-info:hover, .btn-info:active {
    background: var(--navy-700) !important;
    color: #fff !important;
}

.btn-success, .btn-success:focus, .btn-success * {
    background: var(--success-dark) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--success-dark) !important;
}

.btn-success:hover, .btn-success:active {
    background: #106334 !important;
    color: #fff !important;
}

.btn-danger, .btn-danger:focus, .btn-danger * {
    background: var(--danger-dark) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--danger-dark) !important;
}

.btn-danger:hover, .btn-danger:active {
    background: #911616 !important;
    color: #fff !important;
}

/* Warning é o único cuja cor de marca é clara: texto escuro, não branco.
   Branco sobre âmbar dá 2,1:1 — reprova. Texto escuro dá 7,6:1. */
.btn-warning, .btn-warning:focus, .btn-warning * {
    background: var(--warning) !important;
    background-image: none !important;
    color: #3d2c00 !important;
    border-color: var(--warning) !important;
}

.btn-warning:hover, .btn-warning:active {
    background: var(--warning-dark) !important;
    color: #fff !important;
}

/* Default: fundo branco, texto navy. O par que o legado quebrava. */
.btn-default,
.btn-default:focus,
.btn-default *,
.btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger):not(.btn-link) {
    background-color: var(--card) !important;
    background-image: none !important;
    color: var(--navy-800) !important;
    border-color: var(--slate-300) !important;
}

.btn-default:hover,
.btn-default:active,
.btn-default.active {
    background-color: var(--surface) !important;
    color: var(--navy-900) !important;
}

.btn-link, .btn-link:focus {
    background: transparent !important;
    color: var(--blue-500) !important;
    border-color: transparent !important;
}

/* O botão levantava 2px no hover e a sombra crescia — herança do tema anterior.
   Em tela densa isso faz a linha inteira "pular". */
.btn:hover {
    transform: none;
    box-shadow: none;
}

.btn {
    box-shadow: none;
}

/* ============================================================================
   22. CABEÇALHO DE TABELA E LINKS SOBRE FUNDO CLARO
   ============================================================================
   O oraex.css tem mais de vinte regras que forçam `color: #fff !important` em
   cabeçalhos de tabela, barras de GridView e variações por tela
   (.user-view, .user-contracts-table, .grid-view...). Corrigir uma a uma no
   arquivo legado seria interminável e propenso a esquecer casos.

   Aqui a correção é por contexto: onde o fundo é claro, o texto é escuro —
   independentemente de qual regra legada tentou pintá-lo de branco.

   Também resolve o contraste de LINK sobre fundo cinza: --blue-500 rende
   4,75:1 sobre branco (passa) mas 4,30:1 sobre --surface (reprova). Em
   cabeçalho e resumo de grid, o link usa navy.
   ============================================================================ */

.table > thead > tr > th,
.table thead th,
.grid-view .table thead th,
.grid-view .table thead td,
.user-view .table thead th,
.user-contracts-table thead th,
.kv-grid-table > thead > tr > th {
    background: transparent !important;
    background-color: transparent !important;
    /* slate-700 e não slate-600: nem toda tabela fica dentro de um .box branco.
       Quando a tabela assenta direto sobre --surface, o slate-600 cai para
       4,28:1. O slate-700 passa nos dois fundos (7,5:1 no branco, 6,8:1 no
       cinza) e continua lendo como rótulo secundário. */
    color: var(--slate-700) !important;
}

/* Links de ordenação do GridView: sobre fundo claro, em navy.
   O azul de link não alcança 4,5:1 sobre --surface. */
.table > thead > tr > th a,
.table thead th a,
.grid-view .table thead th a,
.kv-grid-table > thead > tr > th a,
.user-view .table thead th a {
    color: var(--navy-700) !important;
    font-weight: 600;
}

.table > thead > tr > th a:hover,
.grid-view .table thead th a:hover {
    color: var(--blue-500) !important;
}

/* Resumo e paginação do grid ficam sobre --surface */
.grid-view .summary,
.grid-view .empty,
.pagination > li > span {
    color: var(--slate-700) !important;
}

/* Barra de ferramentas do grid: conteúdo escuro sobre a barra clara */
.kv-panel-before,
.kv-panel-before *,
.kv-panel-after,
.kv-panel-after * {
    color: var(--navy-800) !important;
}

.kv-panel-before .btn-primary,
.kv-panel-before .btn-primary *,
.kv-panel-before .btn-info,
.kv-panel-before .btn-info *,
.kv-panel-before .btn-success,
.kv-panel-before .btn-success *,
.kv-panel-before .btn-danger,
.kv-panel-before .btn-danger * {
    color: #fff !important;
}

/* Abas: a inativa fica sobre --surface (ver nota do token --slate-700) */
.nav-tabs > li > a {
    color: var(--slate-700);
}

/* Placeholder do select2: o #999 padrão dá 2,56:1 sobre cinza */
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection__placeholder,
.form-control::placeholder {
    color: var(--slate-700) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--slate-800) !important;
    line-height: 34px;
}

/* Vermelho puro (#f00) em valores monetários: 4,0:1 sobre branco, reprova.
   Views que usam style="color:red" continuam funcionando, com tom legível. */
[style*="color: red"],
[style*="color:red"],
[style*="color: #ff0000"],
[style*="color:#ff0000"] {
    color: var(--danger-dark) !important;
}

/* ============================================================================
   23. LINKS E CAMPOS — contraste em qualquer fundo
   ============================================================================
   Fecha os dois últimos padrões recorrentes apontados pela suíte:

   - link em azul-500 sobre --surface dava 4,30:1. Links agora usam --link,
     que passa em AA tanto no branco quanto no cinza;
   - o placeholder cinza #999 do select2 e dos inputs dava 2,56:1.
   ============================================================================ */

/* Só o seletor de elemento, de propósito.
   Uma versão anterior desta regra usava `.box a:not(.btn)`, que tem
   especificidade (0,2,1) e passou a vencer componentes com cor própria — a aba
   ativa do dashboard, por exemplo, ficou azul sobre navy. Com `a` puro (0,0,1),
   qualquer componente que declare a própria cor continua no comando. */
a,
a:visited {
    color: var(--link);
}

a:hover,
a:focus {
    color: var(--link-hover);
}

/* Placeholders — o #999 do Bootstrap e do tema krajee do select2 dá 2,56:1
   sobre fundo claro.

   ATENÇÃO à separação das regras abaixo: pseudo-elementos com prefixo de
   fornecedor NÃO podem entrar na mesma lista de seletores que os demais. Se um
   navegador não reconhece um item da lista, ele descarta a REGRA INTEIRA — foi
   o que aconteceu numa primeira versão desta seção, em que `::-moz-placeholder`
   anulou silenciosamente todo o bloco no Chrome. Cada um no seu. */
.select2-selection__placeholder,
.select2-container--default .select2-selection__placeholder,
.select2-container--krajee-bs3 .select2-selection--single .select2-selection__placeholder,
.select2-container--krajee-bs3 .select2-selection--multiple .select2-selection__placeholder {
    color: var(--slate-700) !important;
    opacity: 1;
}

::placeholder {
    color: var(--slate-700);
    opacity: 1;
}

::-webkit-input-placeholder {
    color: var(--slate-700);
    opacity: 1;
}

/* Texto do valor escolhido no select2 */
.select2-container--krajee-bs3 .select2-selection__rendered,
.select2-container--default .select2-selection__rendered {
    color: var(--slate-800) !important;
}

/* Exceção: a busca da topbar é clara sobre navy (ver §17) */
.skin-oraex .main-header .oraex-search-field input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Texto auxiliar em cinza claro espalhado pelas views */
[style*="color: #999"],
[style*="color:#999"],
[style*="color: #ccc"],
[style*="color:#ccc"] {
    color: var(--slate-700) !important;
}

/* ============================================================================
   24. ALERTA FLUTUANTE DAS TELAS DE AUTENTICAÇÃO
   ============================================================================
   O .flash-alert é `position: fixed` e aparece por cima da imagem de fundo da
   tela de login — que é escura. Os fundos tonais do tema são translúcidos por
   construção (rgba com 10% de alfa), então ali eles compunham com o escuro e
   produziam um lilás acinzentado: o texto vermelho caía para 3,97:1.

   Elemento que flutua sobre fundo desconhecido precisa de fundo OPACO. Não é
   exceção estética, é a única forma de garantir contraste quando não se sabe o
   que está atrás.
   ============================================================================ */

.flash-alert.alert-danger {
    background-color: #FDECEC !important;
    color: var(--danger-dark) !important;
    border: 1px solid rgba(239, 68, 68, .35);
}

.flash-alert.alert-success {
    background-color: #E9F7EF !important;
    color: var(--success-dark) !important;
    border: 1px solid rgba(34, 197, 94, .35);
}

.flash-alert.alert-warning {
    background-color: #FDF3E3 !important;
    color: var(--warning-dark) !important;
    border: 1px solid rgba(245, 158, 11, .35);
}

.flash-alert.alert-info {
    background-color: #E8F1FA !important;
    color: var(--navy-800) !important;
    border: 1px solid rgba(30, 116, 200, .35);
}

/* ============================================================================
   25. ÚLTIMOS AJUSTES DE CONTRASTE
   ============================================================================
   Fechamento dos casos que a suíte apontou depois das correções estruturais.
   Todos seguem a mesma lógica: --slate-600 e as cores claras da paleta passam
   em AA sobre branco, mas não sobre --surface. Onde o elemento pode assentar
   nos dois fundos, usa-se o tom que passa em ambos.
   ============================================================================ */

/* Subtítulo de página fora do .content-header (views que montam o próprio h1) */
h1 > small,
h2 > small,
.content-header h1 small {
    color: var(--slate-700);
}

/* Status "em progresso": --blue-400 rende 3,34:1 sobre branco. */
.oraex-status--progress {
    color: var(--blue-500);
}

.oraex-status--customer,
.oraex-status--neutral {
    color: var(--slate-700);
}

/* Labels de formulário podem cair sobre branco ou sobre --surface */
label,
.control-label {
    color: var(--slate-700);
}

/* Fundo escuro herdado do Bootstrap/AdminLTE em blocos de conteúdo:
   se o fundo é escuro, o texto tem de ser claro. */
.bg-navy, .bg-navy *,
.bg-black, .bg-black *,
.well-dark, .well-dark * {
    color: #fff !important;
}

/* Blocos de código e pré-formatado: o tema do Bootstrap usa #333 sobre #f5f5f5,
   e algumas views sobrepõem texto escuro em fundo escuro. */
pre, code, kbd, samp {
    background-color: var(--surface);
    color: var(--slate-800);
    border-color: var(--surface-tint);
    font-family: var(--font-mono);
}

pre {
    border-radius: var(--radius-sm);
}

/* --- Medidor de força de senha (nenad/yii2-password-strength) -------------
   O widget desenha a barra em #333 e conta com o próprio CSS para pôr texto
   branco por cima. Quando essa folha não é carregada, o texto herda a cor do
   corpo — escuro sobre escuro, 1,16:1.

   Declarar aqui torna o resultado independente de a folha do widget chegar ou
   não, o que é o comportamento desejável para algo que o usuário precisa ler
   enquanto digita a senha. */
.nz-scorebar-border {
    background: var(--slate-800);
    border-color: var(--slate-800);
    border-radius: var(--radius-sm);
}

/* !important porque o legado tem `.form-group div:not(...)` — mais um seletor
   coringa, com especificidade alta o bastante para pintar o número da barra de
   força de senha de escuro sobre o fundo escuro dela. */
.nz-meter .nz-score,
.nz-score, .nz-score-0, .nz-score-1, .nz-score-2,
.nz-score-3, .nz-score-4, .nz-score-5 {
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}

/* ============================================================================
   26. PAINÉIS DO BOOTSTRAP 3 (.panel)
   ============================================================================
   As GridViews do kartik são renderizadas dentro de .panel-primary /
   .panel-success / .panel-info, e o Bootstrap 3 pinta o cabeçalho desses
   painéis com a própria paleta (#337ab7, #5cb85c, #5bc0de) e texto branco.

   É o mesmo caso do .box: a faixa colorida cheia vira um traço fino no topo,
   e o cabeçalho passa a ser claro com título em navy. Assim a grid tem a mesma
   moldura de qualquer outro painel da interface.
   ============================================================================ */

.panel {
    background: var(--card);
    border: 1px solid var(--surface-tint);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.panel-primary,
.panel-success,
.panel-info,
.panel-warning,
.panel-danger,
.panel-default {
    border-color: var(--surface-tint);
}

.panel-primary > .panel-heading,
.panel-success > .panel-heading,
.panel-info > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading,
.panel-default > .panel-heading {
    background-color: transparent;
    background-image: none;
    border-bottom: 1px solid var(--surface-tint);
    border-color: var(--surface-tint);
    color: var(--navy-900);
    padding: 14px 18px;
}

.panel-primary > .panel-heading *,
.panel-success > .panel-heading *,
.panel-info > .panel-heading *,
.panel-warning > .panel-heading *,
.panel-danger > .panel-heading * {
    color: var(--navy-900);
}

/* Traço superior indicando a natureza do painel, no lugar do fundo cheio */
.panel-primary { border-top: 2px solid var(--navy-700); }
.panel-info    { border-top: 2px solid var(--blue-500); }
.panel-success { border-top: 2px solid var(--success); }
.panel-warning { border-top: 2px solid var(--warning); }
.panel-danger  { border-top: 2px solid var(--danger); }

.panel-heading .panel-title {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .3px;
    color: var(--navy-900);
}

/* Botões dentro do cabeçalho mantêm a própria cor */
.panel-heading .btn-primary,
.panel-heading .btn-primary *,
.panel-heading .btn-info,
.panel-heading .btn-info *,
.panel-heading .btn-success,
.panel-heading .btn-success *,
.panel-heading .btn-danger,
.panel-heading .btn-danger * {
    color: #fff;
}

/* Rodapé do painel (paginação e resumo da grid) */
.panel-footer {
    background: var(--card);
    border-top: 1px solid var(--surface-tint);
    color: var(--slate-700);
}

/* ============================================================================
   27. ÚLTIMOS CASOS APONTADOS PELA SUÍTE
   ============================================================================ */

/* Data da mensagem no leitor de e-mail: o AdminLTE usa #999 (2,56:1) */
.mailbox-read-time,
.mailbox-read-info h5 > small,
.mailbox-name,
.mailbox-subject {
    color: var(--slate-700);
}

/* Prefixo de unidade em input-group: o Bootstrap 3 pinta o fundo de #eeeeee,
   onde o slate-600 não alcança 4,5:1. */
.input-group-addon {
    background-color: var(--surface);
    color: var(--slate-700);
}

/* Linha de tabela em estado crítico (.danger do Bootstrap) já tem fundo
   avermelhado; o badge dentro dela precisa de fundo próprio e opaco, senão o
   tonal soma com a linha e o texto cai para o limite. */
tr.danger .label-danger,
tr.warning .label-warning,
tr.success .label-success,
tr.info .label-info {
    background-color: #fff !important;
}

/* As classes de estado de linha do Bootstrap 3 vêm em tons saturados; aqui
   viram tonais da paleta, com o texto sempre declarado junto. */
.table > tbody > tr.danger > td  { background-color: var(--tint-danger);  color: var(--slate-800); }
.table > tbody > tr.warning > td { background-color: var(--tint-warning); color: var(--slate-800); }
.table > tbody > tr.success > td { background-color: var(--tint-success); color: var(--slate-800); }
.table > tbody > tr.info > td    { background-color: var(--tint-blue);    color: var(--slate-800); }

/* ============================================================================
   28. ROLAGEM HORIZONTAL DAS GRIDS
   ============================================================================
   Uma tabela mais larga que o painel precisa rolar. Sem isso, as colunas da
   direita ficam inalcançáveis — e, pior, sem nenhum sinal na tela de que
   existem. Era o caso do drilldown de chamados: a tabela tinha 1.466px dentro
   de um painel de 1.116px, e o `overflow: hidden` do .box simplesmente cortava
   os 350px restantes.

   A rolagem fica no CONTÊINER, nunca no <table> nem no .box:

   - no .box, ela cortaria menus suspensos (ações da linha, datepicker) que
     precisam escapar da caixa;
   - no <table>, o cabeçalho sticky e a coluna fixa de ações perdem a
     referência de rolagem.

   `overflow-y: visible` é explícito de propósito: declarar só overflow-x faz o
   navegador promover o eixo Y para `auto`, e aí o dropdown de ações da linha
   passa a ser recortado na vertical.
   ============================================================================ */

.box-body.table-responsive,
.table-responsive,
.grid-view,
.kv-grid-container,
.kv-grid-panel,
.box-body > .h6 {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* Tabela solta dentro do painel.
   -------------------------------------------------------------------------
   As regras acima cobrem grid (GridView, kartik) e o que já vem marcado como
   .table-responsive. Sobra a tabela escrita à mão direto no .box-body — o
   histórico de alterações em user/view é uma delas: 1.200px de conteúdo num
   painel de 1.148px, sem wrapper para rolar. O excedente subia até .wrapper,
   que corta com overflow-x: hidden, e sumia.

   O :has() restringe a regra às caixas que de fato têm tabela solta; as demais
   continuam sem contexto de rolagem, e com isso os menus suspensos delas
   seguem podendo escapar da caixa. Onde :has() não existe, a regra é ignorada
   por inteiro e o comportamento é o de antes — degrada, não quebra. */
.box-body:has(> table.table) {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.box-body:has(> table.table)::-webkit-scrollbar {
    height: 10px;
}

/* O painel volta a não recortar: o arredondamento dos cantos é feito pelo
   header e pelo footer, que já o têm. */
.box {
    overflow: visible;
}

/* Barra de rolagem discreta, mas visível — uma barra invisível não avisa que
   há conteúdo à direita. */
.table-responsive::-webkit-scrollbar,
.grid-view::-webkit-scrollbar,
.kv-grid-container::-webkit-scrollbar,
.box-body > .h6::-webkit-scrollbar {
    height: 10px;
}

.table-responsive::-webkit-scrollbar-track,
.grid-view::-webkit-scrollbar-track,
.kv-grid-container::-webkit-scrollbar-track,
.box-body > .h6::-webkit-scrollbar-track {
    background: var(--surface);
    border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb,
.grid-view::-webkit-scrollbar-thumb,
.kv-grid-container::-webkit-scrollbar-thumb,
.box-body > .h6::-webkit-scrollbar-thumb {
    background: var(--slate-300);
    border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.grid-view::-webkit-scrollbar-thumb:hover,
.kv-grid-container::-webkit-scrollbar-thumb:hover,
.box-body > .h6::-webkit-scrollbar-thumb:hover {
    background: var(--slate-600);
}