/* =====================================================================
   RPL Ordens de Serviço — Design System
   Paleta "painel técnico": grafite + ciano operacional + sinalizadores
   de status (verde/âmbar/vermelho), como indicadores de um equipamento.

   Este arquivo é a fonte única de verdade para espaçamento, tipografia,
   raio de borda, sombra e altura de controles. Todo componente novo deve
   reutilizar essas variáveis em vez de valores soltos, para manter a
   aplicação inteira com a cara de um único produto.
   ===================================================================== */

:root {
  /* Cores */
  --graphite-900: #171b21;
  --graphite-800: #1f2530;
  --graphite-700: #2a3140;
  --graphite-600: #3a4356;
  --ink: #1a1d24;
  --ink-soft: #565f70;
  --paper: #f4f5f7;
  --paper-card: #ffffff;
  --line: #e3e6eb;

  --accent: #0f8b8d;
  --accent-dark: #0b6b6c;
  --accent-soft: #e3f4f3;

  --ok: #2f9e68;
  --ok-soft: #e5f6ec;
  --warn: #c9862a;
  --warn-soft: #fbf0dc;
  --danger: #d64545;
  --danger-soft: #fbe7e7;
  --neutral: #8a8f98;
  --neutral-soft: #eceef1;

  /* Espaçamento — escala única usada em toda a aplicação */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Raio, sombra e altura de controles — idênticos para todos os componentes do mesmo tipo */
  --radius: 14px;        /* cards */
  --radius-sm: 8px;       /* inputs, botões, badges */
  --shadow: 0 1px 2px rgba(23, 27, 33, 0.06), 0 4px 16px rgba(23, 27, 33, 0.06);
  --h-control: 40px;      /* botões, inputs, selects (tamanho padrão) */
  --h-control-sm: 32px;   /* variante pequena, usada em ações de tabela */

  /* Tipografia */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --text-xs: 11.5px;
  --text-sm: 13px;
  --text-base: 14.5px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 23px;

  --breakpoint-shell: 880px;  /* ponto único em que o menu vira drawer */
  --breakpoint-stack: 700px;  /* ponto único em que formulários/2 colunas empilham */
}

* { box-sizing: border-box; }

html {
  /* Reserva sempre o espaco da barra de rolagem vertical, mesmo em paginas
     curtas que nao precisam rolar. Sem isso, paginas com mais conteudo
     (ex: Analise Mensal, Perfil) ficam alguns pixels mais estreitas que
     paginas curtas assim que a barra aparece, desalinhando o layout. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Tipografia (hierarquia única) */

h1, h2, h3, h4 { margin: 0 0 var(--space-1); font-weight: 700; letter-spacing: -0.015em; font-family: var(--font-display); }
h1 { font-size: var(--text-xl); font-weight: 800; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); font-weight: 700; }

.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  margin-bottom: var(--space-1);
}

.page-header { margin-bottom: var(--space-5); }
.page-header .btn-row { margin-top: var(--space-3); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------- Layout / casca da aplicação */

.app-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--graphite-900);
  color: #cfd4dc;
  padding: var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-5);
  color: #fff;
}

.brand-logo {
  width: 26px; height: 26px; object-fit: contain;
  flex-shrink: 0;
}

.sidebar__brand strong { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: 0.005em; white-space: nowrap; line-height: 1.2; }
.sidebar__close { display: none; margin-left: auto; background: none; border: none; color: #9aa1ac; cursor: pointer; padding: var(--space-1); }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.navgroup-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #6b7280; opacity: 0.65;
  padding: var(--space-4) var(--space-3) var(--space-1);
  display: block;
}

/* .navlink e' compartilhado por <a> (itens do menu) e <button> (Sair), garantindo
   exatamente o mesmo alinhamento, altura e espaçamento entre todos os itens. */
.sidebar .navlink {
  display: flex; align-items: center; gap: 11px;
  min-height: var(--h-control);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: #b9c0cc;
  font-size: var(--text-base);
  font-weight: 500;
  font-family: var(--font-body);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.sidebar .navlink:hover { background: var(--graphite-800); color: #fff; text-decoration: none; }
.sidebar .navlink.active { background: var(--graphite-700); color: #fff; }
.sidebar .navlink .icon { flex-shrink: 0; opacity: 0.95; }
.sidebar .navlink:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Espaco extra abaixo de um item que tem subitem logo em seguida (ex:
   "Financeiro" antes de "Pendentes"), para o subitem nao ficar "colado"
   no item pai. Usa :has() (sem alterar HTML) para identificar esse caso. */
.sidebar nav > .navlink:has(+ .navlink--sub) { margin-bottom: 6px; }

/* Subitem de menu (atalho de um item principal, ex: "Pendentes" dentro de
   Financeiro). Estrutura em duas areas via Flexbox (nao posicionamento
   absoluto do texto): uma area fixa e exclusiva pro conector (linha em
   "L"), e o texto como item de flex separado logo em seguida — as duas
   nunca disputam o mesmo espaco, entao nunca ha sobreposicao, nao importa
   o tamanho da fonte ou a resolucao da tela.
   O conector em si (a linha) fica TODO contido dentro da largura fixa
   dessa area — nunca "vaza" pra cima do texto.
   O subitem NUNCA ganha bloco de fundo (nem hover nem ativo) — só muda a
   cor do texto e do conector. */
.navlink--sub {
  padding-left: var(--space-3);
  min-height: 34px;
  font-size: var(--text-base);
  color: #9aa3b5;
}
.navlink__conector {
  position: relative;
  width: 18px;
  height: 100%;
  flex-shrink: 0;
  pointer-events: none;
}
.navlink__conector::before {
  content: '';
  position: absolute;
  left: 9px;
  top: -9px;
  bottom: 50%;
  width: 7px;
  border-left: 1.5px solid #5a6479;
  border-bottom: 1.5px solid #5a6479;
  border-radius: 0 0 0 5px;
}
.navlink--sub .label { flex-shrink: 1; min-width: 0; }
.sidebar .navlink--sub:hover, .sidebar .navlink--sub.active { background: none; }
.navlink--sub:hover .navlink__conector::before, .navlink--sub.active .navlink__conector::before { border-color: var(--accent); }
.navlink--sub:hover, .navlink--sub.active { color: #fff; }

.sidebar__footer { border-top: 1px solid var(--graphite-700); padding-top: var(--space-3); margin-top: var(--space-3); flex-shrink: 0; }
.sidebar__logout-form { margin: 0; }

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; background: rgba(10,12,16,0.5); z-index: 25;
}

.hamburger, .no-desktop { display: none; }
.hamburger {
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  width: var(--h-control-sm); height: var(--h-control-sm);
  align-items: center; justify-content: center; color: var(--ink); cursor: pointer;
}

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

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  background: var(--paper-card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
  min-height: 64px;
}

.topbar__title { display: flex; flex-direction: column; }

.busca-global-btn {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0 var(--space-3); height: 36px; color: var(--ink-soft); font-size: var(--text-sm);
  cursor: pointer; font-family: var(--font-body);
}
.busca-global-btn:hover { border-color: var(--graphite-600); color: var(--ink); }
.busca-global-btn .icon { width: 16px; height: 16px; }
@media (max-width: 700px) { .busca-global-btn .no-mobile { display: none; } .busca-global-btn { padding: 0 10px; } }

.busca-global-overlay {
  position: fixed; inset: 0; background: rgba(20,22,30,0.45); z-index: 100;
  display: none; align-items: flex-start; justify-content: center; padding: 10vh 16px;
}
.busca-global-overlay.aberta { display: flex; }
.busca-global-painel {
  background: var(--paper-card); border-radius: var(--radius); width: 100%; max-width: 620px;
  box-shadow: 0 20px 60px rgba(20,22,30,0.35); overflow: hidden; max-height: 70vh; display: flex; flex-direction: column;
}
.busca-global-campo {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.busca-global-campo .icon { width: 18px; height: 18px; color: var(--ink-soft); flex-shrink: 0; }
.busca-global-campo input {
  border: none; outline: none; font-size: 16px; flex: 1; font-family: var(--font-body); color: var(--ink); background: transparent;
}
.busca-global-campo .fechar { border: none; background: none; cursor: pointer; color: var(--ink-soft); padding: 4px; }
.busca-global-resultados { overflow-y: auto; padding: var(--space-2); }
.busca-global-grupo-titulo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft); padding: var(--space-3) var(--space-3) var(--space-1);
}
.busca-global-item {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink);
}
.busca-global-item:hover, .busca-global-item.destacado { background: var(--accent-soft, #eef4f3); }
.busca-global-item .titulo { font-weight: 600; font-size: var(--text-sm); }
.busca-global-item .subtitulo { font-size: 12.5px; color: var(--ink-soft); }
.busca-global-vazio, .busca-global-dica { padding: var(--space-5); text-align: center; color: var(--ink-soft); font-size: var(--text-sm); }

.topbar__user {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--ink-soft);
}
.topbar__user .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}

.content { padding: var(--space-6); max-width: 1180px; width: 100%; margin: 0 auto; }

/* ---------------------------------------------------------------- Ícones (Lucide, SVG inline) */

.icon { width: 18px; height: 18px; flex-shrink: 0; }
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 30px; height: 30px; }
.empty-state .icon { color: var(--neutral); }

/* ---------------------------------------------------------------- Cards
   Um único padrão de card para toda a aplicação: mesmo padding, raio,
   sombra e borda. stat-card e timeline-card herdam exatamente desses
   valores em vez de redefini-los. */

.card, .stat-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}

/* Espaçamento vertical entre cards/seções empilhadas fica a cargo da
   classe utilitária .section (nunca de um seletor de irmão adjacente,
   que "vazaria" para cards lado a lado dentro de um .grid e quebraria a
   altura igual entre eles). */

.card__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4); gap: var(--space-3); flex-wrap: wrap;
}
.card__header h2, .card__header h3 { margin-bottom: 0; }

.section { margin-top: var(--space-6); }
.section:first-child { margin-top: 0; }

.grid { display: grid; gap: var(--space-4); align-items: stretch; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

@media (max-width: 880px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* Estrutura interna do stat-card: eyebrow -> valor -> legenda, sempre na mesma posição */
.stat-card { display: flex; flex-direction: column; }
.stat-card .stat-value { font-size: 26px; font-weight: 800; font-family: var(--font-mono); line-height: 1.2; white-space: nowrap; }
.stat-card .stat-value.warn { color: var(--warn); }
.stat-card .stat-value.ok { color: var(--ok); }
.stat-card .stat-sub { font-size: var(--text-sm); color: var(--ink-soft); margin-top: var(--space-1); }

/* ---------------------------------------------------------------- Botões
   Mesma altura para todos os botões (exceto a variante .small, usada só
   em ações inline de tabela) — nunca ficam pequenos ou "espremidos". */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--h-control);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-base); font-weight: 600;
  font-family: var(--font-body);
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--graphite-800); color: #fff;
  transition: background 0.12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--graphite-700); text-decoration: none; }
.btn .icon { width: 16px; height: 16px; }

.btn.primary { background: var(--accent); }
.btn.primary:hover { background: var(--accent-dark); }

.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--paper); }

.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #b93a3a; }

.btn.ok { background: var(--ok); }
.btn.ok:hover { background: #257f53; }

.btn.small { height: var(--h-control-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn.full { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.radio-inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--ink); cursor: pointer; margin-right: var(--space-4); }
.radio-inline input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }

/* ---------------------------------------------------------------- Formulários
   input, select e botão padrão compartilham a mesma altura (--h-control),
   então nunca ficam desalinhados quando aparecem lado a lado. */

label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); color: var(--ink-soft); }

.field { margin-bottom: var(--space-4); }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], input[type=search], select {
  height: var(--h-control);
  width: 100%;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-family: var(--font-body);
  background: #fff;
  color: var(--ink);
}
textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-family: var(--font-body);
  background: #fff;
  color: var(--ink);
  resize: vertical;
  min-height: 92px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--paper);
  color: var(--ink-soft);
  cursor: not-allowed;
  opacity: 0.75;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* Linha de campos do boleto (entrada, confirmacao de pago, parcelas, vencimento)
   lado a lado, com largura propria pra cada tipo de campo - substitui o uso de
   flexbox + max-width inline, seguindo o mesmo padrao de grid usado no resto do sistema. */
.linha-boleto { display: grid; grid-template-columns: 140px auto; gap: var(--space-4); align-items: end; margin-bottom: var(--space-4); }
.linha-boleto.linha-boleto--parcelas { grid-template-columns: 100px 180px; }
.linha-boleto .checkbox-inline { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; height: var(--h-control); white-space: nowrap; }
.linha-boleto .checkbox-inline input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
@media (max-width: 760px) { .linha-boleto { grid-template-columns: 1fr; } }

.hint { font-size: var(--text-sm); color: var(--ink-soft); margin-top: var(--space-2); }

fieldset { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: var(--space-4); margin: 0 0 var(--space-4); }
legend { font-size: var(--text-sm); font-weight: 700; color: var(--ink-soft); padding: 0 var(--space-2); }

/* ---------------------------------------------------------------- Status badges (elemento de assinatura) */

.status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border-radius: 999px;
  font-size: var(--text-sm); font-weight: 700;
  white-space: nowrap;
}
.status .led { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.status.pago { background: var(--ok-soft); color: #1f6e49; }
.status.pago .led { background: var(--ok); box-shadow: 0 0 0 3px rgba(47,158,104,0.18); }

.status.nao_pago { background: var(--danger-soft); color: #a53333; }
.status.nao_pago .led { background: var(--danger); box-shadow: 0 0 0 3px rgba(214,69,69,0.18); }

.status.parcial { background: var(--warn-soft); color: #8f5f1a; }
.status.parcial .led { background: var(--warn); box-shadow: 0 0 0 3px rgba(201,134,42,0.18); }

.status.agendada { background: var(--warn-soft); color: #8f5f1a; }
.status.agendada .led { background: var(--warn); box-shadow: 0 0 0 3px rgba(201,134,42,0.18); }

.status.concluida { background: var(--accent-soft); color: var(--accent-dark); }
.status.concluida .led { background: var(--accent); box-shadow: 0 0 0 3px rgba(15,139,141,0.18); }

.status.cancelada { background: var(--neutral-soft); color: #5c626b; }
.status.cancelada .led { background: var(--neutral); }

table tr.linha-atrasada td { background: var(--danger-soft); }
table tr.linha-atrasada:hover td { background: #f7d9d9; }

/* ---------------------------------------------------------------- Tabelas
   Cabeçalho e células com o mesmo padding em todas as tabelas do sistema;
   colunas numéricas (.num) sempre alinhadas à direita. */

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
th.num { text-align: right; }
td { padding: var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafbfc; }
.table-wrap { overflow-x: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- Alertas / flash */

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
}
.alert.sucesso { background: var(--ok-soft); color: #1f6e49; border-color: #bfe4cf; }
.alert.erro { background: var(--danger-soft); color: #a53333; border-color: #f0c2c2; }

.field-errors { background: var(--danger-soft); border: 1px solid #f0c2c2; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.field-errors ul { margin: var(--space-1) 0 0; padding-left: 18px; }
.field-errors li { color: #a53333; font-size: var(--text-sm); }

/* ---------------------------------------------------------------- Empty state */

.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--ink-soft);
}
.empty-state .icon-lg { display: block; margin: 0 auto var(--space-3); }
.empty-state strong { display: block; color: var(--ink); font-size: var(--text-md); margin-bottom: var(--space-1); }

/* ---------------------------------------------------------------- Paginação */

.pagination { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-4); flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: var(--h-control-sm); height: var(--h-control-sm);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm); font-size: var(--text-sm); border: 1px solid var(--line); color: var(--ink);
}
.pagination a:hover { background: var(--paper); text-decoration: none; }
.pagination .current { background: var(--graphite-800); color: #fff; border-color: var(--graphite-800); }

/* ---------------------------------------------------------------- Timeline (ficha do cliente) */

.timeline { position: relative; padding-left: 26px; margin-top: var(--space-3); }
.timeline--scroll { max-height: 520px; overflow-y: auto; padding-right: var(--space-2); }

/* Utilitário genérico: usar em QUALQUER card cujo conteúdo cresce com o
   tempo (histórico, listas de eventos, etc.), para o card nunca crescer
   sem limite na página. */
.card-scroll { max-height: 360px; overflow-y: auto; padding-right: var(--space-2); }
.card-scroll.card-scroll--lg { max-height: 520px; }
.card-scroll table thead th { position: sticky; top: 0; background: var(--paper-card); z-index: 1; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--line);
}
.timeline-item { position: relative; padding-bottom: var(--space-4); }
.timeline-item::before {
  content: ""; position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper-card); border: 3px solid var(--accent);
}
.timeline-item .tcard {
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); box-shadow: var(--shadow);
}
.timeline-item .tcard__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: wrap; }

/* ---------------------------------------------------------------- Gráficos (Análise Mensal)
   Renderizados com Chart.js (MIT, vendorizado em assets/js/vendor) em vez
   de barras feitas à mão — dá tooltip, eixo e animações prontos e mais
   ricos. Ver src/Views/analise/index.php + app.js. */

.chart-canvas-wrap { position: relative; height: 220px; margin-top: var(--space-3); }

/* Lista de dias com movimentação, abaixo dos gráficos */
.movement-table td.day-cell { font-weight: 700; }

/* ---------------------------------------------------------------- Itens de OS (formulário) */

.os-item-row { display: grid; grid-template-columns: 2fr 1fr auto; gap: var(--space-3); align-items: end; margin-bottom: var(--space-3); }
.os-item-row--orc { grid-template-columns: 2fr 100px 130px 110px auto; }
@media (max-width: 900px) { .os-item-row--orc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .os-item-row { grid-template-columns: 1fr; } }
.os-item-row .btn { height: var(--h-control); }
.os-item-total { text-align: right; font-size: var(--text-lg); font-weight: 800; font-family: var(--font-mono); margin-top: var(--space-2); }

/* ---------------------------------------------------------------- Páginas de autenticação */

.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--graphite-900), var(--graphite-800));
  padding: var(--space-5);
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--paper-card);
  border-radius: var(--radius);
  padding: var(--space-8) var(--space-6);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.auth-brand { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.brand-logo-lg { width: 34px; height: 34px; }
.auth-brand span { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; letter-spacing: 0.01em; }
.auth-card h1 { font-size: var(--text-lg); margin-bottom: var(--space-1); text-align: center; }
.auth-card .sub { color: var(--ink-soft); font-size: var(--text-sm); margin-bottom: var(--space-5); text-align: center; }
.auth-card .field:last-of-type { margin-bottom: var(--space-5); }
.auth-links { margin-top: var(--space-4); font-size: var(--text-sm); text-align: center; }

/* ---------------------------------------------------------------- Utilitários */

.text-muted { color: var(--ink-soft); }
.mb-0 { margin-bottom: 0 !important; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.gap-8 { gap: var(--space-2); }
.mt-16 { margin-top: var(--space-4); }
.chip {
  display: inline-block; padding: var(--space-1) var(--space-2); border-radius: 999px; background: var(--neutral-soft);
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft);
}
.self-start { align-self: start; }

/* ---------------------------------------------------------------- Casca responsiva
   Uma única interface: em telas <= 880px o menu vira um painel (drawer)
   que desliza por cima do conteúdo, em vez de uma segunda versão do
   layout. Nenhum componente reduz de tamanho a ponto de ficar apertado —
   apenas o espaçamento externo diminui um pouco. */

@media (max-width: 880px) {
  .app-shell { grid-template-columns: 1fr; }

  .no-desktop { display: flex; }
  .hamburger { display: inline-flex; }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 272px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,0.2);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar__close { display: inline-flex; align-items: center; }

  .sidebar-backdrop.open { display: block; }

  .content { padding: var(--space-4); }
  .topbar { padding: var(--space-3) var(--space-4); }
}

@media (max-width: 560px) {
  .content { padding: var(--space-3); }
  .card, .stat-card { padding: var(--space-4); }
}

/* ---------------------------------------------------------------- Agenda / Calendário (FullCalendar, tema customizado) */

.fc {
  --fc-border-color: var(--line);
  --fc-page-bg-color: var(--paper-card);
  --fc-neutral-bg-color: var(--paper);
  --fc-today-bg-color: var(--accent-soft);
  --fc-button-bg-color: var(--graphite-800);
  --fc-button-border-color: var(--graphite-800);
  --fc-button-hover-bg-color: var(--graphite-700);
  --fc-button-hover-border-color: var(--graphite-700);
  --fc-button-active-bg-color: var(--accent);
  --fc-button-active-border-color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}
.fc .fc-toolbar-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; text-transform: capitalize; }
.fc .fc-button { text-transform: capitalize; font-weight: 600; font-size: var(--text-sm); box-shadow: none !important; padding: 6px 12px; }
.fc .fc-button:focus { box-shadow: none !important; }
.fc .fc-col-header-cell-cushion { color: var(--ink-soft); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; padding: var(--space-2); }
.fc .fc-daygrid-day-number { color: var(--ink); font-size: var(--text-sm); padding: var(--space-2); text-decoration: none; }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--accent-dark); font-weight: 700; }
.fc .fc-event { border-radius: 5px; padding: 1px 4px; font-size: 11.5px; font-weight: 600; border: none; cursor: pointer; }
.fc .fc-daygrid-day-frame { padding: 2px; }
.fc .fc-daygrid-more-link { font-size: var(--text-xs); font-weight: 600; color: var(--accent-dark); }
.fc-theme-standard .fc-scrollgrid, .fc-theme-standard td, .fc-theme-standard th { border-color: var(--line); }

/* ---------------------------------------------------------------- Impressão (Nota de Serviço) */

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
}

/* ---------------------------------------------------------------- Seletor de tema (Perfil) */

.tema-opcoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.tema-opcao {
  display: flex; flex-direction: column; gap: var(--space-2);
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: var(--space-4); cursor: pointer; position: relative;
}
.tema-opcao:hover { border-color: var(--graphite-600); }
.tema-opcao.selecionada { border-color: var(--accent); background: var(--accent-soft); }
.tema-opcao input[type=radio] { position: absolute; top: var(--space-3); right: var(--space-3); width: 16px; height: 16px; }
.tema-opcao__nome { font-weight: 700; font-family: var(--font-display); font-size: var(--text-base); }
.tema-opcao__desc { font-size: 12.5px; color: var(--ink-soft); }

.tema-swatch { display: flex; flex-direction: column; gap: 6px; border-radius: var(--radius-sm); padding: var(--space-3); }
.tema-swatch__barra { display: block; height: 8px; border-radius: 2px; width: 30%; }
.tema-swatch__linha { display: block; height: 6px; border-radius: 2px; }

.tema-swatch--padrao { background: #171b21; }
.tema-swatch--padrao .tema-swatch__barra { background: #0f8b8d; }
.tema-swatch--padrao .tema-swatch__linha { background: #3a4356; }

.tema-swatch--corporativo { background: #16213e; }
.tema-swatch--corporativo .tema-swatch__barra { background: #a8790f; }
.tema-swatch--corporativo .tema-swatch__linha { background: #2f3f6b; }

@media (max-width: 640px) { .tema-opcoes { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Combobox de busca de servico (OS/Orcamento) */

.combo-servico { position: relative; }
.combo-servico input[type=text] { cursor: text; }
.combo-servico .combo-lista {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(20,22,30,0.14);
  max-height: 260px; overflow-y: auto;
  display: none;
}
.combo-servico .combo-lista.aberta { display: block; }
.combo-servico .combo-item {
  padding: var(--space-2) var(--space-3); font-size: var(--text-sm); cursor: pointer;
  border-bottom: 1px solid var(--line-soft, var(--line));
}
.combo-servico .combo-item:last-child { border-bottom: none; }
.combo-servico .combo-item:hover, .combo-servico .combo-item.destacado { background: var(--accent-soft, #eef4f3); }
.combo-servico .combo-item .num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin-right: 6px; }
.combo-servico .combo-vazio { padding: var(--space-3); font-size: var(--text-sm); color: var(--ink-soft); }
.combo-servico .combo-add {
  padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 700;
  color: var(--accent); cursor: pointer; border-top: 1px solid var(--line); background: var(--paper);
}
.combo-servico .combo-add:hover { background: var(--accent-soft, #eef4f3); }

.combo-novo-item {
  border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: var(--space-3);
  margin-top: var(--space-2); background: var(--accent-soft, #eef4f3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.combo-novo-item .linha { display: flex; gap: var(--space-2); }
.combo-novo-item input { background: #fff; }
.combo-novo-item .erro { color: var(--danger); font-size: 12.5px; }