/* theme.css — fonte única de verdade visual (change melhorar-ui-front).
   Tokens + componentes base do tema dark WhatsApp-like. As telas linkam este
   arquivo ANTES do <style> local; durante a migração cada tela remove seu CSS
   duplicado e passa a usar só estas classes. NUNCA hardcode cor nova em tela:
   crie/uso token daqui. */

:root{
  /* superfícies */
  --bg:#0b141a;            /* fundo da página */
  --surface:#111b21;       /* cards e listas */
  --panel:#202c33;         /* topbar, header, modal */
  --border:#222d34;        /* borda padrão de card/list */
  --field:#2a3942;         /* fundo de input/select/textarea e botão ghost */
  --field-border:#374851;  /* borda de campo */
  --hover:#182229;         /* hover de item de lista */
  --sel:#2a3942;           /* item selecionado */

  /* texto */
  --text:#e9edef;
  --muted:#8696a0;
  --label:#cfe9dd;

  /* ação / estado */
  --accent:#00a884;        /* verde primário (marca) */
  --accent-ink:#06231c;    /* texto sobre o accent */
  --ok-bg:#0c3b2e;         /* fundo de estado positivo/selecionado suave */
  --ok-text:#7ee8b8;
  --warn-bg:#3a2f10;
  --warn-text:#f0c987;
  --danger-bg:#3b2326;
  --danger-text:#f5b5b5;
  --surface-2:#1b2830;     /* superfícies elevadas do shell (menus, pills) */
  --hover-2:#22303a;       /* hover sobre superfícies elevadas */
  --online:#25d366;        /* presença: disponível */
  --away:#f0b429;          /* presença: ausente */
  --alert:#f0433f;         /* badge de não-lidas / alerta */

  /* forma */
  --radius:8px;
  --radius-lg:10px;

  /* z-index — escala fechada; NÃO inventar valores fora daqui */
  --z-ctx:40;      /* menus de contexto */
  --z-nav:60;      /* topbar/menus do shell */
  --z-modal:100;   /* modais e overlays */
  --z-call:110;    /* barra/popup de chamada */
  --z-toast:120;   /* toasts */
  --z-lightbox:130;/* lightbox de mídia */
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:var(--accent);text-decoration:none}

/* ---- campos ---- */
select,input,textarea{
  font:inherit;
  background:var(--field);
  color:var(--text);
  border:1px solid var(--field-border);
  border-radius:var(--radius);
  padding:8px 10px;
}

/* ---- botões ---- */
button{
  font:inherit;
  background:var(--accent);
  color:var(--accent-ink);
  border:0;
  border-radius:var(--radius);
  padding:8px 12px;
  font-weight:600;
  cursor:pointer;
}
button:disabled{opacity:.55;cursor:default}
button.ghost{background:var(--field);color:var(--text)}
button.danger{background:var(--danger-bg);color:var(--danger-text)}
button.sm{padding:4px 9px;font-size:12px}

/* ---- blocos ---- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px;
  margin-bottom:16px;
}
.card h2,.card h3{
  font-size:13px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);margin:0 0 12px;
}
.muted{color:var(--muted);font-size:13px}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.empty{color:var(--muted);padding:18px;text-align:center}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}

/* item de lista selecionável (padrão .member/.citem/.qitem unificado) */
.litem{
  display:flex;align-items:center;gap:8px;padding:10px;
  border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:8px;font-size:14px;cursor:pointer;
}
.litem:hover{background:var(--hover)}
.litem.sel{background:var(--sel);border-color:var(--accent)}

/* ---- modal (única implementação; ver UI.modal em ui.js) ---- */
.ui-ovl{
  position:fixed;inset:0;background:#000a;
  display:flex;align-items:center;justify-content:center;
  z-index:var(--z-modal);
}
.ui-modal{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;min-width:320px;max-width:min(560px,92vw);
  max-height:88vh;overflow:auto;
}
.ui-modal h3{margin:0 0 12px;font-size:15px}

/* ---- toast (única implementação; ver UI.toast em ui.js) ---- */
#ui-toasts{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;align-items:center;
  z-index:var(--z-toast);pointer-events:none;
}
.ui-toast{
  background:var(--panel);color:var(--text);
  border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:10px 14px;font-size:13.5px;
  box-shadow:0 6px 22px #0008;max-width:min(480px,90vw);
  animation:ui-toast-in .18s ease-out;
}
.ui-toast.err{border-left-color:var(--danger-text)}
.ui-toast.warn{border-left-color:var(--warn-text)}
@keyframes ui-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* banner de reconexão do UI.poller */
#ui-offline{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  background:var(--warn-bg);color:var(--warn-text);
  border:1px solid var(--border);border-top:0;
  border-radius:0 0 var(--radius) var(--radius);
  padding:6px 14px;font-size:13px;z-index:var(--z-toast);
}