/* ═══════════════════════════════════════════════════════════════
   VISUDATA DESIGN SYSTEM — Editorial Glass
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ── Tokens ── */
:root {
  /* Surface */
  --bg:          #f8f9fa;
  --surface:     #f8f9fa;
  --surface-low: #f1f4f6;
  --surface-high:#e2e9ec;
  --surface-card:#ffffff;
  --surface-dim: #d1dce0;

  /* Brand */
  --primary:     #575e70;
  --primary-dim: #4b5264;
  --primary-ctn: #dce2f7;
  --secondary:   #684cb6;
  --sec-dim:     #5b3fa9;
  --sec-ctn:     #e8ddff;
  --on-sec-ctn:  #5a3da8;
  --tertiary:    #7a5a00;
  --tert-ctn:    #fcc025;

  /* Text */
  --on-surface:  #2b3437;
  --on-surface-v:#586064;
  --on-primary:  #f7f7ff;
  --on-secondary:#fdf7ff;
  --outline:     #737c7f;
  --outline-v:   #abb3b7;

  /* Semantic */
  --success:     #1D9E75;
  --success-l:   #25c490;
  --warn:        #e0913a;
  --warn-ctn:    rgba(224,145,58,.1);
  --error:       #9e3f4e;
  --error-l:     #d05252;
  --error-ctn:   rgba(158,63,78,.08);
  --info:        #3b82f6;

  /* Effects */
  --glass-bg:    rgba(248,249,250,.85);
  --glass-blur:  blur(12px);
  --shadow-ambient: 0px 20px 40px rgba(43,52,55,.06);
  --shadow-sm:   0px 4px 12px rgba(43,52,55,.04);
  --gradient:    linear-gradient(135deg, #575e70 0%, #dce2f7 100%);

  /* Spacing / Radius */
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* Sidebar */
  --sb-w: 60px;
  --sb-w-open: 240px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--on-surface);
  min-height: 100vh;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
.font-manrope, .font-headline { font-family: 'Manrope', sans-serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--outline-v); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — Collapse/Expand on hover
   ═══════════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed; left: 0; top: 0;
  width: var(--sb-w); height: 100vh;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex; flex-direction: column;
  padding: 16px 8px;
  z-index: 100;
  transition: width .3s ease;
  overflow: hidden;
  border-right: 1px solid rgba(171,179,183,.1);
}
.sidebar:hover { width: var(--sb-w-open); }

.sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 20px;
  min-height: 48px;
}
.sb-logo {
  width: 36px; height: 36px; border-radius: var(--r);
  background: var(--gradient);
  color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-size: 16px; font-weight: 800;
  flex-shrink: 0;
}
.sb-brand-text {
  font-family: 'Manrope', sans-serif;
  font-size: 18px; font-weight: 800;
  color: var(--on-surface);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease .1s;
}
.sidebar:hover .sb-brand-text { opacity: 1; }

.sb-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.sb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-full);
  color: var(--on-surface-v);
  font-family: 'Manrope', sans-serif;
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
  transition: all .2s;
  border: none; background: none; width: 100%;
  text-align: left;
}
.sb-item:hover { background: rgba(104,76,182,.06); color: var(--on-surface); }
.sb-item.active {
  background: var(--sec-ctn);
  color: var(--on-sec-ctn);
}
.sb-item .material-symbols-outlined { font-size: 22px; flex-shrink: 0; width: 22px; }

.sb-label {
  opacity: 0;
  transition: opacity .2s ease .1s;
  overflow: hidden;
}
.sidebar:hover .sb-label { opacity: 1; }

.sb-footer {
  border-top: 1px solid rgba(171,179,183,.1);
  padding-top: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.sb-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
}
.sb-avatar {
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--secondary);
  color: var(--on-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.page-content {
  margin-left: var(--sb-w);
  padding: 28px 40px;
  min-height: 100vh;
  transition: margin-left .3s ease;
  max-width: 1400px;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-ambient);
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-1px); box-shadow: var(--shadow-ambient), 0 2px 8px rgba(43,52,55,.04); }

.card-flat {
  background: var(--surface-low);
  border-radius: var(--r-lg);
  padding: 24px;
}

.card-title {
  font-family: 'Manrope', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.card-sub {
  font-size: 11px; color: var(--on-surface-v);
  margin-bottom: 16px; line-height: 1.5;
}

/* Card glass variant */
.card-glass {
  background: rgba(255,255,255,.7);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-ambient);
}

/* ═══════════════════════════════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════════════════════════════ */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.kpi-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
  transition: all .2s;
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-ambient); }
.kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.kpi-accent-purple::before { background: var(--secondary); }
.kpi-accent-green::before { background: var(--success-l); }
.kpi-accent-warn::before { background: var(--warn); }
.kpi-accent-error::before { background: var(--error-l); }
.kpi-accent-blue::before { background: var(--info); }

.kpi-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--on-surface-v);
}
.kpi-val {
  font-family: 'Manrope', sans-serif;
  font-size: 28px; font-weight: 800; line-height: 1;
  color: var(--on-surface);
}
.kpi-val.c-green { color: var(--success-l); }
.kpi-val.c-warn { color: var(--warn); }
.kpi-val.c-danger { color: var(--error-l); }
.kpi-sub { font-size: 10px; color: var(--on-surface-v); }

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.text-headline-lg { font-family:'Manrope',sans-serif; font-size:28px; font-weight:800; color:var(--on-surface); letter-spacing:-.02em; }
.text-headline-md { font-family:'Manrope',sans-serif; font-size:20px; font-weight:700; color:var(--on-surface); }
.text-headline-sm { font-family:'Manrope',sans-serif; font-size:16px; font-weight:700; color:var(--on-surface); }
.text-body { font-size:13px; color:var(--on-surface); line-height:1.6; }
.text-body-sm { font-size:12px; color:var(--on-surface-v); line-height:1.5; }
.text-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--on-surface-v); }
.text-label-lg { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--on-surface-v); }
.text-muted { color: var(--on-surface-v); }
.text-secondary { color: var(--secondary); }
.text-success { color: var(--success-l); }
.text-warn { color: var(--warn); }
.text-error { color: var(--error-l); }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px; font-weight: 700;
  border: none; border-radius: var(--r);
  padding: 10px 20px;
  transition: all .2s;
  cursor: pointer;
}
.btn-primary { background: var(--secondary); color: var(--on-secondary); }
.btn-primary:hover { opacity: .9; }
.btn-secondary { background: var(--surface-high); color: var(--on-surface); }
.btn-secondary:hover { background: var(--surface-dim); }
.btn-ghost { background: none; color: var(--secondary); padding: 8px 16px; }
.btn-ghost:hover { background: rgba(104,76,182,.06); }
.btn-danger { background: var(--error-ctn); color: var(--error-l); }
.btn-danger:hover { background: rgba(158,63,78,.14); }
.btn-sm { font-size: 11px; padding: 6px 14px; border-radius: 8px; }
.btn-pill { border-radius: var(--r-full); }

/* ═══════════════════════════════════════════════════════════════
   BADGES & CHIPS
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-full);
  white-space: nowrap;
}
.badge-purple { background: var(--sec-ctn); color: var(--on-sec-ctn); }
.badge-green { background: rgba(29,158,117,.12); color: var(--success-l); }
.badge-warn { background: var(--warn-ctn); color: var(--warn); }
.badge-error { background: var(--error-ctn); color: var(--error-l); }
.badge-blue { background: rgba(59,130,246,.1); color: var(--info); }
.badge-muted { background: var(--surface-high); color: var(--on-surface-v); }
.badge-gold { background: rgba(252,192,37,.15); color: var(--tertiary); }

/* Status badges */
.status-novo { background: rgba(59,130,246,.1); color: var(--info); }
.status-em_atendimento { background: var(--sec-ctn); color: var(--on-sec-ctn); }
.status-proposta_enviada { background: var(--warn-ctn); color: var(--warn); }
.status-aguardando_docs { background: rgba(252,192,37,.15); color: var(--tertiary); }
.status-fechado { background: rgba(29,158,117,.12); color: var(--success-l); }
.status-perdido { background: var(--error-ctn); color: var(--error-l); }
.status-dormindo { background: var(--surface-high); color: var(--on-surface-v); }

/* Channel tags */
.ch-tag { font-size:10px; font-weight:600; padding:2px 8px; border-radius:4px; }
.ch-whatsapp { background:rgba(37,196,148,.1); color:var(--success-l); }
.ch-instagram { background:rgba(192,83,196,.1); color:#a855f7; }
.ch-site { background:rgba(104,76,182,.08); color:var(--secondary); }
.ch-indicacao { background:var(--warn-ctn); color:var(--warn); }
.ch-telefone { background:var(--surface-high); color:var(--on-surface-v); }
.ch-email { background:var(--surface-high); color:var(--on-surface-v); }
.ch-entrevista { background:rgba(104,76,182,.08); color:var(--secondary); }

/* ═══════════════════════════════════════════════════════════════
   GRID UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.grid-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.flex-col { display:flex; flex-direction:column; }
.gap-sm { gap:8px; }
.gap-md { gap:16px; }
.gap-lg { gap:24px; }

/* Bento grid */
.bento { display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.col-8 { grid-column:span 8; }
.col-6 { grid-column:span 6; }
.col-4 { grid-column:span 4; }
.col-3 { grid-column:span 3; }
.col-9 { grid-column:span 9; }
.col-12 { grid-column:span 12; }

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════ */
.sec-hd {
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.sec-title {
  font-family:'Manrope',sans-serif;
  font-size:15px; font-weight:700;
  color:var(--on-surface);
}
.sec-count {
  font-size:10px; font-weight:700;
  background:var(--sec-ctn); color:var(--on-sec-ctn);
  padding:2px 8px; border-radius:var(--r-full);
}
.sec-pulse {
  width:8px; height:8px; border-radius:50%;
  background:var(--success-l);
  animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ═══════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════ */
.input {
  width:100%; padding:11px 14px;
  background:var(--surface-high);
  border:none; border-radius:var(--r);
  font-size:14px; font-family:inherit;
  color:var(--on-surface);
  outline:none;
  transition:all .15s;
}
.input:focus { box-shadow:0 0 0 2px rgba(104,76,182,.2); background:var(--surface-card); }
.input::placeholder { color:var(--outline); }

.textarea { resize:vertical; min-height:80px; line-height:1.6; }
.select { appearance:none; cursor:pointer; }

/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */
table { width:100%; border-collapse:collapse; }
thead th {
  text-align:left; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--on-surface-v);
  padding:0 12px 12px;
}
tbody tr { transition:background .15s; }
tbody tr:hover { background:var(--surface-low); }
td { padding:14px 12px; font-size:12.5px; }

/* ═══════════════════════════════════════════════════════════════
   ALERTS & LISTS
   ═══════════════════════════════════════════════════════════════ */
.alert-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-radius:var(--r-lg);
  background:var(--surface-low);
  transition:all .15s;
}
.alert-item:hover { background:var(--surface-high); }

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */
.empty-state { text-align:center; padding:32px 20px; color:var(--on-surface-v); }
.empty-state-icon { font-size:28px; opacity:.4; margin-bottom:10px; }
.empty-state-title { font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; color:var(--on-surface); margin-bottom:6px; }
.empty-state-desc { font-size:11.5px; line-height:1.6; max-width:360px; margin:0 auto; }

/* ═══════════════════════════════════════════════════════════════
   LOADING
   ═══════════════════════════════════════════════════════════════ */
.loading { display:flex; align-items:center; justify-content:center; height:80px; color:var(--on-surface-v); font-size:12px; gap:8px; }
.spinner { width:18px; height:18px; border:2px solid var(--surface-dim); border-top-color:var(--secondary); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .kpi-row { grid-template-columns:repeat(3,1fr); }
  .grid-3, .bento .col-8, .bento .col-6, .bento .col-4, .bento .col-3, .bento .col-9 { grid-column:span 6; }
}
@media (max-width:900px) {
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .bento .col-8, .bento .col-6, .bento .col-4, .bento .col-3, .bento .col-9 { grid-column:span 12; }
}
@media (max-width:600px) {
  .sidebar { display:none; }
  .page-content { margin-left:0; padding:16px; }
  .kpi-row { grid-template-columns:repeat(2,1fr); }
  .grid-6 { grid-template-columns:repeat(2,1fr); }
}