@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');

/* ============ TEMA ESCURO (padrão) ============ */
:root, [data-theme="dark"]{
  --bg: #101317;
  --panel: #171b21;
  --panel-2: #1d222a;
  --line: #262c35;
  --text: #e8eaed;
  --text-dim: #8b93a1;
  --text-faint: #565f6c;
  --whats: #2fa88a;
  --whats-dim: #16302a;
  --email: #d99b3f;
  --email-dim: #332916;
  --danger: #d9576b;
  --danger-dim: #3a1e24;
  --focus: #5b9dd9;
}

/* ============ TEMA CLARO ============ */
[data-theme="light"]{
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-2: #f0f1f4;
  --line: #e2e5ea;
  --text: #1b1f26;
  --text-dim: #5a6270;
  --text-faint: #8b93a1;
  --whats: #1f8f73;
  --whats-dim: #e3f4ee;
  --email: #b9791f;
  --email-dim: #fbf0dc;
  --danger: #c23b52;
  --danger-dim: #fbe6ea;
  --focus: #2f74b5;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:14px;
}

.app-shell{display:flex; min-height:100vh;}

/* ---- Sidebar ---- */
.sidebar{
  width:220px;
  background:var(--panel);
  border-right:1px solid var(--line);
  padding:22px 14px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
}
.brand{display:flex; align-items:center; gap:9px; margin-bottom:24px; padding:0 6px;}
.brand-logo{width:28px; height:28px; border-radius:7px; object-fit:cover;}
.brand-mark{
  width:28px; height:28px; border-radius:7px;
  background:linear-gradient(135deg, var(--whats), #1c3f37);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-family:'Manrope',sans-serif; font-size:13px; color:#0d1a16;
}
.brand-name{font-family:'Manrope',sans-serif; font-weight:800; font-size:14.5px;}

.nav-label{
  font-size:10px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-faint); padding:0 10px; margin:16px 0 6px;
}
.nav-item{
  padding:8px 10px; border-radius:6px; color:var(--text-dim);
  cursor:pointer; margin-bottom:2px; font-weight:500;
  text-decoration:none; display:block; font-size:13px;
}
.nav-item:hover{background:var(--panel-2); color:var(--text);}
.nav-item.active{background:var(--panel-2); color:var(--text); box-shadow: inset 2px 0 0 var(--whats);}

.theme-toggle{
  margin-top:auto;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--text-dim);
  padding:9px 12px;
  border-radius:8px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
}
.theme-toggle:hover{color:var(--text);}

/* ---- Main ---- */
.main{flex:1; padding:26px 32px; max-width:1180px;}

h1{font-family:'Manrope',sans-serif; font-size:21px; font-weight:800; margin:0 0 4px;}
h2{font-family:'Manrope',sans-serif; font-size:16px; font-weight:800; margin:0 0 4px;}
.sub{color:var(--text-dim); font-size:13px; margin:0;}

.top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px;}

/* ---- Botões ---- */
.btn{
  background:var(--whats); color:#0d1a16; border:none; font-weight:700;
  padding:10px 16px; border-radius:8px; cursor:pointer; font-size:13px; font-family:inherit;
  text-decoration:none; display:inline-block;
}
.btn:hover{filter:brightness(1.08);}
.btn-ghost{
  background:transparent; color:var(--text-dim); border:1px solid var(--line);
  padding:9px 14px; border-radius:8px; font-weight:600; cursor:pointer;
  font-size:13px; font-family:inherit; text-decoration:none; display:inline-block;
}
.btn-ghost:hover{color:var(--text); border-color:var(--focus);}
.btn-danger{background:var(--danger); color:#fff;}

/* ---- Cards / painéis ---- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px;
  margin-bottom:20px;
}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; margin-bottom:24px;}

.stats{display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap;}
.stat-card{flex:1; min-width:140px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:15px 18px;}
.stat-num{font-family:'Manrope',sans-serif; font-size:22px; font-weight:800;}
.stat-label{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
.stat-card.ok .stat-num{color:var(--whats);}
.stat-card.err .stat-num{color:var(--danger);}

/* ---- Formulários ---- */
.field{margin-bottom:16px;}
.field label{
  display:block; font-size:11.5px; font-weight:600; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:10px 12px; border-radius:8px; font-family:inherit; font-size:13.5px;
}
.field textarea{min-height:120px; resize:vertical; line-height:1.6;}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--focus); outline-offset:1px; border-color:transparent;
}
.field-hint{font-size:11.5px; color:var(--text-faint); margin-top:5px;}
.field-row{display:flex; gap:14px;}
.field-row .field{flex:1;}

/* ---- Tabela ---- */
.table-wrap{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
table{width:100%; border-collapse:collapse;}
th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--text-faint); font-weight:700; padding:12px 16px;
  border-bottom:1px solid var(--line); background:var(--panel-2);
}
td{padding:13px 16px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle;}
tr:last-child td{border-bottom:none;}

.chan-status{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:20px; font-size:11px; font-weight:700;
}
.chan-status.ok{background:var(--whats-dim); color:var(--whats);}
.chan-status.err{background:var(--danger-dim); color:var(--danger);}
.chan-status.pending{background:var(--panel-2); color:var(--text-faint); border:1px solid var(--line);}
.chan-status .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

/* ---- Flash messages ---- */
.flash{padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:13px; font-weight:600;}
.flash-sucesso{background:var(--whats-dim); color:var(--whats);}
.flash-erro{background:var(--danger-dim); color:var(--danger);}

/* ---- Upload de imagem ---- */
.upload-box{
  border:1.5px dashed var(--line); border-radius:10px; padding:18px;
  display:flex; align-items:center; gap:14px;
}
.upload-preview{
  width:52px; height:52px; border-radius:9px; object-fit:cover; background:var(--panel-2);
  border:1px solid var(--line);
}