/* ============================================================================
   ESTUDO pedro 2026-06-02 Reskin Orvyx (be) — componentes WebForms/Bootstrap 3:
   page-head, panel, GridView (table/dataTable), form-control, btn + variantes,
   alert, modal. Escopo em #content-container/#page-content para nao vazar.
   ============================================================================ */

/* ------------------------------------------------------------- Page head -- */
#page-head .page-header,
#page-head h1 {
    color: var(--foreground);
    font-weight: 600;
}

/* Cabeçalho de página com botões de ação ao lado do título: o .text-overflow
   (overflow:hidden + white-space:nowrap) cortava os botões em telas estreitas
   — ex.: "Nova ocorrência" (n_ocorrencia) e "Ir para Saída" (n_acesso) sumiam em ~320px.
   Transforma o h1 em flex que acomoda título + botões; o título encolhe/quebra e os
   botões caem para a linha de baixo se faltar espaço, em vez de serem ocultados. */
#page-head .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}
#page-head .page-header > .btn {
    flex: 0 0 auto;
    margin-left: 0; /* espaçamento agora vem do gap do flex (anula o .mar-lft) */
}

#page-head .breadcrumb {
    background: transparent;
    padding-left: 0;
}

#page-head .breadcrumb > li,
#page-head .breadcrumb > li > a {
    color: var(--muted-foreground);
}

#page-head .breadcrumb > .active {
    color: var(--foreground);
}

/* Separador do breadcrumb (estava branco/invisivel e com glifo de icon-font).
   Forca chevron com fonte normal e cor visivel. */
#page-head .breadcrumb > li + li::before {
    content: "\203A" !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    color: var(--muted-foreground) !important;
    padding: 0 10px;
    font-weight: 600;
}

/* ----------------------------------------------------------------- Panel -- */
/* IMPORTANTE: exclui .panel-colorful — esses paineis (dashboard: panel-info,
   panel-mint, panel-success, panel-purple, panel-warning, panel-primary) tem
   fundo de cor solida por design. Sem o :not(), o dashboard ficava todo branco. */
#page-content .panel:not(.panel-colorful),
.boxed .panel:not(.panel-colorful) {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--ovx-shadow-sm);
    color: var(--card-foreground);
}

#page-content .panel-heading,
.boxed .panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
    border-radius: var(--radius) var(--radius) 0 0;
}

#page-content .panel-footer,
.boxed .panel-footer {
    background: transparent;
    border-top: 1px solid var(--border);
}

/* Paineis ANINHADOS nao viram card (evita "caixas dentro de caixas" e bordas
   colapsadas por floats — ex.: grupos de opcoes do carga.aspx). So o painel
   externo recebe o estilo de card. */
#page-content .panel .panel:not(.panel-colorful),
.boxed .panel .panel:not(.panel-colorful) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------- Tabelas -- */
#page-content .table,
.boxed .table,
.orvyx-grid {
    background: transparent;
    color: var(--foreground);
    border-color: var(--border);
}

/* GridView do WebForms nao usa <thead>; os <th> ficam em <tr> comum.
   Por isso miramos th diretamente (e nao thead > tr > th). */
#page-content .table th,
.boxed .table th,
.orvyx-grid th {
    background: var(--secondary) !important;
    color: var(--muted-foreground) !important;
    border-color: var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11.5px;
    font-weight: 600;
    padding: 12px 14px;
    vertical-align: middle;
}

#page-content .table > tbody > tr > td,
.boxed .table > tbody > tr > td,
.orvyx-grid > tbody > tr > td {
    border-top: 1px solid var(--border);
    padding: 11px 14px;
    vertical-align: middle;
}

/* Bootstrap 3 faz zebra pintando o <td> (#f9f9f9), o que estoura no dark.
   Neutralizamos o td e aplicamos a zebra sutil no <tr>. */
#page-content .table-striped > tbody > tr > td,
.boxed .table-striped > tbody > tr > td {
    background-color: transparent !important;
}

/* Zebra e hover translucidos (funcionam em ambos os temas) */
#page-content .table-striped > tbody > tr:nth-of-type(even),
.boxed .table-striped > tbody > tr:nth-of-type(even) {
    background-color: color-mix(in srgb, var(--muted) 50%, transparent);
}

#page-content .table-hover > tbody > tr:hover,
.boxed .table-hover > tbody > tr:hover {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Paginacao do DataTables/GridView em pilulas */
.dataTables_paginate .paginate_button,
.pagination > li > a,
.pagination > li > span {
    color: var(--foreground);
    background: var(--card);
    border-color: var(--border);
    border-radius: 8px;
    margin: 0 2px;
}

.dataTables_paginate .paginate_button.current,
.pagination > .active > a,
.pagination > .active > span {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

/* --------------------------------------------------------------- Inputs --- */
#container .form-control {
    background: transparent;
    color: var(--foreground);
    border: 1px solid var(--input);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#container .form-control:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}

#container .form-control::placeholder {
    color: var(--muted-foreground);
}

#container label,
#container .control-label {
    color: var(--foreground);
    font-weight: 500;
}

/* Addon de input-group (ex.: o "ate" do intervalo de datas) — era branco fixo */
#container .input-group-addon {
    background: var(--secondary);
    color: var(--foreground);
    border: 1px solid var(--input);
}

/* --------------------------------------------------------------- Botoes --- */
#container .btn {
    border-radius: 8px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: filter .15s ease, background-color .15s ease, box-shadow .15s ease;
}

#container .btn:hover {
    filter: brightness(1.06);
}

#container .btn-primary,
#container .btn-purple,
#container .btn-pink {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
    box-shadow: var(--ovx-shadow-sm);
}

#container .btn-mint,
#container .btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
    box-shadow: var(--ovx-shadow-sm);
}

#container .btn-info {
    background: var(--info);
    color: #fff;
    border-color: var(--info);
    box-shadow: var(--ovx-shadow-sm);
}

/* btn-warning nao tinha estilo orvyx: o <a class="btn"> (LinkButton) herdava a
   cor de link (azul) p/ o icone, ficando azul sobre amarelo (ilegivel).
   Ex.: icone "editar" em n_usuarios. Forca texto/icone branco sobre o ambar. */
#container .btn-warning {
    background: var(--warning);
    color: #fff !important;
    border-color: var(--warning);
    box-shadow: var(--ovx-shadow-sm);
}

#container .btn-dark {
    background: var(--secondary);
    color: var(--foreground) !important;
    border-color: var(--border);
}

/* btn-default (Bootstrap) nao tinha estilo orvyx: ficava branco (#fff do vendor),
   o que no tema escuro vira um botao branco gritante (ex.: "Cancelar" de modais,
   "Fechar" do modal compartilhado). Remapeado a tokens — neutro nos 2 temas. */
#container .btn-default {
    background: var(--card);
    color: var(--foreground);
    border: 1px solid var(--border);
}

#container .btn-default:hover,
#container .btn-default:focus {
    background: var(--secondary);
    color: var(--foreground);
    border-color: var(--border);
}

/* Botoes "outline" em grupo de radio (btn-group-toggle) — ex.: "Tipo" em
   n_recebido_entrada. Sem estilo proprio, o item selecionado (.active) so
   ganhava uma sombra inset sutil, imperceptivel no escuro. Aqui o nao-selecionado
   fica so com a borda/cor primaria e o SELECIONADO fica PREENCHIDO, deixando
   obvio qual esta ativo nos 2 temas. */
#container .btn-outline-primary {
    background-color: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}

#container .btn-outline-primary:hover,
#container .btn-outline-primary:focus {
    background-color: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}

#container .btn-group-toggle > .btn.active,
#container .btn-outline-primary.active,
#container .btn-outline-primary:has(input:checked) {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border-color: var(--primary) !important;
    box-shadow: none !important;
}

#container .btn-group-toggle > .btn.active > i,
#container .btn-outline-primary.active > i,
#container .btn-outline-primary:has(input:checked) > i {
    color: var(--primary-foreground) !important;
}

#container .btn-danger,
#container .btn-retorno {
    background: var(--destructive);
    color: var(--destructive-foreground);
    border-color: var(--destructive);
}

#container .btn-default {
    background: var(--secondary);
    color: var(--secondary-foreground);
    border-color: var(--border);
}

/* --------------------------------------------------------------- Alerts --- */
#page-content .alert,
.boxed .alert {
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

#page-content .alert-success,
.boxed .alert-success {
    background: color-mix(in srgb, var(--farol-ok) 14%, var(--card));
    border-color: color-mix(in srgb, var(--farol-ok) 40%, var(--border));
    color: var(--foreground);
}

#page-content .alert-danger,
.boxed .alert-danger {
    background: color-mix(in srgb, var(--destructive) 14%, var(--card));
    border-color: color-mix(in srgb, var(--destructive) 40%, var(--border));
    color: var(--foreground);
}

#page-content .alert-info,
.boxed .alert-info {
    background: color-mix(in srgb, var(--brand-violet) 14%, var(--card));
    border-color: color-mix(in srgb, var(--brand-violet) 40%, var(--border));
    color: var(--foreground);
}

#page-content .alert-warning,
.boxed .alert-warning {
    background: color-mix(in srgb, var(--prazo-soon) 16%, var(--card));
    border-color: color-mix(in srgb, var(--prazo-soon) 45%, var(--border));
    color: var(--foreground);
}

/* --------------------------------------------------------------- Modais --- */
.modal-content {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--ovx-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--border);
}

.modalBackground {
    background-color: rgba(8, 6, 18, 0.6);
}

/* ----------------------------------------------------- Dashboards/charts -- */
/* Conteineres de grafico (Morris/Flot/Highcharts) nao devem ter fundo branco
   no tema escuro. Mantem transparente para herdar o card/painel. */
#page-content .morris-donut,
#page-content [id$="-donut"],
#page-content #line-chart,
#page-content .flot-chart,
.morris-donut,
.dash-panel .panel-body {
    background: transparent !important;
}

/* Rotulo central do donut Morris usa fill="#000000" (ilegivel no escuro).
   Sobrescreve o atributo de apresentacao via CSS so no tema escuro. */
html.dark .morris-donut svg text {
    fill: var(--foreground) !important;
}

/* Texto/legenda dos graficos legivel no escuro */
#page-content .morris-hover,
.morris-hover {
    background: var(--popover) !important;
    color: var(--popover-foreground) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
}

/* Cards/contadores do dashboard ganham cantos e sombra consistentes */
#page-content .panel.dash-panel,
#page-content .card {
    border-radius: var(--radius);
    box-shadow: var(--ovx-shadow-sm);
}

/* Badges */
#container .badge {
    border-radius: 999px;
}

#container .badge-danger {
    background: var(--destructive);
    color: var(--destructive-foreground);
}