/* ============================================================
   Proposta de refino visual (impeccable) — override isolado.
   Carregado DEPOIS de style.min.css / config-cores.css e do
   <style> de cores por-empresa, então vence por ordem + !important.
   Reversível: remova os <link> nos layouts e apague este arquivo.
   Respeita as CSS vars de cor por-empresa (--btn-primary etc.).
   ============================================================ */

:root {
  --ff-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --ff-shadow-md: 0 4px 16px rgba(16, 24, 40, .08);
  --ff-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
  --ff-border: #e6eaf0;
  --ff-ink: #111827;
  --ff-muted: #6b7280;
}

/* ---------- Sidebar: texto legível no fundo claro padrão (P0) ---------- */
/* O bug: texto branco sobre --sidebar-bg claro. Fix: tinta escura + acento
   no ativo. Continua respeitando a cor de fundo escolhida pela empresa. */
.sidebar {
  border-right: 1px solid rgba(0, 0, 0, .06);
}
.sidebar-menu .nav-link {
  color: #3b4453 !important;
  border-radius: 10px !important;
  margin: 2px 10px !important;
  padding: 10px 14px !important;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.sidebar-menu .nav-link i {
  color: #7a8496 !important;
  transition: color .15s ease;
}
.sidebar-menu .nav-link:hover {
  color: var(--ff-ink) !important;
  background: rgba(0, 0, 0, .05) !important;
}
.sidebar-menu .nav-link:hover i {
  color: var(--ff-ink) !important;
}
.sidebar-menu .nav-link.active {
  color: var(--btn-primary, #0d6efd) !important;
  background: rgba(13, 110, 253, .10) !important;
  font-weight: 600;
}
.sidebar-menu .nav-link.active i {
  color: var(--btn-primary, #0d6efd) !important;
}
.menu-section-title {
  color: #9aa3b2 !important;
  font-size: .68rem !important;
  letter-spacing: .08em;
  font-weight: 700;
  padding: 6px 24px !important;
}
.sidebar-header {
  padding: 18px 16px !important;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* ---------- Botões: rótulo legível + estilo atual (P1/P3) ---------- */
/* Neutraliza o pill 20px + borda preta + hover com sombra gigante. */
.btn {
  border-radius: 9px !important;
  border-width: 1px !important;
  border-color: transparent;
  font-weight: 600;
  transition: filter .15s ease, box-shadow .15s ease, transform .05s ease !important;
}
.btn:hover {
  box-shadow: var(--ff-shadow-sm) !important;
  border-width: 1px !important;
  filter: brightness(.96);
}
.btn:active { transform: translateY(1px); }
/* Rótulo branco nos preenchidos (corrige texto invisível no btn-primary). */
.btn-primary, .btn-success, .btn-danger, .btn-dark, .btn-secondary {
  color: #fff !important;
}
.btn-primary:hover, .btn-success:hover, .btn-danger:hover,
.btn-dark:hover, .btn-secondary:hover { color: #fff !important; }
/* Outline: mantém borda visível e legível. */
.btn-outline-secondary, .btn-outline-primary, .btn-outline-dark,
.btn-outline-warning, .btn-outline-success, .btn-outline-danger {
  border-color: currentColor !important;
}
/* Outline no estado ATIVO/selecionado fica preenchido → rótulo branco
   (corrige o toggle "Semana" da agenda que ficava azul sem texto). */
.btn-outline-primary.active, .btn-outline-secondary.active,
.btn-outline-dark.active, .btn-outline-success.active,
.btn-check:checked + .btn-outline-primary {
  color: #fff !important;
}

/* ---------- Sistema de cards consistente (app-wide, P2) ---------- */
.card {
  border: 1px solid var(--ff-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--ff-shadow-sm) !important;
}
.card-header {
  /* Sem forçar background: preserva .bg-primary/.bg-light já usados nos headers
     (senão vira branco-no-branco no header colorido do form público). */
  border-bottom: 1px solid #eef1f6 !important;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* ---------- Dashboard: métrica é a heroína (P2) ---------- */
#index .card {
  transition: box-shadow .16s ease, transform .16s ease;
}
#index .card:hover {
  box-shadow: var(--ff-shadow-md) !important;
  transform: translateY(-2px);
}
#index .card .card-title {
  font-size: .72rem !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ff-muted) !important;
  font-weight: 700;
  margin-bottom: 6px !important;
}
#index .card-body .fs-4 {
  font-size: 2.25rem !important;
  line-height: 1.1;
  font-weight: 700 !important;
  color: var(--ff-ink) !important;
  letter-spacing: -.01em;
}
/* Título de seção do dashboard */
#index h5.fw-bold { color: var(--ff-ink); letter-spacing: -.01em; font-size: 1.05rem; }

/* ---------- BOLDER: painel de status como linguagem de cor semântica ----------
   Cada card de "OS por status" ganha a cor do seu estado (topo + número + ponto).
   Bold no register product = clareza escaneável, cor ligada a significado. */
#index .card[data-metric] {
  border-top: 3px solid var(--st, var(--ff-border)) !important;
  position: relative;
}
#index .card[data-metric="aguardando"]   { --st: #d97706; --st-soft: #fffaf0; }
#index .card[data-metric="em_andamento"]  { --st: #2563eb; --st-soft: #f5f8ff; }
#index .card[data-metric="concluido"]     { --st: #16a34a; --st-soft: #f4fcf6; }
#index .card[data-metric="entregue"]      { --st: #475569; --st-soft: #f7f8fa; }
#index .card[data-metric] .card-body { background: var(--st-soft); border-radius: 0 0 14px 14px; }
#index .card[data-metric] .card-title {
  display: flex; align-items: center; gap: 8px;
}
#index .card[data-metric] .card-title::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--st); flex: 0 0 8px;
}
#index .card[data-metric] .card-body .fs-4 {
  font-size: 2.6rem !important;
  color: var(--st) !important;
}

.card-header h5, .card-header h6 { letter-spacing: -.005em; }

/* ---------- Header ---------- */
.top-header {
  box-shadow: var(--ff-shadow-sm);
}

/* ---------- Tabelas: respiro ---------- */
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ff-muted);
  border-bottom: 1px solid var(--ff-border);
}

/* ---------- POLISH: foco acessível ---------- */
/* O override do .btn tira o outline nativo → devolve um anel de foco visível
   para teclado/screen-reader (persona Sam). :focus-visible não aparece no clique. */
.btn:focus-visible,
.sidebar-menu .nav-link:focus-visible,
a.dropdown-item:focus-visible,
.page-link:focus-visible {
  outline: 2px solid var(--btn-primary, #0d6efd) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--btn-primary, #0d6efd) !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .15) !important;
}

/* ---------- POLISH: cor semântica dos botões de status ---------- */
/* "Desativar" (btn-outline-warning) precisa ler como aviso (âmbar), não azul. */
.btn-outline-warning {
  color: #b45309 !important;
  border-color: #f0b429 !important;
  background: transparent !important;
}
.btn-outline-warning:hover {
  color: #fff !important;
  background: #d97706 !important;
  border-color: #d97706 !important;
}
/* "Ativar" (btn-outline-success) coerente em verde. */
.btn-outline-success { color: #15803d !important; border-color: #4ade80 !important; }
.btn-outline-success:hover { color: #fff !important; background: #16a34a !important; border-color: #16a34a !important; }

/* ============================================================
   Melhorias (fase 2): linguagem de status, drill-down, empty states, sidebar
   ============================================================ */

/* Linguagem de status unificada — mesmas cores do painel do dashboard,
   aplicada a TODOS os badges de OS (listas, detalhe, agenda, histórico). */
.osbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2;
  padding: .32em .64em; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.osbadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.osbadge--agendado     { color: #6d28d9; background: #f3eefc; border-color: #ddd0f5; }
.osbadge--aguardando   { color: #b45309; background: #fff6e9; border-color: #f4d9ac; }
.osbadge--em_andamento { color: #1d4ed8; background: #eef3ff; border-color: #c8d8fb; }
.osbadge--concluido    { color: #15803d; background: #eafaf0; border-color: #bfe9cd; }
.osbadge--entregue     { color: #334155; background: #eef1f5; border-color: #d3dae4; }

/* Cards de status do dashboard clicáveis (drill-down p/ Ordens filtradas). */
#index a.card-link { display: block; text-decoration: none !important; }
#index a.card-link :is(h6, p) { text-decoration: none; }
#index a.card-link .card[data-metric] { cursor: pointer; }
#index a.card-link:hover .card[data-metric] { box-shadow: var(--ff-shadow-md) !important; transform: translateY(-2px); }
#index a.card-link:focus-visible .card[data-metric] { outline: 2px solid var(--btn-primary); outline-offset: 2px; }

/* Empty states que ensinam (agenda, tabelas, dashboard). */
.empty-state { text-align: center; color: var(--ff-muted); padding: 30px 16px; }
.empty-state .ico { font-size: 1.5rem; opacity: .45; margin-bottom: 8px; display: block; }
.empty-state .t { font-weight: 600; color: #475467; }
.empty-state .s { font-size: .88rem; margin: 2px 0 0; }

/* Sidebar: refino leve de espaçamento/logo. */
.sidebar-header { display: flex; align-items: center; }
.sidebar-header img { transition: transform .2s ease; }
.sidebar-menu { padding-top: 4px; }

/* Sidebar branca ELEVADA (rail flutuando sobre o fundo neutro do conteúdo).
   A sombra é estrutural — vale pra qualquer cor de sidebar escolhida. */
.sidebar {
  box-shadow: 1px 0 0 rgba(16, 24, 40, .05), 6px 0 24px rgba(16, 24, 40, .05);
  border-right: 1px solid #edf0f5;
}
.sidebar-header { border-bottom: 1px solid #f0f2f6; }

/* ============================================================
   Passe "premium" (fase 3): container com profundidade, destaques
   maiores, ritmo. Register product — sem tropes de landing.
   ============================================================ */

/* Profundidade: conteúdo sobre neutro frio, cards brancos elevados. */
.main-content { background: #f4f6fa; }
#index { background: transparent !important; }

/* Container focado (não edge-to-edge). Tabelas largas rolam dentro do .table-responsive. */
.main-content > .container-fluid,
.main-content .container-fluid.px-4 { max-width: 1360px; margin-inline: auto; }

/* Sistema de card premium: radius maior, sombra em camadas, mais respiro. */
.card {
  border: 1px solid #e9edf3 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05) !important;
}
.card-body { padding: 1.4rem 1.55rem; }
.card-header {
  padding: 1.15rem 1.55rem !important;
  border-top-left-radius: 16px !important; border-top-right-radius: 16px !important;
  font-weight: 600;
}
.card-header h5, .card-header h6 { font-weight: 700; }

/* Ritmo entre seções do dashboard. */
#index .row.justify-content-center { margin-bottom: 8px; }
#index h5.fw-bold { font-size: 1.12rem; margin-bottom: 1rem !important; }
#index h3.fw-bold { font-size: clamp(1.6rem, 2.4vw, 2.05rem); letter-spacing: -.02em; }

/* DESTAQUES MAIORES: números do painel de status e KPIs. */
#index .card[data-metric] .card-body { padding: 1.35rem 1.5rem 1.5rem; }
#index .card[data-metric] .card-body .fs-4 { font-size: 3rem !important; line-height: 1; }
#index .card[data-metric] .card-title { font-size: .74rem !important; margin-bottom: 10px !important; }
/* KPIs financeiros com mais presença. */
#index .card-body .fs-4 { font-size: 2.5rem !important; }

/* Header um toque mais premium. */
.top-header { padding-top: .35rem; padding-bottom: .35rem; }
.top-header h5 { font-size: 1.05rem; }

/* ---------- Datepicker (flatpickr) — tema custom, menos genérico ---------- */
.flatpickr-calendar {
  border-radius: 14px !important;
  border: 1px solid var(--ff-border) !important;
  box-shadow: var(--ff-shadow-lg) !important;
  font-family: inherit;
  overflow: hidden;
}
.flatpickr-months { padding-top: 4px; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { font-weight: 700; color: var(--ff-ink); }
.flatpickr-weekday { color: var(--ff-muted); font-weight: 600; }
.flatpickr-day { border-radius: 9px; color: #344054; }
.flatpickr-day:hover { background: #eef3ff; border-color: #eef3ff; }
.flatpickr-day.today { border-color: var(--btn-primary, #0d6efd); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--btn-primary, #0d6efd) !important;
  border-color: var(--btn-primary, #0d6efd) !important;
  color: #fff !important;
}
.flatpickr-day.flatpickr-disabled { color: #cbd2dc; }
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus { background: #f2f5fa; }
.flatpickr-monthDropdown-months, .numInputWrapper:hover { background: transparent; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--btn-primary, #0d6efd); }

@media (prefers-reduced-motion: reduce) {
  .btn, .card, #index .card, #index a.card-link .card, .sidebar-menu .nav-link { transition: none !important; }
  #index .card:hover, #index a.card-link:hover .card { transform: none; }
}

/* ============================================================
   LOGIN — substitui o fundo "rainbow" 2015 por um gradiente
   escuro on-brand + card glass legível. Só afeta layouts.login.
   ============================================================ */
body.ff-login {
  background: radial-gradient(1100px 760px at 18% 12%, #1c2c4d 0%, #101a30 52%, #0a1120 100%) fixed !important;
  color: #edf3ff;
}
body.ff-login .login-wrap {
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  border-radius: 20px;
}
body.ff-login .login-html {
  background: rgba(15, 23, 42, .58) !important;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  padding: 40px 56px 24px !important;
}
body.ff-login .login-form .group .label {
  color: rgba(255, 255, 255, .82) !important;
  letter-spacing: .04em;
  font-size: 13px;
  margin-bottom: 6px;
}
body.ff-login .login-form .group .input {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 11px !important;
  color: #fff !important;
  padding: 12px 14px !important;
  transition: border-color .15s ease, background .15s ease;
}
body.ff-login .login-form .group .input::placeholder { color: rgba(255, 255, 255, .45); }
body.ff-login .login-form .group .input:focus {
  outline: none;
  border-color: rgba(120, 160, 255, .7) !important;
  background: rgba(255, 255, 255, .13) !important;
  box-shadow: 0 0 0 3px rgba(90, 130, 240, .18);
}
body.ff-login .login-form .group .button {
  border-radius: 11px !important;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 13px !important;
}
body.ff-login .hr {
  background: rgba(255, 255, 255, .14);
}

/* Form público / teste-grátis / sucesso também estendem layouts.login e renderizam
   um CARD Bootstrap branco. O body.ff-login/login-new.css deixam o texto claro
   (certo para o card de login escuro, errado para o card branco): força tinta
   escura dentro de cards Bootstrap. O .text-white do header (bg-primary) vence
   por !important, então o cabeçalho colorido continua branco. */
body.ff-login .card { color: #212529; }
body.ff-login .card .form-label,
body.ff-login .card h6 { color: #344054; }
body.ff-login .card .text-muted { color: #6b7280 !important; }
/* Card centralizado no gradiente ganha respiro e sombra premium. */
body.ff-login .card { border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); border: none; }

@media (prefers-reduced-motion: reduce) {
  body.ff-login .login-form .group .input { transition: none; }
}