/* =========================================================================
   custom-theme.css — camada de acabamento sobre AdminLTE 2 / Bootstrap 3
   -------------------------------------------------------------------------
   Carregado por app\assets\ThemeAsset (depends AdminLteAsset), portanto
   SEMPRE depois do AdminLTE.min.css e da skin. Só cosmético: cor, borda,
   sombra, raio, tipografia e espaçamento fino. Não mexe em largura de
   sidebar, altura de header nem em qualquer regra que o JS do AdminLTE lê.

   Para reverter: remova o registro do ThemeAsset nos layouts. Este arquivo
   sozinho não tem efeito nenhum se não for carregado.
   ========================================================================= */

:root {
    --accent:        #3c8dbc;   /* mesmo azul do .instructions da tela facial */
    --accent-dark:   #367fa9;
    --accent-soft:   rgba(60, 141, 188, .12);
    --accent-ring:   rgba(60, 141, 188, .25);

    --ink:           #1f2a37;
    --muted:         #6b7280;
    --line:          #e5e7eb;
    --line-strong:   #d5dae1;
    --surface:       #ffffff;
    --canvas:        #f5f7fa;

    --radius:        8px;
    --radius-sm:     6px;

    --shadow-sm:     0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-md:     0 4px 12px rgba(16, 24, 40, .08);
    --shadow-lg:     0 12px 32px rgba(16, 24, 40, .14);

    --font-sans:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   Base / tipografia
   ------------------------------------------------------------------------- */
body,
.content-wrapper,
.main-sidebar,
.wrapper,
.login-page,
.register-page {
    font-family: var(--font-sans);
}

body {
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.content-wrapper {
    background-color: var(--canvas);
}

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

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--ink);
}

/* Cabeçalho de página. O content.php deixa o <h1> sempre vazio (o título de
   cada tela vem no .box-title). O AdminLTE posiciona o breadcrumb em
   `position:absolute` por causa desse h1 — com rótulo longo (ex.: "Página
   inicial › Atualizar Preços de Exames") isso encavalava no conteúdo.
   Some com o h1 vazio e deixa o breadcrumb fluir normalmente. */
.content-header {
    padding: 12px 15px 0;
}
.content-header > h1 {
    margin: 0;
    font-size: 0;
    line-height: 0;
    min-height: 0;
}
.content-header > h1 > small {
    color: var(--muted);
}
.content-header > .breadcrumb {
    position: static;
    float: none;
    display: inline-block;
    margin: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.content {
    padding: 15px;
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.main-header .logo {
    font-weight: 600;
    letter-spacing: .3px;
    transition: background-color .2s ease;
}
.main-header .navbar {
    transition: none;
}
.main-header .sidebar-toggle:hover {
    background: rgba(255, 255, 255, .08) !important;
}
.navbar-nav > .user-menu .user-image {
    border: 1px solid rgba(255, 255, 255, .35);
}

/* -------------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------------- */
.sidebar-menu > li > a {
    padding: 11px 15px;
    font-size: 14px;
    transition: background-color .15s ease, border-color .15s ease;
}
.sidebar-menu > li.header {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 16px 8px;
}
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
    border-left-width: 3px;
    font-weight: 600;
}
.sidebar-menu .treeview-menu > li > a {
    padding: 8px 5px 8px 44px;
}
.sidebar-menu .treeview-menu > li.active > a {
    font-weight: 600;
}
.sidebar-form {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   Breadcrumb (fica no canto do content-header)
   ------------------------------------------------------------------------- */
.breadcrumb {
    background: transparent;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
}
.breadcrumb > li + li::before {
    color: var(--line-strong);
}
.breadcrumb > .active {
    color: var(--muted);
}

/* -------------------------------------------------------------------------
   Boxes (cards do AdminLTE)
   ------------------------------------------------------------------------- */
.box {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.box.box-primary   { border-top-color: var(--accent); }
.box.box-info      { border-top-color: var(--accent); }
.box.box-success   { border-top-color: #2e9e5b; }
.box.box-warning   { border-top-color: #e0a106; }
.box.box-danger    { border-top-color: #d9534f; }

.box-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}
.box-header.with-border {
    border-bottom: 1px solid var(--line);
}
.box-header > .box-title {
    font-size: 16px;
    font-weight: 600;
}
.box-body {
    padding: 18px;
}
.box-footer {
    border-top: 1px solid var(--line);
    padding: 14px 18px;
    background: #fcfcfd;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Box "solid" com cabeçalho colorido */
.box.box-solid.box-primary > .box-header,
.box.box-solid.box-info > .box-header {
    background: var(--accent);
    background-color: var(--accent);
}

/* -------------------------------------------------------------------------
   small-box / info-box (indicadores do dashboard)
   ------------------------------------------------------------------------- */
.small-box {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.small-box > .inner { padding: 18px; }
.small-box .icon { opacity: .28; }
.small-box:hover { box-shadow: var(--shadow-md); }
.small-box > .small-box-footer {
    background: rgba(0, 0, 0, .08);
}

.info-box {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.info-box-icon {
    border-radius: var(--radius) 0 0 var(--radius);
}

/* -------------------------------------------------------------------------
   Tabelas + GridView
   ------------------------------------------------------------------------- */
.table > thead > tr > th {
    border-bottom: 2px solid var(--line-strong);
    font-size: 12px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top: 1px solid var(--line);
    padding: 10px 12px;
    vertical-align: middle;
}
.table-hover > tbody > tr:hover {
    background-color: var(--accent-soft);
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--line);
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafbfc;
}
.grid-view {
    border-radius: var(--radius);
}
.grid-view > .table-responsive,
.grid-view > table {
    margin-bottom: 0;
}
.grid-view .summary {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 8px;
}
.grid-view .filters .form-control {
    font-size: 13px;
}

/* -------------------------------------------------------------------------
   Formulários
   ------------------------------------------------------------------------- */
.form-control {
    border-radius: var(--radius-sm);
    border-color: var(--line-strong);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.input-group-addon {
    border-color: var(--line-strong);
    background-color: #f3f5f7;
    border-radius: var(--radius-sm);
}
.control-label,
label {
    font-weight: 600;
    color: #374151;
}
.help-block {
    color: var(--muted);
    font-size: 12px;
}
.has-error .form-control {
    border-color: #d9534f;
}
.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(217, 83, 79, .22);
}

/* Select2 (widgets Kartik) — só borda/raio/foco, sem mexer em altura */
.select2-container--krajee .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap .select2-selection {
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
}
.select2-container--krajee.select2-container--focus .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.select2-dropdown {
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}
.select2-container--krajee .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent);
}

/* -------------------------------------------------------------------------
   Botões
   ------------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:focus,
.btn:active:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent-dark);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}
.btn-default {
    background-color: #fff;
    border-color: var(--line-strong);
    color: #374151;
}
.btn-default:hover,
.btn-default:focus {
    background-color: #f3f5f7;
    border-color: var(--line-strong);
}
.btn-flat {
    border-radius: var(--radius-sm);
}
.btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* -------------------------------------------------------------------------
   Labels / badges / alerts
   ------------------------------------------------------------------------- */
.label {
    font-weight: 600;
    font-size: 85%;
    padding: .3em .6em;
    border-radius: var(--radius-sm);
    letter-spacing: .2px;
}
.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 9px;
}
.label-primary,
.label-info { background-color: var(--accent); }

.alert {
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.alert-success { border-left-color: #2e9e5b; }
.alert-info    { border-left-color: var(--accent); }
.alert-warning { border-left-color: #e0a106; }
.alert-danger  { border-left-color: #d9534f; }

.callout {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------------------
   Nav tabs / pills
   ------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--line);
}
.nav-tabs > li > a {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--muted);
    font-weight: 500;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--ink);
    border-color: var(--line) var(--line) transparent;
}
.nav-tabs-custom {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--accent);
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--accent);
}

/* -------------------------------------------------------------------------
   Paginação
   ------------------------------------------------------------------------- */
.pagination > li > a,
.pagination > li > span {
    color: var(--accent);
    border-color: var(--line);
    margin: 0 2px;
    border-radius: var(--radius-sm) !important;
}
.pagination > li > a:hover {
    background-color: var(--accent-soft);
    border-color: var(--line-strong);
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* -------------------------------------------------------------------------
   Modais / dropdowns / popovers
   ------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--line);
    padding: 16px 20px;
}
.modal-header .modal-title {
    font-weight: 600;
}
.modal-footer {
    border-top: 1px solid var(--line);
    padding: 14px 20px;
}
.modal-backdrop.in {
    opacity: .4;
}
.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 6px;
}
.dropdown-menu > li > a {
    border-radius: var(--radius-sm);
    padding: 7px 12px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--accent-soft);
    color: var(--accent-dark);
}
.navbar-nav > .user-menu > .dropdown-menu {
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.popover,
.tooltip-inner {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------------------------
   Login / troca de código
   ------------------------------------------------------------------------- */
.login-box,
.register-box {
    width: 380px;
}
.login-box-body,
.register-box-body {
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: none;
    padding: 26px;
}
.login-logo,
.register-logo {
    font-weight: 600;
    letter-spacing: .3px;
}
.login-box-msg {
    color: var(--muted);
}

/* -------------------------------------------------------------------------
   Rodapé
   ------------------------------------------------------------------------- */
.main-footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

/* -------------------------------------------------------------------------
   Detalhes
   ------------------------------------------------------------------------- */
.progress {
    border-radius: 999px;
    box-shadow: none;
    background-color: #eceff3;
}
.progress-bar {
    background-color: var(--accent);
}
hr {
    border-top-color: var(--line);
}
.text-muted {
    color: var(--muted) !important;
}
code {
    border-radius: 4px;
}

/* Barras de rolagem (WebKit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    background: #c7ced6;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: #aab2bd;
    background-clip: content-box;
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================================================================
   Views geradas pelo Giiant (.giiant-crud) — "layout antigo"
   -------------------------------------------------------------------------
   Não têm o card `.box` do AdminLTE: jogam <h1> + toolbar + <hr> + grid
   direto no canvas. Aqui o próprio wrapper vira o card, então as ~148
   views (index/view/create/update) ficam consistentes sem editar arquivo
   por arquivo.
   ========================================================================= */

.giiant-crud {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    margin-bottom: 20px;
}

/* Título da página dentro do wrapper */
.giiant-crud > h1 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
}
.giiant-crud > h1 > small {
    display: inline-block;
    margin-left: 4px;
    font-size: 14px;
    color: var(--muted);
}

/* Barra de ações (Novo / Editar / Excluir / Voltar…) */
.crud-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
}
.crud-navigation::before,
.crud-navigation::after {
    content: none; /* neutraliza o .clearfix — agora é flex */
}
.crud-navigation > .pull-left,
.crud-navigation > .pull-right {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.crud-navigation > .pull-right {
    margin-left: auto;
}

/* O <hr> que separa a toolbar do conteúdo */
.giiant-crud > hr {
    margin: 14px 0 16px;
    border-top-color: var(--line);
}

/* Botões de ação dentro da GridView (links de ícone) */
td .action-buttons,
.action-buttons {
    display: inline-flex;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: center;
    white-space: nowrap;
}
td .action-buttons > a,
td .action-column a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    color: var(--muted);
    line-height: 1;
}
td .action-buttons > a:hover,
td .action-column a:hover {
    background: var(--accent-soft);
    border-color: var(--line);
    color: var(--accent-dark);
}

/* Glyphicons (BS3) ainda aparecem no Giiant — só um respiro no alinhamento */
.btn > .glyphicon { top: 1px; }

/* Formulário horizontal do Giiant */
.giiant-crud .error-summary,
.giiant-crud .error-summary.alert {
    border-radius: var(--radius-sm);
}
[class$="-form"] > .form-group:last-child,
[class$="-form"] hr + .btn {
    margin-bottom: 0;
}

/* DetailView (tela "view") — evita valor longo estourar no mobile */
.detail-view { width: 100%; }
.detail-view > tbody > tr > th { width: 32%; white-space: nowrap; }
.detail-view > tbody > tr > td { word-break: break-word; }

/* =========================================================================
   Rolagem horizontal das grades — SEMPRE (não só < 768px como o BS3 faz)
   ========================================================================= */
.table-responsive,
.grid-view > .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 0;
    margin-bottom: 12px;
}

/* =========================================================================
   Responsivo — celular (≤ 767px)
   ========================================================================= */
@media (max-width: 767px) {
    .content { padding: 10px; }
    .content-header { padding: 10px 12px 0; }

    .box-header { padding: 12px 14px; }
    .box-body,
    .box-footer { padding: 14px; }

    .giiant-crud {
        padding: 12px;
        border-radius: var(--radius-sm);
    }
    .giiant-crud > h1 { font-size: 17px; }

    /* Toolbar: cada bloco ocupa a linha toda e os botões dividem o espaço */
    .crud-navigation > .pull-left,
    .crud-navigation > .pull-right {
        width: 100%;
        margin-left: 0;
    }
    .crud-navigation > .pull-left > .btn,
    .crud-navigation > .pull-right > .btn,
    .crud-navigation > .pull-left > a.btn,
    .crud-navigation > .pull-right > a.btn {
        flex: 1 1 auto;
        text-align: center;
    }

    /* Botão de salvar/enviar dos formulários ocupa a largura toda */
    [class$="-form"] .btn[type="submit"],
    [class$="-form"] button[type="submit"],
    .box-footer .btn-block-xs {
        width: 100%;
        margin-bottom: 8px;
    }

    /* Tabelas mais compactas */
    .table > thead > tr > th,
    .table > tbody > tr > td { padding: 8px 10px; }

    /* Paginação sem quebrar layout */
    .pagination { display: flex; flex-wrap: wrap; }
    .pagination > li > a,
    .pagination > li > span { padding: 6px 10px; margin: 2px; }

    /* Modais quase full-screen */
    .modal-dialog {
        margin: 10px;
        width: auto;
    }

    /* Abas que quebram em vez de vazar */
    .nav-tabs { display: flex; flex-wrap: wrap; }
    .nav-tabs > li { float: none; }

    /* DetailView vira coluna única */
    .detail-view > tbody > tr > th {
        width: auto;
        white-space: normal;
    }
}

/* Login não pode passar da largura da tela em telas bem pequenas */
@media (max-width: 420px) {
    .login-box,
    .register-box { width: 92%; }
    .login-box-body,
    .register-box-body { padding: 20px; }
}