/* =====================================================================
   THEME5 — Design System CONCEP
   Camada de apresentação sobre o Adianti Framework existente.
   Não referencia nem depende de nenhuma regra de negócio/model/schema.
   ===================================================================== */

:root{
    /* ---- cores institucionais ---- */
    --t5-navy-900:#0b1b2b;
    --t5-navy-800:#102b40;
    --t5-navy-700:#173650;
    --t5-blue:#1677e8;
    --t5-blue-dark:#0d63cc;
    --t5-green:#16b87a;
    --t5-red:#ef5350;
    --t5-amber:#d99400;

    /* ---- estados semânticos ---- */
    --t5-success:#16b87a;
    --t5-success-bg:#e3f8ee;
    --t5-warning:#aa7200;
    --t5-warning-bg:#fff2d6;
    --t5-danger:#c62828;
    --t5-danger-bg:#fde8e8;
    --t5-info:#1677e8;
    --t5-info-bg:#e7f2ff;

    /* ---- superfícies e texto ---- */
    --t5-bg:#f4f7fb;
    --t5-surface:#ffffff;
    --t5-surface-2:#f8fafc;
    --t5-ink:#17233b;
    --t5-muted:#718096;
    --t5-border:#e4eaf1;
    --t5-border-strong:#cfdbe6;

    /* ---- tipografia ---- */
    --t5-font-display:'Sora', system-ui, -apple-system, sans-serif;
    --t5-font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ---- espaçamento / forma ---- */
    --t5-radius-sm:6px;
    --t5-radius:10px;
    --t5-radius-lg:14px;
    --t5-radius-pill:999px;
    --t5-shadow-sm:0 1px 2px rgba(17,27,43,.05);
    --t5-shadow:0 1px 3px rgba(17,27,43,.05), 0 8px 24px rgba(17,27,43,.06);
    --t5-field-height:40px;
    --t5-sidebar-width:270px;
    --t5-header-height:64px;
}

/* =====================================================================
   BASE — tipografia, foco, utilitários
   ===================================================================== */

body{
    font-family: var(--t5-font-body);
    background: var(--t5-bg);
    color: var(--t5-ink);
}

.t5-sidebar, .t5-topbar, .page-header, .stat-card, .data-card, .filter-bar,
.t5-content, .card, .form-tabs, .detail-card{
    font-family: var(--t5-font-body);
}

.page-header h1, .t5-brand-text strong, .stat-card b, .data-card h3{
    font-family: var(--t5-font-display);
}

/* visible focus state everywhere — never remove outline without a replacement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
    outline: 2px solid var(--t5-blue);
    outline-offset: 2px;
    border-radius: var(--t5-radius-sm);
}

.t5-sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =====================================================================
   SIDEBAR — App Shell / menu
   ===================================================================== */

.t5-sidebar{
    width: var(--t5-sidebar-width) !important;
    max-width: var(--t5-sidebar-width) !important;
    min-width: var(--t5-sidebar-width) !important;
    background: linear-gradient(180deg, var(--t5-navy-900), #081420) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    z-index: 40;
    transition: transform .22s ease;
    color: #b9c8d8;
}

.t5-brand{
    height: var(--t5-header-height);
    flex: none;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.t5-brand-mark{
    width: 40px; height: 40px; flex: none;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.t5-brand-mark img{ width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.t5-brand-text strong{ display: block; color: #fff; font-size: 14.5px; line-height: 1.2; }
.t5-brand-text small{ display: block; color: #8fa6bc; font-size: 10.5px; margin-top: 1px; }

.t5-search{
    flex: none;
    margin: 10px 12px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--t5-radius-sm);
    display: flex; align-items: center; gap: 8px;
    padding: 0 11px;
    color: #8ca0b3;
}
.t5-search input{
    background: transparent; border: 0; outline: 0; color: #fff;
    width: 100%; font-size: 12px; font-family: var(--t5-font-body);
}
.t5-search input::placeholder{ color: #7d93a8; }

.t5-menu-scroll{
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 10px 10px;
}
.t5-menu-scroll::-webkit-scrollbar{ width: 6px; }
.t5-menu-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 10px; }

.t5-menu{ display: block; }

.t5-group{ margin-bottom: 2px; }

.t5-group-toggle{
    width: 100%;
    display: flex; align-items: center; gap: 11px;
    background: transparent; border: 0;
    color: #b9c8d8;
    text-align: left;
    padding: 10px 11px;
    border-radius: var(--t5-radius-sm);
    cursor: pointer;
    font: 600 11.5px var(--t5-font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 10px;
}
.t5-group:first-child .t5-group-toggle{ margin-top: 4px; }
.t5-group-toggle:hover{ background: rgba(255,255,255,.06); color: #fff; }
.t5-group-toggle .t5-label{ flex: 1; }
.t5-group-toggle .t5-chev{ font-size: 10px; color: #6f889e; transition: transform .18s ease; }
.t5-group-toggle[aria-expanded="true"] .t5-chev{ transform: rotate(90deg); }
.t5-group-toggle .t5-ic{ width: 16px; text-align: center; font-size: 13px; color: #6f889e; }

.t5-group-body{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .2s ease;
}
.t5-group-body-inner{ overflow: hidden; min-height: 0; }
.t5-group-body.t5-open, .t5-group-body-open{ grid-template-rows: 1fr; }

.t5-link{
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px 9px 30px;
    margin: 1px 0;
    border-radius: var(--t5-radius-sm);
    color: #91a6ba;
    text-decoration: none;
    font-size: 12.5px;
    position: relative;
}
.t5-link:hover{ background: rgba(255,255,255,.06); color: #fff; }
.t5-link.t5-active{ background: var(--t5-blue); color: #fff; }
.t5-link .t5-ic{ width: 15px; text-align: center; font-size: 12px; flex: none; }
.t5-link-top{ padding-left: 11px; margin-top: 4px; }
.t5-link-top .t5-ic{ width: 16px; font-size: 13px; }

.t5-footer{
    flex: none;
    display: flex; align-items: center; gap: 9px;
    padding: 11px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.t5-footer-photo{
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    background-color: #24384c; background-size: cover; background-position: center;
}
.t5-footer-info{ flex: 1; min-width: 0; }
.t5-footer-info strong{ display: block; color: #fff; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t5-footer-info small{ display: block; color: #7f95aa; font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t5-footer-edit{
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); color: #cdd9e4; font-size: 11px;
}
.t5-footer-edit:hover{ background: rgba(255,255,255,.14); color: #fff; }

/* push the rest of the app shell to the right of the fixed sidebar */
.master-container{ margin-left: var(--t5-sidebar-width) !important; }
.container-header.navbar{ padding-left: 0 !important; }
.container-header.navbar .header-logo{ width: var(--t5-sidebar-width) !important; box-sizing: border-box; }

.t5-overlay{
    display: none;
    position: fixed; inset: 0; background: rgba(6,12,20,.5); z-index: 39;
}
body.t5-menu-open .t5-overlay{ display: block; }

/* =====================================================================
   TOPBAR — leve modernização preservando comportamento existente
   ===================================================================== */

.container-header.navbar{
    background: var(--t5-surface) !important;
    border-bottom: 1px solid var(--t5-border) !important;
    box-shadow: 0 1px 2px rgba(17,27,43,.03);
}
.container-header .header-track{
    display: flex; align-items: center; gap: 10px; flex: 1;
}
.t5-header-search-wrap{
    flex: 1; min-width: 0; max-width: 620px;
}
/* Adianti's native SearchBox (permission-aware "jump to any program",
   engine.php?class=SearchBox) renders here as a select2 widget — styled to
   match the rest of the topbar instead of leaving Adianti's default look. */
.t5-header-search-wrap #search_box{ width: 100%; }
.t5-header-search-wrap .select2-container{ width: 100% !important; }
.t5-header-search-wrap .select2-selection{
    height: 38px !important;
    border: 1px solid var(--t5-border-strong) !important;
    background: var(--t5-surface-2) !important;
    border-radius: 9px !important;
    display: flex; align-items: center;
    font-family: var(--t5-font-body);
}
.t5-header-search-wrap .select2-selection__rendered{
    padding-left: 14px !important;
    font-size: 13px; color: var(--t5-ink); line-height: 36px !important;
}
.t5-header-search-wrap .select2-search__field{
    font-family: var(--t5-font-body); font-size: 13px;
}
.t5-header-search-wrap .select2-container--focus .select2-selection,
.t5-header-search-wrap .select2-container--open .select2-selection{
    background: var(--t5-surface) !important;
    border-color: var(--t5-blue) !important;
    box-shadow: 0 0 0 3px rgba(22,119,232,.10);
}
/* O painel de resultados do select2 (.select2-dropdown) é anexado direto
   no <body> pelo plugin, não dentro de .t5-header-search-wrap — por isso
   precisa de regras à parte (sem escopo) pra receber o visual novo. */
.select2-dropdown{
    min-width: 280px;
    border: 1px solid var(--t5-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: var(--t5-shadow);
    overflow: hidden;
    font-family: var(--t5-font-body);
}
.select2-search--dropdown{ padding: 8px !important; }
.select2-search--dropdown .select2-search__field{
    border: 1px solid var(--t5-border-strong) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
}
.select2-results__option{
    padding: 9px 14px !important;
    font-size: 13px;
    white-space: normal;
}
.select2-results__option--highlighted[aria-selected]{
    background: var(--t5-blue) !important;
    color: #fff !important;
}

.container-header .header-track .button-circle{
    border-radius: 9px !important;
    width: 38px !important; height: 38px !important;
    border: 1px solid var(--t5-border-strong) !important;
    background: var(--t5-surface) !important;
    color: #54707e !important;
    display: flex !important; align-items: center; justify-content: center;
}
.container-header .header-track .button-circle:hover{
    background: var(--t5-surface-2) !important;
}
.container-header .builder-dropdown-menu,
.container-header .builder-profile-menu{
    display: flex; align-items: center; gap: 7px;
}
.container-header .header-profile-photo{
    border-radius: 9px !important;
    width: 38px !important; height: 38px !important;
}

@media (max-width: 760px){
    .t5-header-search-wrap{ display: none; }
}

/* =====================================================================
   RESKIN GLOBAL — componentes compartilhados do Adianti
   ===================================================================== */

/* cards (usados por BootstrapFormBuilder e BootstrapDatagridWrapper) */
.container-live .card,
#adianti_div_content .card,
.ui-dialog-content .card{
    border: 1px solid var(--t5-border) !important;
    border-radius: var(--t5-radius) !important;
    box-shadow: var(--t5-shadow) !important;
    overflow: hidden;
}
.container-live .card-header,
#adianti_div_content .card-header,
.ui-dialog-content .card-header{
    background: var(--t5-surface-2) !important;
    border-bottom: 1px solid var(--t5-border) !important;
    font-weight: 600;
    color: var(--t5-ink);
}
.container-live .card-footer,
#adianti_div_content .card-footer,
.ui-dialog-content .card-footer{
    background: var(--t5-surface) !important;
    border-top: 1px solid var(--t5-border) !important;
}

/* botões */
.container-live .btn,
#adianti_div_content .btn,
.ui-dialog-content .btn{
    border-radius: var(--t5-radius-sm) !important;
    font-weight: 600;
}
.container-live .btn.btn-primary,
#adianti_div_content .btn.btn-primary,
.ui-dialog-content .btn.btn-primary{
    background: var(--t5-blue) !important;
    border-color: var(--t5-blue) !important;
}
.container-live .btn.btn-primary:hover,
#adianti_div_content .btn.btn-primary:hover,
.ui-dialog-content .btn.btn-primary:hover{
    background: var(--t5-blue-dark) !important;
    border-color: var(--t5-blue-dark) !important;
}
.container-live .btn.btn-default,
#adianti_div_content .btn.btn-default,
.ui-dialog-content .btn.btn-default{
    background: var(--t5-surface) !important;
    border: 1px solid var(--t5-border-strong) !important;
    color: #45566c !important;
    box-shadow: var(--t5-shadow-sm);
}
.container-live .btn.btn-default:hover,
#adianti_div_content .btn.btn-default:hover,
.ui-dialog-content .btn.btn-default:hover{
    background: var(--t5-surface-2) !important;
    border-color: var(--t5-blue) !important;
    color: var(--t5-blue) !important;
}
/* Botões padrão (ex.: barra "Cadastrar / Filtros / Limpar" das listagens)
   vêm do Adianti com ícones em cores "sinal de trânsito" (verde/vermelho/
   laranja via classes .green/.red/.orange do framework) que destoam do
   botão limpo — aqui herdam a cor do próprio botão/texto. As mesmas
   classes continuam funcionando normalmente fora de botões. */
.container-live .btn .green,
.container-live .btn .red,
.container-live .btn .blue,
.container-live .btn .orange,
#adianti_div_content .btn .green,
.ui-dialog-content .btn .green,
#adianti_div_content .btn .red,
.ui-dialog-content .btn .red,
#adianti_div_content .btn .blue,
.ui-dialog-content .btn .blue,
#adianti_div_content .btn .orange,
.ui-dialog-content .btn .orange{
    color: inherit !important;
}
.container-live .btn.btn-primary *,
#adianti_div_content .btn.btn-primary *,
.ui-dialog-content .btn.btn-primary *{
    color: #fff !important;
}

/* ícones de ação por linha da tabela (editar/excluir/histórico) */
.tdatagrid_action a,
.tdatagrid_cell.action a{
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 7px;
    transition: background .12s ease;
}
.tdatagrid_action a:hover,
.tdatagrid_cell.action a:hover{
    background: var(--t5-info-bg);
}

/* nome em destaque na listagem (sem avatar, igual ao padrão mais recente) */
.t5-person-name{ font-weight: 700; color: #1d4153; }

/* resumo de paginação ("Mostrando X a Y de Z registros") */
.tpagenavigation_resume{
    font-size: 10.5px; color: #81919d;
}

/* contador de filtros ativos no botão "Filtros" */
.container-live .btn .badge.badge-success,
#adianti_div_content .btn .badge.badge-success,
.ui-dialog-content .btn .badge.badge-success{
    background: var(--t5-info-bg) !important;
    color: var(--t5-blue) !important;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
}

/* campos de formulário */
.container-live .form-control,
.container-live .tfield,
.container-live .tcombo,
#adianti_div_content .form-control,
.ui-dialog-content .form-control,
#adianti_div_content .tfield,
.ui-dialog-content .tfield,
#adianti_div_content .tcombo,
.ui-dialog-content .tcombo{
    border: 1px solid var(--t5-border-strong) !important;
    border-radius: var(--t5-radius-sm) !important;
    min-height: var(--t5-field-height);
}
.container-live .form-control:focus,
.container-live .tfield:focus,
#adianti_div_content .form-control:focus,
.ui-dialog-content .form-control:focus,
#adianti_div_content .tfield:focus,
.ui-dialog-content .tfield:focus{
    border-color: var(--t5-blue) !important;
    box-shadow: 0 0 0 3px rgba(22,119,232,.12) !important;
}
.container-live label,
#adianti_div_content label,
.ui-dialog-content label{
    color: #45566c;
    font-weight: 600;
    font-size: 12.5px;
}

/* TDate/TDateTime: o Adianti envolve o campo em .tdate-group e cola um
   botão separado (.tdate-group-addon, com o ícone de calendário) do lado,
   sem unir visualmente os dois — por isso destoava de altura/borda dos
   demais campos. Aqui os dois viram um campo único e contínuo, mesmo
   padrão já usado no botão de mostrar/ocultar senha do login. */
.container-live .tdate-group,
#adianti_div_content .tdate-group,
.ui-dialog-content .tdate-group{
    display: flex !important;
    align-items: stretch;
}
.container-live .tdate-group .tfield,
#adianti_div_content .tdate-group .tfield,
.ui-dialog-content .tdate-group .tfield{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}
.container-live .tdate-group-addon,
#adianti_div_content .tdate-group-addon,
.ui-dialog-content .tdate-group-addon{
    height: auto !important;
    min-height: var(--t5-field-height);
    border: 1px solid var(--t5-border-strong) !important;
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--t5-radius-sm) !important;
    border-bottom-right-radius: var(--t5-radius-sm) !important;
    background: var(--t5-surface-2) !important;
    color: #7a8ba0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    box-shadow: none !important;
}
.container-live .tdate-group-addon:hover,
#adianti_div_content .tdate-group-addon:hover,
.ui-dialog-content .tdate-group-addon:hover{
    background: var(--t5-surface) !important;
    color: var(--t5-blue) !important;
}

/* tabelas (BootstrapDatagridWrapper) */
.container-live table.table,
#adianti_div_content table.table,
.ui-dialog-content table.table{
    font-size: 12.5px;
}
.container-live table.table thead th,
#adianti_div_content table.table thead th,
.ui-dialog-content table.table thead th{
    background: var(--t5-surface-2) !important;
    color: #52657a;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--t5-border) !important;
}
.container-live table.table tbody tr:hover,
#adianti_div_content table.table tbody tr:hover,
.ui-dialog-content table.table tbody tr:hover{
    background: #fbfdff;
}
.container-live table.table td,
#adianti_div_content table.table td,
.ui-dialog-content table.table td{
    border-bottom: 1px solid #edf1f5 !important;
    vertical-align: middle;
}

/* paginação (TPageNavigation) */
.container-live .pagination,
#adianti_div_content .pagination,
.ui-dialog-content .pagination{
    gap: 3px;
}
.container-live .pagination .page-link,
#adianti_div_content .pagination .page-link,
.ui-dialog-content .pagination .page-link{
    border-radius: var(--t5-radius-sm) !important;
    border-color: var(--t5-border-strong) !important;
    color: #52657a;
}
.container-live .pagination .page-item.active .page-link,
#adianti_div_content .pagination .page-item.active .page-link,
.ui-dialog-content .pagination .page-item.active .page-link{
    background: var(--t5-blue) !important;
    border-color: var(--t5-blue) !important;
}

/* abas (Notebook / form-tabs) */
.container-live .nav-tabs .nav-link,
#adianti_div_content .nav-tabs .nav-link,
.ui-dialog-content .nav-tabs .nav-link{
    border: none !important;
    color: #61758b;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--t5-radius-sm) var(--t5-radius-sm) 0 0 !important;
}
.container-live .nav-tabs .nav-link.active,
#adianti_div_content .nav-tabs .nav-link.active,
.ui-dialog-content .nav-tabs .nav-link.active{
    color: #126ed8;
    background: #e8f2ff !important;
}

/* dropdowns / fast-drop / right panel / modais */
.fast-drop-open{
    border-radius: var(--t5-radius) !important;
    box-shadow: var(--t5-shadow) !important;
    border: 1px solid var(--t5-border) !important;
}
#adianti_right_panel.right-panel{
    box-shadow: -8px 0 24px rgba(17,27,43,.08);
}
.modal-content{
    border-radius: var(--t5-radius) !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(11,27,43,.25) !important;
}
/* Notificações/mensagens/tema/perfil: originalmente abriam só no :hover
   puro em CSS (sem JS) — .fast-drop:hover > .fast-drop-open. Isso é
   estruturalmente frágil: não existe :hover persistente em touch (celular/
   tablet), então um toque revela o menu mas o toque seguinte no item nem
   sempre "clica" nele. theme5-menu.js (initFastDrop) agora controla a
   abertura via clique/toque (classe .t5-open), funcionando igual em mouse
   e touch; esta regra replica o visual da regra :hover original do
   framework (application.css) para quando .t5-open está presente. O
   :hover original continua funcionando também (é só um bônus no desktop:
   abre ao passar o mouse, sem precisar clicar). */
.fast-drop.t5-open > .fast-drop-open{
    display: block;
    position: absolute;
    border: 1px solid var(--template-border-color);
    padding: 14px;
    border-radius: 0px 0px 6px 6px;
    background: var(--modal-background);
    overflow: auto;
    max-height: 50vh;
    right: 0;
}
.fast-drop-open::before{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -18px;
    height: 18px;
}
@media (max-width: 992px){
    .fast-drop.t5-open > .fast-drop-open{
        bottom: 30px;
    }
}

/* =====================================================================
   DESIGN SYSTEM — classes reutilizáveis para padrões de tela
   ===================================================================== */

.page-header{
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
}
.page-header h1{ margin: 0 0 4px; font-size: 22px; color: var(--t5-ink); letter-spacing: -.01em; }
.page-header p{ margin: 0; color: var(--t5-muted); font-size: 13px; }
.page-crumb{ font-size: 11px; color: #8492a3; margin-bottom: 6px; }

.page-actions{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-actions .btn{ border-radius: var(--t5-radius-sm); }

.stat-grid{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; margin-bottom: 14px;
}
.stat-card{
    background: var(--t5-surface); border: 1px solid var(--t5-border);
    border-radius: var(--t5-radius); padding: 14px 16px;
    display: flex; gap: 12px; align-items: center;
    box-shadow: var(--t5-shadow-sm);
}
.stat-card .stat-icon{
    width: 38px; height: 38px; border-radius: 9px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.stat-card .stat-icon.green{ background: var(--t5-success-bg); color: var(--t5-success); }
.stat-card .stat-icon.blue{ background: var(--t5-info-bg); color: var(--t5-info); }
.stat-card .stat-icon.red{ background: var(--t5-danger-bg); color: var(--t5-danger); }
.stat-card .stat-icon.amber{ background: var(--t5-warning-bg); color: var(--t5-warning); }
.stat-card b{ display: block; font-size: 19px; line-height: 1.1; }
.stat-card small{ display: block; color: var(--t5-muted); font-size: 10.5px; margin-top: 2px; }

.stat-card .stat-label{ font-size: 10px; color: #81929d; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.stat-card .stat-value{ font-size: 22px; font-weight: 800; line-height: 1.15; color: #122f40; margin: 2px 0; }
.stat-card .stat-meta{ font-size: 10.5px; color: #83939e; }
.stat-card .stat-meta strong{ color: #4f6774; }

.quick-actions{
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    background: var(--t5-surface); border: 1px solid var(--t5-border); border-radius: var(--t5-radius);
    padding: 11px 13px; margin-bottom: 14px; box-shadow: var(--t5-shadow-sm);
}
.quick-actions-label{
    font-size: 10px; text-transform: uppercase; font-weight: 800;
    color: #81919c; margin-right: 2px; letter-spacing: .03em;
}
.quick-actions a, .quick-actions button{
    border: 1px solid var(--t5-border-strong); background: #fff; color: #355363;
    border-radius: var(--t5-radius-sm); padding: 8px 12px; cursor: pointer;
    font-size: 11.5px; font-weight: 700; text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px; height: 34px;
}
.quick-actions a:hover, .quick-actions button:hover{ border-color: var(--t5-border-strong); background: var(--t5-surface-2); color: var(--t5-blue); }
.quick-actions-count{
    background: var(--t5-warning-bg); color: var(--t5-warning);
    border-radius: 999px; padding: 1px 7px; font-size: 10px; font-weight: 800;
}

.filter-bar{
    background: var(--t5-surface); border: 1px solid var(--t5-border);
    border-radius: var(--t5-radius); padding: 12px; margin-bottom: 12px;
}

.data-card{
    background: var(--t5-surface); border: 1px solid var(--t5-border);
    border-radius: var(--t5-radius); padding: 16px; box-shadow: var(--t5-shadow-sm);
}

.status-badge{
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: var(--t5-radius-pill);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
}
.status-badge::before{ content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.ok{ background: var(--t5-success-bg); color: var(--t5-success); }
.status-badge.pending{ background: var(--t5-warning-bg); color: var(--t5-warning); }
.status-badge.off{ background: #eef1f4; color: var(--t5-muted); }
.status-badge.info{ background: var(--t5-info-bg); color: var(--t5-info); }

.t5-person{ display: flex; align-items: center; gap: 9px; font-weight: 500; }
.t5-person .t5-mini{
    width: 27px; height: 27px; border-radius: 50%; flex: none;
    background: #dce8f4; color: #2f4f70;
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700;
}

.empty-state{
    text-align: center; padding: 40px 20px; color: var(--t5-muted);
}
.empty-state i{ font-size: 30px; color: #c4d0dc; margin-bottom: 10px; display: block; }

.form-section{ margin-bottom: 20px; }
.form-section h3{ font-size: 13px; margin: 0 0 12px; color: var(--t5-ink); }

.detail-card{
    background: var(--t5-surface); border: 1px solid var(--t5-border);
    border-radius: var(--t5-radius); padding: 16px;
}

/* =====================================================================
   RESPONSIVO — 1100 / 760 / 430 (mesmos pontos de quebra dos mockups)
   ===================================================================== */

@media (max-width: 1100px){
    .stat-grid{ grid-template-columns: repeat(3, 1fr); }
    .quick-actions{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px){
    .master-container{ margin-left: 0 !important; }
    .container-header.navbar .header-logo{ width: auto !important; }
    .t5-sidebar{ transform: translateX(-100%); box-shadow: 15px 0 40px rgba(0,0,0,.25); }
    body.t5-menu-open .t5-sidebar{ transform: translateX(0); }
}

@media (max-width: 760px){
    .page-header{ align-items: flex-start; }
    .page-header h1{ font-size: 19px; }
    .stat-grid{ grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .quick-actions{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px){
    .stat-grid{ grid-template-columns: 1fr; }
    .quick-actions{ grid-template-columns: 1fr; }
}

/* =====================================================================
   FUNDO DO CONTEÚDO — o application.css original usa uma foto de paisagem
   (layoutBackground.jpg) atrás de .container-live; nas telas onde o
   cabeçalho da página não tem fundo próprio (page-header), a foto aparecia
   por trás do título. Trocamos por uma cor sólida, consistente com o
   Design System.
   ===================================================================== */
body .container-main .container-live{
    background: var(--t5-bg) !important;
}