/* Shared styles for the wacrm.co.in admin/user pages. */
:root {
  --green:#128C7E; --green-d:#0d6b60; --green-l:#25D366;
  --bg:#f0f2f5; --panel:#fff; --ink:#111b21; --muted:#667781; --line:#e4e7eb; --danger:#d33;
  --radius:12px; --shadow:0 1px 3px rgba(11,20,26,.08),0 8px 24px rgba(11,20,26,.05);
}
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); font-size:15px; }
a { color:var(--green); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:1.4rem; margin:0 0 .3rem; } h2 { font-size:1.1rem; margin:0 0 1rem; }

.layout { display:flex; min-height:100vh; }
.sidebar { width:230px; flex:none; background:#111b21; color:#d1d7db; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sidebar .brand { padding:1.1rem 1.1rem .7rem; display:flex; align-items:center; gap:.6rem; }
.sidebar .brand .logo { width:38px; height:38px; border-radius:10px; background:var(--green); display:grid; place-items:center; font-size:1.2rem; }
.sidebar .brand b { color:#fff; } .sidebar .brand small { color:#8696a0; display:block; font-size:.72rem; }
.nav { flex:1; padding:.5rem .6rem; overflow-y:auto; min-height:0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent; }
.nav::-webkit-scrollbar { width:6px; }
.nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.25); border-radius:3px; }
.nav::-webkit-scrollbar-track { background:transparent; }
.nav a { display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; margin:.1rem 0; border-radius:8px; color:#d1d7db; font-weight:500; white-space:nowrap; }
.nav a:hover { background:rgba(255,255,255,.07); text-decoration:none; }
.nav a.active { background:var(--green); color:#fff; }
/* Collapsible section (e.g. Official Meta WhatsApp) with its own submenu. */
.nav-group { margin:.1rem 0; }
.nav-group > summary { display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:8px; color:#d1d7db; font-weight:500; cursor:pointer; list-style:none; white-space:nowrap; }
.nav-group > summary::-webkit-details-marker { display:none; }
.nav-group > summary:hover { background:rgba(255,255,255,.07); }
.nav-group > summary .nav-caret { margin-left:auto; font-size:.7rem; transition:transform .15s; color:#8696a0; }
.nav-group[open] > summary .nav-caret { transform:rotate(90deg); }
.nav-sub { margin:.15rem 0 .3rem .55rem; padding-left:.55rem; border-left:1px solid rgba(255,255,255,.1); }
.nav-sub a { padding:.5rem .6rem; font-size:.9rem; font-weight:500; }
/* Logout sits last in the nav, visually separated from the pages above it. */
.nav a.nav-logout { margin-top:.6rem; border-top:1px solid rgba(255,255,255,.08); padding-top:.7rem; border-radius:0 0 8px 8px; color:#f0a4a4; }
.nav a.nav-logout:hover { background:rgba(211,51,51,.18); color:#fff; }
.sidebar .foot { padding:.8rem 1rem; border-top:1px solid rgba(255,255,255,.08); font-size:.82rem; color:#8696a0; }
.support-note { font-size:.78rem; line-height:1.5; }
.support-note a { color:#d1d7db; } .support-note a:hover { color:#fff; }
.login-card .support-note { color:var(--muted); text-align:center; margin-top:.8rem; }
.login-card .support-note a { color:var(--green); }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
/* Header band that continues the sidebar across the top of the content area. */
.topbar {
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:linear-gradient(90deg, #1e3a8a, #2563eb 55%, #3b82f6);
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:.75rem 1.6rem; min-height:60px;
}
.topbar .tb-left { display:flex; align-items:center; gap:.6rem; min-width:0; }
.topbar .tb-section { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#bfdbfe; }
.topbar .tb-title { font-weight:700; font-size:1rem; line-height:1.2; color:#fff; }
.topbar .tb-user { display:flex; align-items:center; gap:.6rem; }
.topbar .tb-avatar {
  width:32px; height:32px; border-radius:50%; background:var(--green); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.8rem; flex:none;
}
.topbar .tb-name { font-size:.85rem; font-weight:600; line-height:1.2; color:#fff; }
.topbar .tb-role { font-size:.72rem; color:#bfdbfe; }
/* Fills the area beside the sidebar (98%) instead of being capped and floating. */
.content { padding:1.6rem; width:98%; max-width:98%; margin:0 auto; }
.page-head { margin-bottom:1.3rem; }
.page-head h1 { font-size:1.35rem; }
.page-head p { color:var(--muted); margin:0; }

@media (max-width:720px) {
  .topbar { padding:.65rem 1rem; }
  .topbar .tb-name, .topbar .tb-role { display:none; }
  .content { padding:1rem; }
}

.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.3rem; margin-bottom:1.3rem; }
.grid { display:grid; gap:1.2rem; }
.grid.c3 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.stat { display:flex; align-items:center; gap:1rem; }
.stat .icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:1.3rem; background:rgba(18,140,126,.1); flex:none; }
.stat .num { font-size:1.6rem; font-weight:700; line-height:1.15; } .stat .lbl { color:var(--muted); font-size:.85rem; margin-top:.15rem; }
/* Tiles that link somewhere get a subtle lift on hover. */
a.card { display:block; transition:box-shadow .15s, transform .05s; }
a.card:hover { box-shadow:0 2px 6px rgba(11,20,26,.1),0 12px 28px rgba(11,20,26,.08); text-decoration:none; }
a.card:active { transform:translateY(1px); }

.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:100px; font-size:.76rem; font-weight:600; }
.badge.green{background:rgba(37,211,102,.15);color:#0d6b60;} .badge.gray{background:#eceff1;color:#556;}
.badge.red{background:rgba(211,51,51,.12);color:#b02a2a;} .badge.amber{background:rgba(224,160,32,.16);color:#8a6100;}
.badge.blue{background:rgba(52,120,246,.12);color:#1d4ed8;}
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.green{background:var(--green-l);} .dot.gray{background:#9aa5ab;} .dot.amber{background:#e0a020;} .dot.red{background:var(--danger);}

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th,td { text-align:left; padding:.65rem .8rem; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
tr:last-child td { border-bottom:none; } tbody tr:hover { background:#fafbfc; }
.progress { height:8px; background:#eceff1; border-radius:100px; overflow:hidden; min-width:120px; }
.progress > span { display:block; height:100%; background:var(--green-l); }

.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem; border:1px solid transparent; border-radius:8px; background:var(--green); color:#fff; font:inherit; font-weight:600; cursor:pointer; font-size:.88rem; }
.btn:hover{background:var(--green-d);text-decoration:none;} .btn:disabled{opacity:.5;cursor:not-allowed;}
.btn.sec{background:#fff;color:var(--ink);border-color:var(--line);} .btn.sec:hover{background:#f6f7f9;}
.btn.danger{background:var(--danger);} .btn.sm{padding:.3rem .6rem;font-size:.8rem;}
.actions{display:flex;gap:.4rem;flex-wrap:wrap;}
.muted{color:var(--muted);} .empty{text-align:center;color:var(--muted);padding:2.2rem;}
.alert{padding:.7rem .9rem;border-radius:8px;font-size:.9rem;margin-bottom:1rem;}
.alert.err{background:rgba(211,51,51,.1);color:#b02a2a;} .alert.ok{background:rgba(37,211,102,.12);color:#0d6b60;}

/* impersonation banner */
.imp-banner { background:#b7791f; color:#fff; padding:.6rem 1rem; border-radius:8px; margin-bottom:1.2rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; font-size:.9rem; }
.imp-banner .btn { margin-left:auto; background:rgba(0,0,0,.25); }
.imp-banner .btn:hover { background:rgba(0,0,0,.4); }

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0d6b60,#128C7E,#25D366);padding:1rem;}
.login-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;width:100%;max-width:360px;}
.login-card label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin:0 0 .35rem;}
.login-card input{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;font:inherit;margin-bottom:1rem;}
/* Brand row on the auth pages (login/register/forgot/reset/otp). Without a
   size cap here, an uploaded logo image fills the whole card width. */
.login-card .brand{display:flex;align-items:center;gap:.7rem;}
.login-card .brand .logo{flex:none;width:56px;height:56px;border-radius:12px;background:var(--green);display:grid;place-items:center;font-size:1.5rem;}
.login-card .brand .logo:has(img){width:auto;min-width:56px;max-width:190px;}
.login-card .brand .logo img{width:auto !important;height:100% !important;max-width:190px;}

/* --------------------------------------------------------------------------
   Dark theme. Toggled by the 🌓 button in the topbar (layout.php), which sets
   .dark on <html> and persists the choice in localStorage. Everything painted
   with the :root variables follows automatically; the rules below catch the
   few hard-coded light surfaces.
   -------------------------------------------------------------------------- */
html.dark {
  --bg:#0b141a; --panel:#1f2c34; --ink:#e9edef; --muted:#8696a0; --line:#2f3b43;
  --shadow:0 1px 3px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.25);
}
html.dark .topbar {
  background:linear-gradient(90deg, #172554, #1e40af 55%, #1d4ed8);
  border-bottom-color:rgba(255,255,255,.12);
}
html.dark .btn.sec { background:var(--panel); color:var(--ink); border-color:var(--line); }
html.dark .btn.sec:hover { background:#2a3942; }
html.dark .badge.gray { background:#2a3942; color:#aebac1; }
html.dark .badge.green { color:#3ddc84; }
html.dark .progress { background:#2a3942; }
html.dark .login-card { background:var(--panel); }
html.dark input, html.dark select, html.dark textarea {
  background:var(--panel); color:var(--ink); border-color:var(--line);
  color-scheme:dark;
}
.theme-toggle { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff;
  border-radius:8px; padding:.35rem .55rem; cursor:pointer; font-size:1rem; line-height:1; }
.theme-toggle:hover { background:rgba(255,255,255,.16); }