/* ============================================================
   Condoria - Camada de componentes (Design System)
   Fonte única da verdade das classes de UI. Tokens em static/styles/tokens.css (carregar antes).
   CSS puro (sem @apply): o Tailwind é via CDN, sem build step.
   ============================================================ */

/* ---------- Botões: base ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;            /* py-2.5 px-4 */
  font-size: 0.875rem;               /* text-sm */
  line-height: 1.25rem;
  font-weight: 600;                  /* font-semibold */
  border-radius: var(--radius-md);            /* rounded-xl */
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s var(--ease);
  white-space: nowrap;
}
.btn:focus { outline: 2px solid transparent; outline-offset: 2px; }
/* `.btn` define display:inline-flex e disputa com o `.hidden` do Tailwind (mesma
   especificidade) - quem vence depende da ordem em que o CDN injeta o <style>.
   Explicitar aqui evita um botão oculto reaparecer. */
.btn.hidden, .btn[hidden] { display: none !important; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 767px) {
  .btn { padding-left: 0.75rem; padding-right: 0.75rem; }  /* max-md:px-3 */
  /* Botão com rótulo escondido (span.hidden md:inline) vira ícone-only no mobile: usa o
     mesmo padding quadrado do .btn-icon pra não ficar mais largo que os outros botões
     de ação ao lado. */
  .btn:has(> span.hidden) { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
}

/* Modificadores de tamanho/largura */
.btn--wide { padding-left: 1.5rem; padding-right: 1.5rem; }  /* px-6 (submit) */
.btn--block { width: 100%; }
/* CTA de página pública (ocorrência, assinatura de encomenda): mais alto e mais
   arredondado que o CTA padrão, com feedback tátil no toque. Existia repetido
   inline em 9 botões de occurence_responses.html e package_sign.html. */
.btn--xl {
  padding-top: 1rem;                 /* py-4 */
  padding-bottom: 1rem;
  border-radius: var(--radius-lg);               /* rounded-2xl */
  font-size: 1rem;                   /* text-base */
  font-weight: 700;                  /* font-bold */
  transition-duration: 0.2s;
}
.btn--xl:active { transform: scale(0.98); }
.btn--lg {                                                   /* CTAs de marketing (landing) */
  padding: 0.875rem 1.75rem;         /* py-3.5 px-7 */
  font-size: 1rem;                   /* text-base */
  line-height: 1.5rem;
  border-radius: var(--radius-md);
}

/* ---------- Botões: variantes de cor ---------- */
.btn-primary {
  color: #fff;
  background-image: linear-gradient(to right, var(--brand), var(--brand-to)); /* red-500 -> rose-600 */
  box-shadow: 0 1px 2px 0 var(--brand-ring);               /* shadow-sm shadow-red-500/20 */
}
.btn-primary:hover { background-image: linear-gradient(to right, var(--brand-strong), var(--brand-to-strong)); }
.btn-primary:focus-visible { box-shadow: 0 0 0 4px var(--brand-ring); }

.btn-secondary {
  color: var(--ink-2);                    /* gray-600 */
  background-color: var(--surface-muted);         /* gray-50 */
  border-color: var(--line);             /* gray-200 */
  font-weight: 500;                  /* font-medium */
}
.btn-secondary:hover { background-color: var(--surface-sunken); color: var(--ink-2); }

.btn-danger { color: #fff; background-color: var(--danger); }         /* red-600 */
.btn-danger:hover { background-color: var(--danger-strong); }
.btn-danger:focus-visible { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2); }

.btn-success { color: #fff; background-color: var(--success); }        /* emerald-600 (sucesso = emerald) */
.btn-success:hover { background-color: var(--success-strong); }
.btn-success:focus-visible { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2); }

.btn-info { color: #fff; background-color: var(--info); }           /* blue-600 */
.btn-info:hover { background-color: var(--info-strong); }
.btn-info:focus-visible { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); }

.btn-warning { color: #fff; background-color: #f97316; }        /* orange-500 */
.btn-warning:hover { background-color: #ea580c; }

/* ---------- Botão de ícone quadrado (refresh) ---------- */
/* Unifica o conflito histórico: py-2.5 px-4 vs p-2.5 -> sempre p-2.5 */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;                 /* p-2.5 */
  color: var(--muted);                    /* gray-500 */
  background-color: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.btn-icon:hover { background-color: var(--surface-sunken); color: var(--ink-2); }

/* ---------- Ícones de ação em linha de tabela ---------- */
.btn-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;                   /* p-2 */
  border-radius: var(--radius-sm);             /* rounded-lg */
  color: var(--subtle);                    /* gray-400 */
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.btn-icon-action--sm { padding: 0.375rem; color: var(--line-strong); }   /* p-1.5, gray-300 (kanban) */

.btn-icon-action.is-view:hover    { color: var(--info); background-color: var(--info-soft); }   /* blue */
.btn-icon-action.is-edit:hover    { color: var(--info); background-color: var(--info-soft); }
.btn-icon-action.is-delete:hover  { color: var(--danger); background-color: var(--danger-soft); }   /* red */
.btn-icon-action.is-success:hover { color: var(--success); background-color: var(--success-soft); }   /* emerald */
.btn-icon-action.is-warning:hover { color: var(--warning); background-color: var(--warning-soft); }   /* amber */

/* ---------- Fechar modal (X) ---------- */
/* Unifica 6+ variantes anteriores */
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;                    /* w-9 */
  height: 2.25rem;                   /* h-9 */
  border-radius: var(--radius-sm);             /* rounded-lg */
  color: var(--subtle);                    /* gray-400 */
  background-color: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s var(--ease);
}
.modal-close:hover { background-color: var(--surface-sunken); color: var(--ink-2); }

/* ---------- Link de ação / estado-vazio ---------- */
.btn-link {
  color: var(--brand);                    /* red-500 */
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.btn-link:hover { color: var(--brand-strong); text-decoration: underline; }

/* ---------- Remover arquivo/foto (X pequeno) ---------- */
.btn-remove {
  padding: 0.25rem;                  /* p-1 */
  color: var(--subtle);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.btn-remove:hover { color: var(--brand); }

/* ---------- Chip de filtro ---------- */
.filter-chip {
  padding: 0.5rem 0.75rem;           /* py-2 px-3 */
  border-radius: var(--radius-md);            /* rounded-xl */
  font-size: 0.75rem;                /* text-xs */
  line-height: 1rem;
  font-weight: 600;
  border: 1px solid var(--line);
  color: var(--muted);
  background-color: var(--surface);
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-chip:hover { background-color: var(--surface-muted); }
.filter-chip.active-filter {
  color: #fff;
  background-image: linear-gradient(to right, var(--brand), var(--brand-to));
  border-color: transparent;
}

/* ---------- Botão "adicionar item" tracejado ---------- */
.btn-dashed {
  border-style: dashed;
  border-color: var(--line);
}
.btn-dashed:hover { border-color: var(--line-strong); }

/* ---------- Inputs ---------- */
.input-field {
  width: 100%;
  /* Sem appearance:none o iOS Safari desenha sombra interna e ignora o
     border-radius em inputs de texto/data, e o Firefox mantém a altura
     nativa em type="date"/"time". */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--surface-muted);         /* gray-50 */
  border: 1px solid var(--line);         /* gray-200 */
  border-radius: var(--radius-md);            /* rounded-xl */
  padding: 0.75rem 1rem;             /* py-3 px-4 */
  font-size: 0.875rem;
  color: var(--ink);
  transition: all 0.15s ease;
}
.input-field::placeholder { color: var(--subtle); }
.input-field:focus {
  outline: none;
  background-color: var(--surface);
  border-color: var(--brand-focus);             /* red-400 */
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}
.input-field--info:focus {
  border-color: #60a5fa;             /* blue-400 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.input-search {
  width: 100%;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem 0.5rem 2.5rem; /* py-2 pl-10 pr-4 */
  font-size: 0.875rem;
  color: var(--ink);
  transition: all 0.15s ease;
}
.input-search::placeholder { color: var(--subtle); }
.input-search:focus {
  outline: none;
  border-color: var(--brand-focus);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}
@media (min-width: 640px) {
  .input-search { padding-top: 0.625rem; padding-bottom: 0.625rem; } /* sm:py-2.5 */
}

.input-sm {
  width: 100%;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);             /* rounded-lg */
  padding: 0.5rem 0.75rem;           /* py-2 px-3 */
  font-size: 0.875rem;
  color: var(--ink);
  transition: all 0.15s ease;
}
.input-sm::placeholder { color: var(--subtle); }
.input-sm:focus {
  outline: none;
  border-color: var(--brand-focus);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;          /* py-0.5 px-2 */
  border-radius: var(--radius-pill);             /* rounded-full */
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
.badge-success { background-color: var(--success-soft); color: var(--success-strong); }
.badge-danger  { background-color: var(--danger-soft); color: var(--danger-strong); }
.badge-info    { background-color: var(--info-soft); color: var(--info-strong); }
.badge-neutral { background-color: var(--surface-sunken); color: var(--ink-2); }

/* ---------- Cards / skeleton (definição única compartilhada) ---------- */
.stat-card { transition: all 0.3s ease; min-width: 0; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1); }

.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--line) 50%, var(--surface-sunken) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ---------- Skeleton: componente (static/scripts/skeleton.js) ----------
   Todas as telas montam o carregamento com estas peças, então o visual é o
   mesmo em todo o app (claro/escuro via tokens). */
.sk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.sk-card.sk-flush { padding: 0; overflow: hidden; }
.sk-stack { display: flex; flex-direction: column; gap: .625rem; }
.sk-item { display: flex; align-items: center; gap: .875rem; width: 100%; }
.sk-avatar { width: 2.5rem; height: 2.5rem; border-radius: .75rem; flex-shrink: 0; }
.sk-lines { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.sk-line { height: .875rem; border-radius: 6px; }
.sk-line-sm { height: .625rem; border-radius: 6px; }
.sk-title { height: 1.125rem; border-radius: 6px; }
.sk-value { height: 1.5rem; width: 45%; border-radius: 6px; }
.sk-badge { width: 4.5rem; height: 1.5rem; border-radius: .5rem; flex-shrink: 0; }
.sk-pill { width: 4rem; height: 1.125rem; border-radius: 999px; }
.sk-chart { width: 100%; border-radius: .75rem; }
.sk-col-head { height: 2.625rem; width: 100%; border-radius: .75rem; margin-bottom: .75rem; }
.sk-kpi { display: flex; flex-direction: column; gap: .75rem; }
.sk-text { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.sk-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .875rem; padding-top: .625rem; border-top: 1px solid var(--line); }
.sk-panel-head { padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--line); }
.sk-panel-body { padding: 1.25rem; }
.sk-mt { margin-top: .5rem; }
.sk-td { padding: 1rem; background: var(--surface-muted); }
.sk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 1024px) { .sk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.sk-w-100 { width: 100%; } .sk-w-80 { width: 80%; } .sk-w-70 { width: 70%; } .sk-w-60 { width: 60%; }
.sk-w-50 { width: 50%; } .sk-w-40 { width: 40%; } .sk-w-35 { width: 35%; } .sk-w-30 { width: 30%; } .sk-w-25 { width: 25%; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ---------- iOS Safari: evitar zoom automático ao focar campos ----------
   O Safari do iPhone/iPad dá zoom na página quando o campo focado tem fonte
   menor que 16px (nossos inputs usam 14px / text-sm), e depois não volta ao
   zoom original - a tela parece "travada" deslocada. O @supports abaixo só
   casa em navegadores WebKit de toque (iOS), então Chrome, Firefox e desktop
   ficam inalterados. */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ---------- Fallback de :has() para navegadores antigos ----------
   Firefox só ganhou :has() na versão 121; as telas que marcam o estado do
   "checkbox pill" por :has(input:checked) também alternam a classe
   .is-checked via JS, e a regra abaixo cobre os dois casos. */
.checkbox-pill.is-checked {
  background: var(--brand-soft);
  border-color: #fca5a5;
  color: var(--brand-strong);
}

/* ============================================================
   Componentes de estrutura (padronização - fase 3)
   ============================================================ */

/* ---------- Modal ----------
   Substitui as 8 variações de overlay (bg-gray-600/50, bg-black/60, /85...).
   Uso:
   <div id="x" class="modal-overlay hidden">
     <div class="modal-panel modal-panel--md">
       <div class="modal-header"><h2 class="modal-title">...</h2><button class="modal-close">...</button></div>
       <div class="modal-body">...</div>
       <div class="modal-footer">...</div>
     </div>
   </div>
   Modal aberto por cima de outro: + .modal-overlay--nested. Visualizador de
   imagem/vídeo: + .modal-overlay--lightbox. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: var(--overlay);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.modal-overlay.hidden, .modal-overlay[hidden] { display: none !important; }
.modal-overlay--nested { z-index: var(--z-modal-nested); }
.modal-overlay--lightbox { z-index: var(--z-lightbox); background-color: rgba(0, 0, 0, 0.85); }

.modal-panel {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-panel--sm { max-width: 28rem; }   /* confirmação */
.modal-panel--md { max-width: 36rem; }   /* formulário padrão */
.modal-panel--lg { max-width: 48rem; }   /* formulário grande / detalhe */
.modal-panel--xl { max-width: 64rem; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.modal-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--ink); }
.modal-body { padding: 1.5rem; overflow-y: auto; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  background-color: var(--surface-muted);
}
@media (max-width: 639px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-panel { max-height: 92vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .modal-header, .modal-body, .modal-footer { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Cabeçalho de página ---------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.page-subtitle { margin-top: 0.125rem; font-size: 0.875rem; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.heading-section { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--ink-2); }

/* ---------- Painel (card) ---------- */
.panel {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.panel-body { padding: 1.25rem; }

/* ---------- Tabela ----------
   Unifica "min-w-full divide-y divide-gray-100", .rows-table e .log-table.
   (nomes .card/.table/.spinner/.section-title já existem em telas antigas)
   Envolver em .data-table-wrap para rolagem horizontal no mobile. */
.data-table-wrap { width: 100%; overflow-x: auto; }
.data-table { min-width: 100%; border-collapse: collapse; font-size: 0.875rem; color: var(--ink-2); }
.data-table thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background-color: var(--surface-muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--surface-sunken); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background-color: var(--surface-muted); }
.data-table--compact thead th, .data-table--compact tbody td { padding: 0.5rem 0.75rem; font-size: 0.75rem; }

/* ---------- Estado vazio ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}
.empty-state > i:first-child { font-size: 2rem; color: var(--line-strong); margin-bottom: 0.25rem; }
.empty-state-title { font-weight: 600; color: var(--ink-2); }

/* ---------- Badges extras ---------- */
.badge-warning { background-color: var(--warning-soft); color: var(--warning-strong); }
.badge-brand   { background-color: var(--brand-soft); color: var(--brand-strong); }

/* ---------- Kanban ---------- */
.kanban-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 17rem;
  padding: 0.75rem;
  background-color: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.kanban-card {
  padding: 0.875rem;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ---------- Spinner ---------- */
.loader {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: loader-spin 0.8s linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }