/* Domani CRM — app.css */

/* ══════════════ LOGIN ══════════════ */
.auth-screen{min-height:100dvh;display:grid;place-items:center;background:var(--bg-base);padding:var(--sp-4)}
.auth-card{width:100%;max-width:400px;background:var(--bg-raised);border:1px solid var(--border-subtle);
  border-radius:var(--radius-2xl);padding:var(--sp-8);box-shadow:var(--shadow-xl)}
.auth-logo{width:52px;height:52px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--gold-500),var(--gold-700));
  display:grid;place-items:center;font-size:1.5rem;font-weight:800;color:#04040C;margin:0 auto var(--sp-5);box-shadow:var(--shadow-glow)}
.auth-title{font-size:var(--text-xl);font-weight:700;text-align:center;margin-bottom:var(--sp-1)}
.auth-subtitle{font-size:var(--text-sm);color:var(--text-tertiary);text-align:center;margin-bottom:var(--sp-6)}
.auth-form{display:flex;flex-direction:column;gap:var(--sp-4)}

/* ══════════════ NOTIFICAÇÕES (SINO) ══════════════ */
.notif-dropdown{position:absolute;top:calc(100% + var(--sp-2));right:0;width:340px;max-height:420px;overflow-y:auto;
  background:var(--bg-overlay);border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);z-index:var(--z-dropdown)}
.notif-item{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-subtle);cursor:pointer}
.notif-item:hover{background:var(--surface-hover)}
.notif-item.unread{background:var(--color-primary-subtle)}
.notif-item .notif-title{font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}
.notif-item .notif-time{font-size:var(--text-2xs);color:var(--text-tertiary)}

/* ══════════════ PRESENCE SELECTOR ══════════════ */
.presence-select{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1-5) var(--sp-2-5);border-radius:var(--radius-full);
  background:var(--surface-2);border:1px solid var(--border-default);cursor:pointer;font-size:var(--text-xs);font-weight:600}

/* ══════════════ TAGS ══════════════ */
.tag-pill{display:inline-flex;align-items:center;gap:var(--sp-1-5);padding:2px var(--sp-2-5);border-radius:var(--radius-full);
  font-size:var(--text-2xs);font-weight:700;color:#04040C}
.tag-pill .tag-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.tag-picker{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tag-checkbox{display:inline-flex;align-items:center;gap:var(--sp-1-5);padding:var(--sp-1-5) var(--sp-3);border-radius:var(--radius-full);
  border:1px solid var(--border-default);cursor:pointer;font-size:var(--text-xs);font-weight:600;color:var(--text-secondary);transition:all var(--duration-fast)}
.tag-checkbox.selected{background:var(--color-primary-subtle);border-color:var(--color-primary);color:var(--color-primary)}
.tag-checkbox input{display:none}

/* ══════════════ INBOX — 3 colunas ══════════════ */
.inbox-shell{display:grid;grid-template-columns:340px 1fr 300px;height:calc(100dvh - 64px)}
@media (max-width:1100px){.inbox-shell{grid-template-columns:300px 1fr}}
@media (max-width:767px){.inbox-shell{grid-template-columns:1fr;height:calc(100dvh - 64px - 64px)}}

.inbox-list{border-right:1px solid var(--border-subtle);overflow-y:auto;background:var(--bg-raised)}
.inbox-filters{display:flex;gap:var(--sp-1);padding:var(--sp-3);border-bottom:1px solid var(--border-subtle);flex-wrap:wrap}
.inbox-filter-btn{padding:var(--sp-1) var(--sp-2-5);border-radius:var(--radius-full);font-size:var(--text-2xs);font-weight:700;
  background:var(--surface-2);color:var(--text-secondary);border:none;cursor:pointer}
.inbox-filter-btn.active{background:var(--color-primary);color:#04040C}

.conv-item{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background var(--duration-fast)}
.conv-item:hover,.conv-item.active{background:var(--surface-hover)}
.conv-item.active{border-left:3px solid var(--color-primary)}
.conv-name{font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}
.conv-preview{font-size:var(--text-xs);color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}

.chat-panel{display:flex;flex-direction:column;background:var(--bg-base);min-width:0}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--border-subtle);background:var(--bg-raised)}
.chat-messages{flex:1;overflow-y:auto;padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.msg-bubble{max-width:70%;padding:var(--sp-2-5) var(--sp-3-5);border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:var(--leading-snug)}
.msg-bubble.agent{align-self:flex-end;background:linear-gradient(135deg,var(--color-primary),var(--gold-700));color:#04040C;border-bottom-right-radius:4px}
.msg-bubble.contact{align-self:flex-start;background:var(--surface-2);color:var(--text-primary);border-bottom-left-radius:4px}
.msg-bubble.system{align-self:center;background:var(--surface-1);color:var(--text-tertiary);font-size:var(--text-xs);border-radius:var(--radius-full);padding:var(--sp-1) var(--sp-3)}
.msg-bubble.internal{background:var(--color-warning-subtle);color:var(--color-warning-text);border:1px dashed var(--color-warning-border)}
.msg-meta{font-size:var(--text-2xs);opacity:.6;margin-top:4px}
.chat-composer{display:flex;gap:var(--sp-2);padding:var(--sp-4);border-top:1px solid var(--border-subtle);background:var(--bg-raised)}
.chat-composer textarea{flex:1;resize:none;max-height:120px}

.contact-panel{border-left:1px solid var(--border-subtle);overflow-y:auto;padding:var(--sp-5);background:var(--bg-raised)}
@media (max-width:1100px){.contact-panel{display:none}}
.contact-panel .avatar-lg{width:64px;height:64px;border-radius:50%;background:var(--color-primary-subtle);color:var(--color-primary);
  display:grid;place-items:center;font-size:var(--text-xl);font-weight:800;margin:0 auto var(--sp-3)}

/* ══════════════ CAMPAIGN BUILDER ══════════════ */
.campaign-progress{display:flex;flex-direction:column;gap:var(--sp-1)}
.campaign-progress-bar{height:6px;background:var(--border-subtle);border-radius:var(--radius-full);overflow:hidden}
.campaign-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-hover));border-radius:var(--radius-full)}

/* ══════════════ DASHBOARD CHART (barras simples SVG) ══════════════ */
.mini-chart{display:flex;align-items:flex-end;gap:4px;height:80px}
.mini-chart-bar{flex:1;background:linear-gradient(180deg,var(--color-primary),var(--color-primary-hover));border-radius:3px 3px 0 0;min-height:3px}

/* ══════════════ UTILITIES ══════════════ */
.flex{display:flex} .flex-col{flex-direction:column} .items-center{align-items:center} .justify-between{justify-content:space-between}
.hidden{display:none !important}
.text-center{text-align:center}
.mt-2{margin-top:var(--sp-2)} .mt-4{margin-top:var(--sp-4)} .mb-4{margin-bottom:var(--sp-4)}
.w-full{width:100%}