:root{
  --wa-green:#25D366;
  --wa-green-dark:#128C7E;
  --wa-teal:#075E54;
  --ink:#101828;
  --muted:#667085;
  --border:#e4e7ec;
  --bg:#f5f7fa;
  --card:#ffffff;
  --danger:#e4483f;
  --warn:#f5a524;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.06);
  font-size:16px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--ink);
}
h1,h2,h3,.brand-text strong{font-family:'Poppins',sans-serif;}
a{text-decoration:none;color:inherit;}

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

.sidebar{
  width:250px;
  background:linear-gradient(180deg,var(--wa-teal),#053f39);
  color:#e6f5f1;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;left:0;bottom:0;
  z-index:50;
  transition:transform .25s ease;
}
.brand{display:flex;align-items:center;gap:12px;padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.12);}
.brand-icon{
  width:42px;height:42px;border-radius:12px;
  background:var(--wa-green);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;
  flex-shrink:0;
}
.brand-text{display:flex;flex-direction:column;line-height:1.25;}
.brand-text strong{font-size:15px;color:#fff;}
.brand-text span{font-size:11.5px;opacity:.75;letter-spacing:.3px;}

.nav{display:flex;flex-direction:column;padding:16px 12px;gap:2px;flex:1;}
.nav a{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:10px;
  font-size:14.5px;font-weight:500;color:#cfe9e3;
  transition:.15s;
}
.nav a i{width:18px;text-align:center;opacity:.9;}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav a.active{background:var(--wa-green);color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.15);}

.sidebar-footer{padding:16px 20px 22px;border-top:1px solid rgba(255,255,255,.12);}
.logout-link{display:flex;align-items:center;gap:10px;font-size:14px;color:#f2c8c5;}
.logout-link:hover{color:#fff;}

.main{margin-left:250px;flex:1;display:flex;flex-direction:column;min-height:100vh;width:calc(100% - 250px);}

.topbar{
  height:68px;background:var(--card);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;padding:0 28px;position:sticky;top:0;z-index:30;
}
.topbar h1{font-size:19px;margin:0;flex:1;font-weight:600;}
.menu-toggle{display:none;background:none;border:none;font-size:18px;cursor:pointer;color:var(--ink);}
.topbar-user{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--muted);}
.topbar-user i{font-size:26px;color:var(--wa-green-dark);}

.content{padding:26px 28px 40px;flex:1;}
.page-footer{padding:16px 28px;font-size:12.5px;color:var(--muted);text-align:center;border-top:1px solid var(--border);background:var(--card);}

/* ---------- Cards / grid ---------- */
.grid{display:grid;gap:20px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:1.4fr 1fr;}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
}
.card h3{margin:0 0 14px;font-size:15.5px;font-weight:600;}

.stat-card{display:flex;align-items:center;gap:16px;}
.stat-icon{
  width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;flex-shrink:0;
}
.stat-icon.green{background:var(--wa-green);}
.stat-icon.teal{background:var(--wa-teal);}
.stat-icon.amber{background:var(--warn);}
.stat-icon.red{background:var(--danger);}
.stat-value{font-size:24px;font-weight:700;line-height:1.1;font-family:'Poppins',sans-serif;}
.stat-label{font-size:12.5px;color:var(--muted);margin-top:2px;}

/* ---------- Forms ---------- */
label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:#344054;}
.form-group{margin-bottom:18px;}
.form-hint{font-size:12px;color:var(--muted);margin-top:5px;}
input[type=text],input[type=password],input[type=number],input[type=search],input[type=tel],textarea,select{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;
  font-size:14px;font-family:inherit;background:#fcfcfd;color:var(--ink);transition:.15s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--wa-green);box-shadow:0 0 0 3px rgba(37,211,102,.15);background:#fff;}
textarea{resize:vertical;min-height:110px;}
.row{display:flex;gap:14px;}
.row > *{flex:1;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:10px;padding:11px 20px;font-size:14px;font-weight:600;
  cursor:pointer;transition:.15s;font-family:inherit;
}
.btn-primary{background:var(--wa-green);color:#fff;}
.btn-primary:hover{background:var(--wa-green-dark);}
.btn-outline{background:#fff;border:1px solid var(--border);color:var(--ink);}
.btn-outline:hover{border-color:var(--wa-green);color:var(--wa-green-dark);}
.btn-danger{background:#fdeceb;color:var(--danger);}
.btn-danger:hover{background:var(--danger);color:#fff;}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:8px;}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn-block{width:100%;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13.8px;}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);}
th{color:var(--muted);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;background:#fafbfc;}
tr:hover td{background:#fbfdfc;}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;}
.badge-green{background:#e7f9ee;color:#0a7a3d;}
.badge-red{background:#fdeceb;color:var(--danger);}
.badge-amber{background:#fef4e6;color:#b06a00;}
.badge-gray{background:#f2f4f7;color:var(--muted);}

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at top left,#0e6b5c,var(--wa-teal) 60%);
  padding:20px;
}
.login-card{
  background:#fff;border-radius:20px;padding:40px 36px;width:100%;max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:center;
}
.login-card .brand-icon{margin:0 auto 14px;width:56px;height:56px;font-size:26px;}
.login-card h2{margin:4px 0 2px;font-size:20px;}
.login-card p.sub{color:var(--muted);font-size:13.5px;margin:0 0 26px;}
.login-card form{text-align:left;}
.alert{padding:11px 14px;border-radius:10px;font-size:13.5px;margin-bottom:16px;}
.alert-error{background:#fdeceb;color:var(--danger);}
.alert-success{background:#e7f9ee;color:#0a7a3d;}
.alert-info{background:#eaf2ff;color:#1a56db;}

/* ---------- Tabs (compose page) ---------- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:18px;}
.tab-btn{
  padding:10px 4px;margin-right:22px;background:none;border:none;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;
}
.tab-btn.active{color:var(--wa-green-dark);border-color:var(--wa-green);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- Contact chips / selection ---------- */
.select-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:10px;}
.count-pill{background:#eaf9f0;color:var(--wa-green-dark);padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;}

/* ---------- Phone preview mock ---------- */
.phone-preview{
  background:#e5ddd5;border-radius:20px;padding:16px;min-height:260px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-image:linear-gradient(0deg, rgba(0,0,0,0.02) 1px, transparent 1px);
}
.chat-bubble{
  background:#dcf8c6;border-radius:10px;padding:10px 13px;max-width:88%;
  font-size:13.5px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.08);
  word-wrap:break-word;
}
.chat-bubble img,.chat-bubble video{width:100%;border-radius:8px;margin-bottom:6px;display:block;}
.chat-bubble .doc-chip{display:flex;align-items:center;gap:8px;background:#fff;border-radius:8px;padding:8px;margin-bottom:6px;font-size:12.5px;}
.chat-time{font-size:10.5px;color:#667781;text-align:right;margin-top:4px;}

/* ---------- Progress ---------- */
.progress-bar{height:10px;background:#eef1f4;border-radius:20px;overflow:hidden;}
.progress-bar-fill{height:100%;background:var(--wa-green);width:0%;transition:width .3s;}

/* ---------- File drop ---------- */
.dropzone{
  border:2px dashed var(--border);border-radius:12px;padding:26px;text-align:center;
  cursor:pointer;transition:.15s;background:#fbfcfd;
}
.dropzone:hover,.dropzone.dragover{border-color:var(--wa-green);background:#f4fcf7;}
.dropzone i{font-size:26px;color:var(--wa-green-dark);margin-bottom:8px;display:block;}

/* ---------- Misc ---------- */
.empty-state{text-align:center;padding:50px 20px;color:var(--muted);}
.empty-state i{font-size:36px;margin-bottom:12px;color:#c9cfd6;display:block;}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.section-title h3{margin:0;}
.text-muted{color:var(--muted);}
.mt-0{margin-top:0;}

@media(max-width:900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;width:100%;}
  .menu-toggle{display:block;}
}