/*!
 * ser-ui.css — Design System da Comunidade SER v2
 * Tema navy "GovTech" (claro) + dark mode via [data-theme="dark"].
 * Contrato oficial de tokens --ser-* (light em :root, dark sobrescrito).
 * Fonte ÚNICA de identidade visual p/ TODOS os apps do Be-Server.
 *
 * Uso (qualquer app HTML):
 *   <script src="https://ui.comunidadeser.com/ser-theme.js"></script>
 *   <link rel="stylesheet" href="https://ui.comunidadeser.com/ser-ui.css">
 *
 * Apps Tailwind/Vite (ex.: Patrimônio) podem importar só os tokens (:root).
 * Atualiza aqui → todos os sistemas mudam juntos.
 */
/* ===== Fontes self-hosted (vendor/fonts/ — ver README de procedência).
   Variáveis, subset latin (cobre PT-BR). Sem Google no caminho crítico:
   funciona offline/LAN e sem tracking. ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('vendor/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('vendor/fonts/material-symbols-outlined.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* Fontes institucionais */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "IBM Plex Sans", "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Raio sóbrio (4px base) */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  /* ===== Contrato oficial --ser-* (light: navy GovTech) ===== */
  --ser-bg: #f8fafc;
  --ser-surface: #ffffff;
  --ser-surface-2: #f1f5f9;
  --ser-surface-3: #e2e8f0;
  --ser-border: #e2e8f0;
  --ser-border-strong: #cbd5e1;
  --ser-text: #1e293b;
  --ser-text-strong: #002147;
  --ser-text-dim: #334155;
  --ser-text-muted: #64748b;
  --ser-text-inverse: #ffffff;
  --ser-primary: #002147;
  --ser-primary-hover: #073d70;
  --ser-primary-rgb: 0 33 71;
  --ser-primary-rgb-legacy: 0,33,71;
  --ser-on-primary: #ffffff;
  --ser-accent: #002147;
  --ser-accent-hover: #073d70;
  --ser-on-accent: #ffffff;
  --ser-success: #10b981;
  --ser-warning: #f59e0b;
  --ser-danger: #ef4444;
  --ser-info: #3b82f6;
  --ser-success-soft: rgb(16 185 129/.12);
  --ser-warning-soft: rgb(245 158 11/.14);
  --ser-danger-soft: rgb(239 68 68/.12);
  --ser-info-soft: rgb(59 130 246/.12);
  /* Status como TEXTO (AA sobre surface e sobre os -soft).
     A cor base (--ser-success etc.) é para fundos/ícones/bordas — como texto ela reprova. */
  --ser-success-text: #047857;
  --ser-warning-text: #b45309;
  --ser-danger-text: #b91c1c;
  --ser-info-text: #1d4ed8;
  --ser-row-hover: #f0f7ff;
  --ser-focus-ring: rgb(0 33 71/.5);
  --ser-shadow-sm: 0 1px 2px rgb(15 23 42/.03);
  --ser-shadow-md: 0 4px 20px rgb(15 23 42/.10);
  --ser-navy-900: #001124;
  --ser-gold: #002147;

  /* ===== compat legacy — não usar em código novo ===== */
  --navy: var(--ser-primary);
  --navy-600: var(--ser-primary-hover);
  --navy-700: #02315f;
  --navy-900: var(--ser-navy-900);
  --navy-rgb: var(--ser-primary-rgb-legacy);
  --navy-soft: var(--ser-primary-hover);
  --surface: var(--ser-bg);
  --surface-card: var(--ser-surface);
  --surface2: var(--ser-surface-2);
  --surface3: var(--ser-surface-3);
  --line: var(--ser-border);
  --ink: var(--ser-text);
  --ink-strong: var(--ser-text-strong);
  --muted: var(--ser-text-muted);
  --blue-50: var(--ser-row-hover);
  --success: var(--ser-success);
  --warning: var(--ser-warning);
  --danger: var(--ser-danger);
  --bg: var(--ser-bg);
  --card: var(--ser-surface);
  --card2: var(--ser-surface-2);
  --hi: var(--ser-surface-3);
  --txt: var(--ser-text);
  --mut: var(--ser-text-muted);
  --warm: var(--ser-text-dim);
  --bd: var(--ser-border);
  --bd2: var(--ser-border-strong);
  --ac: var(--ser-accent);
  --ac-hi: var(--ser-accent-hover);
  --ac-rgb: var(--ser-primary-rgb-legacy);
  --on-ac: var(--ser-on-accent);
  --ac-soft: rgb(var(--ser-primary-rgb)/.12);
  --ac-line: rgb(var(--ser-primary-rgb)/.3);
  --border: var(--ser-border);
  --border-active: var(--ser-border-strong);
  --text: var(--ser-text);
  --text-dim: var(--ser-text-dim);
  --text-muted: var(--ser-text-muted);
  --text-on-navy: var(--ser-on-primary);
  --navy-glow: rgb(var(--ser-primary-rgb)/.08);
  --blue: #2471a3;
  --gold: var(--ser-gold);
  --green: var(--ser-success);
  --red: var(--ser-danger);
  --ok: var(--ser-success);
  --bad: var(--ser-danger);
}

/* ===== Dark mode (paleta slate aprovada) ===== */
[data-theme="dark"] {
  color-scheme: dark;

  --ser-bg: #0f172a;
  --ser-surface: #1e293b;
  --ser-surface-2: #334155;
  --ser-surface-3: #475569;
  --ser-border: #334155;
  --ser-border-strong: #475569;
  --ser-text: #f1f5f9;
  --ser-text-strong: #ffffff;
  --ser-text-dim: #cbd5e1;
  --ser-text-muted: #94a3b8;
  --ser-text-inverse: #0f172a;
  --ser-primary: #60a5fa;
  --ser-primary-hover: #93c5fd;
  --ser-primary-rgb: 96 165 250;
  --ser-primary-rgb-legacy: 96,165,250;
  --ser-on-primary: #0f172a;
  --ser-accent: #60a5fa;
  --ser-accent-hover: #93c5fd;
  --ser-on-accent: #0f172a;
  --ser-success-text: #34d399;
  --ser-warning-text: #fbbf24;
  --ser-danger-text: #f87171;
  --ser-info-text: #93c5fd;
  --ser-row-hover: #334155;
  --ser-focus-ring: rgb(96 165 250/.6);
  --ser-shadow-sm: 0 1px 2px rgb(0 0 0/.3);
  --ser-shadow-md: 0 4px 20px rgb(0 0 0/.45);
  --ser-gold: #fbbf24;

  /* aliases legados com alpha/cor específicos no dark */
  --navy-glow: rgb(var(--ser-primary-rgb)/.12);
  --blue: #60a5fa;

  /* sidebar mais escura que o conteúdo */
  --ser-sidebar-bg: #0b1220;
  --ser-sidebar-surface: #0f172a;
  --ser-sidebar-surface-2: #1e293b;
  --ser-sidebar-text: #e2e8f0;
  --ser-sidebar-text-bright: #ffffff;
  --ser-sidebar-muted: #94a3b8;
  --ser-sidebar-border: rgba(255,255,255,.08);
  --ser-sidebar-border-strong: rgba(255,255,255,.16);
  --ser-sidebar-border-active: rgba(255,255,255,.16);
  --ser-sidebar-highlight: rgba(255,255,255,.08);
  --ser-sidebar-hover: rgba(255,255,255,.06);
  --ser-sidebar-hover-on: rgba(255,255,255,.12);
}

/* ===== Reset & Base ===== */
* { box-sizing: border-box; }
html { font-family: var(--font-sans); }
body {
  background-color: var(--ser-bg);
  color: var(--ser-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  color: var(--ser-text-strong);
}
a { color: var(--ser-primary); }

/* Ícones lineares (Material Symbols Outlined) */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ---- Botões ---- */
.ser-btn, .btn-primary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background-color: var(--ser-primary); color: var(--ser-on-primary); border: none;
  border-radius: var(--radius); padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 600; cursor: pointer;
  transition: background-color 0.15s ease;
}
.ser-btn:hover, .btn-primary:hover { background-color: var(--ser-primary-hover); }
.ser-btn:disabled, .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.ser-btn-secondary, .btn-secondary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background-color: transparent; color: var(--ser-primary);
  border: 1px solid var(--ser-primary); border-radius: var(--radius);
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  transition: background-color 0.15s ease;
}
.ser-btn-secondary:hover, .btn-secondary:hover { background-color: var(--ser-row-hover); }
.ser-btn:focus-visible, .btn-primary:focus-visible,
.ser-btn-secondary:focus-visible, .btn-secondary:focus-visible {
  outline: 3px solid var(--ser-focus-ring); outline-offset: 2px;
}

/* Toque: em tela de toque, controles atingem o alvo mínimo de 44px
   sem inflar a densidade do desktop. */
@media (pointer: coarse) {
  .ser-btn, .btn-primary, .ser-btn-secondary, .btn-secondary,
  .ser-input, .input { min-height: 44px; }
}

/* ---- Card ---- */
.ser-card, .card {
  background-color: var(--ser-surface);
  border: 1px solid var(--ser-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--ser-shadow-sm);
}

/* ---- Inputs ---- */
.ser-input, .input {
  width: 100%; border: 1px solid var(--ser-border-strong); border-radius: var(--radius);
  padding: 0.5rem 0.75rem; font-size: 0.875rem; background-color: var(--ser-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ser-input:focus, .input:focus {
  outline: none; border-color: var(--ser-primary);
  box-shadow: 0 0 0 2px var(--ser-focus-ring);
}

/* ---- Badges / chips de status ---- */
.ser-badge, .badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 600; line-height: 1.4;
}
.badge-success { background-color: var(--ser-success-soft); color: var(--ser-success-text); }
.badge-warning { background-color: var(--ser-warning-soft); color: var(--ser-warning-text); }
.badge-danger  { background-color: var(--ser-danger-soft);  color: var(--ser-danger-text); }
.badge-info    { background-color: var(--ser-info-soft);     color: var(--ser-info-text); }
.badge-neutral { background-color: var(--ser-surface-2);     color: var(--ser-text-dim); }

/* ---- Tabelas (cabeçalho caixa-alta + hover de linha) ---- */
table thead th {
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.6875rem; font-weight: 600; color: var(--ser-text-muted); text-align: left;
}
table tbody tr:hover { background-color: var(--ser-row-hover); }

/* ===== FAB — botão(ões) de ação flutuante (padrão do sistema, ex-cameras) =====
   Um botão:      <button class="ser-fab" aria-label="Atualizar">↻</button>
   Vários (empilham sem colidir, o principal fica embaixo):
     <div class="ser-fab-stack">
       <button class="ser-fab theme-float ser-fab--secondary" aria-label="Tema">☀</button>
       <button class="ser-fab" aria-label="Atualizar">↻</button>
     </div>
   O .theme-float (toggle de tema já presente nos apps) herda o visual e a
   posição — vira o FAB padrão sem mexer no markup. Respeita safe-area do celular. */
.ser-fab,
.theme-float {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: none; border-radius: 50%;
  background: var(--ser-accent); color: var(--ser-on-accent);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  box-shadow: var(--ser-shadow-md, 0 4px 20px rgb(15 23 42/.10));
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ser-fab:hover,
.theme-float:hover { background: var(--ser-accent-hover); transform: translateY(-2px) scale(1.05); }
.ser-fab:active,
.theme-float:active { transform: translateY(0) scale(.97); }
.ser-fab:focus-visible,
.theme-float:focus-visible { outline: 3px solid var(--ser-focus-ring); outline-offset: 2px; }

/* Variantes */
.ser-fab--sm { width: 44px; height: 44px; font-size: 1.15rem; }   /* alcance mínimo de toque */
.ser-fab--secondary {
  background: var(--ser-surface);
  color: var(--ser-text);
  box-shadow: 0 2px 12px rgb(15 23 42/.14);
}
.ser-fab--secondary:hover { background: var(--ser-surface-2, var(--ser-surface)); }

/* Empilhamento: várias FABs no mesmo canto sem sobrepor */
.ser-fab-stack {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex; flex-direction: column-reverse; align-items: center; gap: .75rem;
}
.ser-fab-stack .ser-fab,
.ser-fab-stack .theme-float { position: static; right: auto; bottom: auto; }

@media (prefers-reduced-motion: reduce) {
  .ser-fab, .theme-float { transition: none; }
  .ser-fab:hover, .theme-float:hover { transform: none; }
}

/* ===== Print (sempre light) ===== */
@media print {
  :root, [data-theme="dark"] { color-scheme: light; }
  body { background: #fff; color: #111827; }
  .ser-fab, .theme-float, .ser-fab-stack { display: none !important; }
}