/* ============================================================================
   PIMS ENTERPRISE UI V1
   Camada visual final, segura e incremental.
   Objetivo: padronizar bordas, fontes, botoes, campos, cards e superficies
   sem alterar regras, dados, relatorios, dimensoes estruturais ou JS.
   Referencia: Corporate Enterprise SaaS / neo-minimalista.
   ============================================================================ */

:root{
  --ent-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --ent-green-950:#07362a;
  --ent-green-900:#0a4836;
  --ent-green-800:#115f46;
  --ent-green-700:#177a50;
  --ent-green-600:#238a5b;
  --ent-green-100:#dcece4;
  --ent-green-50:#f3f8f5;
  --ent-ink:#17231e;
  --ent-text:#283831;
  --ent-muted:#697970;
  --ent-line:#dce4e0;
  --ent-line-strong:#cdd8d2;
  --ent-surface:#ffffff;
  --ent-soft:#f7f9f8;
  --ent-canvas:#f2f5f3;
  --ent-radius-xs:6px;
  --ent-radius-sm:8px;
  --ent-radius-md:10px;
  --ent-radius-lg:12px;
  --ent-shadow-xs:0 1px 2px rgba(13,45,34,.04);
  --ent-shadow-sm:0 4px 12px rgba(13,45,34,.055);
  --ent-shadow-md:0 10px 28px rgba(13,45,34,.085);
  --ent-focus:0 0 0 3px rgba(23,122,80,.12);
}

html,body,#appView,.app,.main,#menuHost,.menu-fragment,
button,input,select,textarea,table{
  font-family:var(--ent-font)!important;
}

body{
  color:var(--ent-text)!important;
  background:var(--ent-canvas)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Shell / topo: linguagem corporativa consistente sem mexer no fluxo.
   -------------------------------------------------------------------------- */
#appView .topbar{
  min-height:92px!important;
  padding:18px 20px!important;
  align-items:center!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:var(--ent-radius-lg)!important;
  background:
    radial-gradient(ellipse at 78% 115%,rgba(65,169,113,.18) 0 1px,transparent 1px 15px),
    radial-gradient(circle at 92% 18%,rgba(255,255,255,.07),transparent 32%),
    linear-gradient(118deg,#07382b 0%,#0a4938 48%,#0a3d31 100%)!important;
  box-shadow:0 7px 22px rgba(4,49,35,.12)!important;
}
#appView .topbar-title-text::before{
  display:block;
  margin:0 0 5px;
  color:#d5e9df;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
body[data-current-menu="consultas-gerais"] #appView .topbar-title-text::before{content:"CONSULTA OPERACIONAL"}
body[data-current-menu="gestao-os"] #appView .topbar-title-text::before{content:"GESTÃO OPERACIONAL"}
body[data-current-menu="falhas-acompanhadas"] #appView .topbar-title-text::before{content:"ACOMPANHAMENTO DE FALHAS"}
body[data-current-menu="determinar-frente"] #appView .topbar-title-text::before{content:"GESTÃO DE ALOCAÇÃO"}
body[data-current-menu="disponibilidade"] #appView .topbar-title-text::before{content:"GESTÃO DE DISPONIBILIDADE"}
body[data-current-menu="mapa-equipamentos"] #appView .topbar-title-text::before{content:"RASTREAMENTO OPERACIONAL"}
body[data-current-menu="painel-apontamentos"] #appView .topbar-title-text::before{content:"MONITORAMENTO OPERACIONAL"}
body[data-current-menu="materiais"] #appView .topbar-title-text::before{content:"GESTÃO DE MATERIAIS"}
body[data-current-menu="sistema"] #appView .topbar-title-text::before{content:"CENTRAL DE MONITORAMENTO"}
body[data-current-menu="definir-usuarios"] #appView .topbar-title-text::before{content:"CONTROLE DE ACESSO"}

#appView .topbar h1,
#appView .topbar h2{
  color:#fff!important;
  font-size:28px!important;
  line-height:1.06!important;
  font-weight:760!important;
  letter-spacing:-.025em!important;
}
#appView .topbar p{
  color:#d2e2da!important;
  opacity:.9!important;
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:500!important;
}
#appView .topbar .topbar-operational-meta-p251,
#appView .topbar .topbar-operational-meta-p251 span{
  color:#dceae3!important;
  font-weight:550!important;
}

/* --------------------------------------------------------------------------
   Botões: outline limpo + primário sólido. Mantém tamanhos específicos.
   -------------------------------------------------------------------------- */
#appView .btn,
#modalRoot .btn,
.menu-fragment button,
.modal-root button{
  font-family:var(--ent-font)!important;
}

#appView .btn,
#modalRoot .btn{
  border-radius:var(--ent-radius-sm)!important;
  border-color:var(--ent-line-strong)!important;
  font-size:12px!important;
  font-weight:650!important;
  letter-spacing:-.005em!important;
  box-shadow:var(--ent-shadow-xs)!important;
}
#appView .btn.ghost,
#modalRoot .btn.ghost{
  color:#33473e!important;
  background:#fff!important;
}
#appView .btn.ghost:hover,
#modalRoot .btn.ghost:hover{
  border-color:#aebfb6!important;
  background:#fbfcfb!important;
  box-shadow:var(--ent-shadow-sm)!important;
}
#appView .btn.primary,
#modalRoot .btn.primary{
  border-color:var(--ent-green-700)!important;
  color:#fff!important;
  background:linear-gradient(180deg,#238b5b,#177a50)!important;
  box-shadow:0 5px 12px rgba(23,122,80,.18)!important;
}
#appView .btn.primary:hover,
#modalRoot .btn.primary:hover{
  background:linear-gradient(180deg,#1f8256,#126f48)!important;
}

/* Botões do cabeçalho escuro seguem o padrão da referência. */
#appView .topbar .btn,
#appView .topbar .btn.ghost{
  border-color:rgba(214,235,225,.32)!important;
  color:#fff!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
}
#appView .topbar .btn:hover{
  border-color:rgba(255,255,255,.48)!important;
  background:rgba(255,255,255,.08)!important;
}
#appView .topbar .btn.primary{
  border-color:rgba(255,255,255,.12)!important;
  color:#fff!important;
  background:#1f8154!important;
  box-shadow:0 5px 12px rgba(0,0,0,.12)!important;
}

/* --------------------------------------------------------------------------
   Campos e multi-selects: borda fina, raio 8px, sem relevo excessivo.
   -------------------------------------------------------------------------- */
#menuHost .field > span:first-child,
#menuHost label > span:first-child,
#menuHost .ms-filter-label,
#modalRoot .field > span:first-child,
#modalRoot label > span:first-child{
  color:#60746a!important;
  font-size:9px!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
}

#menuHost input:not([type="checkbox"]):not([type="radio"]),
#menuHost select,
#menuHost textarea,
#menuHost .ms-filter-button,
#modalRoot input:not([type="checkbox"]):not([type="radio"]),
#modalRoot select,
#modalRoot textarea,
#modalRoot .ms-filter-button{
  border:1px solid var(--ent-line)!important;
  border-radius:var(--ent-radius-sm)!important;
  color:var(--ent-ink)!important;
  background:#fff!important;
  box-shadow:var(--ent-shadow-xs)!important;
}
#menuHost input:not([type="checkbox"]):not([type="radio"]):hover,
#menuHost select:hover,
#menuHost textarea:hover,
#menuHost .ms-filter-button:hover,
#modalRoot input:not([type="checkbox"]):not([type="radio"]):hover,
#modalRoot select:hover,
#modalRoot textarea:hover{
  border-color:#b9c8c0!important;
}
#menuHost input:not([type="checkbox"]):not([type="radio"]):focus,
#menuHost select:focus,
#menuHost textarea:focus,
#menuHost .ms-filter.open .ms-filter-button,
#menuHost .ms-filter-button:focus-visible,
#modalRoot input:not([type="checkbox"]):not([type="radio"]):focus,
#modalRoot select:focus,
#modalRoot textarea:focus{
  border-color:#69a88a!important;
  outline:0!important;
  box-shadow:var(--ent-focus)!important;
}
#menuHost .ms-filter-menu,
#modalRoot .ms-filter-menu{
  border:1px solid var(--ent-line)!important;
  border-radius:var(--ent-radius-md)!important;
  background:#fff!important;
  box-shadow:0 16px 36px rgba(10,50,37,.14)!important;
}

/* --------------------------------------------------------------------------
   Superfícies / cards / tabelas. Só aparência, sem trocar grids ou larguras.
   -------------------------------------------------------------------------- */
#menuHost :is(.table-shell,.gos-card,.fac-card,.mat-filter-panel,.mat-table-panel,.materiais-chart-card,.usuarios-table-card),
#modalRoot .modal{
  border-color:var(--ent-line)!important;
  border-radius:var(--ent-radius-lg)!important;
  background:#fff!important;
  box-shadow:var(--ent-shadow-sm)!important;
}

#menuHost .data-table:not(#tabelaDisponibilidade),
#menuHost .gos-table,
#menuHost .fac-table,
#menuHost .usuarios-table-card table{
  color:var(--ent-text)!important;
}
#menuHost .data-table:not(#tabelaDisponibilidade) thead th,
#menuHost .gos-table thead th,
#menuHost .fac-table thead th,
#menuHost .usuarios-table-card thead th{
  border-color:#e5ebe8!important;
  color:#53675e!important;
  background:#f7f9f8!important;
  font-size:10px!important;
  font-weight:750!important;
  letter-spacing:.035em!important;
}
#menuHost .data-table:not(#tabelaDisponibilidade) tbody td,
#menuHost .gos-table tbody td,
#menuHost .fac-table tbody td,
#menuHost .usuarios-table-card tbody td{
  border-color:#edf1ef!important;
}
#menuHost .data-table:not(#tabelaDisponibilidade) tbody tr:hover td,
#menuHost .gos-table tbody tr:hover td,
#menuHost .fac-table tbody tr:hover td{
  background:#fafcfb!important;
}

/* --------------------------------------------------------------------------
   ALOCAÇÃO: aproxima a referência aprovada. Mantém cores e lógica de status.
   -------------------------------------------------------------------------- */
body[data-current-menu="determinar-frente"] #menuHost .det-page{
  gap:12px!important;
}
body[data-current-menu="determinar-frente"] #menuHost .det-toolbar{
  border:1px solid var(--ent-line)!important;
  border-radius:var(--ent-radius-md)!important;
  background:#fff!important;
  box-shadow:var(--ent-shadow-xs)!important;
}
body[data-current-menu="determinar-frente"] #menuHost .det-status-legend{
  padding:0!important;
  gap:6px!important;
  background:transparent!important;
}
body[data-current-menu="determinar-frente"] #menuHost .det-status-filter{
  min-height:32px!important;
  padding:0 9px!important;
  border:1px solid var(--ent-line)!important;
  border-radius:7px!important;
  color:#34463e!important;
  background:#fff!important;
  box-shadow:none!important;
  font-size:10px!important;
  font-weight:650!important;
}
body[data-current-menu="determinar-frente"] #menuHost .det-status-filter:hover,
body[data-current-menu="determinar-frente"] #menuHost .det-status-filter[aria-pressed="true"]{
  border-color:#b8c8bf!important;
  background:#f9fbfa!important;
  box-shadow:0 2px 7px rgba(13,45,34,.06)!important;
}
body[data-current-menu="determinar-frente"] #menuHost .det-toolbar-actions .btn,
body[data-current-menu="determinar-frente"] #menuHost #btnInfluenciarSemaforo,
body[data-current-menu="determinar-frente"] #menuHost #btnDeterminarOficina,
body[data-current-menu="determinar-frente"] #menuHost #btnAlocacaoTv,
body[data-current-menu="determinar-frente"] #menuHost #btnAdicionarAlocar{
  height:38px!important;
  min-height:38px!important;
  border-radius:var(--ent-radius-sm)!important;
  font-size:11px!important;
  font-weight:650!important;
}
body[data-current-menu="determinar-frente"] #menuHost .det-filters{
  border:1px solid var(--ent-line)!important;
  border-radius:var(--ent-radius-md)!important;
  background:#fff!important;
  box-shadow:var(--ent-shadow-xs)!important;
}
body[data-current-menu="determinar-frente"] #menuHost .allocation-grid{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body[data-current-menu="determinar-frente"] #menuHost .process-block{
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--ent-line)!important;
  border-radius:var(--ent-radius-md)!important;
  background:#fff!important;
  box-shadow:var(--ent-shadow-sm)!important;
}
body[data-current-menu="determinar-frente"] #menuHost .process-head{
  min-height:46px!important;
  margin:0!important;
  padding:0 14px!important;
  border:0!important;
  background:linear-gradient(98deg,#0d5b40,#146f4c)!important;
}
body[data-current-menu="determinar-frente"] #menuHost .process-head h3,
body[data-current-menu="determinar-frente"] #menuHost .process-head :is(span,b,small){
  color:#fff!important;
}
body[data-current-menu="determinar-frente"] #menuHost .front-grid{
  padding:10px!important;
  gap:10px!important;
}
body[data-current-menu="determinar-frente"] #menuHost .front-card{
  border:1px solid #e3e9e6!important;
  border-radius:var(--ent-radius-sm)!important;
  background:#fff!important;
  box-shadow:none!important;
}
body[data-current-menu="determinar-frente"] #menuHost .front-card-title{
  border-radius:7px 7px 0 0!important;
  background:#f7f9f8!important;
  color:var(--ent-ink)!important;
}
body[data-current-menu="determinar-frente"] #menuHost .front-card-title h4,
body[data-current-menu="determinar-frente"] #menuHost .front-card-title small{
  color:#31453b!important;
}
body[data-current-menu="determinar-frente"] #menuHost .type-title{
  color:#33483e!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
}
body[data-current-menu="determinar-frente"] #menuHost .fleet-card{
  border-radius:6px!important;
  box-shadow:0 3px 8px rgba(0,0,0,.09)!important;
  font-size:11px!important;
  font-weight:750!important;
}
body[data-current-menu="determinar-frente"] #menuHost .fleet-card.green{background:#2f925a!important}
body[data-current-menu="determinar-frente"] #menuHost .fleet-card.red{background:#d9493f!important}
body[data-current-menu="determinar-frente"] #menuHost .fleet-card.orange{background:#cb7a11!important}
body[data-current-menu="determinar-frente"] #menuHost .fleet-card.yellow{background:#d8ad17!important;color:#fff!important}
body[data-current-menu="determinar-frente"] #menuHost .fleet-card.blue{background:#426bbd!important}
body[data-current-menu="determinar-frente"] #menuHost .fleet-card.purple{background:#7550c7!important}
body[data-current-menu="determinar-frente"] #menuHost .fleet-card.gray{background:#7c8582!important}
body[data-current-menu="determinar-frente"] #menuHost .fleet-card.teal{background:#2c91bd!important}

/* --------------------------------------------------------------------------
   CONSULTAS e DISPONIBILIDADE: filtros brancos e tabela preservada.
   -------------------------------------------------------------------------- */
body[data-current-menu="consultas-gerais"] #menuHost .consultas-filters,
body[data-current-menu="disponibilidade"] #menuHost .disp-filters{
  border:1px solid var(--ent-line)!important;
  border-radius:var(--ent-radius-md)!important;
  background:#fff!important;
  box-shadow:var(--ent-shadow-xs)!important;
}
body[data-current-menu="disponibilidade"] #menuHost .disp-table-shell{
  border-color:var(--ent-line)!important;
  border-radius:var(--ent-radius-md)!important;
  box-shadow:var(--ent-shadow-sm)!important;
}
body[data-current-menu="disponibilidade"] #menuHost #tabelaDisponibilidade th{
  background:#0b503b!important;
  border-color:#2f6d58!important;
  font-weight:750!important;
}

/* --------------------------------------------------------------------------
   Gestão de O.S., Falhas, Materiais, Status e Usuários: mesma gramática.
   Sem trocar suas estruturas próprias.
   -------------------------------------------------------------------------- */
#menuHost .gos-hero,
#menuHost .mat-command-hero-p26,
#menuHost .status-hero-v166,
#menuHost .fac-hero,
#menuHost .usuarios-hero{
  border-radius:var(--ent-radius-lg)!important;
  border:1px solid var(--ent-line)!important;
  box-shadow:var(--ent-shadow-sm)!important;
}
#menuHost .gos-filter-panel,
#menuHost .fac-filter-panel,
#menuHost .fac-dashboard-filter,
#menuHost .usuarios-toolbar,
#menuHost .mat-filter-panel{
  border-color:var(--ent-line)!important;
  border-radius:var(--ent-radius-lg)!important;
  background:#fff!important;
  box-shadow:var(--ent-shadow-xs)!important;
}
#menuHost :is(.gos-tabs,.fac-tabs,.mat-view-switcher,.status-tabs-v166){
  border-color:var(--ent-line)!important;
  border-radius:var(--ent-radius-md)!important;
  background:#f2f6f4!important;
  box-shadow:none!important;
}
#menuHost :is(.gos-tabs,.fac-tabs,.mat-view-switcher,.status-tabs-v166) button{
  border-radius:7px!important;
  font-weight:650!important;
}
#menuHost :is(.gos-tabs,.fac-tabs,.mat-view-switcher,.status-tabs-v166) button.active,
#menuHost :is(.gos-tabs,.fac-tabs,.mat-view-switcher,.status-tabs-v166) button[aria-selected="true"],
#menuHost .mat-view-tab.active{
  background:#fff!important;
  box-shadow:0 2px 8px rgba(13,45,34,.07)!important;
}
#menuHost .gos-refresh-button,
#menuHost .usuarios-primary,
#menuHost .usuarios-secondary,
#menuHost .usuarios-search button{
  border-radius:var(--ent-radius-sm)!important;
  font-family:var(--ent-font)!important;
  font-weight:650!important;
}
#menuHost .usuarios-primary,
#menuHost .usuarios-search button{
  background:#1d8154!important;
  color:#fff!important;
  border-color:#1d8154!important;
}

/* KPIs e chips: menos "pílula", mais dashboard corporativo. */
#menuHost :is(.gos-kpis,.fac-kpis,.materiais-kpis,.status-kpis-v166,.usuarios-stats) > *{
  border-color:var(--ent-line)!important;
  border-radius:var(--ent-radius-md)!important;
  box-shadow:var(--ent-shadow-xs)!important;
}
#menuHost :is(.badge,.status-pill,.mat-meta-chip,.mat-table-count,.gos-hero-meta span,.status-context-v166 span){
  font-family:var(--ent-font)!important;
  font-weight:650!important;
}

/* --------------------------------------------------------------------------
   Modais: contorno limpo, header corporativo, ações estáveis.
   -------------------------------------------------------------------------- */
#modalRoot .modal,
#menuHost :is(.fac-modal,.usuario-editor-card,.det-modal-premium,.det-order-types-modal,.alocar-hard-modal-v2){
  overflow:hidden!important;
  border:1px solid var(--ent-line)!important;
  border-radius:var(--ent-radius-lg)!important;
  box-shadow:0 24px 60px rgba(5,39,28,.20)!important;
}
#modalRoot .modal-header,
#menuHost :is(.fac-modal,.usuario-editor-card,.det-modal-premium,.det-order-types-modal) > header{
  border-bottom:1px solid #e5ebe8!important;
}
#modalRoot .modal-actions,
#menuHost :is(.fac-modal,.usuario-editor-card,.det-modal-premium,.det-order-types-modal) > footer{
  border-top:1px solid #e7ece9!important;
}

/* --------------------------------------------------------------------------
   Sidebar: preserva dimensões e comportamento, apenas acabamento.
   -------------------------------------------------------------------------- */
#sidebarPrincipal{
  font-family:var(--ent-font)!important;
  background:
    radial-gradient(circle at 0 0,rgba(39,142,91,.13),transparent 30%),
    linear-gradient(180deg,#062a21 0%,#08372b 58%,#062d24 100%)!important;
}
#sidebarPrincipal .brand strong{font-weight:750!important;letter-spacing:-.02em!important}
#sidebarPrincipal .brand span{color:#a8d8bf!important;font-weight:600!important}
#sidebarPrincipal .side-menu .menu-item{
  border-radius:8px!important;
  font-weight:600!important;
  letter-spacing:-.005em!important;
}
#sidebarPrincipal .side-menu .menu-item.active{
  border-color:rgba(197,232,214,.18)!important;
  background:rgba(255,255,255,.095)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important;
}
#sidebarPrincipal :is(.pims-status-box,.semaforo-sidebar-box,.sidebar-user){
  border-color:rgba(214,236,225,.14)!important;
  border-radius:10px!important;
  box-shadow:none!important;
}

/* --------------------------------------------------------------------------
   Login: mesma identidade, sem modificar validação ou estrutura.
   -------------------------------------------------------------------------- */
#loginView{
  font-family:var(--ent-font)!important;
  background:#eff4f1!important;
}
#loginView .login-card,
#loginView .login-panel,
#loginView form{
  border-radius:14px!important;
}
#loginView input,
#loginView select{
  border-radius:8px!important;
  border-color:var(--ent-line)!important;
  box-shadow:var(--ent-shadow-xs)!important;
}
#loginView button{
  border-radius:8px!important;
  font-family:var(--ent-font)!important;
  font-weight:650!important;
}

/* --------------------------------------------------------------------------
   Embeds: wrapper limpo. O conteúdo interno recebe CSS próprio.
   -------------------------------------------------------------------------- */
#menuHost :is(.pims-map-frame-shell,.painel-apontamentos-menu){
  border:1px solid var(--ent-line)!important;
  border-radius:var(--ent-radius-lg)!important;
  background:#fff!important;
  box-shadow:var(--ent-shadow-sm)!important;
  overflow:hidden!important;
}

/* Relatórios e regras de impressão existentes são preservados sem override nesta camada. */

/* Responsividade: somente reduz escala visual, sem reinventar grids. */
@media(max-width:900px){
  #appView .topbar{border-radius:10px!important}
  #appView .topbar h1,#appView .topbar h2{font-size:24px!important}
  #menuHost :is(.gos-card,.fac-card,.mat-filter-panel,.mat-table-panel,.usuarios-table-card){border-radius:10px!important}
}

@media(max-width:640px){
  #appView .topbar-title-text::before{font-size:8px!important}
  #appView .topbar h1,#appView .topbar h2{font-size:21px!important}
  body[data-current-menu="determinar-frente"] #menuHost .process-block{border-radius:8px!important}
}