/**
 * public/client-theme.css — Edureka brand theme.
 *
 * Loaded LAST on every page (after each page's own <style>), so these
 * variables and rules override the baseline CallIQ look. To re-brand for
 * another client, edit only this file.
 *
 * Brand source: edureka.co — logo blue #0049CC, header navy #192F60,
 * page grey #F4F5F7, Open Sans.
 */

/* ── Light (default) ─────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --bg:      #f4f5f7;
  --bg2:     #ffffff;
  --bg3:     #f7f9fc;
  --bg4:     #e9eef6;
  --border:  #e1e6ef;
  --border2: #c9d2e3;
  --text:    #1b2440;
  --text2:   #4a5673;
  --text3:   #8490ab;
  --accent:  #0049cc;
  --accent2: #003ba6;
  --green:   #12a150;
  --amber:   #e08a00;
  --red:     #d92d20;
  --purple:  #6941c6;
  --mono:    'Open Sans', system-ui, sans-serif;
  --sans:    'Open Sans', system-ui, sans-serif;

  --brand-navy:   #192f60;
  --brand-navy2:  #13254d;
  --brand-blue:   #0049cc;
  --brand-hi:     #6fa0ff;
}

/* ── Dark ────────────────────────────────────────────────────────── */
[data-theme="dark"],
html:not([data-theme]) {
  --bg:      #0b1426;
  --bg2:     #111c33;
  --bg3:     #16223d;
  --bg4:     #1c2a4a;
  --border:  #22325a;
  --border2: #2c3f6d;
  --text:    #e6ecf7;
  --text2:   #9aa8c7;
  --text3:   #64749a;
  --accent:  #4d8dff;
  --accent2: #2f6fe4;
  --green:   #2fbf71;
  --amber:   #f5a524;
  --red:     #f0524a;
  --purple:  #9b7bf0;
  --mono:    'Open Sans', system-ui, sans-serif;
  --sans:    'Open Sans', system-ui, sans-serif;

  --brand-navy:   #0e1830;
  --brand-navy2:  #0a1226;
  --brand-blue:   #4d8dff;
  --brand-hi:     #8fb5ff;
}

body { font-variant-numeric: tabular-nums; }

/* Code samples (API docs on Submit Call) keep a fixed-width font so columns line up */
pre, code, kbd { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace !important; }

/* ── Sidebar: Edureka navy with white logo panel ──────────────────── */
.sidebar {
  background: var(--brand-navy) !important;
  border-right: none !important;
}
.sidebar .logo {
  background: #ffffff;
  border-bottom: 3px solid var(--brand-blue) !important;
  padding: 18px 20px 14px !important;
}
.sidebar .logo .client-logo { padding: 0 !important; background: none !important; }
.sidebar .logo-mark {
  color: var(--brand-navy) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
}
[data-theme="dark"] .sidebar .logo-mark,
html:not([data-theme]) .sidebar .logo-mark { color: #192f60 !important; }
.sidebar .logo-sub {
  color: #6b7897 !important;
  letter-spacing: 1px !important;
  font-weight: 600;
}
.sidebar .nav-section {
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 1.2px !important;
  font-weight: 700;
}
.sidebar .nav-item {
  color: rgba(255, 255, 255, 0.78) !important;
  border-left: 3px solid transparent !important;
}
.sidebar .nav-item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
.sidebar .nav-item.active {
  color: #ffffff !important;
  background: rgba(111, 160, 255, 0.16) !important;
  border-left-color: var(--brand-hi) !important;
  font-weight: 600;
}
.sidebar .nav-icon { opacity: 0.85 !important; }
.sidebar .sidebar-footer { border-top-color: rgba(255, 255, 255, 0.12) !important; }
.sidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }

/* ── Top bar: thin brand stripe like edureka.co's header ──────────── */
.main .topbar { box-shadow: inset 0 3px 0 var(--brand-blue); }

/* Standalone pages (User Management) put the logo inside their own header */
.topbar .logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--brand-navy) !important; font-family: var(--sans) !important;
  font-weight: 700; margin-bottom: 4px;
}
.topbar .logo .client-logo { margin-bottom: 0 !important; height: 28px !important; padding: 0 !important; }
[data-theme="dark"] .topbar .logo,
html:not([data-theme]) .topbar .logo { color: var(--text) !important; }
[data-theme="dark"] .topbar .logo .client-logo,
html:not([data-theme]) .topbar .logo .client-logo { background: #fff !important; padding: 3px 6px !important; border-radius: 6px; }
.topbar-title { color: var(--brand-navy); font-weight: 700 !important; }
[data-theme="dark"] .topbar-title,
html:not([data-theme]) .topbar-title { color: var(--text); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-primary { background: var(--brand-blue) !important; }
.btn-primary:hover { background: var(--accent2) !important; }

/* ── Login page ───────────────────────────────────────────────────── */
body.login-page {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0, 73, 204, 0.35), transparent 60%),
    linear-gradient(160deg, #192f60 0%, #0e1d40 100%) !important;
}
body.login-page .card {
  border: none !important;
  box-shadow: 0 24px 60px rgba(5, 16, 44, 0.45);
  border-top: 4px solid #0049cc !important;
}
body.login-page .logo { color: #192f60 !important; font-weight: 700 !important; }
body.login-page .client-logo { padding-left: 0 !important; }