/* ── SHELL DO SISTEMA ───────────────────────────────────────────────────── */
:root {
  --sidebar-panel-w: 250px;
  --sidebar-compact-w: 64px;
  --topbar-h: 76px;
}

/* ── Transições suaves entre telas ──────────────────────────────────────── */
@keyframes vsFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vsPanelSlideIn {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.boot-screen,
.login-screen,
.app-shell,
.app-content.vs-enter {
  /* Sem fill-mode 'both': com ele, o transform do keyframe final (translateY(0))
     ficava aplicado para sempre após a animação, e QUALQUER transform (mesmo
     identidade) vira o elemento em containing block de descendentes
     position:fixed — quebrava o posicionamento do menu de contexto das listas
     (ele calculava a posição em coordenadas de viewport, mas era posicionado
     relativo a esta section). Sem fill-mode a animação termina e o transform
     volta a 'none', sem mudar nada visualmente (o valor final já era idêntico
     ao estado não-animado).

     Bug real (2026-07, "ticks" ao abrir a tela): antes o alvo era
     `.app-content > *` — o filho é RECRIADO em todo render() (cada tecla
     na busca, cada filtro), então a animação de entrada dava replay a cada
     re-render e a tela "pulava". Agora a classe .vs-enter é aplicada UMA
     vez pelo Router só na troca de tela (ver Router.js), no proprio
     #content (que persiste entre renders), então o render interno nao
     reinicia mais a animacao. */
  animation: vsFadeIn .28s ease;
}

@media (prefers-reduced-motion: reduce) {
  .boot-screen,
  .login-screen,
  .app-shell,
  .app-content > *,
  .sys-modal-panel {
    animation: none !important;
  }
}

.app-root {
  min-height: 100vh;
}

/* Trava o scroll de fundo enquanto o drawer mobile está aberto (ver
   App.js#toggleMobileNav) — sem isso o conteúdo por trás ainda rola por
   toque atrás do backdrop, especialmente perceptível no iOS Safari. */
body.vs-no-scroll {
  overflow: hidden;
}

.boot-screen,
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--ac) 18%, transparent), transparent 28%),
    var(--bg);
}

.boot-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border: 1px solid var(--bd);
  border-radius: 18px;
  background: var(--bgC);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.boot-card strong,
.boot-card span {
  display: block;
}

.boot-card span {
  margin-top: 2px;
  color: var(--txG);
  font-size: 12px;
}

.boot-mark,
.vs-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--ac), var(--acD));
  color: var(--tabC);
  font-weight: 900;
  letter-spacing: -.04em;
  flex: 0 0 auto;
}

/* Variante com logo da instalação (App.js#brandMark) — o miolo "VS" vira
   <img> quando há logoUrl configurado; sem o gradiente/texto do miolo
   padrão, só a imagem contida na mesma área. */
img.boot-mark,
img.vs-brand-mark {
  background: none;
  object-fit: contain;
  padding: 3px;
}

.login-panel {
  width: min(440px, 100%);
  padding: 30px;
  border: 1px solid var(--bd);
  border-radius: 24px;
  background: color-mix(in srgb, var(--bgC) 95%, transparent);
  box-shadow: 0 24px 80px rgba(0,0,0,.20);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
}

.login-brand span,
.login-brand strong {
  display: block;
}

.login-brand span {
  color: var(--txG);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.login-brand strong {
  font-size: 18px;
}

.login-copy {
  margin-bottom: 24px;
}

.login-copy p {
  color: var(--ac);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  margin-bottom: 8px;
}

.login-copy h1 {
  font-size: 30px;
  line-height: 1.05;
  margin-bottom: 8px;
}

.login-copy span {
  display: block;
  color: var(--txG);
  line-height: 1.55;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-form label {
  display: grid;
  gap: 7px;
  color: var(--txS);
  font-size: 12px;
  font-weight: 800;
}

.login-form input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--bdM);
  background: var(--bgI);
  color: var(--tx);
  padding: 13px 14px;
  font: inherit;
  outline: none;
}

.login-form input:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 14%, transparent);
}

.login-form button {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--ac);
  color: var(--tabC);
  font-weight: 900;
  cursor: pointer;
  margin-top: 4px;
}

.login-form button:disabled {
  opacity: .7;
  cursor: wait;
}

.login-message {
  min-height: 22px;
  color: #ef4444;
  font-size: 12px;
  font-weight: 800;
}

/* Rodada 5, S9 — "Esqueci minha senha" / "Voltar para o login" / "Ir
   para o login" (reset.html): estilizado como link, tanto <button>
   dentro de .login-form (precisa vencer ".login-form button", que é
   laranja/full-width) quanto <a> solto fora de qualquer form. */
.login-form button.login-link-btn,
.login-link-btn {
  width: auto;
  background: none;
  border: none;
  color: var(--ac);
  font-weight: 700;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 0;
  justify-self: start;
}

.login-hint {
  min-height: auto;
  color: var(--txS);
  font-size: 12px;
  font-weight: 400;
}

.app-shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background: var(--bg);
}

.vs-side-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--topbar-h);
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--bdS);
  flex: 0 0 auto;
}

.vs-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.vs-brand-text {
  min-width: 0;
}

.vs-brand-text strong,
.vs-brand-text small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vs-brand-text strong {
  font-size: 15px;
}

.vs-brand-text small {
  margin-top: 2px;
  color: var(--txG);
  font-size: 11px;
}

.mobile-menu-btn,
.theme-toggle,
.company-switcher,
.logout-btn {
  border: 1px solid var(--bdM);
  background: var(--bgI);
  color: var(--txS);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
}

.mobile-menu-btn {
  width: 38px;
  height: 38px;
  display: none;
  place-items: center;
  flex: 0 0 auto;
}

/* Escondido por padrão (fora do fluxo flex de .app-shell) — só existe
   visualmente no breakpoint mobile (ver @media max-width:920px), onde
   .mobile-nav-open o exibe. */
.mobile-nav-backdrop {
  display: none;
}

.company-switcher {
  height: 40px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  max-width: 200px;
}

.mobile-menu-btn:hover,
.theme-toggle:hover,
.company-switcher:hover,
.logout-btn:hover {
  border-color: var(--ac);
  color: var(--ac);
}

/* ── Sidebar única com acordeão (item 2.1, Rodada 2) ──────────────────────
   Substitui o par "rail flutuante (hover) + painel docado da seção ativa"
   por UM elemento só, sempre visível, com todas as seções listadas —
   qualquer uma pode estar expandida ao mesmo tempo (multi-expand). */
.vs-sidebar {
  --bgH: var(--vs-navy);
  --bd: color-mix(in srgb, white 14%, var(--vs-navy));
  --bdS: color-mix(in srgb, white 10%, var(--vs-navy));
  --bgI: color-mix(in srgb, white 9%, var(--vs-navy));
  --tx: #ffffff;
  --txS: rgba(255, 255, 255, .82);
  --txG: rgba(255, 255, 255, .55);
  --txT: rgba(255, 255, 255, .45);
  --ac: var(--vs-orange);

  position: sticky;
  top: 0;
  flex: 0 0 var(--sidebar-panel-w);
  width: var(--sidebar-panel-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bd);
  background: var(--bgH);
  z-index: 30;
  transition: width .18s ease, flex-basis .18s ease;
}

.vs-side-search {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bdS);
}

.vs-side-search-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--txT);
  font-size: 13px;
  pointer-events: none;
}

.vs-side-search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--bdS);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bgI) 68%, transparent);
  color: var(--tx);
  font-size: 12px;
}

.vs-side-search input::placeholder {
  color: var(--txT);
}

.vs-side-body {
  flex: 1;
  min-height: 0;
  padding: 10px 10px 14px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.vs-side-group {
  margin-bottom: 4px;
}

.vs-side-group-head {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--txS);
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}

.vs-side-group-head:hover {
  background: color-mix(in srgb, var(--bgI) 75%, transparent);
  color: var(--tx);
}

.vs-side-group.expanded > .vs-side-group-head {
  color: var(--tx);
}

.vs-side-group-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bgI) 68%, transparent);
  font-weight: 900;
  font-size: 12px;
}

/* B5.1 — cabeçalho de seção é o ÚNICO nível com ícone; peso/tamanho
   maiores que o item pra ficar óbvio que é o pai, mesmo em escala de
   cinza (deixou de ser tudo-maiúsculo — o peso 600 já basta pra
   distinguir de item, e tudo-maiúsculo em 13px ficava pesado demais). */
.vs-side-group-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
}

/* Item ativo (B5.1) — o cabeçalho da seção que contém o item ativo ganha
   só a cor accent no label, sem fundo, mesmo com a seção fechada (pista
   de "você está aqui dentro"). */
.vs-side-group.has-active-item > .vs-side-group-head .vs-side-group-label {
  color: var(--ac);
}

.vs-side-group-chevron {
  font-size: 11px;
  color: var(--txT);
  transition: transform .16s ease;
}

.vs-side-group.expanded .vs-side-group-chevron {
  transform: rotate(180deg);
}

/* Técnica grid-template-rows 0fr→1fr: anima a altura sem precisar
   calcular pixels via JS — o wrapper interno com overflow:hidden garante
   que o conteúdo não vaze durante a transição. */
.vs-side-group-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .18s ease;
  /* Sem isso, só o wrapper interno (-items-inner) cortava o conteúdo — em
     alguns navegadores o item "ativo" do grupo que está fechando (com sua
     barra de destaque ::before) ficava visível por baixo do grupo que abriu,
     durante/depois da transição de altura. Achado real (T-0.5). */
  overflow: hidden;
}

.vs-side-group.expanded .vs-side-group-items {
  grid-template-rows: 1fr;
}

/* B5.1 — indentação alinhada com o ícone da seção (28px + 8px de gap do
   cabeçalho ≈ 34px) e linha-guia vertical fina amarrando os itens ao pai;
   a barra accent do item ativo (.vs-nav-item.active::before) fica
   sobreposta a essa mesma linha. */
.vs-side-group-items-inner {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 2px;
  padding: 4px 0 6px 34px;
}

.vs-side-group-items-inner::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 0;
  bottom: 8px;
  width: 1px;
  background: var(--bdS);
}

.vs-side--compact .vs-side-group-items-inner::before {
  display: none;
}

/* Divisor com rótulo dentro de uma seção (B5, Rodada 3; alinhamento e
   tamanho ajustados no B5.1) — separa subgrupos ("Ferramentas",
   "Planejamento") sem criar seção nova: linha fina + label pequeno em
   caixa alta, alinhado à indentação dos itens (o container já tem
   padding-left:34px), mais espaço acima do que abaixo. */
.vs-side-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px 0;
  padding-top: 8px;
  border-top: 1px solid var(--bdS);
}

.vs-side-divider span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--txT);
  white-space: nowrap;
}

.vs-side--compact .vs-side-divider span {
  display: none;
}

/* B5.1 — item (filho) sem ícone por padrão: só a seção-pai tem ícone.
   Fonte mais leve (400) e cor um passo mais suave que o cabeçalho —
   distinção pai/filho legível mesmo em escala de cinza. Hover confinado
   à área indentada "de graça": o item já vive dentro do container com
   padding-left:34px, então seu próprio box (width:100%) nunca alcança a
   borda esquerda da sidebar. */
.vs-nav-item {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--txS);
  cursor: pointer;
  text-align: left;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.vs-nav-item:hover {
  background: color-mix(in srgb, var(--bgI) 75%, transparent);
  border-color: var(--bdS);
  color: var(--tx);
}

/* Barra accent de 2px sobreposta à linha-guia (B5.1) — some no link
   direto de seção (Início/Frota/Relatórios), que não tem linha-guia por
   não estar dentro de um .vs-side-group-items-inner. */
.vs-nav-item.active {
  background: color-mix(in srgb, var(--ac) 14%, transparent);
  border-color: color-mix(in srgb, var(--ac) 40%, transparent);
  color: var(--ac);
}

.vs-side-group-items-inner .vs-nav-item.active::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 1px;
  background: var(--ac);
}

.vs-nav-item.disabled {
  cursor: not-allowed;
  opacity: .55;
}

/* Link direto de seção (Início/Frota/Relatórios) — o ícone aqui FAZ as
   vezes de cabeçalho de seção (é o único filho, não tem acordeão por
   baixo), então mantém a coluna de ícone que o item comum perdeu. */
.vs-side-direct-link {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--txS);
}

.vs-nav-icon {
  width: 28px;
  height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bgI) 68%, transparent);
  font-weight: 900;
  font-size: 11px;
}

/* Sem font-size/weight/color própria de propósito (B5.1) — herda do
   .vs-nav-item (item comum, 13px/400) ou .vs-side-direct-link (link de
   seção, mais forte), então um único lugar controla o peso visual. */
.vs-nav-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vs-nav-badge {
  padding: 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ac) 20%, transparent);
  color: var(--ac);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.vs-side-foot {
  flex: 0 0 auto;
  padding: 8px;
  border-top: 1px solid var(--bdS);
}

.vs-side-compact-toggle {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--bdS);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bgI) 68%, transparent);
  color: var(--txS);
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
}

.vs-side-compact-toggle:hover {
  border-color: var(--ac);
  color: var(--ac);
}

/* Favoritos fixados no topo (análise do menu, 2026-07-28) — atalho de 1
   clique pras telas mais usadas de cada perfil; itens entram/saem pela
   estrela que acompanha cada item do menu. A estrela vive FORA do botão
   com data-menu-id (irmã na .vs-side-item-row) porque o Router navega em
   fase de captura — dentro do botão, o clique na estrela navegaria. */
.vs-side-item-row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.vs-side-item-row > .vs-nav-item {
  flex: 1;
  min-width: 0;
}

.vs-side-favs {
  display: grid;
  gap: 2px;
  padding: 2px 4px 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--bdS);
}

.vs-side-favs-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--txT);
  padding: 2px 10px 4px;
}

/* Item fixado mantém a coluna de ícone (favorito é órfão de seção — sem
   ícone viraria texto solto, e no modo compacto sumiria por inteiro). */
.vs-side-fav-link {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  font-weight: 500;
}

/* Opacidade baixa mas nunca 0 — em touch não existe hover pra revelar. */
.vs-side-fav-star {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--txT);
  opacity: .25;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px;
  border-radius: 7px;
  transition: opacity .12s ease, color .12s ease;
}

.vs-side-item-row:hover .vs-side-fav-star,
.vs-side-fav-star:focus-visible {
  opacity: .85;
}

.vs-side-fav-star:hover {
  color: var(--ac);
  opacity: 1;
}

.vs-side-fav-star.is-fav {
  color: var(--ac);
  opacity: .9;
}

/* Modo compacto — ícones só, sem busca/rótulos (item 2.1). */
.vs-sidebar.vs-side--compact {
  flex-basis: var(--sidebar-compact-w, 64px);
  width: var(--sidebar-compact-w, 64px);
}

.vs-side--compact .vs-side-search,
.vs-side--compact .vs-side-group-label,
.vs-side--compact .vs-side-group-chevron,
.vs-side--compact .vs-nav-label,
.vs-side--compact .vs-nav-badge:not([data-badge-target]),
.vs-side--compact .vs-side-compact-toggle-label {
  display: none;
}

.vs-side--compact .vs-side-group-head,
.vs-side--compact .vs-nav-item {
  grid-template-columns: auto;
  justify-content: center;
}

.vs-side--compact .vs-side-group-items {
  grid-template-rows: 0fr !important;
}

.vs-side--compact .vs-side-compact-toggle {
  justify-content: center;
}

/* Compacto: favoritos viram trilho de ícones (bônus do ícone próprio) —
   estrela e rótulo "Fixados" somem, editar favoritos exige menu expandido. */
.vs-side--compact .vs-side-fav-star,
.vs-side--compact .vs-side-favs-label {
  display: none;
}

.vs-side--compact .vs-side-favs {
  justify-items: center;
}

.vs-side--compact .vs-side-item-row {
  justify-content: center;
}

.vs-side--compact .vs-side-fav-link {
  grid-template-columns: auto;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .vs-side-group-items,
  .vs-side-group-chevron,
  .vs-sidebar {
    transition: none;
  }
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--topbar-h);
  padding: 14px 24px;
  border-bottom: 1px solid var(--bd);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-menu-btn {
  display: none;
}

.topbar-title {
  min-width: 0;
  margin-right: auto;
}

.topbar-title span,
.topbar-title strong {
  display: block;
  /* Título de rota pode ficar longo (ex.: "ROT-001129 — ACCELO 815
     (DEMO) — 2026-07-15") — sem isso, uma tela estreita ou quebra a
     linha (empurra a topbar pra 2 linhas) ou estoura por baixo dos
     botões de ação. Trunca com "..." em vez das duas coisas. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-title span {
  color: var(--txG);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
}

.topbar-title strong {
  margin-top: 2px;
  color: var(--tx);
  font-size: 20px;
  line-height: 1.1;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Os botões de ação (troca de empresa, sino, tema, avatar, sair) nunca
     devem ser espremidos pra caber — é o título (que já trunca acima)
     quem cede espaço primeiro. */
  flex-shrink: 0;
}

.angular-preview-link {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 999px;
  color: var(--tx);
  display: inline-flex;
  font-size: 0.78rem;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  text-decoration: none;
  white-space: nowrap;
}

.angular-preview-link:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
}

.theme-toggle {
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.theme-toggle strong {
  font-size: 12px;
}

.user-chip {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--bdS);
  border-radius: 999px;
  background: var(--bgH);
}

.user-chip > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ac);
  color: var(--tabC);
  font-size: 11px;
  font-weight: 900;
}

.user-chip strong,
.user-chip small {
  display: block;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chip strong {
  font-size: 12px;
}

.user-chip small {
  color: var(--txG);
  font-size: 10px;
}

/* Sino de notificações (Etapa 9, Bloco 8) — ui/NotificationBell.js */
.notification-bell-wrap {
  position: relative;
}

.notification-bell {
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--bdM);
  background: var(--bgI);
  color: var(--txS);
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
}

.notification-bell:hover {
  border-color: var(--ac);
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--vs-danger, #e5484d);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bdM);
  background: var(--bgH);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 60;
  overflow: hidden;
}

.notification-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bdS);
}

.notification-panel-head strong {
  font-size: 13px;
}

.notification-panel-markall {
  border: none;
  background: none;
  color: var(--ac);
  font-size: 11px;
  cursor: pointer;
  font-weight: 700;
}

.notification-panel-list {
  overflow-y: auto;
}

.notification-panel-empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--txG);
  font-size: 12px;
}

/* B13 — link pra central de notificações em tela cheia, rodapé do painel do sino. */
.notification-panel-seeall {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-top: 1px solid var(--bdS);
  background: transparent;
  color: var(--ac);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.notification-panel-seeall:hover { background: var(--bgI); }

.notification-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--bdS);
  background: transparent;
  cursor: pointer;
}

.notification-item:hover {
  background: var(--bgI);
}

.notification-item.unread {
  background: color-mix(in srgb, var(--ac) 6%, transparent);
}

.notification-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.notification-item-when {
  font-size: 10px;
  color: var(--txG);
}

.notification-item strong {
  display: block;
  font-size: 12.5px;
}

.notification-item p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--txG);
}

.logout-btn {
  height: 40px;
  padding: 0 13px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.app-content {
  /* N4 — telas de lista/tabela e dashboards usam a largura toda liberada
     pelo menu compacto; o antigo max-width:1280px deixava espaço morto
     nos dois lados em telas grandes. Formulários/leitura que preferem
     largura de leitura usam .vs-page--narrow (ver abaixo), não este
     container global. */
  width: 100%;
  padding: 24px;
}

/* N4 — telas de formulário/leitura onde linha longa piora a legibilidade
   (Minha conta, Dados da empresa, Branding, Integração fiscal,
   Configurações) somam esta classe ao próprio <section class="vs-page">. */
.vs-page--narrow {
  max-width: 880px;
  margin: 0 auto;
}

/* Dashboard */
.dashboard-hero {
  padding: 4px 0 6px;
}

.dashboard-version {
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ac) 34%, transparent);
  background: color-mix(in srgb, var(--ac) 8%, transparent);
  color: var(--ac);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.dashboard-card {
  min-height: 190px;
  padding: 18px;
  border: 1px solid var(--bd);
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bgC) 96%, transparent), var(--bgH));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-card h3 {
  font-size: 17px;
}

.dashboard-card p {
  color: var(--txG);
  font-size: 12px;
  line-height: 1.55;
}

.dashboard-card button {
  margin-top: auto;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--ac) 40%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ac) 10%, transparent);
  color: var(--ac);
  padding: 9px 11px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 16px;
}

.timeline-list {
  display: grid;
  gap: 10px;
}

.timeline-list div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--bdS);
  border-radius: 12px;
  background: var(--bgI);
}

.timeline-list strong {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--ac);
  color: var(--tabC);
  font-size: 12px;
}

.timeline-list span {
  color: var(--txS);
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-metrics {
  display: grid;
  gap: 10px;
}

.dashboard-metrics div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--bdS);
  border-radius: 12px;
  background: var(--bgI);
}

.dashboard-metrics span {
  color: var(--txG);
  font-size: 12px;
}

.dashboard-metrics strong {
  color: var(--tx);
  font-family: monospace;
  font-size: 13px;
  text-align: right;
}

@media (max-width: 1180px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .app-shell {
    flex-direction: column;
  }

  /* Mobile: a sidebar única vira um drawer sobreposto (position:fixed,
     fora do fluxo) em vez de empurrar layout — aberto pelo hambúrguer da
     topbar (.mobile-menu-btn), com o mesmo #mobileNavBackdrop escurecendo
     o conteúdo por trás. Modo compacto não faz sentido aqui (a sidebar já
     só existe quando aberta), então a largura ignora --sidebar-compact-w. */
  .vs-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: min(var(--sidebar-panel-w), calc(100vw - 40px));
    transform: translateX(-100%);
    box-shadow: 24px 0 70px rgba(0,0,0,.24);
    transition: transform .18s ease;
    z-index: 44;
  }

  .app-shell.mobile-nav-open .vs-sidebar {
    transform: translateX(0);
  }

  .mobile-menu-btn {
    display: grid;
  }

  /* Bug corrigido: modo compacto (item 2.1) não é sobrescrito aqui pelo
     resto da regra @media — `.vs-sidebar.vs-side--compact` (2 classes)
     tem especificidade MAIOR que `.vs-sidebar` sozinho dentro deste
     bloco (1 classe), então o `width:64px` do compacto ganhava do
     `width:min(...)` do drawer mobile, não importa a ordem no arquivo.
     Resultado real: usuário que tinha ligado "recolher menu" (em
     qualquer sessão anterior, o estado é persistido) via pro celular e
     o drawer abria como uma tira de 64px só com ícone, sem rótulo —
     inútil num overlay de toque. Compacto não faz sentido dentro de um
     drawer que já some quando fechado, então força largura cheia e
     esconde o próprio botão de alternar. */
  .vs-sidebar.vs-side--compact {
    width: min(var(--sidebar-panel-w), calc(100vw - 40px));
  }

  .vs-side-compact-toggle {
    display: none;
  }

  /* Fundo escurecido atrás do drawer — deixa claro que é uma camada modal
     (toca fora pra fechar) e evita que o conteúdo por trás pareça
     clicável/legível por engano enquanto o menu está aberto. */
  .mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 43;
  }

  .app-shell.mobile-nav-open .mobile-nav-backdrop {
    display: block;
  }

  .app-topbar {
    padding: 12px 16px;
  }

  .app-content {
    padding: 18px 16px 28px;
  }

  /* Bug corrigido: .logout-btn inteiro ficava display:none no mobile —
     não sobrava NENHUMA forma de sair do sistema pelo celular. Agora
     recebe o mesmo tratamento do theme-toggle (ícone fica, rótulo some). */
  .user-chip div,
  .logout-btn strong,
  .theme-toggle strong {
    display: none;
  }

  .logout-btn {
    padding: 0;
    width: 40px;
    justify-content: center;
  }

  /* Achado mobile 2026-07 — .theme-toggle e .user-chip só perdiam o
     rótulo (texto) no mobile, mas mantinham o padding pensado pra
     texto+ícone (24px e 15px de padding horizontal, respectivamente),
     puxando o mesmo tanto de largura que o .logout-btn já resolvido
     acima. Título ("Dashboard") e seletor de empresa (abaixo) são quem
     mais precisa desse espaço de volta — aperta os dois pro tamanho
     mínimo de ícone, mesmo tratamento do logout. */
  .theme-toggle {
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  .user-chip {
    padding: 3px;
  }

  /* 200px de largura pro seletor de empresa (um <select> nativo, ver
     renderCompanySwitcher em App.js) é demais numa tela de celular —
     encolhe e trunca o nome da empresa selecionada com "...". */
  .company-switcher {
    max-width: 80px;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vs-topbar-search {
    display: none;
  }

  .dashboard-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .topbar-title strong {
    font-size: 17px;
  }
}

/* Celular pequeno (iPhone SE/mini, Android de entrada, ~360-390px de
   largura) — mesmo com os botões da topbar já reduzidos a ícone no
   breakpoint de 920px, a soma deles (hambúrguer + empresa + sino + tema
   + avatar + sair + gaps) ainda disputa espaço real com o título nessas
   larguras. Aperta mais um degrau em vez de deixar a topbar estourar. */
@media (max-width: 400px) {
  .app-topbar {
    padding: 10px 12px;
    gap: 6px;
  }

  .topbar-actions {
    gap: 4px;
  }

  .company-switcher {
    max-width: 40px;
    padding: 0 4px;
  }

  .topbar-title span {
    font-size: 10px;
  }

  .topbar-title strong {
    font-size: 15px;
  }
}

/* Complemento visual para transformar a calculadora em sistema interno/TMS. */
.system-wrap {
  max-width: 1180px;
}

.sys-page {
  padding-bottom: 50px;
}

.sys-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.sys-page-head h2 {
  font-size: 22px;
  line-height: 1.1;
  color: var(--tx);
  margin-bottom: 4px;
}

.sys-page-head p,
.sys-card-head p,
.sys-list-head span,
.muted {
  color: var(--txG);
  font-size: 12px;
}

.sys-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ac);
  margin-bottom: 5px;
}

.sys-secondary {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--bdM);
  background: var(--bgI);
  color: var(--txS);
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
}

.sys-secondary:hover,
.sys-actions button:hover {
  border-color: var(--ac);
  color: var(--ac);
}

.sys-link-btn {
  border: 0;
  background: transparent;
  color: var(--ac);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sys-link-btn:hover {
  color: var(--acD);
}

/* Badge de referência cruzada entre entidades (Cotação → Pedido → Transporte
   → CT-e / Roteiro → MDF-e e o caminho inverso) — menor e mais discreto que
   o link principal da linha, estilo Tiny ERP: um selo pequeno ao lado do
   registro, não compete visualmente com ele. */
.sys-link-btn-secondary {
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--bdM);
  border-radius: 999px;
  background: var(--bgI);
  color: var(--txS);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.sys-link-btn-secondary:hover {
  border-color: var(--ac);
  color: var(--ac);
  background: color-mix(in srgb, var(--ac) 10%, transparent);
}

.sys-status {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--bdM);
  background: var(--bgC);
  color: var(--txS);
}

.sys-status.ok {
  border-color: rgba(74,222,128,.35);
  background: rgba(74,222,128,.08);
  color: #4ade80;
}

.sys-status.warn {
  border-color: rgba(251,146,60,.35);
  background: rgba(251,146,60,.08);
  color: #fb923c;
}

.sys-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.sys-subtab {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--bdM);
  background: var(--bgC);
  color: var(--txG);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.sys-subtab.active {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--tabC);
}

.sys-grid-main {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(460px, 1.35fr);
  gap: 16px;
  align-items: start;
}

.sys-card {
  background: var(--bgC);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 16px;
  overflow: hidden;
}

.sys-card-head,
.sys-list-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.sys-card-head h3,
.sys-list-head h3 {
  font-size: 15px;
  color: var(--tx);
  margin-bottom: 4px;
}

.sys-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sys-field {
  display: block;
}

.sys-field-full {
  margin-top: 10px;
}

.sys-field span,
.sys-check-title,
.sys-form-subtitle {
  display: block;
  font-size: 10px;
  color: var(--txG);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px;
}

.sys-field input,
.sys-field select,
.sys-field textarea,
.sys-form textarea {
  width: 100%;
  background: var(--bgI);
  border: 1px solid var(--bdM);
  border-radius: 7px;
  color: var(--tx);
  padding: 8px 9px;
  font-size: 12px;
  outline: none;
}

.sys-field textarea,
.sys-form textarea {
  resize: vertical;
  min-height: 74px;
}

.sys-field input:focus,
.sys-field select:focus,
.sys-field textarea:focus,
.sys-form textarea:focus {
  border-color: var(--ac);
}

.sys-picker {
  position: relative;
}

.sys-picker-dropdown {
  position: fixed;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bgC);
  border: 1px solid var(--bd);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 60;
}

.sys-picker-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--txS);
  font-size: 12px;
  cursor: pointer;
}

.sys-picker-option:hover {
  background: var(--bgI);
  color: var(--ac);
}

.sys-picker-empty {
  padding: 10px;
  font-size: 12px;
  color: var(--txG);
}

.sys-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--bdS);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bgI) 60%, transparent);
}

.sys-check-title {
  flex: 0 0 100%;
  margin-bottom: 2px;
}

.sys-check-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--bdM);
  border-radius: 999px;
  color: var(--txS);
  font-size: 11px;
  cursor: pointer;
  background: var(--bgC);
}

.sys-check-group input {
  accent-color: var(--ac);
}

.sys-form-subtitle {
  margin-top: 14px;
}

.sys-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* Rodada 5, S8 — texto de apoio abaixo de um form (ex.: "trocar a senha
   derruba as outras sessões"), mesmo tom do vs-page-subtitle mas menor. */
.sys-field-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--vs-muted);
}

.sys-submit {
  width: auto;
  min-width: 170px;
  margin: 0;
}

.sys-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--bd);
  border-radius: 8px;
  min-height: 220px;
}

@media (max-width: 720px) {
  /* Em telas pequenas, altura mínima só desperdiça espaço de rolagem sem
     nenhum ganho visual — a lista de poucas linhas já ocupa a tela inteira. */
  .sys-table-wrap {
    min-height: 0;
  }
}

.sys-table {
  min-width: 760px;
}

.sys-table td:first-child,
.sys-table th:first-child {
  text-align: left;
}

.sys-table td {
  vertical-align: top;
}

.sys-table strong,
.sys-table small {
  display: block;
}

.sys-table strong {
  color: var(--tx);
  font-weight: 800;
  margin-bottom: 2px;
}

.sys-table small {
  color: var(--txG);
  font-size: 10px;
  line-height: 1.4;
  font-family: sans-serif;
}

.sys-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ac) 40%, transparent);
  color: var(--ac);
  background: color-mix(in srgb, var(--ac) 8%, transparent);
  font-size: 10px;
  margin: 2px;
  white-space: nowrap;
}

.sys-actions {
  min-width: 128px;
  white-space: nowrap;
}

.sys-actions button {
  padding: 6px 8px;
  margin: 0 0 4px 4px;
  border-radius: 7px;
  border: 1px solid var(--bdM);
  background: transparent;
  color: var(--txG);
  cursor: pointer;
  font-size: 11px;
}

.sys-empty {
  min-height: 150px;
  border: 1px dashed var(--bdM);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txG);
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

@media (max-width: 980px) {
  .sys-grid-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .sys-page-head,
  .sys-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sys-form-grid {
    grid-template-columns: 1fr;
  }

  .sys-submit,
  .sys-secondary {
    width: 100%;
  }
}

.boot-card-error .boot-mark {
  background: #ef4444;
  color: #fff;
}

.boot-card-error span {
  max-width: 360px;
}

/* ── HOTFIX 4: contraste, listas de cadastros e navegação sem subtabs ──── */
body.lite {
  --bg:   #edf2f7;
  --bgH: #f6f9fc;
  --bgC: #ffffff;
  --bgI: #edf2f7;
  --bd:   #cfd8e4;
  --bdM: #b9c6d6;
  --bdS: #dde6ef;
  --tx:   #0f1b2d;
  --txM: #1f2f45;
  --txS: #334863;
  --txF: #4a607b;
  --txG: #637890;
  --txT: #7c8ea2;
  --ac:   #d26122;
  --acD: #a74815;
}

body.lite .app-topbar {
  background: color-mix(in srgb, var(--bgH) 98%, white);
}

body.lite .sys-card,
body.lite .sec-body,
body.lite .login-panel,
body.lite .boot-card {
  box-shadow: 0 12px 30px rgba(29, 53, 87, .08);
}

.sys-page-head-actions {
  align-items: center;
}

.sys-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.sys-primary-action {
  width: auto;
  min-width: 170px;
  margin: 0;
  padding: 10px 14px;
}

.sys-list-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(170px, .32fr) auto minmax(110px, .18fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--bgH);
}

.sys-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--ac) 45%, var(--bd));
  border-radius: 10px;
  background: color-mix(in srgb, var(--ac) 10%, var(--bgH));
}

.sys-bulk-count {
  font-size: 12px;
  font-weight: 800;
  color: var(--ac);
  white-space: nowrap;
}

.sys-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.sys-bulk-danger {
  border-color: color-mix(in srgb, #f87171 55%, transparent);
  color: #f87171;
}

.sys-bulk-clear {
  border: none;
  background: transparent;
  color: var(--txG);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}

.sys-select-col {
  width: 32px;
  text-align: center;
}

.sys-search-field,
.sys-sort-field,
.sys-page-size-field {
  display: grid;
  gap: 5px;
}

.sys-search-field span,
.sys-sort-field span,
.sys-page-size-field span {
  color: var(--txG);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sys-search-field input,
.sys-sort-field select,
.sys-page-size-field select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--bdM);
  border-radius: 10px;
  background: var(--bgI);
  color: var(--tx);
  padding: 0 11px;
  font: inherit;
  font-size: 12px;
  outline: none;
}

.sys-search-field input:focus,
.sys-sort-field select:focus,
.sys-page-size-field select:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 12%, transparent);
}

.sys-order-btn {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--bdM);
  border-radius: 10px;
  background: var(--bgI);
  color: var(--txS);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.sys-order-btn:hover {
  border-color: var(--ac);
  color: var(--ac);
}

.sys-list-summary {
  min-height: 38px;
  display: grid;
  place-content: center;
  padding: 6px 12px;
  border: 1px solid var(--bdS);
  border-radius: 10px;
  background: var(--bgC);
  white-space: nowrap;
}

.sys-list-summary strong,
.sys-list-summary span {
  display: block;
  text-align: center;
}

.sys-list-summary strong {
  font-size: 14px;
  color: var(--tx);
}

.sys-list-summary span {
  font-size: 10px;
  color: var(--txG);
}

.sys-form-panel {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ac) 30%, var(--bd));
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 5%, var(--bgC)), var(--bgC));
}

.sys-list-card {
  border-radius: 16px;
}

.sys-list-head p {
  color: var(--txG);
  font-size: 12px;
  margin-top: 3px;
}

.sys-table-wrap {
  overflow-x: auto;
  border-color: var(--bd);
  border-radius: 12px;
  background: var(--bgI);
  /* Evita que listas com 1-2 linhas fiquem baixas demais pro menu de contexto
     ter espaço de sobra — mesmo com position:fixed, uma área maior deixa a
     abertura do menu mais previsível visualmente. */
  min-height: 180px;
}

.sys-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bgI);
}

.sys-table th,
.sys-table td,
.sys-table th:not(:first-child),
.sys-table td:not(:first-child) {
  text-align: left;
  font-family: inherit;
}

/* Modal para formulários */
.sys-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
  z-index: 100;
  padding: 0;
  overflow-y: auto;
  pointer-events: none;
  transition: background .2s ease;
}

.sys-modal-overlay.sys-modal-active {
  display: flex;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.sys-modal-panel-wide {
  width: min(95vw, 880px) !important;
}

.sys-inline-toggles {
  margin: 14px 0;
}

.sys-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.sys-toggle-btn {
  border: 1px solid var(--bdM);
  background: var(--bgI);
  color: var(--txS);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.sys-toggle-btn.active {
  border-color: var(--ac);
  color: var(--ac);
  background: color-mix(in srgb, var(--ac) 10%, var(--bgI));
}

.sys-checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--txM);
  cursor: pointer;
}

.sys-field-label {
  display: block;
  font-size: 10px;
  color: var(--txG);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.sys-modal-panel {
  width: min(90vw, 600px);
  height: 100vh;
  background: var(--bgH);
  border-left: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 0;
  max-height: 100vh;
  pointer-events: auto;
  flex-shrink: 0;
  /* Sem fill-mode 'both' pelo mesmo motivo do vsFadeIn acima: evita deixar um
     transform residual que vire containing block de position:fixed dentro do painel. */
  animation: vsPanelSlideIn .22s ease;
}

.sys-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}

.sys-modal-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
}

.sys-modal-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bdM);
  background: var(--bgI);
  color: var(--txS);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  flex-shrink: 0;
  transition: all .12s ease;
}

.sys-modal-close:hover {
  border-color: var(--ac);
  color: var(--ac);
}

.sys-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Ações de linha (menu de contexto) */
.sys-row-actions {
  position: relative;
  display: inline-block;
}

.sys-action-menu-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--txG);
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: all .12s ease;
}

.sys-row-actions:hover .sys-action-menu-btn {
  border-color: var(--bdM);
  background: var(--bgI);
  color: var(--txS);
}

.sys-row-actions:hover .sys-action-menu-btn:hover {
  border-color: var(--ac);
  color: var(--ac);
}

.sys-action-menu {
  /* position:fixed + top/left calculados em JS (Cadastros.js#positionContextMenu),
     pra não ficar cortado pelo overflow-x:auto do .sys-table-wrap quando a linha
     está perto da borda da área com scroll. `display:none` fechado (não só
     opacity/visibility) — achado do teste de usabilidade móvel do G0: sem
     top/left ainda calculados (antes do 1º clique), um position:fixed sem
     offset usa a posição estática (onde estaria dentro da linha da tabela,
     que pode passar da viewport) pra calcular o scrollWidth do documento,
     estourando a página horizontalmente em telas estreitas mesmo com o menu
     "invisível". Removido do fluxo por completo enquanto fechado evita isso. */
  display: none;
  position: fixed;
  min-width: 160px;
  background: var(--bgC);
  border: 1px solid var(--bd);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .12s ease, transform .12s ease;
  z-index: 250;
  overflow: hidden;
}

.sys-action-menu.open {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sys-action-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--txS);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all .08s ease;
  border-left: 3px solid transparent;
}

.sys-action-item:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ac) 10%, transparent);
  color: var(--tx);
  border-left-color: var(--ac);
}

.sys-action-item.sys-action-danger:hover:not(:disabled) {
  background: color-mix(in srgb, #ef4444 15%, transparent);
  color: #ef4444;
  border-left-color: #ef4444;
}

.sys-action-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sys-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  font-size: 12px;
  flex-shrink: 0;
}

.sys-context-cell {
  padding: 8px 4px !important;
  text-align: right;
}

.sys-table th {
  background: color-mix(in srgb, var(--bgC) 72%, var(--bgI));
  color: var(--txG);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--bd);
}

.sys-table td {
  color: var(--txM);
  border-bottom: 1px solid var(--bdS);
}

.sys-table tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bdS) 22%, transparent);
}

body.lite .sys-table tr:nth-child(even) td {
  background: #f4ede3;
}

.sys-table tr:hover td {
  background: color-mix(in srgb, var(--ac) 6%, var(--bgI));
}

.sys-table tr.sys-row-clickable {
  cursor: pointer;
}

.sys-table tr.sys-row-clickable:hover td {
  background: color-mix(in srgb, var(--ac) 9%, var(--bgI));
}

.sys-th-sort {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 0;
}

.sys-th-sort.active,
.sys-th-sort:hover {
  color: var(--ac);
}

.sys-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  border: 1px solid var(--bdM);
}

.sys-status-pill.ok {
  color: #16a34a;
  background: rgba(22,163,74,.09);
  border-color: rgba(22,163,74,.28);
}

.sys-status-pill.off {
  color: var(--txG);
  background: var(--bgC);
}

.sys-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid var(--bdM);
  color: var(--txS);
}

.sys-type-entrega { color: #16a34a; background: rgba(22,163,74,.09); border-color: rgba(22,163,74,.28); }
.sys-type-coleta { color: #2563eb; background: rgba(37,99,235,.09); border-color: rgba(37,99,235,.28); }
.sys-type-transferencia { color: #d97706; background: rgba(217,119,6,.09); border-color: rgba(217,119,6,.28); }
.sys-type-devolucao { color: #dc2626; background: rgba(220,38,38,.09); border-color: rgba(220,38,38,.28); }
.sys-type-movimentacao_interna { color: var(--txG); background: var(--bgC); }

.sys-type-seq {
  font-size: 10px;
  color: var(--txG);
  margin-left: 4px;
}

.sys-muted {
  color: var(--txG);
  font-size: 11px;
}

.sys-row-blocked {
  opacity: .55;
}

.sys-badge-ok, .sys-badge-blocked {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 1px solid var(--bdM);
}

.sys-badge-ok { color: #16a34a; background: rgba(22,163,74,.09); border-color: rgba(22,163,74,.28); }
.sys-badge-blocked { color: #dc2626; background: rgba(220,38,38,.09); border-color: rgba(220,38,38,.28); }

.sys-context-cell {
  width: 56px;
  text-align: right !important;
}

.sys-context-wrap {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}

.sys-context-btn {
  width: 34px;
  height: 32px;
  border: 1px solid var(--bdM);
  border-radius: 10px;
  background: var(--bgC);
  color: var(--txS);
  cursor: pointer;
  font-weight: 900;
}

.sys-context-btn:hover {
  border-color: var(--ac);
  color: var(--ac);
}

.sys-context-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 168px;
  display: none;
  padding: 6px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--bgC);
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
}

.sys-context-menu.open {
  display: grid;
  gap: 3px;
}

.sys-context-menu button {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--txS);
  padding: 8px 9px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}

.sys-context-menu button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ac) 10%, transparent);
  color: var(--ac);
}

.sys-context-menu button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.sys-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.sys-pagination button,
.sys-pagination span {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--bdM);
  background: var(--bgI);
  color: var(--txS);
  font-size: 12px;
  font-weight: 800;
}

.sys-pagination button {
  cursor: pointer;
}

.sys-pagination button:hover:not(:disabled),
.sys-pagination button.active {
  border-color: var(--ac);
  background: color-mix(in srgb, var(--ac) 12%, transparent);
  color: var(--ac);
}

.sys-pagination button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 980px) {
  .sys-list-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .sys-list-summary {
    grid-column: 1 / -1;
  }
}

/* Calendário do "Dia de operação" */
.dia-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 10px;
}

.dia-calendar-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--txG);
  padding: 4px 0;
}

.dia-calendar-cell {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: var(--bgI);
  color: var(--txS);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all .12s ease;
}

.dia-calendar-cell:hover {
  border-color: var(--ac);
  color: var(--ac);
}

.dia-calendar-cell-empty {
  border: none;
  background: transparent;
  cursor: default;
}

.dia-calendar-today {
  border-color: var(--ac);
}

.dia-calendar-selected {
  background: color-mix(in srgb, var(--ac) 16%, var(--bgI));
  border-color: var(--ac);
  color: var(--ac);
}

.dia-calendar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--txG);
}

.dia-calendar-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ac);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* B9 — marcador de excesso de capacidade (peso prometido > capacidade
   disponível de veículos ainda não escalados naquele dia). */
.dia-calendar-capacity-exceeded {
  font-weight: 800;
  border-width: 2px;
  background: color-mix(in srgb, #f87171 16%, var(--bgI));
  border-color: #f87171;
}

@media (max-width: 720px) {
  .sys-page-head-actions,
  .sys-head-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .sys-head-actions,
  .sys-head-actions button,
  .sys-primary-action {
    width: 100%;
  }
  .sys-list-toolbar {
    grid-template-columns: 1fr;
  }
  .sys-pagination {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ── Spec 13 — passo a passo do roteiro (wizard) ─────────────────────────
   Estados derivados do banco (ver Roteiros.js #wizardSteps): done/current/
   error/optional/pending. Horizontal no desktop, empilha no mobile. */
.sys-wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sys-wizard-step {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex: 1 1 200px;
  min-width: 180px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}
.sys-wizard-dot {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: #e2e6ec;
  color: #5a6472;
}
.sys-wizard-label { font-weight: 600; font-size: 13px; }
.sys-wizard-detail { font-size: 12px; color: var(--vs-muted, #6b7280); margin-top: 2px; }
.sys-wizard-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.sys-wizard-actions .vs-button { padding: 4px 10px; font-size: 12px; }
.sys-wizard-done .sys-wizard-dot { background: #d9f2e2; color: #157a3d; }
.sys-wizard-done { border-color: rgba(21, 122, 61, 0.25); }
.sys-wizard-current { border-color: var(--vs-orange, #ff6b1a); box-shadow: 0 0 0 1px var(--vs-orange, #ff6b1a) inset; background: rgba(255, 107, 26, 0.05); }
.sys-wizard-current .sys-wizard-dot { background: var(--vs-orange, #ff6b1a); color: #fff; }
.sys-wizard-error { border-color: var(--vs-danger, #c0392b); background: rgba(192, 57, 43, 0.06); }
.sys-wizard-error .sys-wizard-dot { background: var(--vs-danger, #c0392b); color: #fff; }
.sys-wizard-optional { opacity: 0.85; border-style: dashed; }
.sys-wizard-pending { opacity: 0.6; }
.sys-wizard-done-banner {
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #d9f2e2;
  color: #157a3d;
  font-weight: 600;
  font-size: 13px;
}
@media (max-width: 640px) {
  .sys-wizard-step { flex: 1 1 100%; }
}