/* ============================================================
   Kalash Group theme for the WhatsApp Bulk Messenger UI
   (loaded after app.css; only colours, font and branding)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --brand: #1270ad;
  --brand-2: #4fa3c2;
  --brand-dark: #0b2545;
  --bg: #f4f6fa;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

.sidebar { background: linear-gradient(180deg, #0b2545, #0e4174); color: #dbe7f3; }
.sidebar .brand { border-bottom-color: rgba(255,255,255,.08); }
.sidebar .brand .logo { background: #fff; padding: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.25); overflow: hidden; }
.sidebar .brand .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sidebar .brand b { letter-spacing: .04em; }
.sidebar .brand small { color: #93b4d6; }
.nav .group-title { color: #7fa2c6; }
.nav a { color: #cbd9e8; }
.nav a:hover { background: rgba(255,255,255,.08); }
.nav a.active { background: rgba(79,163,194,.18); color: #fff; box-shadow: inset 3px 0 0 #4fa3c2; }
.nav a.kd-back { background: rgba(255,255,255,.06); color: #fff; font-weight: 600; margin-bottom: 8px; }
.nav a.kd-back:hover { background: rgba(255,255,255,.14); }
.sidebar-foot { color: #93b4d6; }

input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(18,112,173,.15) !important; }
.btn.primary:hover { background: #0e4174; }
.btn.green { background: #1270ad; border-color: #1270ad; color: #fff; }
.btn.green:hover { background: #0e4174; border-color: #0e4174; }
.btn.kd-portal { background: #0b2545; border-color: #0b2545; color: #fff; text-decoration: none; }
.btn.kd-portal:hover { background: #0e4174; text-decoration: none; }

/* login */
.login-wrap { background: radial-gradient(circle at 20% 15%, rgba(79,163,194,.35), transparent 45%), linear-gradient(150deg, #0b2545, #0e4174 60%, #0b2545) !important; }
.login-card .lg-logo { background: #fff !important; width: auto !important; height: auto !important; padding: 0 !important; box-shadow: none !important; }
.login-card .lg-logo img { width: 130px; height: auto; display: block; margin: 0 auto; }
.kd-sso { display: block; text-align: center; margin-top: 12px; padding: 11px; border-radius: 10px; background: #0b2545; color: #fff !important; font-weight: 600; text-decoration: none !important; }
.kd-sso:hover { background: #0e4174; }
.kd-or { text-align: center; color: var(--muted); font-size: 12.5px; margin: 14px 0 0; }