/*
 * Identidade visual compartilhada do Portal de Operações.
 * Carregada pelo shell comum após style.css/theme.css e antes do CSS da tela.
 * Reaproveita os tokens existentes, não baixa fontes/libs e não usa blur.
 */

/* Tipografia e ritmo do conteúdo, mantendo a barra funcional existente. */
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.main {
  padding-inline: clamp(18px, 2.1vw, 40px);
}

.main > .topbar:not(.topo-usuario) {
  margin-top: 10px;
  margin-bottom: 12px;
  align-items: center;
  gap: 12px;
}

.main > .topbar + .neon-line {
  margin-bottom: 18px;
}

.main > .topbar:not(.topo-usuario) .topbar-title:has(> .voltar-link) {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}

.main > .topbar:not(.topo-usuario) .topbar-title:has(> .voltar-link) > .voltar-link {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  width: 28px;
  height: 30px;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 8px;
  color: var(--text3);
  font-size: 0;
  line-height: 1;
  text-decoration: none;
}

.main > .topbar:not(.topo-usuario) .topbar-title:has(> .voltar-link) > .voltar-link::before {
  content: "←";
  font-size: 20px;
  font-weight: 500;
}

.main > .topbar:not(.topo-usuario) .topbar-title:has(> .voltar-link) > .voltar-link:hover {
  color: var(--accent);
  background: var(--accent-light);
}

.main > .topbar:not(.topo-usuario) .topbar-title:has(> .voltar-link) > h1 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.main > .topbar:not(.topo-usuario) .topbar-title:has(> .voltar-link) > p {
  grid-column: 2;
  grid-row: 2;
  margin-top: 2px;
}

.topbar-title h1 {
  font-size: clamp(22px, 1.75vw, 27px);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.topbar-title p {
  max-width: 72ch;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
}

.topbar-actions {
  align-items: center;
  flex-wrap: wrap;
}

.card,
.panel,
.chart-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.card-title,
.modal-title {
  font-weight: 720;
  letter-spacing: -.015em;
}

.card-sub {
  line-height: 1.5;
}

/* Abas internas (perfil, remanejamento e escala) compartilham o mesmo
   alinhamento, mas preservam o comportamento e o indicador de cada tela. */
.profile-tabs,
.operacional-tabs {
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.profile-tab,
.operacional-tab {
  flex: 0 0 auto;
  transition: color 110ms ease-out, background-color 110ms ease-out,
    border-color 110ms ease-out;
}

.profile-tab.active,
.operacional-tab.active {
  background-color: var(--accent-light);
  border-radius: 10px 10px 0 0;
}

/* Somente cartões interativos elevam um pixel; cartões de conteúdo densos
   permanecem estáticos para evitar repintura de listas grandes. */
:where(.person-card, .cliente-aparelhos-card, .card-interativo) {
  transition: transform 120ms ease-out, border-color 120ms ease-out,
    background-color 120ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  :where(.person-card, .cliente-aparelhos-card, .card-interativo):hover {
    transform: translateY(-1px);
  }

  .person-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
  }

  .person-card.nivel-diretoria:hover,
  .person-card.nivel-gerente:hover,
  .person-card.nivel-coordenador:hover,
  .person-card.nivel-chefe:hover {
    box-shadow: 0 4px 14px var(--nivel-glow);
  }

  .cliente-aparelhos-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  }
}

/* Controles compartilhados entre as telas de cadastro, operação e consulta. */
.btn,
.btn-ghost,
.btn-primary,
.filter-select,
.multiselect-toggle,
.search-input,
.combo-input,
.field input,
.field select,
.field textarea {
  font-family: var(--font);
}

.btn {
  min-height: 38px;
  border-radius: var(--radius-sm);
  font-weight: 620;
}

.btn-primary {
  box-shadow: none;
}

.btn:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: .58;
}

:is(input, select, textarea, button, a[href], [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.search-bar {
  align-items: center;
  gap: 10px;
}

.search-input,
.filter-select,
.multiselect-toggle,
.combo-input,
.field input,
.field select,
.field textarea {
  border-color: var(--border);
  border-radius: var(--radius-sm);
}

.search-input:focus,
.combo-input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* Tabelas: contraste uniforme na linha base, sem zebra clara/escura forte.
   O hover é discreto e estados definidos por cada módulo continuam intactos. */
.table-wrap {
  min-width: 0;
  border-radius: inherit;
}

table {
  font-variant-numeric: tabular-nums;
}

thead th {
  font-weight: 700;
  letter-spacing: .055em;
}

tbody tr {
  background-color: var(--surface);
}

tbody tr:hover {
  background-color: var(--surface2);
}

tbody td {
  line-height: 1.45;
}

/* Menus, resultados de busca e modais seguem a mesma superfície do tema. */
.dropdown,
.sb-search-results,
.multiselect-panel,
.combo-lista {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.modal {
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

.modal-header {
  padding-block: 18px;
}

.modal-body {
  line-height: 1.55;
}

.modal-footer {
  padding-block: 5px;
}

/* Estado claro conserva superfícies legíveis sem alterar accent de campanha. */
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .modal,
html[data-theme="light"] .dropdown,
html[data-theme="light"] .sb-search-results,
html[data-theme="light"] .multiselect-panel,
html[data-theme="light"] .combo-lista {
  box-shadow: 0 1px 3px rgba(31, 35, 41, .08);
}

html[data-theme="light"] tbody tr {
  background-color: #fff;
}

html[data-theme="light"] tbody tr:hover {
  background-color: #f3f4f6;
}

/* Layout adaptável para barra de ações e páginas densas em telas menores. */
@media (max-width: 760px) {
  .main {
    padding-inline: 16px;
  }

  .main > .topbar:not(.topo-usuario) {
    margin-top: 8px;
    margin-bottom: 10px;
    align-items: flex-start;
  }

  .main > .topbar + .neon-line {
    margin-bottom: 14px;
  }

  .topbar-actions {
    width: 100%;
    gap: 8px;
  }

  .card {
    border-radius: var(--radius-sm);
  }

  .modal-header,
  .modal-body {
    padding-inline: 18px;
  }

  .modal-footer {
    padding-inline: 9px;
    padding-block: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.person-card, .cliente-aparelhos-card, .card-interativo),
  .profile-tab,
  .operacional-tab {
    transition-duration: .01ms !important;
  }
}

/* Visualização ampliada das planilhas e do estoque: mesma moldura dos
   detalhes de cliente, com a tabela original para preservar seus eventos. */
.expanded-sheet-overlay {
  z-index: 1250;
  padding: 16px;
}

.modal-expanded-sheet {
  display: flex;
  flex-direction: column;
  width: min(99vw, 1880px, calc(100vw - 16px));
  max-width: none;
  height: min(96vh, 1200px);
  max-height: calc(100vh - 16px);
  overflow: hidden;
}

.modal-expanded-sheet > .modal-header {
  flex: 0 0 auto;
}

.expanded-sheet-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font: 700 9px/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.expanded-sheet-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.modal-expanded-sheet > .expanded-sheet-slot {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 12px 18px 18px;
}

body.expanded-sheet-active {
  overflow: hidden;
}

.estoque-itens-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.estoque-itens-card .btn-danger-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
  font: 600 11px/1.2 var(--font);
  cursor: pointer;
  transition: background-color 110ms ease-out, border-color 110ms ease-out;
}

.estoque-itens-card .btn-danger-text:hover {
  background: var(--surface2);
  border-color: var(--accent);
}

#planilha-colab-expandida-slot > .cadastro-planilha-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 4px 2px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#modal-planilha-expandida .cadastro-planilha-cabecalho > div:first-child,
#modal-planilha-expandida #btn-recolher-cadastro-planilha,
#modal-planilha-expandida #btn-expandir-planilha-colab,
#modal-planilha-expandida #btn-importar-planilha-colab {
  display: none;
}

#visao-planilha-colab .cadastro-planilha-busca {
  display: none;
}

#modal-planilha-expandida .cadastro-planilha-cabecalho {
  align-items: center;
  gap: 0;
  margin: 0 0 6px;
}

#modal-planilha-expandida .cadastro-planilha-acoes {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  width: 100%;
}

#modal-planilha-expandida .cadastro-planilha-busca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

#modal-planilha-expandida .cadastro-planilha-busca .search-input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
}

#modal-planilha-expandida .cadastro-planilha-status:empty {
  display: none;
}

#modal-planilha-expandida .cadastro-planilha-paginacao {
  margin-top: 4px;
}

#modal-planilha-expandida #conteudo-planilha-colab {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#modal-planilha-expandida .cadastro-planilha-lista {
  flex: 1 1 auto;
  min-height: 0;
}

#modal-planilha-expandida .cadastro-planilha-tabela-wrap {
  height: 100%;
  max-height: none;
}

@media (max-width: 640px) {
  #modal-planilha-expandida .cadastro-planilha-acoes {
    grid-template-columns: minmax(0, 1fr);
  }

  #modal-planilha-expandida .cadastro-planilha-acoes > .btn-primary {
    justify-self: end;
  }
}

#estoque-expandido-slot > #estoque-abas {
  flex: 0 0 auto;
  margin-bottom: 10px;
}

#estoque-expandido-slot > .estoque-itens-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0 !important;
  padding: 10px 2px 2px !important;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

#modal-estoque-expandido .estoque-itens-card .card-header > div {
  display: none;
}

#modal-estoque-expandido .estoque-itens-card .estoque-itens-acoes {
  display: none;
}

/* Os formulários de item e movimentação abrem acima da planilha ampliada. */
body.expanded-sheet-active #modal-item-estoque,
body.expanded-sheet-active #modal-movimentacao {
  z-index: 1270;
}

/* O detalhe de uma célula é um segundo diálogo e deve ficar acima da planilha expandida. */
body.expanded-sheet-active #cadastro-planilha-valor-modal {
  z-index: 1300;
}

/* Diálogos disparados de dentro da escala ampliada precisam ficar no topo. */
body.expanded-sheet-active #operacional-escala-cliente-modal {
  z-index: 1320;
}

body.expanded-sheet-active #operacional-escala-valor-modal {
  z-index: 1330;
}

/* A edição de remanejamento pode ser aberta diretamente sobre a planilha ampliada. */
body.expanded-sheet-active #modal-remanejamento-planilha {
  z-index: 1360;
}

#modal-estoque-expandido .estoque-itens-card .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
}

#remanejamentos-expandido-slot,
#escalas-expandido-slot {
  gap: 10px;
}

#remanejamentos-expandido-slot #operacional-tabela-remanejamentos,
#escalas-expandido-slot #operacional-escala-tabela-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
}

#remanejamentos-expandido-slot .remanejamento-tabela-scroll,
#escalas-expandido-slot .operacional-escala-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

#escalas-expandido-slot .operacional-escala-cabecalho {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}

#escalas-expandido-slot .operacional-escala-titulo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

#escalas-expandido-slot .operacional-escala-titulo h2 {
  font-size: 18px;
}

#escalas-expandido-slot .operacional-escala-filtros-acoes {
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: 8px;
}

#escalas-expandido-slot .operacional-escala-filtros[hidden] {
  display: none !important;
}

#escalas-expandido-slot #operacional-escala-semana-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#escalas-expandido-slot .operacional-escala-semana-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#escalas-expandido-slot .operacional-escala-clientes {
  min-height: 100%;
}

#modal-remanejamentos-expandido #btn-expandir-remanejamentos {
  display: none;
}

.operacional-escala-cabecalho {
  align-items: center;
  margin-bottom: 10px;
}

.operacional-escala-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.operacional-escala-titulo h2 {
  white-space: nowrap;
}

.operacional-escala-filtros {
  grid-template-columns: minmax(0, 1fr);
}

.operacional-escala-filtros[hidden] {
  display: none !important;
}

.operacional-escala-posto-cabecalho-acoes {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.operacional-escala-posto-expandir {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 10px;
  white-space: nowrap;
}

#operacional-escala-posto-expandido {
  z-index: 1350;
}

#operacional-escala-posto-expandido-slot {
  overflow: hidden;
  padding: 12px 18px 18px;
}

#operacional-escala-posto-expandido-slot .operacional-escala-posto-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

#operacional-escala-posto-expandido-slot .operacional-escala-posto-card[open] > .operacional-escala-posto-conteudo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#operacional-escala-posto-expandido-slot .operacional-escala-posto-expandir {
  display: none;
}

#operacional-escala-posto-expandido-slot .operacional-escala-dias-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#remanejamentos-expandido-slot .operacional-panel-acoes,
#remanejamentos-expandido-slot .remanejamento-filtros,
#escalas-expandido-slot .operacional-escala-filtros {
  flex: 0 0 auto;
}

#operacional-expandido-slot .escala-lojas-tabela-card,
#operacional-expandido-slot .rh-tabela-card,
#operacional-expandido-slot .inss-tabela-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#operacional-expandido-slot .escala-lojas-tabela-scroll,
#operacional-expandido-slot .rh-tabela-scroll,
#operacional-expandido-slot .inss-tabela-scroll {
  flex: 1 1 auto;
  height: 100%;
  min-height: 180px;
  max-height: none;
}

#operacional-expandido-slot .operacional-escala-cabecalho,
#operacional-expandido-slot .operacional-rh-cabecalho,
#operacional-expandido-slot .rh-filtros,
#operacional-expandido-slot .inss-filtros,
#operacional-expandido-slot .escala-lojas-importacao,
#operacional-expandido-slot .escala-lojas-historico,
#operacional-expandido-slot .escala-lojas-resumo,
#operacional-expandido-slot .rh-resumo,
#operacional-expandido-slot .rh-import-area {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .expanded-sheet-overlay {
    padding: 8px;
  }

  .modal-expanded-sheet {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  .modal-expanded-sheet > .expanded-sheet-slot {
    padding: 8px;
  }

  .expanded-sheet-header-actions {
    flex-wrap: wrap;
  }

  .operacional-escala-posto-cabecalho-acoes {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #operacional-escala-posto-expandido-slot {
    padding: 8px;
  }

  .estoque-itens-acoes {
    flex-wrap: wrap;
  }
}