/* ══════════════════════════════════════════════════════════════════
   EASTech System — Design System

   Estrutura herdada do GUUG Comercial, retematizada para a marca
   EASTech: grafite azulado (#1B2B48) e o ciano do logotipo (#009DDC).

   Carregue este arquivo antes de qualquer CSS de página. Nenhuma view
   deve declarar cor, raio ou sombra na mão — tudo sai das variáveis
   daqui, e é isso que faz o tema escuro funcionar sem tocar em
   componente nenhum.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marca ─────────────────────────────────────────────────── */
  --eas-blue-100: #E6F6FC;
  --eas-blue-200: #C2E9F7;
  --eas-blue-300: #8FD8F0;
  --eas-blue-400: #4FC3E8;
  --eas-blue-500: #22ACDD;
  --eas-blue-600: #009DDC;   /* ciano do logotipo — ações e destaques */
  --eas-blue-700: #007BB0;
  --eas-blue-800: #005D86;

  --eas-ink-900: #0F1A2E;    /* grafite mais profundo */
  --eas-ink-800: #16223A;
  --eas-ink-700: #1B2B48;    /* azul-marinho institucional */
  --eas-ink-600: #243454;
  --eas-ink-500: #33456B;

  --eas-gray-100: #F5F7FA;
  --eas-gray-200: #E9EDF2;
  --eas-gray-300: #DCE2EA;
  --eas-gray-400: #C1CAD6;

  /* ── Semânticas ────────────────────────────────────────────── */
  --accent:        var(--eas-blue-600);
  --accent-soft:   var(--eas-blue-400);
  --accent-dim:    rgba(0, 157, 220, .13);
  --accent-border: rgba(0, 157, 220, .38);
  --accent-dark:   var(--eas-blue-700);

  --green:      #16A34A;
  --green-dim:  rgba(22, 163, 74, .13);
  --red:        #DC2626;
  --red-dim:    rgba(220, 38, 38, .12);
  --blue:       #2563EB;
  --blue-dim:   rgba(37, 99, 235, .12);
  --yellow:     #D97706;
  --yellow-dim: rgba(217, 119, 6, .14);
  --purple:     #7C3AED;
  --purple-dim: rgba(124, 58, 237, .12);
  --teal:       #0D9488;
  --teal-dim:   rgba(13, 148, 136, .12);

  /* ── Superfícies ───────────────────────────────────────────── */
  --bg:        #F2F5F9;
  --surface-0: #FBFCFD;
  --surface-1: #FFFFFF;
  --surface-2: #F7F9FC;
  --surface-3: #EEF2F7;
  --surface-4: #E2E8F0;
  --border:    rgba(15, 26, 46, .08);
  --border-2:  rgba(15, 26, 46, .14);
  --txt:       #121B28;
  --txt-muted: #556375;
  --txt-dim:   #8B97A8;
  --bg-input:  #FFFFFF;
  --bg-hover:  rgba(15, 26, 46, .035);

  --shadow-sm: 0 1px 2px rgba(15, 26, 46, .07);
  --shadow-md: 0 4px 14px rgba(15, 26, 46, .09);
  --shadow:    0 12px 32px rgba(15, 26, 46, .13);
  --shadow-lg: 0 24px 60px rgba(15, 26, 46, .18);

  /* ── Menu lateral ──────────────────────────────────────────── */
  --sb-bg:        var(--eas-ink-700);
  --sb-bg-2:      var(--eas-ink-800);
  --sb-border:    rgba(255, 255, 255, .07);
  --sb-txt:       rgba(255, 255, 255, .60);
  --sb-txt-dim:   rgba(255, 255, 255, .32);
  --sb-hover:     rgba(255, 255, 255, .07);
  --sb-hover-txt: rgba(255, 255, 255, .96);

  /* ── Métricas ──────────────────────────────────────────────── */
  --sidebar-w:         256px;
  --sidebar-compact-w: 78px;
  --topbar-h:          62px;
  --radius-sm:  7px;
  --radius:     11px;
  --radius-lg:  16px;
  --radius-full: 9999px;
  --transition: .24s cubic-bezier(.4, 0, .2, 1);

  --font-body:    'Plus Jakarta Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
}

/* ══ RESET ════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  overflow-x: clip;
  padding-left: var(--sidebar-w);
  transition: padding-left var(--transition);
}
body.sidebar-compact { padding-left: var(--sidebar-compact-w); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; }

/* Só a barra da janela é desenhada; as internas somem (ver "Rolagem sem
   barra", no fim do arquivo). */
html::-webkit-scrollbar { width: 9px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 5px; }
html::-webkit-scrollbar-thumb:hover { background: var(--eas-gray-400); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ══ MENU LATERAL ═════════════════════════════════════════════ */
.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  z-index: 1200;
  display: flex; flex-direction: column;
  transition: width var(--transition), transform var(--transition);
  overflow: hidden;
}
/* Menu solto: o JavaScript aplica .close ao retirar o mouse e a remove ao
   entrar de novo. Menu fixo (.locked) fica sempre aberto. */
.sidebar.close { width: var(--sidebar-compact-w); }

.sidebar-brand {
  position: relative;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--sb-border);
}
.sidebar-brand-mark {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--eas-blue-600), var(--eas-blue-800));
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -.03em;
}
.sidebar-brand-text {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: #fff; white-space: nowrap; letter-spacing: -.02em; line-height: 1.1;
}
.sidebar-brand-text small {
  display: block; font-size: 9px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sb-txt-dim);
}
.sidebar.close .sidebar-brand { justify-content: center; padding: 0; }
.sidebar.close .sidebar-brand-text { display: none; }

.sidebar-toggle {
  position: absolute; top: 20px; right: 12px;
  background: none; border: 0; color: var(--sb-txt-dim);
  font-size: 16px; line-height: 1; padding: 2px;
  transition: color var(--transition);
}
.sidebar-toggle:hover { color: #fff; }
/* Com o menu estreito não há espaço para o botão; ele reaparece assim que o
   menu se expande — que é exatamente quando dá para clicar nele. */
.sidebar.close .sidebar-toggle { opacity: 0; pointer-events: none; }
.sidebar-toggle[aria-pressed="false"] { color: var(--eas-blue-400); }
.sidebar-mobile-close { display: none; }

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0 8px; }

.nav-section {
  padding: 15px 20px 5px;
  font-size: 8.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sb-txt-dim);
  white-space: nowrap;
}
.sidebar.close .nav-section { padding: 14px 0 6px; text-align: center; font-size: 0; }
.sidebar.close .nav-section::after {
  content: ''; display: block; width: 22px; height: 1px;
  margin: 0 auto; background: var(--sb-border);
}

.nav-item {
  display: flex; align-items: center; gap: 12px;
  margin: 2px 10px; padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--sb-txt); font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; position: relative;
  transition: background var(--transition), color var(--transition);
}
.nav-item > i { font-size: 15px; flex-shrink: 0; width: 22px; text-align: center; }
.nav-item:hover { background: var(--sb-hover); color: var(--sb-hover-txt); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(0, 157, 220, .22), rgba(0, 157, 220, .05));
  color: #fff; font-weight: 600;
}
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--eas-blue-600);
}
.nav-item.active > i { color: var(--eas-blue-400); }
.nav-badge {
  margin-left: auto; background: var(--red); color: #fff;
  border-radius: var(--radius-full); font-size: 10px; font-weight: 700;
  padding: 1px 7px; line-height: 1.6; flex-shrink: 0;
}
.sidebar.close .nav-item { justify-content: center; padding: 11px 0; margin: 2px 12px; }
.sidebar.close .nav-item span:not(.nav-badge) { display: none; }
.sidebar.close .nav-item .nav-badge {
  position: absolute; top: 4px; right: 6px; margin: 0; padding: 0 4px; font-size: 9px;
}

.sidebar-footer {
  border-top: 1px solid var(--sb-border);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.sidebar-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--eas-blue-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .8rem; overflow: hidden;
}
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user { min-width: 0; flex: 1; }
.sidebar-user strong {
  display: block; font-size: 12.5px; color: rgba(255, 255, 255, .92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user small { font-size: 10.5px; color: var(--sb-txt); }
.sidebar-logout {
  background: rgba(255, 255, 255, .07); border: 0; border-radius: 9px;
  color: var(--sb-txt); width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: background var(--transition), color var(--transition);
}
.sidebar-logout:hover { background: rgba(220, 38, 38, .28); color: #fff; }
.sidebar.close .sidebar-footer { flex-direction: column; gap: 10px; padding: 12px 6px; }
.sidebar.close .sidebar-user { display: none; }

/* ══ BARRA SUPERIOR ═══════════════════════════════════════════ */
.topbar {
  height: var(--topbar-h);
  position: sticky; top: 0; z-index: 900;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
}
.topbar-title { min-width: 0; }
.topbar-title h1 {
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-title p {
  font-size: 11px; color: var(--txt-dim); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-btn {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--txt-muted); font-size: 15px; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.topbar-btn:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-dim); }
.topbar-btn .dot {
  position: absolute; top: 7px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--surface-1);
}
.menu-toggle-mobile { display: none; }

/* ── Ocultar a barra superior (web) ──────────────────────────────
   Ganha espaço vertical em telas cheias. O estado fica no navegador. */
.topbar-hide { display: none; }
body.header-hidden .topbar { display: none; }

.topbar-restore {
  position: fixed; top: 8px; right: 16px; z-index: 950;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 26px; border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-1); color: var(--txt-muted); font-size: 14px;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: color var(--transition), border-color var(--transition);
}
.topbar-restore:hover { color: var(--accent); border-color: var(--accent-border); }
.topbar-restore[hidden] { display: none; }

@media (min-width: 901px) { .topbar-hide { display: flex; } }
/* No celular a barra some por outro caminho (a navegação fica na barra
   inferior), então o toggle não se aplica. */
@media (max-width: 900px) {
  body.header-hidden .topbar { display: flex; }
  .topbar-restore { display: none; }
}

/* ══ LAYOUT ═══════════════════════════════════════════════════ */
.main-wrapper { min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
.app-view { flex: 1; min-width: 0; padding: 24px; max-width: 1680px; width: 100%; margin: 0 auto; }

.app-footer {
  padding: 10px 24px 14px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--txt-dim); font-size: 10.5px; font-weight: 500;
  letter-spacing: .025em; line-height: 1;
  opacity: .72; flex-wrap: wrap; text-align: center;
}
.app-footer-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .65; }

/* ══ CABEÇALHO DE PÁGINA ══════════════════════════════════════ */
.page-header {
  display: flex; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.page-header h1 { font-size: 1.5rem; letter-spacing: -.015em; position: relative; padding-left: 14px; }
.page-header h1::before {
  content: ''; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, var(--eas-blue-400), var(--eas-blue-700));
}
.page-header p { color: var(--txt-muted); font-size: 13px; margin-top: 4px; }
.page-header-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--txt-dim); margin-bottom: 8px;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb i { font-size: 11px; opacity: .6; }

/* ══ CARTÕES ══════════════════════════════════════════════════ */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}
.card + .card { margin-top: 18px; }
/* Dentro de um grid os cartões são vizinhos lado a lado, não empilhados: o
   espaço entre eles é o gap. Sem zerar a margem, o segundo cartão de cada
   linha nasce 18px mais baixo que o primeiro. */
.grid > .card + .card { margin-top: 0; }
.grid > .card { height: 100%; display: flex; flex-direction: column; }
.grid > .card > .card-body { flex: 1 1 auto; }
.card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card-head h2, .card-head h3 { font-size: .98rem; font-weight: 700; min-width: 0; }
.card-head p { font-size: 12px; color: var(--txt-muted); margin-top: 2px; }
.card-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.card-body { padding: 20px; }
.card-body.tight { padding: 0; }
.card-foot {
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card-brand {
  background: linear-gradient(135deg, var(--eas-ink-700), var(--eas-ink-600));
  border: 0; color: #fff;
}
.card-brand .card-head { border-bottom-color: rgba(255, 255, 255, .09); }
.card-brand .stat-label, .card-brand .card-head p { color: rgba(255, 255, 255, .5); }
.card-brand .stat-value { color: #fff; }
.card-brand a { color: var(--eas-blue-400); }

/* ══ ESTATÍSTICAS ═════════════════════════════════════════════ */
.stats-grid {
  display: grid; gap: 14px; margin-bottom: 20px;
  /* auto-fit e piso com min(): com auto-fill sobram trilhas vazias, e sem o
     min() o piso da trilha pode ficar maior que o próprio container. */
  grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr));
}
.stat {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  position: relative; overflow: hidden; min-width: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-dim);
  display: flex; align-items: center; gap: 6px;
}
.stat-value {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 800;
  letter-spacing: -.03em; margin-top: 8px; line-height: 1.1;
  overflow-wrap: anywhere;
}
.stat-value.sm { font-size: 1.3rem; }
.stat-sub { font-size: 11.5px; color: var(--txt-muted); margin-top: 5px; }
.stat-link { display: inline-block; margin-top: 12px; font-size: 11.5px; font-weight: 700; color: var(--accent); }
.stat-link:hover { color: var(--accent-dark); }
.stat-icon {
  position: absolute; right: 14px; top: 14px;
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--accent-dim); color: var(--accent);
}
.stat.is-green .stat-icon  { background: var(--green-dim);  color: var(--green); }
.stat.is-red .stat-icon    { background: var(--red-dim);    color: var(--red); }
.stat.is-yellow .stat-icon { background: var(--yellow-dim); color: var(--yellow); }
.stat.is-purple .stat-icon { background: var(--purple-dim); color: var(--purple); }
.stat.is-teal .stat-icon   { background: var(--teal-dim);   color: var(--teal); }
.stat.is-blue .stat-icon   { background: var(--blue-dim);   color: var(--blue); }

/* ══ GRID ═════════════════════════════════════════════════════ */
.grid { display: grid; gap: 18px; }
/* O min(...) impede que o piso da trilha fique maior que o container: sem ele
   um grid dentro de um cartão estreito vaza para fora da borda. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }

/* ══ BOTÕES ═══════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: all var(--transition);
}
.btn i { font-size: 14px; }
.btn:disabled, .btn.disabled { opacity: .5; pointer-events: none; }

.btn-accent, .btn-primary {
  background: var(--eas-blue-600); color: #fff;
  box-shadow: 0 2px 8px rgba(0, 157, 220, .30);
}
.btn-accent:hover, .btn-primary:hover {
  background: var(--eas-blue-700); color: #fff;
  box-shadow: 0 4px 14px rgba(0, 157, 220, .38);
}

.btn-dark { background: var(--eas-ink-700); color: #fff; }
.btn-dark:hover { background: var(--eas-ink-600); color: #fff; }

.btn-outline { background: transparent; border-color: var(--border-2); color: var(--txt-muted); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.btn-ghost { background: transparent; color: var(--txt-muted); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--txt); }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { filter: brightness(.92); color: #fff; }

.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { filter: brightness(.92); color: #fff; }

.btn-warning { background: var(--yellow); color: #fff; }
.btn-warning:hover { filter: brightness(.92); color: #fff; }

.btn-whats { background: #1FA855; color: #fff; }
.btn-whats:hover { filter: brightness(.93); color: #fff; }

.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-sm i { font-size: 12px; }
.btn-lg { height: 44px; padding: 0 22px; font-size: 14px; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn-block { width: 100%; }

/* ══ FORMULÁRIOS ══════════════════════════════════════════════ */
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }

/* As doze larguras existem todas: uma classe sem regra faria o campo cair
   para 1/12 e aparecer espremido no meio da linha. */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Grade uniforme: todos os campos com a mesma largura. É o que usar quando a
   seção tem campos condicionais — com spans fixos, o campo que some deixa
   buraco e o último fica sozinho e estreito. */
.form-grid.uniforme { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.form-grid.uniforme > .field { grid-column: auto; }
.form-grid.uniforme > .field.col-12 { grid-column: 1 / -1; }

.field, .form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .form-group > label {
  font-size: 11.5px; font-weight: 600; color: var(--txt-muted);
  display: flex; align-items: center; gap: 5px;
}
.field label .req { color: var(--red); }
.field .hint, .hint { font-size: 11px; color: var(--txt-dim); line-height: 1.5; }
.field .err { font-size: 11.5px; color: var(--red); font-weight: 500; }

.input, .select, .textarea, .form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="tel"], input[type="url"], input[type="search"],
input[type="month"], input[type="week"], input[type="file"],
select, textarea {
  width: 100%; min-height: 38px; padding: 8px 12px;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--bg-input); color: var(--txt); font-size: 13px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
textarea { min-height: 90px; resize: vertical; line-height: 1.55; }
input[type="file"] { padding: 7px 10px; font-size: 12px; }
select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556375' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
  padding-right: 32px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly] {
  background: var(--surface-3); color: var(--txt-dim); cursor: not-allowed;
}
input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: var(--red); box-shadow: 0 0 0 3px var(--red-dim);
}
::placeholder { color: var(--txt-dim); }

.input-group { display: flex; align-items: stretch; min-width: 0; }
.input-group .prefix, .input-group .suffix {
  display: flex; align-items: center; padding: 0 11px;
  background: var(--surface-3); border: 1px solid var(--border-2);
  font-size: 12px; color: var(--txt-muted); white-space: nowrap;
}
.input-group .prefix { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.input-group .suffix { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.input-group .prefix + input, .input-group .prefix + select { border-radius: 0 var(--radius) var(--radius) 0; }

.check {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; cursor: pointer; user-select: none;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 17px; height: 17px; min-height: 0; margin-top: 1px;
  accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
}
.check span { color: var(--txt-muted); line-height: 1.45; }
/* `.field label` é mais específico que `.check` e encolheria o texto. */
.field label.check { font-size: 13px; font-weight: 500; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { display: none; }
.switch .track {
  width: 40px; height: 22px; border-radius: var(--radius-full);
  background: var(--surface-4); position: relative; transition: background var(--transition);
  flex-shrink: 0;
}
.switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-sm); transition: transform var(--transition);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(18px); }

.form-section { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 20px; }
.form-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.form-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px; display: flex; align-items: center; gap: 7px;
}
.form-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--border);
}

/* ══ FILTROS ══════════════════════════════════════════════════ */
.filters {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px;
}
.filters form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { flex: 1 1 165px; min-width: 140px; }
.filters .field.wide { flex: 2 1 260px; }
.filters .actions { display: flex; gap: 8px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-full);
  background: var(--accent-dim); color: var(--accent-dark);
  font-size: 11.5px; font-weight: 600;
}
.chip a { opacity: .65; font-size: 13px; line-height: 1; }
.chip a:hover { opacity: 1; }

/* ══ TABELAS ══════════════════════════════════════════════════ */
.table-wrap, .table-responsive { overflow-x: auto; }
table, .table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; padding: 11px 14px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--txt-dim);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
thead th[data-sortable="1"] { cursor: pointer; user-select: none; }
thead th[data-sortable="1"]:hover { color: var(--accent); }
thead th[aria-sort]::after { content: ' ↑'; opacity: .8; }
thead th[aria-sort="descending"]::after { content: ' ↓'; }
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions, th.actions { text-align: right; white-space: nowrap; width: 1%; }
td.actions .btn + .btn { margin-left: 4px; }
/* Ações que exigem POST (com CSRF) vêm dentro de um form; sem isto ele
   quebraria a linha e empilharia os botões. */
td.actions form { display: inline-flex; margin-left: 4px; vertical-align: middle; }
.table-empty { padding: 48px 20px; text-align: center; color: var(--txt-dim); }
.table-empty i { font-size: 34px; opacity: .35; display: block; margin-bottom: 10px; }
.table-empty strong { display: block; color: var(--txt-muted); font-size: 14px; margin-bottom: 4px; }

.cell-title { font-weight: 600; color: var(--txt); display: block; }
.cell-sub { font-size: 11.5px; color: var(--txt-dim); display: block; margin-top: 1px; }
.cell-code { font-family: var(--font-mono); font-size: 11.5px; color: var(--txt-dim); }

/* Identidade de pessoa em célula de tabela */
.identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.identity > div { min-width: 0; }

/* ══ SELOS ════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-full);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; line-height: 1.6;
}
.badge i { font-size: 10px; }
.badge-neutral { background: var(--surface-3); color: var(--txt-muted); }
.badge-accent  { background: var(--accent-dim); color: var(--accent-dark); }
.badge-green   { background: var(--green-dim); color: var(--green); }
.badge-red     { background: var(--red-dim); color: var(--red); }
.badge-yellow  { background: var(--yellow-dim); color: var(--yellow); }
.badge-blue    { background: var(--blue-dim); color: var(--blue); }
.badge-purple  { background: var(--purple-dim); color: var(--purple); }
.badge-teal    { background: var(--teal-dim); color: var(--teal); }
.badge-dark    { background: var(--eas-ink-700); color: #fff; }
.badge-lg { padding: 5px 12px; font-size: 11.5px; }

.dot-status { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ══ ALERTAS ══════════════════════════════════════════════════ */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid; font-size: 13px; margin-bottom: 18px;
  line-height: 1.5;
}
.alert i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.alert-success { background: var(--green-dim);  border-color: rgba(22, 163, 74, .28);  color: #14532D; }
.alert-error   { background: var(--red-dim);    border-color: rgba(220, 38, 38, .28);  color: #7F1D1D; }
.alert-warning { background: var(--yellow-dim); border-color: rgba(217, 119, 6, .28);  color: #78350F; }
.alert-info    { background: var(--accent-dim); border-color: var(--accent-border);    color: #024A66; }
.alert-close { margin-left: auto; background: none; border: 0; color: inherit; opacity: .55; font-size: 16px; line-height: 1; }
.alert-close:hover { opacity: 1; }

/* ══ ABAS ═════════════════════════════════════════════════════ */
.tabs {
  display: flex; gap: 2px; overflow-x: auto;
  border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.tab {
  padding: 10px 15px; font-size: 13px; font-weight: 600;
  color: var(--txt-muted); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 6px;
  transition: color var(--transition), border-color var(--transition);
}
.tab i { font-size: 13px; }
.tab:hover { color: var(--txt); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab .count {
  background: var(--surface-3); color: var(--txt-dim);
  border-radius: var(--radius-full); padding: 0 6px;
  font-size: 10.5px; font-weight: 700;
}
.tab.active .count { background: var(--accent-dim); color: var(--accent-dark); }

.tabs-scroll { overflow-x: auto; flex-wrap: nowrap; }
.tabs-scroll .tab { flex-shrink: 0; }
.tabs-sub { margin-top: -6px; margin-bottom: 18px; border-bottom: 0; gap: 4px; }
.tabs-sub .tab {
  padding: 6px 12px; font-size: 12px; border: 1px solid var(--border);
  border-radius: var(--radius-full); background: var(--surface-1);
}
.tabs-sub .tab.active { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent-dark); }

/* ══ PAGINAÇÃO ════════════════════════════════════════════════ */
.pagination {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--txt-muted);
}
.pagination .pages { margin-left: auto; display: flex; gap: 4px; }
.pagination .pages a, .pagination .pages span {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-weight: 600; transition: all var(--transition);
}
.pagination .pages a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .pages .current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ══ LINHA DO TEMPO / CONVERSA ════════════════════════════════ */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px;
  width: 2px; background: var(--surface-4);
}
.tl-item { position: relative; padding-bottom: 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -30px; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-1); border: 2px solid var(--surface-4);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--txt-dim);
}
.tl-item.is-accent .tl-dot { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.tl-item.is-green .tl-dot  { border-color: var(--green); color: var(--green); background: var(--green-dim); }
.tl-item.is-red .tl-dot    { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.tl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tl-title { font-weight: 600; font-size: 13px; }
.tl-time { font-size: 11px; color: var(--txt-dim); margin-left: auto; }
.tl-body { font-size: 12.5px; color: var(--txt-muted); margin-top: 4px; line-height: 1.55; }

/* Bolhas de conversa (suporte) */
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; flex-direction: column; max-width: 78%; min-width: 0; }
.msg-in { align-self: flex-start; }
.msg-out { align-self: flex-end; align-items: flex-end; }
.msg-bubble {
  padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.55;
  background: var(--surface-2); border: 1px solid var(--border);
}
.msg-out .msg-bubble { background: var(--accent-dim); border-color: var(--accent-border); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-meta { display: block; margin-top: 4px; font-size: 10px; color: var(--txt-dim); }

/* ══ BARRA DE PROGRESSO ═══════════════════════════════════════ */
.progress { height: 7px; background: var(--surface-3); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar { height: 100%; border-radius: var(--radius-full); background: var(--accent); transition: width .6s ease; }
.progress-bar.is-green { background: var(--green); }
.progress-bar.is-red { background: var(--red); }
.progress-bar.is-yellow { background: var(--yellow); }

/* ══ AVATAR ═══════════════════════════════════════════════════ */
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-dim); color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .78rem; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: .68rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar-xl { width: 84px; height: 84px; font-size: 1.6rem; }

/* ══ MODAL ════════════════════════════════════════════════════ */
dialog.modal {
  border: 0; padding: 0; max-width: 92vw; width: 520px;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  background: var(--surface-1); color: var(--txt);
  /* O reset global zera a margem de tudo, inclusive a `margin: auto` que o
     navegador usa para centralizar o dialog — sem esta linha todo pop-up abre
     grudado no canto superior esquerdo. */
  margin: auto;
  max-height: calc(100vh - 48px);
}
dialog.modal::backdrop { background: rgba(15, 26, 46, .55); backdrop-filter: blur(3px); }
dialog.modal.wide { width: 820px; }
.modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.modal-head h3 { font-size: 1rem; min-width: 0; }
.modal-close { margin-left: auto; background: none; border: 0; font-size: 20px; color: var(--txt-dim); line-height: 1; }
.modal-close:hover { color: var(--txt); }
.modal-body { padding: 20px; max-height: 70vh; overflow-y: auto; }
.modal-foot {
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: var(--surface-2); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

/* ══ DROPDOWN ═════════════════════════════════════════════════ */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 800;
  min-width: 190px; padding: 6px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: none;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: 0; background: none;
  border-radius: var(--radius-sm); font-size: 12.5px;
  color: var(--txt-muted); text-align: left;
  transition: background var(--transition), color var(--transition);
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--bg-hover); color: var(--txt); }
.dropdown-menu a.danger, .dropdown-menu button.danger { color: var(--red); }
.dropdown-menu hr { border: 0; border-top: 1px solid var(--border); margin: 5px 0; }

/* ══ AUTENTICAÇÃO ═════════════════════════════════════════════ */
body.auth-body { padding-left: 0; padding-bottom: 0; background: var(--eas-ink-900); }
.auth-wrap { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.auth-visual {
  position: relative; overflow: hidden;
  background: var(--eas-ink-900);
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 60px; color: #fff;
}
.auth-visual::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(1200px 600px at 15% 20%, rgba(0, 157, 220, .18), transparent 60%);
}
.auth-visual > * { position: relative; z-index: 2; }
.auth-visual-content { position: relative; z-index: 2; min-width: 0; }

/* ── Marca na tela de acesso ──────────────────────────────────────
   O logotipo é tipográfico: "EAS" em branco e "Tech" no ciano da marca.
   Como as duas metades têm cores diferentes, cada uma é um <span> — daí os
   seletores por posição em vez de uma classe para cada pedaço. */
.auth-brand { margin-bottom: 38px; }
.auth-brand-name {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1;
}
.auth-brand-name > span:first-child { color: #fff; }
.auth-brand-name > span:last-child { color: var(--eas-blue-400); }
.auth-brand-subtitle {
  margin-top: 3px;
  font-size: .6rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255, 255, 255, .42);
}
/* A marca do painel escuro não aparece no celular: lá quem entra é a versão
   sobre fundo claro, dentro do formulário. */
@media (max-width: 900px) { .auth-brand-desktop { display: none; } }

.auth-mobile-brand-name {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1;
}
.auth-mobile-brand-name > span:first-child { color: var(--txt); }
.auth-mobile-brand-name > span:last-child { color: var(--accent); }

.auth-visual h1 { font-size: 2.4rem; line-height: 1.14; letter-spacing: -.03em; font-weight: 800; }
.auth-visual h1 span { color: var(--eas-blue-400); }
.auth-visual p { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, .66); max-width: 440px; line-height: 1.65; }
.auth-features { margin-top: 42px; display: flex; flex-direction: column; gap: 18px; }
.auth-feature { display: flex; gap: 14px; align-items: flex-start; }
.auth-feature-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: rgba(0, 157, 220, .16); color: var(--eas-blue-400);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.auth-feature strong { display: block; font-size: 13.5px; }
.auth-feature small { font-size: 12px; color: rgba(255, 255, 255, .52); line-height: 1.5; }
.auth-tagline {
  margin-top: 48px; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .34);
}
.auth-form-wrap {
  background: var(--surface-1);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px;
}
.auth-form { width: 100%; max-width: 372px; }
.auth-form h2 { font-size: 1.55rem; letter-spacing: -.02em; text-align: center; }
.auth-form > p { color: var(--txt-muted); font-size: 13px; margin: 6px 0 26px; text-align: center; }
.auth-form .field { margin-bottom: 15px; }
.auth-form .btn { margin-top: 6px; }
.auth-links { margin-top: 20px; text-align: center; font-size: 12.5px; color: var(--txt-muted); }
.auth-links a { color: var(--accent); font-weight: 600; }
.auth-links a:hover { text-decoration: underline; }
.auth-mobile-brand { display: none; align-items: center; justify-content: center; gap: 10px; margin-bottom: 26px; }

/* Login: composição mais limpa e tipografia proporcional à tela. */
.auth-login .auth-wrap { grid-template-columns: minmax(480px, 1.08fr) minmax(420px, .92fr); }
.auth-login .auth-visual { padding: clamp(44px, 6vw, 92px); }
.auth-login .auth-visual-content { width: min(100%, 680px); }
.auth-login .auth-brand { margin-bottom: clamp(48px, 8vh, 88px); }
.auth-login .auth-brand-name {
  font-size: clamp(2.35rem, 3.5vw, 3.65rem);
  font-weight: 800; line-height: .95; letter-spacing: -.055em;
}
.auth-login .auth-brand-name span:first-child { color: #fff; }
.auth-login .auth-brand-name span:last-child { color: var(--eas-blue-400); }
.auth-login .auth-brand-subtitle {
  margin-top: 10px; font-size: clamp(.64rem, .78vw, .78rem);
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .46);
}
.auth-login .auth-visual h1 {
  max-width: 650px; font-size: clamp(2.8rem, 5vw, 5.15rem);
  line-height: 1.02; letter-spacing: -.05em;
}
.auth-login .auth-visual p {
  max-width: 560px; margin-top: clamp(18px, 2.4vh, 26px);
  font-size: clamp(.96rem, 1.2vw, 1.16rem); line-height: 1.7;
}
.auth-login .auth-tagline {
  margin-top: clamp(42px, 9vh, 92px);
  font-size: clamp(.68rem, .78vw, .8rem); letter-spacing: .18em;
}
.auth-login .auth-form-wrap { padding: clamp(32px, 5vw, 72px); }
.auth-login .auth-form { max-width: 430px; }
.auth-login .auth-form h2 { font-size: clamp(1.8rem, 2.2vw, 2.25rem); }
.auth-login .auth-form > p { margin: 8px 0 32px; font-size: clamp(.84rem, 1vw, .95rem); }
.auth-login .auth-form .field { margin-bottom: 18px; }
.auth-login .auth-form .field label { font-size: 13px; }
.auth-login .auth-form input[type="email"],
.auth-login .auth-form input[type="password"] { min-height: 48px; padding: 0 14px; font-size: 14px; }
.auth-login .auth-form .btn-lg { height: 48px; font-size: 14.5px; }
.auth-login .auth-links { margin-top: 24px; font-size: 13px; line-height: 1.6; }
.auth-login .auth-mobile-brand-name {
  font-size: clamp(2rem, 9vw, 2.7rem); font-weight: 800;
  line-height: 1; letter-spacing: -.055em;
}
.auth-login .auth-mobile-brand-name span:first-child { color: var(--txt); }
.auth-login .auth-mobile-brand-name span:last-child { color: var(--accent); }

/* ══ UTILITÁRIOS ══════════════════════════════════════════════ */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-5 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 24px; }
.ml-auto { margin-left: auto; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--txt-muted); }
.text-dim { color: var(--txt-dim); }
.text-accent { color: var(--accent); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-yellow { color: var(--yellow); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.text-lg { font-size: 15px; }
.font-bold { font-weight: 700; }
.font-mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.break-word { overflow-wrap: anywhere; word-break: break-word; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.divider { height: 1px; background: var(--border); margin: 16px 0; border: 0; }

.empty-state { padding: 56px 20px; text-align: center; }
.empty-state i { font-size: 38px; color: var(--surface-4); display: block; margin-bottom: 14px; }
.empty-state strong { display: block; font-size: 15px; margin-bottom: 6px; }
.empty-state p { color: var(--txt-muted); font-size: 13px; max-width: 380px; margin: 0 auto 18px; line-height: 1.6; }

.definition { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 9px 16px; font-size: 13px; }
.definition dt {
  color: var(--txt-dim); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; align-self: center;
}
.definition dd { color: var(--txt); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

.eas-signature {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--txt-dim); text-align: center;
}

/* ══ NAVEGAÇÃO MOBILE ═════════════════════════════════════════ */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 1150;
  background: rgba(15, 26, 46, .5); border: 0; display: none;
}
body.sidebar-mobile-open .sidebar-backdrop { display: block; }

.mobile-nav { display: none; }

@media (max-width: 1100px) { .grid-sidebar { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 900px) {
  body, body.sidebar-compact { padding-left: 0; padding-bottom: 66px; }
  .sidebar, .sidebar.close { transform: translateX(-100%); width: var(--sidebar-w) !important; }
  body.sidebar-mobile-open .sidebar { transform: translateX(0); }

  /* No celular o menu é gaveta, nunca compacto: quando aberto mostra tudo.
     Cada seletor repete o do desktop — com especificidade menor a regra
     original venceria e os rótulos continuariam invisíveis. */
  .sidebar.close .sidebar-brand { justify-content: flex-start; padding: 0 18px; }
  .sidebar.close .sidebar-brand-text { display: block; }
  .sidebar.close .nav-item span:not(.nav-badge) { display: inline; }
  .sidebar.close .nav-section { padding: 15px 20px 5px; font-size: 8.5px; text-align: left; }
  .sidebar.close .nav-section::after { display: none; }
  .sidebar.close .nav-item { justify-content: flex-start; padding: 9px 12px; margin: 2px 12px; }
  .sidebar.close .sidebar-footer { flex-direction: row; padding: 12px 16px; }
  .sidebar.close .sidebar-user { display: block; }

  .sidebar-toggle, .sidebar.close .sidebar-toggle { display: none; }
  .sidebar-mobile-close {
    position: absolute; top: 11px; right: 14px;
    width: 40px; height: 40px; border: 0; border-radius: 9px;
    background: var(--sb-hover); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
  }

  .app-view { padding: 16px; }
  .topbar { padding: 0 16px; gap: 8px; }
  .topbar-actions { margin-left: auto; }
  .topbar-title p { display: none; }

  .auth-wrap { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-mobile-brand { display: flex; }
  .auth-form-wrap { min-height: 100vh; }
  .auth-login .auth-wrap { grid-template-columns: 1fr; }
  .auth-login .auth-form-wrap { padding: clamp(28px, 8vw, 54px); }
  .auth-login .auth-mobile-brand { margin-bottom: clamp(32px, 7vh, 54px); }

  /* Os campos são <div class="field col-N">: a classe começa em "field",
     então o seletor tem de casar "col-" em qualquer posição. */
  .form-grid > [class*="col-"] { grid-column: span 12; }
  .col-6.keep, .col-4.keep, .col-3.keep { grid-column: span 6; }
  .page-header h1 { font-size: 1.25rem; }
  .stat-value { font-size: 1.45rem; }
  .definition { grid-template-columns: 1fr; gap: 3px 0; }
  .definition dd { margin-bottom: 10px; }
  .msg { max-width: 88%; }

  .mobile-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    height: 62px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--surface-1); border-top: 1px solid var(--border);
    box-shadow: 0 -3px 16px rgba(15, 26, 46, .09);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-nav a, .mobile-nav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border: 0; background: none; position: relative;
    font-size: 9.5px; font-weight: 600; color: var(--txt-dim);
    min-width: 0; padding: 0 2px;
  }
  .mobile-nav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav i { font-size: 17px; }
  .mobile-nav .active { color: var(--accent); }
  .mobile-nav .nav-badge { position: absolute; top: 7px; right: 22%; margin: 0; }
}

@media (max-width: 560px) {
  .page-header-actions { width: 100%; }
  .page-header-actions .btn { flex: 1; }

  /* Filtros empilhados: os campos viram linhas de largura cheia que encolhem
     junto com a tela, em vez de brigar por 165px cada um. */
  .filters form { flex-direction: column; align-items: stretch; gap: 12px; }
  .filters .field, .filters .field.wide, .filters .actions { flex: 1 1 auto; min-width: 0; width: 100%; }
  .filters .actions .btn { flex: 1; }

  .card-head { padding: 14px; }
  .card-body { padding: 14px; }
  thead th, tbody td { padding: 10px; }
}

@media print {
  body { padding: 0; background: #fff; }
  .sidebar, .topbar, .mobile-nav, .app-footer, .page-header-actions,
  .filters, .btn, .pagination, .help-popover, .tour-overlay { display: none !important; }
  .card { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
  .app-view { padding: 0; max-width: none; }
}

/* ══ CENTRAL DE AJUDA ═════════════════════════════════════════ */
.help-search {
  display: flex; align-items: center; gap: 10px; position: relative;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px 12px 10px 42px;
  box-shadow: var(--shadow-sm); margin-bottom: 22px; flex-wrap: wrap;
}
.help-search > i {
  position: absolute; left: 16px; top: 22px; transform: translateY(-50%);
  font-size: 15px; color: var(--txt-dim); pointer-events: none;
}
.help-search input[type="search"] {
  flex: 1 1 180px; border: 0; background: none; min-height: 34px; padding: 0;
  font-size: 14px; box-shadow: none;
}
.help-search input[type="search"]:focus { outline: none; box-shadow: none; }

.help-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(248px, 100%), 1fr)); }
.help-category {
  display: block; padding: 18px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.help-category:hover { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.help-category-icon {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px;
  background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.help-category strong { display: block; font-size: 14px; margin-bottom: 5px; }
.help-category p { font-size: 12.5px; color: var(--txt-muted); line-height: 1.5; }
.help-category-count { display: inline-block; margin-top: 10px; font-size: 11px; color: var(--txt-dim); font-weight: 600; }

.help-featured { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.help-featured-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}
.help-featured-item:hover { border-color: var(--accent-border); background: var(--surface-2); }
.help-featured-item > i { font-size: 16px; color: var(--accent); margin-top: 2px; }
.help-featured-item strong { display: block; font-size: 13px; }
.help-featured-item small { display: block; font-size: 11.5px; color: var(--txt-muted); margin-top: 3px; line-height: 1.45; }

.help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 18px; align-items: start; }
.help-aside .card { position: sticky; top: calc(var(--topbar-h) + 16px); }

.help-list { display: flex; flex-direction: column; }
.help-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; border-top: 1px solid var(--border);
  transition: background var(--transition);
}
.help-list-item:first-child { border-top: 0; }
.help-list-item:hover { background: var(--surface-2); }
.help-list-item > div { min-width: 0; }
.help-list-item strong { display: block; font-size: 13.5px; font-weight: 600; }
.help-list-item small { display: block; font-size: 12px; color: var(--txt-muted); margin-top: 3px; line-height: 1.45; }
.help-list-item > i { color: var(--txt-dim); font-size: 14px; flex-shrink: 0; }
.help-crumb { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--txt-dim); }

.help-nav { display: flex; flex-direction: column; padding: 6px; }
.help-nav a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: var(--radius-sm); font-size: 12.5px; color: var(--txt-muted);
  transition: background var(--transition), color var(--transition);
}
.help-nav a:hover { background: var(--surface-2); color: var(--txt); }
.help-nav a.active { background: var(--accent-dim); color: var(--accent-dark); font-weight: 600; }
.help-nav a span { flex: 1; min-width: 0; }

.help-article .card-body { font-size: 14px; line-height: 1.75; color: var(--txt); }
.help-article p { margin-bottom: 14px; }
.help-article ul, .help-article ol { margin: 0 0 16px 22px; }
.help-article li { margin-bottom: 8px; }
.help-article h3 { font-size: 15px; margin: 22px 0 10px; }
.help-article strong { font-weight: 700; }
.help-article code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--surface-3); padding: 1px 5px; border-radius: 5px;
}
.help-rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Painel de ajuda contextual, aberto pelo "?" da barra superior */
.help-popover {
  position: fixed; top: calc(var(--topbar-h) + 8px); right: 18px; z-index: 1300;
  width: min(380px, calc(100vw - 32px));
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.help-popover[hidden] { display: none; }
.help-popover-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.help-popover-head strong { flex: 1; font-size: 13px; min-width: 0; }
.help-popover-body { max-height: min(60vh, 420px); overflow-y: auto; }
.help-popover-foot { padding: 10px 16px; border-top: 1px solid var(--border); }
.help-popover .help-list-item { padding: 11px 16px; }

/* Tour de primeiro acesso */
.tour-overlay {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(15, 26, 46, .62);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.tour-overlay[hidden] { display: none; }
.tour-card {
  width: min(520px, 100%); background: var(--surface-1);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.tour-card-head { padding: 26px 26px 0; display: flex; gap: 14px; align-items: flex-start; }
.tour-card-icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.tour-card-head h2 { font-size: 1.2rem; min-width: 0; }
.tour-card-body { padding: 14px 26px 22px; font-size: 13.5px; line-height: 1.65; color: var(--txt-muted); }
.tour-card-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 26px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.tour-dots { display: flex; gap: 5px; flex: 1; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-4); }
.tour-dot.active { background: var(--accent); }

@media (max-width: 900px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-aside .card { position: static; }
  .help-popover { right: 8px; left: 8px; width: auto; }
}

/* ══ MULTICANAL (e-mail / WhatsApp) ═══════════════════════════ */
.mc-page { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mc-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 16px; align-items: start; min-width: 0;
}
.mc-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.mc-health {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--txt-muted); font-size: 12.5px;
}
.mc-health.ok     { color: var(--green);  border-color: var(--green-dim);  background: var(--green-dim); }
.mc-health.warn   { color: var(--yellow); border-color: var(--yellow-dim); background: var(--yellow-dim); }
.mc-health.danger { color: var(--red);    border-color: var(--red-dim);    background: var(--red-dim); }
.mc-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.mc-code {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 9px 10px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
  overflow-wrap: anywhere; word-break: break-word;
}
.mc-note { color: var(--txt-muted); font-size: 12px; line-height: 1.55; margin-top: 10px; }
.mc-list { color: var(--txt-muted); font-size: 12.5px; line-height: 1.85; padding-left: 18px; margin: 0; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.mc-link {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px; font-size: 12px; color: var(--txt); background: var(--surface-1);
}
.mc-link:hover { border-color: var(--accent-border); color: var(--accent); }

.mc-status-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2);
}
.mc-status-card > span:first-child { font-size: 12px; color: var(--txt-muted); }
.mc-status-card strong { font-size: 15px; text-transform: capitalize; }

.mc-webhook-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mc-webhook-actions .btn { width: 100%; justify-content: center; white-space: normal; height: auto; min-height: 32px; padding: 6px 10px; }

.mc-alert {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; font-size: 12px; line-height: 1.45;
  background: var(--surface-2); color: var(--txt-muted); overflow-wrap: anywhere;
}
.mc-alert.ok  { color: var(--green); border-color: var(--green-dim); background: var(--green-dim); }
.mc-alert.err { color: var(--red);   border-color: var(--red-dim);   background: var(--red-dim); }

.mc-qr-inline {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 12px; text-align: center;
}
.mc-qr-inline img { max-width: 230px; width: 100%; height: auto; margin: 0 auto; }
.mc-qr-inline textarea {
  width: 100%; margin-top: 10px; padding: 9px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); font-size: 11.5px; resize: vertical;
}
.mc-pairing-code { margin-top: 10px; text-align: center; font-size: 18px; font-weight: 800; letter-spacing: .18em; }

.mc-empty {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 18px; text-align: center; color: var(--txt-muted); font-size: 13px;
}
.mc-session-list { display: flex; flex-direction: column; gap: 10px; }
.mc-session {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 12px;
}
.mc-session-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mc-session-name { font-weight: 700; font-size: 13.5px; }
.mc-session-sub { color: var(--txt-muted); font-size: 11.5px; margin-top: 2px; word-break: break-word; }

@media (max-width: 1100px) {
  .mc-grid { grid-template-columns: minmax(0, 1fr); }
  .mc-webhook-actions { grid-template-columns: minmax(0, 1fr); }
}

/* ══ DASHBOARD ════════════════════════════════════════════════ */
.dash-shell { display: grid; gap: 18px; }

.dash-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 24px 26px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(130deg, var(--surface-1) 0%, var(--surface-1) 62%, var(--accent-dim) 100%);
}
.dash-hero::after {
  content: ""; position: absolute; right: -65px; top: -95px;
  width: 250px; height: 250px; border-radius: 50%;
  border: 52px solid rgba(0, 157, 220, .08); pointer-events: none;
}
.dash-hero-copy, .dash-hero-actions { position: relative; z-index: 1; min-width: 0; }
.dash-eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  color: var(--accent-dark); font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.dash-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; flex-shrink: 0; }
.dash-hero h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
.dash-hero p { margin: 0; color: var(--txt-muted); font-size: 13px; }
.dash-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.dash-tabs {
  display: flex; gap: 6px; padding: 6px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-1); scrollbar-width: none;
}
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 8px 16px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--txt-muted);
  font: inherit; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; cursor: pointer; transition: .16s ease;
}
.dash-tab:hover { color: var(--txt); background: var(--surface-2); }
.dash-tab[aria-selected="true"] {
  color: var(--accent-dark); background: var(--accent-dim);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.dash-tab i { font-size: 14px; }
.dash-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
  background: var(--surface-3); color: var(--txt-muted); font-size: 10.5px;
}
.dash-tab[aria-selected="true"] .dash-tab-count { background: var(--accent); color: #fff; }

.dash-panel[hidden] { display: none; }
/* Sem min-width:0 o painel cresce até o min-content da tabela mais larga,
   estourando a grade em vez de deixar a .table-wrap rolar sozinha. */
.dash-panel { min-width: 0; animation: dashReveal .18s ease; }
@keyframes dashReveal { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dash-kpi {
  position: relative; display: flex; align-items: center; gap: 13px;
  min-width: 0; padding: 16px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-1); color: inherit;
  font: inherit; transition: transform .16s, border-color .16s, box-shadow .16s;
}
.dash-kpi:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.dash-kpi-icon {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; font-size: 17px;
}
.dash-kpi-copy { display: block; min-width: 0; }
.dash-kpi-value { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.dash-kpi-label { display: block; margin-top: 3px; font-size: 12px; font-weight: 650; color: var(--txt-muted); }
.dash-kpi-note { display: block; margin-top: 2px; font-size: 10.5px; color: var(--txt-dim); }
.dash-kpi-arrow { margin-left: auto; color: var(--txt-dim); font-size: 14px; }
.dash-tone-blue   { background: var(--blue-dim);   color: var(--blue); }
.dash-tone-purple { background: var(--purple-dim); color: var(--purple); }
.dash-tone-green  { background: var(--green-dim);  color: var(--green); }
.dash-tone-teal   { background: var(--teal-dim);   color: var(--teal); }
.dash-tone-yellow { background: var(--yellow-dim); color: var(--yellow); }
.dash-tone-red    { background: var(--red-dim);    color: var(--red); }
.dash-tone-accent { background: var(--accent-dim); color: var(--accent); }

.dash-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dash-table-card {
  min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-1); overflow: hidden;
}
.dash-table-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.dash-table-hd-main { min-width: 0; }
/* Em telas muito estreitas o título precisa quebrar: sem isso ele empurra o
   cabeçalho para fora do cartão em vez de ocupar duas linhas. */
.dash-table-title {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 14px; font-weight: 800;
  min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere;
}
.dash-table-title i { color: var(--accent); font-size: 15px; flex-shrink: 0; }
.dash-table-subtitle { margin: 3px 0 0; color: var(--txt-muted); font-size: 11.5px; min-width: 0; overflow-wrap: anywhere; }
.dash-card-body { padding: 16px 18px; }
.dash-table-card .table-wrap { border: 0; border-radius: 0; }

.dash-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 180px; padding: 28px; text-align: center;
}
.dash-empty-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 11px; border-radius: 50%;
  background: var(--surface-3); color: var(--txt-dim); font-size: 17px;
}
.dash-empty strong { font-size: 13px; }
.dash-empty span { max-width: 280px; margin-top: 4px; color: var(--txt-muted); font-size: 11.5px; }

.dash-chart { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 8px; }
.dash-chart-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  height: 100%; justify-content: flex-end; min-width: 0;
}
.dash-chart-bar {
  width: 100%; max-width: 34px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--eas-blue-400), var(--eas-blue-700));
}
.dash-chart-count { font-size: 10.5px; color: var(--txt-dim); font-variant-numeric: tabular-nums; }
.dash-chart-label { font-size: 9.5px; color: var(--txt-dim); white-space: nowrap; }
.dash-chart-legend { margin-top: 12px; font-size: 11px; color: var(--txt-dim); }

.dash-pulse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dash-pulse-item {
  display: block; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-2);
  color: inherit; transition: .16s ease; min-width: 0;
}
.dash-pulse-item:hover { border-color: var(--accent); background: var(--accent-dim); }
.dash-pulse-label { display: block; margin-bottom: 6px; color: var(--txt-muted); font-size: 11px; }
.dash-pulse-value { font-size: 19px; font-weight: 800; }

.dash-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dash-quick-action {
  display: flex; align-items: center; gap: 10px; padding: 13px;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--txt); font-size: 12.5px; font-weight: 700; transition: .16s ease; min-width: 0;
}
.dash-quick-action:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-dim); }
.dash-quick-action i { font-size: 15px; flex-shrink: 0; }
.dash-quick-action span { min-width: 0; overflow-wrap: anywhere; }

.dash-line {
  display: flex; align-items: center; gap: 10px; padding: 9px;
  border-radius: var(--radius); background: var(--surface-2); color: inherit; min-width: 0;
}
.dash-line:hover { background: var(--accent-dim); }
.dash-line > i { font-size: 14px; flex-shrink: 0; }
.dash-date { min-width: 42px; text-align: center; flex-shrink: 0; }
.dash-date strong { display: block; font-size: 17px; line-height: 1; }
.dash-date small { font-size: 10px; color: var(--txt-dim); text-transform: uppercase; }

@media (max-width: 1300px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .dash-content-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-pulse { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .dash-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .dash-hero-actions { width: 100%; justify-content: flex-start; }
  .dash-kpis { grid-template-columns: minmax(0, 1fr); }
  .dash-quick-actions { grid-template-columns: minmax(0, 1fr); }
  .dash-kpi-arrow { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Tema escuro
   Só as variáveis mudam — nenhum componente precisa saber do tema.
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="escuro"] {
  --accent:        var(--eas-blue-400);
  --accent-soft:   var(--eas-blue-300);
  --accent-dim:    rgba(79, 195, 232, .15);
  --accent-border: rgba(79, 195, 232, .34);
  --accent-dark:   var(--eas-blue-300);

  --green:      #34D399;
  --green-dim:  rgba(52, 211, 153, .15);
  --red:        #F87171;
  --red-dim:    rgba(248, 113, 113, .15);
  --blue:       #60A5FA;
  --blue-dim:   rgba(96, 165, 250, .15);
  --yellow:     #FBBF24;
  --yellow-dim: rgba(251, 191, 36, .16);
  --purple:     #A78BFA;
  --purple-dim: rgba(167, 139, 250, .16);
  --teal:       #2DD4BF;
  --teal-dim:   rgba(45, 212, 191, .15);

  --bg:        #0B1120;
  --surface-0: #0F1626;
  --surface-1: #141C2D;
  --surface-2: #1A2334;
  --surface-3: #212B3E;
  --surface-4: #2C384D;
  --border:    rgba(255, 255, 255, .09);
  --border-2:  rgba(255, 255, 255, .16);
  --txt:       #E8EDF4;
  --txt-muted: #A3B0C2;
  --txt-dim:   #6F7C90;
  --bg-input:  #0F1626;
  --bg-hover:  rgba(255, 255, 255, .05);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow:    0 12px 32px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);

  /* O menu já era escuro; no tema escuro ele se separa do conteúdo pela
     borda, não pelo contraste de fundo. */
  --sb-bg:     #080D18;
  --sb-bg-2:   #0B1120;
  --sb-border: rgba(255, 255, 255, .08);
}

/* A seta do select é desenhada em SVG com cor fixa; no escuro precisa clarear. */
html[data-theme="escuro"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3B0C2' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Blocos que fixavam branco ou cinza claro na mão. */
html[data-theme="escuro"] .topbar { background: rgba(20, 28, 45, .88); }
html[data-theme="escuro"] .badge-neutral { background: var(--surface-3); color: var(--txt-muted); }
html[data-theme="escuro"] .alert-success { color: #6EE7B7; }
html[data-theme="escuro"] .alert-error   { color: #FCA5A5; }
html[data-theme="escuro"] .alert-warning { color: #FCD34D; }
html[data-theme="escuro"] .alert-info    { color: var(--eas-blue-300); }
html[data-theme="escuro"] .switch .track::after { background: var(--surface-4); }
html[data-theme="escuro"] .switch input:checked + .track::after { background: #fff; }

/* ══ BACKUPS DA VPS ═════════════════════════════════════════════ */
.backup-callback { min-width: 0; }
.backup-callback code {
  display: block; margin-top: 5px; padding: 7px 9px;
  overflow-wrap: anywhere; color: var(--txt-muted);
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 10.5px;
}
.backup-card-foot { align-items: flex-end; }
.backup-last-success .stat-value { width: 100%; padding-right: 40px; font-size: 1.05rem; line-height: 1.25; }
.backup-last-success .stat-sub { padding-right: 36px; }
.backup-history table { min-width: 920px; }
.backup-result { max-width: 330px; white-space: normal; line-height: 1.5; }
html[data-theme="escuro"] .dash-hero {
  background: linear-gradient(130deg, var(--surface-1) 0%, var(--surface-1) 60%, rgba(79, 195, 232, .10) 100%);
}

/* No escuro o azul da marca clareia; texto branco sobre ele ficaria ilegível,
   então os botões de destaque usam o grafite institucional. */
html[data-theme="escuro"] .btn-accent,
html[data-theme="escuro"] .btn-primary { background: var(--eas-blue-400); color: var(--eas-ink-900); }
html[data-theme="escuro"] .btn-accent:hover,
html[data-theme="escuro"] .btn-primary:hover { background: var(--eas-blue-300); color: var(--eas-ink-900); }
html[data-theme="escuro"] .pagination .pages .current,
html[data-theme="escuro"] .dash-tab[aria-selected="true"] .dash-tab-count { background: var(--eas-blue-400); color: var(--eas-ink-900); }

/* Impressão sempre em papel branco, seja qual for o tema da tela. */
@media print {
  html[data-theme="escuro"] {
    --bg: #FFFFFF; --surface-0: #FFFFFF; --surface-1: #FFFFFF;
    --surface-2: #FFFFFF; --surface-3: #F2F2F2;
    --txt: #000000; --txt-muted: #333333; --txt-dim: #666666;
    --border: rgba(0, 0, 0, .2); --border-2: rgba(0, 0, 0, .3);
  }
}

.topbar-btn .fa-moon, .topbar-btn .fa-sun { transition: transform .2s ease; }
.topbar-btn[data-theme-toggle]:hover .fa-moon,
.topbar-btn[data-theme-toggle]:hover .fa-sun { transform: rotate(-18deg); }

/* ══════════════════════════════════════════════════════════════════
   Rolagem sem barra

   As barras das áreas internas cortavam o desenho: apareciam sob as
   abas, ao lado das tabelas e dentro dos modais mesmo sem nada a rolar.
   A barra da janela (no <html>) permanece: é o único indicador de
   posição da página.
   ══════════════════════════════════════════════════════════════════ */
body *::-webkit-scrollbar { width: 0; height: 0; }
body * { scrollbar-width: none; -ms-overflow-style: none; }

/* Tiras horizontais só rolam para o lado. Sem isto, a regra de overflow do
   CSS transforma o eixo vertical em "auto" e nasce uma segunda barra. */
.tabs, .tabs-scroll, .dash-tabs, .chips, .mc-webhook-actions {
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.tabs, .tabs-scroll, .dash-tabs, .table-wrap, .table-responsive { -webkit-overflow-scrolling: touch; }

/* ══════════════════════════════════════════════════════════════════
   Telas estreitas

   O alvo é a faixa abaixo de 256px — largura de relógio, de janela
   encaixada ou de zoom alto no celular. Abaixo disso nada pode escapar
   pela lateral: a página inteira rola só na vertical.
   ══════════════════════════════════════════════════════════════════ */

/* Toda tira de abas rola para o lado em vez de quebrar linha e empilhar. */
.tabs, .tabs-sub, .dash-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.tabs > .tab, .tabs-sub > .tab, .dash-tabs > .dash-tab { flex-shrink: 0; }

/* Botão que perde o rótulo e vira só ícone quando não há largura. */
.btn-collapse { white-space: nowrap; }

@media (max-width: 900px) {
  .btn-collapse .btn-label { display: none; }
  .btn-collapse {
    width: 36px; height: 36px; padding: 0;
    justify-content: center; border-radius: 50%;
  }
  .btn-collapse i { font-size: 16px; margin: 0; }
}

@media (max-width: 420px) {
  .app-view { padding: 12px; }
  .topbar { padding: 0 12px; gap: 6px; }
  .page-header { gap: 10px; }
  .page-header h1 { font-size: 1.15rem; }
  .card-head, .card-body, .card-foot { padding: 13px; }
  .dash-hero { padding: 18px; }
  .dash-hero h1 { font-size: 21px; }
  .tour-card-head { padding: 20px 18px 0; }
  .tour-card-body { padding: 12px 18px 18px; }
  .tour-card-foot { padding: 12px 18px; }
}

/* A tela de acesso em telas baixas (celular deitado): o painel de marca
   ocuparia a altura inteira e empurraria o formulário para fora da vista. */
@media (max-height: 560px) and (min-width: 901px) {
  .auth-visual { padding: 32px 40px; }
  .auth-visual h1 { font-size: 1.9rem; }
  .auth-brand { margin-bottom: 22px; }
  .auth-tagline { margin-top: 26px; }
}

@media (max-width: 320px) {
  /* Nenhuma grade pode exigir largura mínima maior que a tela. */
  .stats-grid, .grid-2, .grid-3, .grid-4, .grid-sidebar,
  .dash-kpis, .dash-content-grid, .mc-grid, .help-layout,
  .form-grid.uniforme, .help-grid, .help-featured,
  .dash-quick-actions, .mc-webhook-actions, .dash-pulse {
    grid-template-columns: minmax(0, 1fr);
  }
  .form-grid { gap: 12px; }

  /* Abaixo desta largura nem os campos "keep" ficam 2-a-2: tudo em uma
     coluna, para nenhum campo virar um retângulo de poucos pixels. */
  .form-grid > [class*="col-"],
  .col-6.keep, .col-4.keep, .col-3.keep { grid-column: 1 / -1; }

  /* Inputs precisam poder encolher abaixo da própria largura intrínseca —
     campos de data e número têm um mínimo do navegador que, sem isto,
     estoura a coluna. */
  input, select, textarea { min-width: 0; max-width: 100%; }

  .app-view { padding: 9px; }
  .topbar { padding: 0 9px; gap: 4px; }
  .topbar-actions { gap: 2px; }
  .topbar-btn { width: 32px; height: 32px; font-size: 13px; }
  .topbar-title h1 { font-size: 13.5px; }

  .card-head, .card-body, .card-foot { padding: 11px; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header-actions { width: 100%; flex-wrap: wrap; }
  .page-header-actions .btn { flex: 1 1 100%; }

  .btn { padding: 8px 11px; font-size: 12px; }
  .btn-sm { padding: 6px 9px; font-size: 11.5px; }
  .tab { padding: 9px 11px; font-size: 12px; }

  thead th, tbody td { padding: 8px; font-size: 12px; }
  .stat { padding: 13px; }
  .stat-value { font-size: 1.2rem; }
  .stat-value.sm { font-size: 1rem; }
  .stat-icon { position: static; margin-bottom: 8px; }
  .dash-kpi { padding: 12px; gap: 10px; }
  .dash-kpi-icon { flex-basis: 36px; width: 36px; height: 36px; font-size: 15px; }
  .dash-kpi-value { font-size: 16px; }
  .dash-hero h1 { font-size: 19px; }
  .dash-hero-actions { width: 100%; }
  .dash-hero-actions .btn { flex: 1; justify-content: center; }

  .modal-head, .modal-body, .modal-foot { padding: 13px; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 100%; }

  .msg { max-width: 96%; }
  .help-search { padding: 10px; }
  .help-search > i { display: none; }

  .auth-form-wrap { padding: 24px 12px; }
  .auth-form h2 { font-size: 1.3rem; }
  .auth-mobile-brand { margin-bottom: 18px; }
}

@media (max-width: 270px) {
  /* Faixa extrema: cabe pouco, então nada disputa espaço. */
  .app-view { padding: 7px; }
  .topbar { padding: 0 7px; }
  .topbar-btn { width: 29px; height: 29px; font-size: 12px; }
  .btn-collapse { width: 30px; height: 30px; }

  .card-head, .card-body, .card-foot { padding: 9px; }
  .card-head h2, .card-head h3 { font-size: 13px; }
  .page-header h1 { font-size: 1.02rem; padding-left: 10px; }
  .page-header p { font-size: 11.5px; }

  /* A barra inferior fica só com os ícones: cinco rótulos em 260px viravam
     três letras e um "…". */
  .mobile-nav { height: 54px; }
  .mobile-nav span { display: none; }
  .mobile-nav i { font-size: 18px; }
  body, body.sidebar-compact { padding-bottom: 58px; }

  .dash-hero { padding: 14px; }
  .dash-hero::after { display: none; }
  .dash-eyebrow { font-size: 10px; }
  .dash-hero h1 { font-size: 17px; }
  .dash-hero p { font-size: 11.5px; }

  .stat-label, .dash-kpi-label { font-size: 10px; }
  .stat-sub, .dash-kpi-note { font-size: 10px; }
  .tab { padding: 8px 9px; font-size: 11.5px; }
  .tab i { font-size: 12px; }
  .badge { font-size: 9.5px; padding: 2px 6px; }

  .filters { padding: 10px; }
  .field label, .form-group > label { font-size: 11px; }
  input, select, textarea { font-size: 12.5px; padding: 7px 9px; min-height: 34px; }

  /* Diálogos ocupam a tela inteira: sobra de margem aqui é espaço perdido. */
  dialog.modal, dialog.modal.wide { width: 96vw; max-width: 96vw; }
  .help-popover { width: calc(100vw - 14px); right: 7px; left: 7px; }
  .tour-overlay { padding: 8px; }

  .definition { font-size: 12px; }
  .eas-signature { letter-spacing: .1em; font-size: 9.5px; }
}

/* Enquanto arrasta, o cursor mostra que a tira está sendo puxada e o texto
   não é selecionado sem querer. */
.tabs, .tabs-scroll, .dash-tabs, .table-wrap, .table-responsive { cursor: default; }
.is-dragging { cursor: grabbing; user-select: none; }
.is-dragging * { pointer-events: none; }