/* ==========================================================================
   Casa das Óticas Flow — tema visual (última camada de CSS).

   Tudo que é cor, fonte, espaçamento e raio sai dos tokens abaixo. Para ajustar
   o visual, mexa aqui primeiro. As variáveis antigas (--bg, --panel, --gold,
   --green...) são remapeadas para os tokens, então as telas antigas que usam
   var(...) acompanham o tema sem precisar de alteração.

   Mobile first: estilos base para celular; @media (min-width) ajusta tablet/desktop.
   Breakpoints: 768px (tablet) e 1100px (desktop).
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans/ibm-plex-sans-latin-400-normal.77bc02670657.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans/ibm-plex-sans-latin-500-normal.f7016cd446d2.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans/ibm-plex-sans-latin-600-normal.196e3cbc5fee.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans/ibm-plex-sans-latin-700-normal.c277d7b83f8a.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root,
html body {
  /* Neutros (grafite levemente frio; textos medidos para WCAG AA sobre --surface-1) */
  --c-bg: #0e1114;
  --c-surface-1: #161a1f;
  --c-surface-2: #1d2228;
  --c-surface-3: #262d35;
  --c-border: #303841;
  --c-border-strong: #45505b;
  --c-text: #f2f4f6;
  --c-text-2: #b3bdc7;   /* 8.7:1 sobre surface-1 */
  --c-text-3: #8a96a2;   /* 5.4:1 sobre surface-1 */

  /* Marca: dourado vivo (ação principal) e verde-água (destaque / chat) */
  --c-primary: #ffc23d;
  --c-primary-hover: #ffd16b;
  --c-on-primary: #1d1503;
  --c-primary-soft: rgba(255, 194, 61, 0.14);
  --c-accent: #2fd1b5;
  --c-on-accent: #04201b;
  --c-accent-soft: rgba(47, 209, 181, 0.14);

  /* Status */
  --c-success: #3ddc84;
  --c-success-soft: rgba(61, 220, 132, 0.14);
  --c-warning: #ff9d3d;
  --c-warning-soft: rgba(255, 157, 61, 0.15);
  --c-danger: #ff5c6c;
  --c-danger-soft: rgba(255, 92, 108, 0.14);
  --c-info: #5cb3ff;
  --c-info-soft: rgba(92, 179, 255, 0.14);

  /* Chat */
  --c-bubble-in: #232a31;
  --c-bubble-out: #0f5a4e;
  --c-bubble-note: #3a2f12;
  --c-chat-bg: #12161a;
  --c-whatsapp: #25d366;

  /* Tipografia */
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md: 1.0625rem; /* 17 */
  --fs-lg: 1.25rem;   /* 20 */
  --fs-xl: 1.5rem;    /* 24 */
  --fs-2xl: 1.875rem; /* 30 */
  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* Espaçamento (base 4px) e forma */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.35);
  --touch: 44px;
  --topbar-h: 56px;
  --bottom-nav-h: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* Variáveis legadas remapeadas para o tema */
  --bg: var(--c-bg);
  --panel: var(--c-surface-1);
  --panel-2: var(--c-surface-2);
  --line: var(--c-border);
  --text: var(--c-text);
  --muted: var(--c-text-2);
  --green: var(--c-success);
  --green-dark: #1f9a55;
  --red: var(--c-danger);
  --yellow: var(--c-warning);
  --blue: var(--c-info);
  --gold: var(--c-primary);
  --gold-light: var(--c-primary-hover);
  --gold-dark: #c99418;
  --emerald: var(--c-surface-2);
  --emerald-dark: var(--c-bg);
  --emerald-deep: var(--c-bg);
  --emerald-mid: var(--c-surface-1);
  --emerald-light: var(--c-surface-3);
  --emerald-surface: var(--c-surface-1);
  --emerald-card: var(--c-surface-2);
  --emerald-border: var(--c-border);
  --border-gold: rgba(255, 194, 61, 0.35);
  --wa-green: var(--c-whatsapp);
  --wa-bubble-out: var(--c-bubble-out);
  --wa-bubble-in: var(--c-bubble-in);
  --note-bubble: var(--c-bubble-note);
  --radius: var(--r-lg);
  --card-radius: var(--r-lg);
  --shadow: var(--shadow-1);

  /* Tokens usados por chat.css (emoji, menus) */
  --emoji-bg: var(--c-surface-2);
  --emoji-border: var(--c-border);
  --emoji-text: var(--c-text);
  --emoji-muted: var(--c-text-2);
  --emoji-accent: var(--c-accent);
  --menu-bg: var(--c-surface-2);
  --menu-border: var(--c-border-strong);
  --menu-text: var(--c-text);
  --menu-muted: var(--c-text-2);
  --menu-danger: #ff8a95;
  --chat-icon: var(--c-text-2);
  --chat-icon-active: var(--c-text);
  --chat-muted: var(--c-text-2);
  --chat-focus: var(--c-accent);
}

/* ---------- Base ---------- */
html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}
html body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  overflow-x: clip; /* rede de segurança: nada empurra a página para os lados */
}
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { line-height: var(--lh-tight); letter-spacing: -0.01em; }
img, video, canvas { max-width: 100%; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
a { color: inherit; }
::selection { background: rgba(47, 209, 181, 0.35); }

/* ---------- Shell: menu lateral ---------- */
html body .sidebar {
  background: var(--c-surface-1);
  border-right: 1px solid var(--c-border);
}
html body .brand {
  background: none;
  border-bottom: 1px solid var(--c-border);
  min-height: var(--topbar-h);
}
html body .sidebar nav a,
html body .sidebar-nav-button {
  color: var(--c-text-2);
  font-weight: 500;
  border-radius: var(--r-md);
  min-height: var(--touch);
  position: relative;
}
html body .sidebar nav a:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
}
html body .sidebar nav a.active {
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-weight: 600;
}
html body .sidebar nav a.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--c-primary);
}
html body .sidebar-collapse-btn {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
}
html body .sidebar-collapse-btn:hover { color: var(--c-text); border-color: var(--c-border-strong); transform: none; }
html body .sidebar-logout-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #ff8a95;
  min-height: var(--touch);
}
html body .sidebar-logout-btn:hover { background: var(--c-danger-soft); border-color: transparent; color: #ffb3bb; }
html body .sidebar-user { border-top-color: var(--c-border); }
html body .sidebar-user small { color: var(--c-text-3); }

/* ---------- Shell: barra superior ---------- */
html body .topbar {
  background: rgba(14, 17, 20, 0.96);
  backdrop-filter: none;
  border-bottom: 1px solid var(--c-border);
  min-height: calc(var(--topbar-h) + var(--safe-top));
  padding: calc(8px + var(--safe-top)) 12px 8px;
  gap: var(--sp-2);
}
html body .topbar h1 {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .topbar-title { min-width: 0; }
html body .topbar-title p {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .topbar-actions { gap: var(--sp-1); flex-shrink: 0; }
html body .notification-bell { display: inline-flex; }
@media (max-width: 760px) {
  html body .menu-toggle { display: inline-flex; }
}
html body .menu-toggle,
html body .notification-bell {
  width: var(--touch);
  height: var(--touch);
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--c-text);
}
html body .topbar-bug-btn,
html body .pwa-push-btn,
html body .pwa-install-btn {
  min-height: 36px;
  padding: 6px 10px !important;
  border-radius: var(--r-md) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  background: var(--c-surface-2) !important;
  color: var(--c-text-2) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: none !important;
}
html body .topbar-bug-btn:hover,
html body .pwa-push-btn:hover { color: var(--c-text) !important; border-color: var(--c-border-strong) !important; }
html body .pwa-push-btn span,
html body .topbar-bug-btn span { display: none; }
/* A instalação já é oferecida pelo banner flutuante (pwa-install-banner); o botão duplicado só ocupava espaço no topo */
html body .topbar-actions .pwa-install-btn { display: none !important; }
html body .notification-count {
  background: var(--c-danger);
  color: #fff;
}
html body .notification-dropdown {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
  box-shadow: var(--shadow-2);
}

/* ---------- Shell: conteúdo e navegação inferior (celular) ---------- */
html body .page-body {
  padding: var(--sp-4) var(--sp-3) calc(var(--bottom-nav-h) + var(--sp-6) + var(--safe-bottom)) !important;
  max-width: 1600px;
}
html body .mobile-bottom-nav {
  background: var(--c-surface-1) !important;
  border-top: 1px solid var(--c-border) !important;
  height: calc(var(--bottom-nav-h) + var(--safe-bottom)) !important;
}
html body .mobile-nav-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--touch);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--c-text-3);
  font-size: 11px;
  font-weight: 500;
}
html body .mobile-nav-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body .mobile-nav-item i { font-size: 18px; }
html body .mobile-nav-item.active { color: var(--c-primary); font-weight: 600; }
html body .menu-overlay.open { background: rgba(0, 0, 0, 0.55); }

/* ---------- Componentes ---------- */
html body .card,
html body .stat-card,
html body .form-card,
html body .chart-card {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: none;
}
html body .stat-card::before { background: var(--c-primary); }
html body .stat-card small { color: var(--c-text-2); font-size: var(--fs-sm); }
html body .stat-card strong { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }

html body .btn {
  min-height: var(--touch);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--fs-base);
  padding: 8px 16px;
  box-shadow: none;
}
html body .btn-small,
html body .btn-sm { min-height: 36px; padding: 6px 12px; font-size: var(--fs-sm); }
html body .btn-primary {
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-color: transparent;
}
html body .btn-primary:hover { background: var(--c-primary-hover); }
html body .btn-secondary {
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 1px solid var(--c-border-strong);
}
html body .btn-secondary:hover { background: var(--c-surface-3); border-color: var(--c-border-strong); }
html body .btn-success { background: var(--c-success); color: #04220f; border-color: transparent; }
html body .btn-danger { background: var(--c-danger-soft); color: #ffb3bb; border: 1px solid rgba(255, 92, 108, 0.45); }
html body .btn-warning { background: var(--c-warning-soft); color: #ffc48a; border: 1px solid rgba(255, 157, 61, 0.45); }
html body .btn-outline { background: transparent; color: var(--c-text); border: 1px solid var(--c-border-strong); }

html body label { color: var(--c-text-2); font-weight: 500; }
html body input:not([type=checkbox]):not([type=radio]):not([type=range]),
html body select,
html body textarea {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  color: var(--c-text);
  min-height: var(--touch);
  font-size: 16px; /* evita o zoom automático do iPhone ao focar */
}
html body input::placeholder,
html body textarea::placeholder { color: var(--c-text-3); }
html body input:focus,
html body select:focus,
html body textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
  outline: none;
}
html body .help { color: var(--c-text-3); }

/* Tabelas: rolagem horizontal controlada dentro do card, nunca da página */
html body .table-wrap,
html body .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
html body .data-table th {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
html body .data-table th,
html body .data-table td { border-bottom-color: var(--c-border); }
html body .data-table tr:hover td { background: var(--c-surface-2); }

html body .badge { border-radius: var(--r-sm); font-weight: 600; }
html body .toast { border-radius: var(--r-md); }
html body .toast-success { background: var(--c-success-soft); border-color: rgba(61, 220, 132, 0.45); color: #b6f5cf; }
html body .toast-error { background: var(--c-danger-soft); border-color: rgba(255, 92, 108, 0.45); color: #ffc2c8; }
html body .toast-info { background: var(--c-info-soft); border-color: rgba(92, 179, 255, 0.45); color: #c4e3ff; }

/* Kanban: rola na horizontal dentro do próprio quadro */
html body .kanban,
html body .kanban-funnel { overflow-x: auto; max-width: 100%; }

/* ---------- Login e páginas de erro ---------- */
html body.login-page {
  background: var(--c-bg);
}
html body .login-card {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: none;
}
html body .login-brand { color: var(--c-text); }
html body .login-brand b,
html body .login-brand i { color: var(--c-primary); }

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  html body .topbar { padding: calc(10px + var(--safe-top)) var(--sp-6) 10px; }
  html body .topbar h1 { font-size: var(--fs-lg); }
  html body .topbar-title p { font-size: var(--fs-sm); }
  html body .pwa-push-btn span,
  html body .topbar-bug-btn span { display: inline; }
  html body .page-body { padding: var(--sp-6) !important; }
  /* A partir do tablet o menu lateral está visível; a barra inferior (que o CSS antigo mantinha até 768px) sai */
  html body .mobile-bottom-nav { display: none !important; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1100px) {
  html body .page-body { padding: var(--sp-6) var(--sp-8) !important; }
}

/* Marca d'água decorativa atrás do conteúdo no celular: atrapalhava a leitura */
html body .mobile-brand-watermark { display: none !important; }

/* ---------- Tela de login ---------- */
html body .login-wrapper {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--c-bg);
}
html body .login-card-cdo {
  width: 100%;
  max-width: 420px;
  padding: var(--sp-6) var(--sp-5);
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-primary);
  border-radius: var(--r-lg);
}
.login-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.login-logo { width: 48px; height: 48px; border-radius: var(--r-md); }
.login-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; }
.login-sub { margin: 2px 0 0; color: var(--c-text-2); font-size: var(--fs-sm); }
.login-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}
html body .login-card-cdo input { width: 100%; padding: 10px 12px; }
html body .login-card-cdo .btn-block { width: 100%; margin-top: var(--sp-2); font-size: var(--fs-md); }

/* ---------- Cabeçalho de página (Funil, Kanban do chat) ---------- */
html body .page-hero {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--r-lg);
  box-shadow: none;
}
html body .page-hero-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--c-text);
}
@media (min-width: 768px) {
  html body .page-hero-title { font-size: var(--fs-2xl); }
}