/* Ligação com o servidor (api-sync.js). Só tem efeito quando <html> recebe .crm-server. */

/* Antes do login nada do CRM aparece, nem os dados de exemplo. */
html.crm-locked body > *:not(#crm-login):not(#toast) { visibility: hidden !important; }
html.crm-locked body { overflow: hidden; }

#crm-login { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: var(--bg-page); }
#crm-login[hidden] { display: none; }
#crm-login form { width: 380px; max-width: 100%; padding: 32px 28px 28px; background: var(--bg-list); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
#crm-login .crm-login-brand { color: var(--text-title); font-size: 26px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
#crm-login h1 { margin: 22px 0 4px; color: var(--text-title); font-size: 18px; font-weight: 600; }
#crm-login p { margin: 0 0 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
#crm-login label { display: block; margin: 0 0 14px; color: var(--text); font-size: 12px; font-weight: 600; }
#crm-login input { display: block; width: 100%; height: 42px; margin-top: 6px; padding: 0 14px; background: var(--bg-page); color: var(--text-title); border: 1px solid var(--border); border-radius: var(--radius-sm); font: 14px var(--font); }
#crm-login input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
#crm-login .crm-login-error { min-height: 20px; margin: 0 0 10px; color: var(--alert); font-size: 13px; }
#crm-login button[type="submit"] { width: 100%; height: 42px; font-size: 14px; font-weight: 600; }
#crm-login button[type="submit"]:disabled { opacity: .6; cursor: progress; }
#crm-login small { display: block; margin-top: 16px; color: var(--text-muted); font-size: 12px; text-align: center; }

/* Recursos que ainda dependem do WhatsApp oficial (fase 3) ou que só existem no demo. */
html.crm-server #reset-demo, html.crm-server #receive-demo { display: none !important; }

/* Indicador de conexão no rodapé da lista. */
.crm-sync-state { display: inline-flex; align-items: center; gap: 6px; }
.crm-sync-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-success); }
.crm-sync-state.saving::before { background: var(--text-warning); }
.crm-sync-state.offline::before { background: var(--alert); }

/* Marcas de entrega vindas do servidor. */
.delivery.pending .ui-icon { width: 12px; height: 12px; vertical-align: -2px; }
.delivery.failed { color: var(--alert); font-weight: 700; }
.delivery.read { color: var(--text-info); }

/* Atendentes do servidor (reaproveita .team-card / .team-table de settings-team.css). */
.crm-team-role { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--text); font-size: 12px; }
.crm-team-off { color: var(--text-muted); }
.crm-team-actions { display: flex; gap: 8px; justify-content: flex-end; }
.crm-team-actions button { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 12px; color: var(--text); }
.crm-team-actions button:hover { background: var(--bg-hover); }
.crm-team-note { margin: 12px 0 0; color: var(--text-secondary); font-size: 12px; }
.crm-form-hint { display: block; margin-top: 6px; color: var(--text-muted); font-size: 12px; font-weight: 400; }