/*
 * shared.css — Design tokens + cross-page components
 * Included by all HTML pages AFTER their own <style> block so these
 * rules can safely override page-local values when needed.
 */

/* ── TOOLBAR FIXO ────────────────────────────────────────────
   Garante que a barra de navegação fique visível durante scroll
   em todas as páginas, independentemente do container pai.
──────────────────────────────────────────────────────────── */
.toolbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
body {
  padding-top: 48px;
}

/* ── CANONICAL TOKENS ────────────────────────────────────────
   Pages define their own :root aliases (--cyan, --totvs-cyan, etc.)
   This block anchors the shared components to the real values.
──────────────────────────────────────────────────────────── */
:root {
  --sh-primary:   #00C8E6;
  --sh-primary-d: #009DB5;
  --sh-navy:      #0A1D2E;
  --sh-border:    #E2E8F0;
  --sh-muted:     #64748B;
  --sh-green:     #00A86B;
  --sh-yellow:    #F7B731;
  --sh-red:       #E8002D;
  --sh-surface:   #F8FAFC;
}

/* ── NAV ACTIVE STATE ────────────────────────────────────────
   Injected by auth.js on every page that has .toolbar-link elements
──────────────────────────────────────────────────────────── */
a.toolbar-link.nav-active,
button.toolbar-link.nav-active {
  color: #00C8E6 !important;
  border-color: rgba(0, 200, 230, 0.45) !important;
  background: rgba(0, 200, 230, 0.14) !important;
}

/* ── TOOLBAR SEPARATORS ──────────────────────────────────────
   .toolbar-sep-v: vertical divider between toolbar groups
──────────────────────────────────────────────────────────── */
.toolbar-sep-v {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* ── KPI GRID — RESPONSIVE ───────────────────────────────────
   dashboard.html uses repeat(6,1fr); semana.html uses repeat(4,1fr)
──────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 760px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── KPI GROUP LABELS ────────────────────────────────────────
   Wrappers injected by JS; labels above each group
──────────────────────────────────────────────────────────── */
.kpi-group {
  display: contents; /* participates in parent grid */
}
.kpi-group-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sh-muted, #64748B);
  margin-bottom: -4px;
  margin-top: 4px;
}
.kpi-group-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sh-border, #E2E8F0);
}

/* ── STICKY FORM FOOTER ──────────────────────────────────────
   Used in atualizar.html step-3 to keep the save button visible
──────────────────────────────────────────────────────────── */
.form-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid var(--sh-border, #E2E8F0);
  border-radius: 0 0 10px 10px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  margin: 0 -1px -1px; /* bleed to card edges */
}
.form-sticky-footer .unsaved-hint {
  font-size: 11px;
  color: var(--sh-yellow, #F7B731);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.form-sticky-footer .unsaved-hint::before {
  content: '●';
  animation: blink-dot 1.4s ease-in-out infinite;
}
@keyframes blink-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── DRAFT RESTORE BANNER ────────────────────────────────────
   Shown at top of step-3 card when localStorage draft is restored
──────────────────────────────────────────────────────────── */
.draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(247, 183, 49, 0.1);
  border: 1px solid rgba(247, 183, 49, 0.35);
  border-radius: 7px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 12px;
  color: #7A5800;
}
.draft-banner strong { font-weight: 700; }
.draft-banner button {
  background: none;
  border: 1px solid rgba(247, 183, 49, 0.5);
  border-radius: 5px;
  color: #7A5800;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.draft-banner button:hover { background: rgba(247, 183, 49, 0.15); }

/* ── STEPS — RETRONAVIGABLE ──────────────────────────────────
   .step.done is now cursor:pointer (back-navigation)
──────────────────────────────────────────────────────────── */
.step.done {
  cursor: pointer;
}
.step.done:hover .step-num {
  filter: brightness(0.85);
}

/* ── ADMIN — RESPONSIVE SPLIT PANEL ─────────────────────────
──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .page-body {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  .left-panel {
    width: 100% !important;
    height: 220px !important;
    border-right: none !important;
    border-bottom: 1px solid #E2E8F0;
  }
  .right-panel {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ── TABLE — RESPONSIVE COLUMN HIDING ───────────────────────
──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .col-hide-md { display: none !important; }
}
@media (max-width: 650px) {
  .col-hide-sm { display: none !important; }
}

/* ── FILTER BAR — RESPONSIVE ─────────────────────────────────
──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .filter-bar { padding: 10px 12px; }
  .filter-group { min-width: 110px; }
}

/* ── RAG BUTTONS — ACCESSIBLE STATE ─────────────────────────
   Visible ring for selected state beyond color alone
──────────────────────────────────────────────────────────── */
.rag-btn.sel-green  { outline: 2px solid #00A86B; outline-offset: 1px; }
.rag-btn.sel-yellow { outline: 2px solid #F7B731; outline-offset: 1px; }
.rag-btn.sel-red    { outline: 2px solid #E8002D; outline-offset: 1px; }

/* ── TOOLBAR DROPDOWN MENU ───────────────────────────────────
   Self-contained component — markup injected by each page or
   included via the nav-menu partial.
──────────────────────────────────────────────────────────── */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8); font-size: 11px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .15s; white-space: nowrap;
  user-select: none;
}
.nav-dropdown-btn:hover,
.nav-dropdown-btn.open {
  background: rgba(0,200,230,0.18); border-color: rgba(0,200,230,0.4); color: #00C8E6;
}
.nav-dropdown-btn .caret {
  font-size: 8px; transition: transform .15s; display: inline-block;
}
.nav-dropdown-btn.open .caret { transform: rotate(180deg); }

.nav-dropdown-panel {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #1A2B3A; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 6px; min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  z-index: 9999;
}
.nav-dropdown-panel.open { display: block; }

.nav-dd-section {
  font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,0.35); padding: 6px 10px 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}
.nav-dd-section:first-child { border-top: none; margin-top: 0; }

.nav-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 5px;
  color: rgba(255,255,255,0.78); font-size: 12px; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: background .1s;
  background: none; border: none; width: 100%; text-align: left; font-family: inherit;
}
.nav-dd-item:hover { background: rgba(0,200,230,0.14); color: #00C8E6; }
.nav-dd-item.active { color: #00C8E6; font-weight: 700; }
.nav-dd-item .dd-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }

/* ── COLLAPSIBLE NAV GROUPS ──────────────────────────────────── */
.nav-dd-group + .nav-dd-group {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
  padding-top: 4px;
}
.nav-dd-group-header {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 10px;
  background: none; border: none; border-radius: 5px;
  color: rgba(255,255,255,0.4); font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: color .1s, background .1s;
}
.nav-dd-group-header:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.05); }
.nav-dd-group-header .dd-icon { font-size: 11px; width: 14px; }
.nav-dd-group-header .caret {
  margin-left: auto; font-size: 9px;
  transition: transform .15s; display: inline-block;
}
.nav-dd-group-header.open { color: rgba(255,255,255,0.65); }
.nav-dd-group-header.open .caret { transform: rotate(90deg); }
.nav-dd-group-items { display: none; }
.nav-dd-group-items .nav-dd-item { padding-left: 28px; }

/* M14.6 — o item da página atual precisa saltar aos olhos, não só mudar
   de cor: com o menu agrupado, o usuário chega procurando "onde estou". */
.nav-dd-item.active {
  background: rgba(0,200,230,0.12);
  box-shadow: inset 2px 0 0 #00C8E6;
}

/* O bloco LEGADO se separa do resto: respiro maior, régua mais forte e
   rótulo apagado. Ele continua acessível — só deixa de competir com o
   que é atual. */
.nav-dd-group-legado {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.nav-dd-group-legado .nav-dd-group-header { color: rgba(255,255,255,0.3); }
.nav-dd-group-legado .nav-dd-item { color: rgba(255,255,255,0.6); }

/* close dropdown when clicking outside */

/* ── BACK NAV — migrado para dentro da toolbar (auth.js) ─────
   Botão ← Voltar agora é o primeiro filho de .toolbar
──────────────────────────────────────────────────────────── */

/* ── SCROLLBAR GLOBAL ────────────────────────────────────────
   Tom cinza escuro uniforme em todas as páginas.
──────────────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #3D4A58; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: #56677A; }
::-webkit-scrollbar-corner       { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: #3D4A58 transparent; }

/* ── DARK MODE ───────────────────────────────────────────────
   Ativado via [data-theme="dark"] no <html>.
   Sobrescreve as variáveis CSS de todas as páginas.
──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* tokens comuns a todas as páginas */
  --border:          #2A3A4E !important;
  --surface:         #1C2A3A !important;
  --surface-2:       #162030 !important;
  --bg:              #0F1923 !important;
  --text:            #DDE8F4 !important;
  --muted:           #7A9AB8 !important;
  --text-2:          #C8D8EA !important;
  --text-3:          #8FA8C0 !important;
  --muted-2:         #5A7A98 !important;
  --border-2:        #2A3A4E !important;
  --border-3:        #243040 !important;

  /* aliases dark-navy das páginas de dashboard */
  --totvs-navy:      #0A1828 !important;
  --totvs-dark:      #070E18 !important;
  --totvs-cyan-lt:   rgba(0,200,230,0.10) !important;

  /* aliases da página comercial e time-de-entrega */
  --navy:            #0A1828 !important;
  --dark:            #070E18 !important;
}

[data-theme="dark"] body {
  background: #0F1923 !important;
  color: #DDE8F4 !important;
}

/* Cards, tabelas e superfícies brancas */
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .filter-sidebar,
[data-theme="dark"] .table-card,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .page-content .results-bar,
[data-theme="dark"] .dt-card,
[data-theme="dark"] .dt-kpi-row,
[data-theme="dark"] .surface {
  background: #1C2A3A !important;
  border-color: #2A3A4E !important;
}
/* Fundo geral dos dashboards */
[data-theme="dark"] body { background: #0F1923 !important; }
[data-theme="dark"] .kpi-card { color: #DDE8F4 !important; }
[data-theme="dark"] .kpi-value { color: inherit !important; }
[data-theme="dark"] .results-info { color: #7A9AB8 !important; }
[data-theme="dark"] .results-info strong { color: #DDE8F4 !important; }
/* Selects e inputs dos filtros */
[data-theme="dark"] .filter-group select { color: #DDE8F4 !important; background: #162030 !important; }
[data-theme="dark"] .chk-label { color: #DDE8F4 !important; }
[data-theme="dark"] .sidebar-section-title { color: #7A9AB8 !important; }
/* Texto das células da tabela — nomes e clientes visíveis */
[data-theme="dark"] td { color: #DDE8F4 !important; }
[data-theme="dark"] td.td-nome,
[data-theme="dark"] td.td-cliente { color: #C8D8EA !important; }
[data-theme="dark"] td.td-code { color: #7A9AB8 !important; }
[data-theme="dark"] td.td-num { color: #DDE8F4 !important; }
/* Badges e pct colors */
[data-theme="dark"] .pct-ok  { color: #4ADE80 !important; }
[data-theme="dark"] .pct-warn { color: #FBBF24 !important; }
[data-theme="dark"] .pct-bad  { color: #F87171 !important; }
/* Botão dark mode — melhor visibilidade */
.dm-toggle {
  font-size: 16px !important;
  padding: 3px 7px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.1) !important;
}

[data-theme="dark"] .kpi-card { box-shadow: 0 1px 4px rgba(0,0,0,.4) !important; }

/* Tabelas */
[data-theme="dark"] table { color: #DDE8F4 !important; }
[data-theme="dark"] tbody tr { border-color: #2A3A4E !important; }
[data-theme="dark"] tbody tr:nth-child(even) { background: #192736 !important; }
[data-theme="dark"] tbody tr:hover { background: rgba(0,200,230,.08) !important; }
[data-theme="dark"] td, [data-theme="dark"] th { color: inherit !important; }

/* Inputs e selects */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #162030 !important;
  border-color: #2A3A4E !important;
  color: #DDE8F4 !important;
}

/* Sidebar filtros */
[data-theme="dark"] .filter-sidebar { background: #1C2A3A !important; }
[data-theme="dark"] .sidebar-section-title { color: #7A9AB8 !important; border-color: #2A3A4E !important; }
[data-theme="dark"] .chk-dropdown-btn,
[data-theme="dark"] .filter-group select,
[data-theme="dark"] .btn-clear { background: #162030 !important; border-color: #2A3A4E !important; color: #DDE8F4 !important; }

/* Paginação */
[data-theme="dark"] .page-btn,
[data-theme="dark"] .tbl-pager-nav { background: #162030 !important; border-color: #2A3A4E !important; color: #DDE8F4 !important; }

/* Backgrounds de página */
[data-theme="dark"] .main { background: transparent !important; }
[data-theme="dark"] .layout { background: #0F1923 !important; }
[data-theme="dark"] .kpi-bar { background: #0F1923 !important; }
[data-theme="dark"] .table-scroll { background: #1C2A3A !important; }

/* time-de-entrega sidebar */
[data-theme="dark"] .sidebar { background: #1C2A3A !important; border-color: #2A3A4E !important; }
[data-theme="dark"] .main-content { background: #0F1923 !important; }

/* Botão dark mode na toolbar */
.dm-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  line-height: 1;
  transition: all .15s;
  flex-shrink: 0;
}
.dm-toggle:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ── SIDEBAR TOGGLE ──────────────────────────────────────────
   Botão e animação para ocultar/mostrar sidebar lateral.
──────────────────────────────────────────────────────────── */
.sb-toggle-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 8px;
  line-height: 1;
  transition: all .15s;
  flex-shrink: 0;
}
.sb-toggle-btn:hover { background: rgba(0,200,230,0.15); color: #00C8E6; border-color: rgba(0,200,230,0.3); }

/* Animação colapso da sidebar (dashboards) */
.filter-sidebar,
.sidebar {
  transition: width 0.25s ease, min-width 0.25s ease,
              padding 0.25s ease, opacity 0.2s ease;
}
.filter-sidebar.sb-collapsed,
.sidebar.sb-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  opacity: 0;
  overflow: hidden;
  border: none !important;
}

/* M10 — colapso manual do shell RMO (M7.4).

   ESCOPADO acima de 1100px de propósito. Abaixo do breakpoint a
   .rmo-sidebar vira bloco acima do conteúdo e o M7.4 exige que ela
   continue visível; como `.rmo-sidebar.sb-collapsed` tem duas classes,
   ela venceria por especificidade a regra da media query e esconderia
   a sidebar justamente onde não se pode escondê-la. Limitar o alcance
   é o que mantém as duas regras convivendo. */
@media (min-width: 1101px) {
  .rmo-sidebar.sb-collapsed {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    opacity: 0;
    overflow: hidden;
    border: none !important;
  }
}

/* Responsivo: auto-colapsa abaixo de 1100px */
@media (max-width: 1100px) {
  .filter-sidebar:not(.sb-force-open),
  .sidebar:not(.sb-force-open) {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    opacity: 0;
    overflow: hidden;
    border: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   M7.4 — PADRONIZAÇÃO VISUAL DAS TELAS RMO

   Classes compartilhadas pelas quatro telas do RMO, para que elas
   sigam o mesmo desenho do Dashboard sem copiar 200 linhas de CSS em
   cada página. Prefixo `rmo-` para não afetar visualmente nenhuma
   outra tela do sistema por engano.

   O layout (page-layout / filter-sidebar / page-content), a toolbar e
   os tokens já vêm do dashboard e do topo deste arquivo — aqui só o
   que o RMO acrescenta.
   ═══════════════════════════════════════════════════════════ */

/* ── Shell da página ────────────────────────────────────────
   Estrutura copiada de time-de-entrega.html, que é o app shell real
   do GPP: toolbar fixa de 48px, layout ocupando o resto da viewport,
   sidebar com scroll próprio e conteúdo rolando sozinho.

   ERRO CORRIGIDO: a primeira versão do M7.4 usou `.page-layout` e
   `.page-content`, que existem apenas no <style> INLINE de
   dashboard.html — nunca estiveram no shared.css. As telas do RMO
   referenciavam classes sem CSS algum, e por isso tudo empilhava em
   largura total. Reusar o NOME de uma classe não reusa o estilo dela. */

/* A toolbar tem o visual definido inline em cada página; aqui ele fica
   escopado em `.rmo-tb`, para nenhuma outra tela ser afetada. */
.toolbar.rmo-tb {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px; height: 48px;
  background: var(--totvs-dark, #070E18);
  border-bottom: 2px solid var(--totvs-cyan, #00C8E6);
}
.toolbar.rmo-tb .toolbar-brand {
  font-size: 11px; font-weight: 700; color: var(--totvs-cyan, #00C8E6);
  letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
}
.toolbar.rmo-tb .modal-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  background: var(--totvs-cyan, #00C8E6); color: #0A1D2E;
  padding: 3px 10px; border-radius: 4px; white-space: nowrap;
}
.toolbar.rmo-tb .toolbar-spacer { flex: 1; }
/* o badge de usuário, o Voltar e o Menu vêm do auth.js e precisam
   ficar na MESMA linha, sem quebrar */
.toolbar.rmo-tb #user-badge { display: flex; align-items: center; gap: 4px; white-space: nowrap; }

.rmo-layout { display: flex; height: calc(100vh - 48px); overflow: hidden; }

.rmo-sidebar {
  width: 260px; min-width: 260px; flex-shrink: 0;
  background: #fff; border-right: 1px solid var(--border);
  overflow-y: auto; padding: 4px 0 14px;
}
.rmo-sidebar .sidebar-section { padding: 12px 14px; margin: 0; border-bottom: 1px solid var(--border); }
.rmo-sidebar .sidebar-section:last-of-type { border-bottom: none; }
.rmo-sidebar .form-select, .rmo-sidebar .form-input { width: 100%; }
.rmo-sidebar .rot, .rmo-sidebar .form-label { display: block; margin: 8px 0 3px; }

/* ── FILTROS NO TOPO ──────────────────────────────────────────
   Alternativa à `.rmo-sidebar` para telas cuja informação é LARGA: um
   heatmap com vinte colunas de período, uma tabela de cadastro com dez
   colunas. Ali a coluna lateral de 260px cobra caro por um espaço que
   o conteúdo precisa mais que o filtro, e o filtro é usado uma vez a
   cada dez leituras.

   Quebra em várias linhas conforme a largura, e as ações vão para a
   direita — em tela estreita elas caem para a linha de baixo em vez de
   espremer os campos. */
.rmo-filtros-topo {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin: 0 0 14px;
}
.rmo-filtros-topo .ft-campo {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 132px; flex: 0 1 auto;
}
.rmo-filtros-topo .ft-campo.ft-largo { min-width: 200px; flex: 1 1 200px; }
.rmo-filtros-topo .ft-campo.ft-data  { min-width: 148px; }
/* `.ft-campo[hidden]` precisa de mais especificidade que `.rmo-filtros-topo
   .ft-campo` (display:flex) — sem isto, a regra da classe vence a do
   atributo nativo `[hidden]` do navegador e o campo continua visível
   mesmo escondido via `campo.hidden = true` no JS (ex.: aba Pendentes,
   que deveria ficar sem filtro nenhum). */
.rmo-filtros-topo .ft-campo[hidden],
.rmo-filtros-topo .ft-acoes[hidden] { display: none; }
.rmo-filtros-topo label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.rmo-filtros-topo .form-select,
.rmo-filtros-topo .form-input { width: 100%; }
.rmo-filtros-topo .ft-acoes {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto; padding-left: 6px;
}
.rmo-filtros-topo .ft-status { font-size: 11px; color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) {
  .rmo-filtros-topo .ft-campo { flex: 1 1 100%; min-width: 0; }
  .rmo-filtros-topo .ft-acoes { margin-left: 0; width: 100%; }
}

/* Cabeçalho de período do heatmap: a data manda, o número da semana é
   reforço. Duas linhas cabem onde `2026-W36` já não cabia bem. */
.rmo-per-cab { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.rmo-per-cab .rmo-per-1 { font-weight: 800; }
.rmo-per-cab .rmo-per-2 { font-size: 9px; font-weight: 600; color: var(--muted); letter-spacing: .3px; }

/* o conteúdo rola sozinho: a tabela começa logo abaixo do cabeçalho,
   sem a página inteira precisar rolar (§8/§9) */
.rmo-conteudo { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 20px 24px; }
.rmo-main { max-width: 1480px; margin: 0 auto; }

.rmo-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 12px;
}
.rmo-page-header h1 {
  font-size: 19px; font-weight: 800; letter-spacing: -.2px;
  color: var(--text); margin: 0 0 3px;
}
.rmo-page-header .rmo-sub {
  font-size: 12px; color: var(--muted); margin: 0; max-width: 78ch; line-height: 1.5;
}
.rmo-page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── KPI cards — mesmo desenho do Dashboard ────────────────── */
.rmo-kpis {
  display: grid; gap: 8px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.rmo-kpi {
  background: #fff; border: 1px solid var(--border);
  border-left: 4px solid var(--totvs-cyan, #00C8E6);
  border-radius: 8px; padding: 11px 13px;
  transition: box-shadow .2s, transform .15s;
}
.rmo-kpi:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.rmo-kpi .rot {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
  display: block;
}
/* number-heavy: cabe R$ 12.456.789,99 sem quebrar o card */
.rmo-kpi .val {
  font-size: 17px; font-weight: 900; line-height: 1.15; color: var(--text);
  font-variant-numeric: tabular-nums; word-break: break-word;
}
.rmo-kpi .nota { font-size: 10px; color: var(--muted); margin-top: 4px; line-height: 1.35; }

/* semântica por BORDA e valor, nunca por fundo intenso (§9) */
.rmo-kpi.k-ok      { border-left-color: var(--sh-green,  #00A86B); }
.rmo-kpi.k-ok      .val { color: #067A4E; }
.rmo-kpi.k-info    { border-left-color: var(--totvs-cyan, #00C8E6); }
.rmo-kpi.k-info    .val { color: var(--totvs-cyan-dark, #009DB5); }
.rmo-kpi.k-navy    { border-left-color: #0A1D2E; }
.rmo-kpi.k-navy    .val { color: #0A1D2E; }
.rmo-kpi.k-alerta  { border-left-color: var(--sh-yellow, #F7B731); }
.rmo-kpi.k-alerta  .val { color: #B07C05; }
.rmo-kpi.k-laranja { border-left-color: #EA7C1B; }
.rmo-kpi.k-laranja .val { color: #C2620D; }
.rmo-kpi.k-perda   { border-left-color: var(--sh-red, #E8002D); }
.rmo-kpi.k-perda   .val { color: #C10026; }

/* ── Seções ────────────────────────────────────────────────── */
.rmo-secao { margin: 20px 0 0; }
.rmo-secao > h2 {
  font-size: 13px; font-weight: 800; letter-spacing: .02em;
  color: var(--text); margin: 0 0 3px;
}
.rmo-secao > .rmo-sub { font-size: 11.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }
.rmo-grupo-rot {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 12px 0 6px;
}

/* ── Superfície e tabela ───────────────────────────────────── */
.rmo-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 14px;
}
.rmo-tabela-wrap {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  overflow: auto; max-height: 62vh;
}
.rmo-tabela-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rmo-tabela-wrap thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--sh-surface, #F8FAFC);
  font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 9px 10px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.rmo-tabela-wrap tbody td {
  padding: 8px 10px; border-bottom: 1px solid var(--border-3, #EDF1F5);
  color: var(--text); vertical-align: middle;
}
.rmo-tabela-wrap tbody tr:hover { background: rgba(0,200,230,.04); }
.rmo-tabela-wrap td.num, .rmo-tabela-wrap th.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Badges de estado: cor E texto (§20/§26) ───────────────── */
.rmo-badge {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
}
.rmo-badge.b-ativo     { background: rgba(0,168,107,.12);  color: #067A4E; border-color: rgba(0,168,107,.35); }
.rmo-badge.b-pendente  { background: rgba(247,183,49,.14); color: #8A5F00; border-color: rgba(247,183,49,.45); }
.rmo-badge.b-inativo   { background: rgba(100,116,139,.12);color: #475569; border-color: rgba(100,116,139,.3); }
.rmo-badge.b-neutro    { background: rgba(0,200,230,.10);  color: #007D91; border-color: rgba(0,200,230,.3); }

/* ── Alerta de qualidade ───────────────────────────────────── */
.rmo-alerta {
  background: #FFF8EC; border: 1px solid rgba(247,183,49,.5);
  border-left: 4px solid var(--sh-yellow, #F7B731);
  border-radius: 8px; padding: 11px 14px; margin-bottom: 14px;
  font-size: 12px; color: #6B4E05; line-height: 1.55;
}
.rmo-alerta strong { color: #4A3600; }
.rmo-alerta ul { margin: 6px 0 0 18px; padding: 0; }
.rmo-alerta li + li { margin-top: 5px; }
.rmo-alerta a { color: #0A6E80; font-weight: 700; }

/* ── Sidebar de filtros: rodapé de ações ───────────────────── */
.rmo-filtro-acoes {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border);
}
.rmo-filtro-acoes .btn { width: 100%; justify-content: center; }

/* ── Responsivo ────────────────────────────────────────────── */
/* §11/§22 — só ABAIXO de 1100px o shell vira coluna. Em 1366px a
   sidebar continua lateral: cair no formato mobile em notebook é
   justamente a regressão que se quer evitar. E filtro nunca é
   escondido — quem não vê o filtro não sabe que o número está
   recortado. */
@media (max-width: 1100px) {
  .rmo-layout { flex-direction: column; height: auto; overflow: visible; }
  .rmo-sidebar {
    width: 100%; min-width: 0; border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-y: visible; padding: 4px 0 8px;
    opacity: 1; display: block;
  }
  .rmo-sidebar .sidebar-section { padding: 10px 16px; }
  .rmo-conteudo { overflow-y: visible; }
}
@media (max-width: 760px) {
  .rmo-conteudo { padding: 12px 12px 24px; }
  .rmo-kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .rmo-page-header { flex-direction: column; align-items: stretch; }
  .toolbar.rmo-tb { padding: 0 12px; gap: 6px; }
}

/* Títulos de seção administrativa — mesmo peso das demais seções RMO */
.rmo-secao-t {
  font-size: 13px; font-weight: 800; letter-spacing: .02em;
  color: var(--text); margin: 22px 0 4px;
}
.rmo-secao-t:first-of-type { margin-top: 10px; }

/* ── §19 — botões unificados nas telas RMO ──────────────────
   As quatro páginas definiam `.btn` com padding e cor de primário
   diferentes entre si: o mesmo botão aparecia navy numa tela e cyan
   na outra. Aqui fica a definição canônica, ESCOPADA em `.rmo-main`
   para não mexer no visual de nenhuma outra página do sistema. */
.rmo-main .btn {
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 8px 14px; border-radius: 6px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; line-height: 1.2; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.rmo-main .btn:hover:not(:disabled) { border-color: var(--totvs-cyan, #00C8E6); background: var(--sh-surface, #F8FAFC); }
.rmo-main .btn:focus-visible { outline: 2px solid var(--totvs-cyan, #00C8E6); outline-offset: 2px; }
.rmo-main .btn:disabled { opacity: .5; cursor: not-allowed; }
.rmo-main .btn-primary {
  background: var(--totvs-cyan, #00C8E6); border-color: var(--totvs-cyan, #00C8E6); color: #04222B;
}
.rmo-main .btn-primary:hover:not(:disabled) {
  background: var(--totvs-cyan-dark, #009DB5); border-color: var(--totvs-cyan-dark, #009DB5);
}
.rmo-main .btn-danger { background: #fff; border-color: var(--sh-red, #E8002D); color: var(--sh-red, #E8002D); }
.rmo-main .btn-danger:hover:not(:disabled) { background: rgba(232,0,45,.06); border-color: var(--sh-red, #E8002D); }
.rmo-main .btn-sm { font-size: 11px; padding: 5px 9px; }

/* ── §18 — modais RMO: overlay e card uniformes ──────────────
   Aplicado por `.rmo-modal` nas telas do RMO; modais de outras
   páginas seguem intocados. */
.rmo-modal { background: rgba(10,29,46,.55); }
.rmo-modal > .modal {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 48px rgba(10,29,46,.22);
  padding: 20px 22px; max-height: 88vh; overflow-y: auto;
}
.rmo-modal > .modal > h2 {
  font-size: 15px; font-weight: 800; margin: 0 0 4px; color: var(--text);
}
.rmo-modal > .modal > .hint { font-size: 11.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
.rmo-modal > .modal .acoes {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--border);
}
.rmo-modal .btn {
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 8px 14px; border-radius: 6px;
  border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer;
}
.rmo-modal .btn-primary { background: var(--totvs-cyan, #00C8E6); border-color: var(--totvs-cyan, #00C8E6); color: #04222B; }
.rmo-modal .btn-danger  { background: #fff; border-color: var(--sh-red, #E8002D); color: var(--sh-red, #E8002D); }
.rmo-modal .btn:focus-visible { outline: 2px solid var(--totvs-cyan, #00C8E6); outline-offset: 2px; }
@media (max-width: 760px) {
  .rmo-modal > .modal { padding: 16px; max-width: 94vw; max-height: 92vh; }
  .rmo-modal > .modal .acoes { justify-content: stretch; }
  .rmo-modal > .modal .acoes .btn { flex: 1; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════
   M14.7 — NAVEGAÇÃO LATERAL
   ═══════════════════════════════════════════════════════════════

   Substitui o dropdown do canto da barra. A largura vive numa variável
   porque três coisas dependem dela ao mesmo tempo — a própria barra, o
   recuo do corpo e o deslocamento da toolbar fixa —, e mantê-las em
   sincronia por número solto é como se perde alinhamento no primeiro
   ajuste. */
/* Duas larguras, uma verdade: a expandida e a do trilho. O recuo do
   corpo segue SEMPRE o trilho — a expansão sobrepõe o conteúdo em vez
   de empurrá-lo, senão a página inteira refluiria a cada passada de
   mouse. Só o modo FIXO recua o corpo de verdade. */
:root { --gpp-sb: 248px; --gpp-sb-trilho: 60px; }

.gpp-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1100;
  width: var(--gpp-sb-trilho);
  display: flex; flex-direction: column;
  background: #0A1D2E;
  border-right: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: width .16s ease, box-shadow .16s ease;
}
/* `:focus-within` não é enfeite: sem ele, navegar por teclado abriria
   itens numa barra de 60px que nunca expande. */
.gpp-sidebar:hover,
.gpp-sidebar:focus-within,
body.sidebar-fixa .gpp-sidebar {
  width: var(--gpp-sb);
  box-shadow: 6px 0 20px rgba(10,29,46,0.22);
}
body.sidebar-fixa .gpp-sidebar { box-shadow: none; }

body.com-sidebar { padding-left: var(--gpp-sb-trilho); }
/* A toolbar é `position: fixed; left: 0`: sem isto ela passaria POR
   BAIXO da barra lateral. */
body.com-sidebar .toolbar { left: var(--gpp-sb-trilho); }
body.sidebar-fixa.com-sidebar { padding-left: var(--gpp-sb); }
body.sidebar-fixa.com-sidebar .toolbar { left: var(--gpp-sb); }

.sb-topo {
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 10px 0 14px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sb-marca {
  display: flex; align-items: center; gap: 9px;
  color: #fff; text-decoration: none; font-weight: 800;
  font-size: 15px; letter-spacing: .5px; overflow: hidden; white-space: nowrap;
}
.sb-logo { color: #00C8E6; font-size: 17px; flex-shrink: 0; }
.sb-recolher {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.45); font-size: 15px; line-height: 1;
  padding: 4px 6px; border-radius: 5px; font-family: inherit;
  transition: color .12s, background .12s;
}
.sb-recolher:hover { color: #fff; background: rgba(255,255,255,0.08); }
.sb-recolher[aria-pressed="true"] { color: #00C8E6; }

.sb-corpo { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px 18px; }
.sb-corpo::-webkit-scrollbar { width: 6px; }
.sb-corpo::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }

/* ── TÓPICOS RECOLHÍVEIS ──────────────────────────────────────
   Vinte itens numa lista plana é uma parede. Por tópico, o menu mostra
   sete linhas e abre só o que interessa. */
.sb-topico {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 12px 10px 5px; background: none; border: none; cursor: pointer;
  font: 800 9px/1.2 inherit; letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255,255,255,0.34); white-space: nowrap; text-align: left;
  transition: color .12s;
}
.sb-topico:hover { color: rgba(255,255,255,0.72); }
.sb-topico:focus-visible { outline: 2px solid #00C8E6; outline-offset: -2px; border-radius: 4px; }
.sb-seta {
  margin-left: auto; font-size: 13px; line-height: 1;
  transition: transform .14s ease; transform: rotate(0deg);
}
.sb-topico[aria-expanded="true"] .sb-seta { transform: rotate(90deg); }
.sb-topico.sb-sub {
  padding: 9px 10px 4px 16px; font-size: 9px; font-weight: 700;
  letter-spacing: .8px; color: rgba(255,255,255,0.28);
}
.sb-topico.sb-sub:hover { color: rgba(255,255,255,0.6); }
.sb-topico.sb-legado { color: rgba(255,255,255,0.22); }

.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 1px; border-radius: 7px;
  color: rgba(255,255,255,0.78); font-size: 12.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s;
}
.sb-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.sb-item .sb-icone {
  flex-shrink: 0; width: 18px; text-align: center;
  font-size: 14px; opacity: .85;
}
/* Item de acesso diário, fora dos tópicos. O destaque é discreto de
   propósito: precisa se separar da lista sem competir com o realce da
   página ATUAL, que é o único que informa onde você está. */
.sb-item.sb-destaque {
  background: rgba(247,183,49,0.10);
  border-left-color: rgba(247,183,49,0.55);
  color: #fff;
}
.sb-item.sb-destaque .sb-icone { color: #F7B731; opacity: 1; }
.sb-item.sb-destaque:hover { background: rgba(247,183,49,0.18); }
/* Na página dele, o realce de "atual" vence — cor de estado não se
   soma a cor de categoria. */
.sb-item.sb-destaque.ativo {
  background: rgba(0,200,230,0.13);
  border-left-color: #00C8E6;
  color: #00C8E6;
}
.sb-item.sb-destaque.ativo .sb-icone { color: #00C8E6; }

/* A página atual precisa saltar aos olhos: cor sozinha não basta num
   menu com vinte itens. */
.sb-item.ativo {
  background: rgba(0,200,230,0.13);
  color: #00C8E6; font-weight: 700;
  border-left-color: #00C8E6;
}
.sb-item.ativo .sb-icone { opacity: 1; }

/* O bloco legado continua acessível — só deixa de competir com o que é
   atual. */
.sb-grupo-legado .sb-item { color: rgba(255,255,255,0.52); font-size: 12px; }
.sb-grupo-legado .sb-item:hover { color: rgba(255,255,255,0.85); }

/* ── TRILHO: só ícones ────────────────────────────────────────
   Enquanto o mouse não chega, sobram os ícones. Os rótulos somem, e o
   `title` de cada item (posto no HTML) é o que ainda diz o nome.

   O tópico FECHADO esconde seus itens também aqui: é o mesmo estado,
   visto estreito. Mostrar no trilho o que o tópico fechou seria o menu
   contradizendo a si mesmo. */
.gpp-sidebar:not(:hover):not(:focus-within) .sb-rotulo { display: none; }
body:not(.sidebar-fixa) .gpp-sidebar:not(:hover):not(:focus-within) .sb-item {
  justify-content: center; padding: 9px 4px; gap: 0;
}
body:not(.sidebar-fixa) .gpp-sidebar:not(:hover):not(:focus-within) .sb-topico {
  height: 1px; padding: 0; margin: 10px 8px; overflow: hidden;
  background: rgba(255,255,255,0.10); color: transparent;
}
body:not(.sidebar-fixa) .gpp-sidebar:not(:hover):not(:focus-within) .sb-seta { display: none; }
body:not(.sidebar-fixa) .gpp-sidebar:not(:hover):not(:focus-within) .sb-topo {
  padding: 0 6px; justify-content: center;
}
body:not(.sidebar-fixa) .gpp-sidebar:not(:hover):not(:focus-within) .sb-marca { gap: 0; }
body:not(.sidebar-fixa) .gpp-sidebar:not(:hover):not(:focus-within) .sb-recolher { display: none; }

@media print { body.com-sidebar { padding-left: 0; } body.com-sidebar .toolbar { left: 0; } }