/* VIRA · Verification Incentivization & Retention App — admin theme
   Primary purple from VIRA logo + Godrej pink/green/blue accents */
:root {
  --brand-purple: #4B1E9E;
  --brand-purple-light: #6D4BC7;
  --brand-violet-bg: #EEE8FA;
  --brand-pink: #E6007E;
  --brand-green: #8DC63F;
  --brand-blue: #00AEEF;
  --brand-dark: #1A1332;
  --brand-light: #F7F3FF;
  --sidebar-bg: #2A1860;
  --sidebar-fg: #D8CFF0;
  --sidebar-fg-hover: #FFFFFF;
  --accent-grad: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-light) 70%, var(--brand-blue));
}

a { color: var(--brand-purple); }
.btn-primary { background: var(--brand-purple); border-color: var(--brand-purple); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-purple-light); border-color: var(--brand-purple-light); }
.btn-outline-primary { color: var(--brand-purple); border-color: var(--brand-purple); }
.btn-outline-primary:hover { background: var(--brand-purple); color: #fff; }
.text-primary { color: var(--brand-purple) !important; }
.bg-primary { background: var(--brand-purple) !important; }
.badge.bg-primary { background: var(--brand-purple) !important; }
.table thead th { color: var(--brand-purple); font-weight: 700; }

/* VIRA logo partners row */
.vira-partners { display: flex; align-items: center; gap: 14px; }
.vira-partners img.godrej { height: 28px; }
.vira-partners img.vira { height: 34px; }
.vira-partners img.ekta  { height: 28px; }
.vira-partners .divider { width: 1px; height: 28px; background: rgba(75,30,158,.25); }

html, body { height: 100%; }
body {
  font-family: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background: #F1F5F9;
  color: var(--brand-dark);
  margin: 0;
}

/* Top navbar */
.gw-topbar {
  height: 64px;
  background: #ffffff;
  border-bottom: 1px solid #E2E8F0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.gw-topbar .brand img { height: 36px; }
.gw-topbar .brand-strip {
  width: 4px; height: 36px; border-radius: 4px; margin-right: 10px;
  background: var(--accent-grad);
}
.gw-topbar .brand { display: flex; align-items: center; gap: .75rem; font-weight: 700; color: var(--brand-dark); text-decoration: none; }
.gw-topbar .brand small { font-weight: 500; color: #64748B; display: block; font-size: 11px; }

/* Layout */
.gw-shell { display: flex; min-height: calc(100vh - 64px); }

/* Sidebar */
.gw-sidebar {
  width: 260px; background: var(--sidebar-bg); color: var(--sidebar-fg);
  padding: 1rem 0; flex-shrink: 0;
}
.gw-sidebar .nav-link {
  color: var(--sidebar-fg); padding: .6rem 1.25rem; border-radius: 0;
  display: flex; align-items: center; gap: .65rem; font-size: 14px;
  border-left: 3px solid transparent;
}
.gw-sidebar .nav-link:hover,
.gw-sidebar .nav-link.active {
  background: rgba(255,255,255,.08); color: var(--sidebar-fg-hover);
  border-left-color: var(--brand-purple-light);
}
.gw-sidebar .nav-link i { font-size: 1rem; width: 20px; text-align: center; }
.gw-sidebar .section-label {
  font-size: 11px; color: #64748B; text-transform: uppercase;
  padding: 1rem 1.25rem .35rem;  letter-spacing: 1px;
}

/* Main content */
.gw-main { flex: 1; padding: 1.5rem; min-width: 0; }
.gw-page-title { font-size: 22px; font-weight: 700; margin: 0 0 1rem; color: var(--brand-dark); }
.gw-breadcrumb { font-size: 12px; color: #64748B; margin-bottom: .25rem; }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.kpi {
  background: #fff; border-radius: 12px; padding: 1rem 1.25rem;
  border: 1px solid #E2E8F0; display: flex; align-items: center; gap: 1rem;
  transition: transform .15s, box-shadow .15s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(15,23,42,.08); }
.kpi .ico {
  width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
}
.kpi .ico.p { background: var(--brand-pink); }
.kpi .ico.g { background: var(--brand-green); }
.kpi .ico.b { background: var(--brand-blue); }
.kpi .ico.d { background: var(--brand-dark); }
.kpi .label { font-size: 12px; color: #64748B; text-transform: uppercase; letter-spacing: .5px; }
.kpi .value { font-size: 24px; font-weight: 700; color: var(--brand-dark); line-height: 1.1; }

/* Panel card */
.panel {
  background: #fff; border-radius: 12px; padding: 1.25rem; border: 1px solid #E2E8F0; margin-bottom: 1rem;
}
.panel-title { font-size: 15px; font-weight: 700; margin-bottom: .75rem; }

/* Table */
.table thead th {
  background: #F8FAFC; color: #475569; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
}
.table td, .table th { vertical-align: middle; font-size: 14px; }

/* Buttons branded */
.btn-brand { background: var(--brand-pink); color: #fff; border: none; }
.btn-brand:hover { background: #c40068; color: #fff; }
.btn-brand-blue { background: var(--brand-blue); color: #fff; border: none; }
.btn-brand-blue:hover { background: #0294cc; color: #fff; }
.btn-brand-green { background: var(--brand-green); color: #fff; border: none; }
.btn-brand-green:hover { background: #7ab134; color: #fff; }
.btn-outline-brand { color: var(--brand-pink); border: 1px solid var(--brand-pink); background: transparent; }
.btn-outline-brand:hover { background: var(--brand-pink); color: #fff; }

.badge-pass { background: var(--brand-green); color: #fff; }
.badge-fail { background: #e63946; color: #fff; }
.badge-pending { background: #94A3B8; color: #fff; }

/* Login */
.gw-login-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1fr; align-items: center;
  background: linear-gradient(135deg, rgba(230,0,126,.08), rgba(0,174,239,.08) 60%, rgba(141,198,63,.08));
}
.gw-login-card {
  background: #fff; max-width: 420px; margin: 2rem auto; padding: 2rem;
  border-radius: 16px; box-shadow: 0 20px 50px rgba(15,23,42,.1);
}
.gw-login-card .brand-strip { height: 6px; width: 80px; border-radius: 4px; background: var(--accent-grad); margin: 0 auto 1rem; }

/* Chart canvas sizing */
.chart-wrap { position: relative; height: 300px; }

/* Responsive */
@media (max-width: 992px) {
  .gw-sidebar { position: fixed; left: -260px; top: 64px; height: calc(100vh - 64px); transition: left .2s; z-index: 60; }
  .gw-sidebar.open { left: 0; }
  .gw-main { width: 100%; }
}
.sidebar-toggle { display: none; }
@media (max-width: 992px) { .sidebar-toggle { display: inline-flex; } }

/* Mobile preview iframe style for landing page */
.phone-frame {
  width: 300px; height: 600px; border-radius: 36px;
  border: 10px solid #0F172A; background: #fff; margin: 0 auto;
  box-shadow: 0 20px 50px rgba(15,23,42,.2);
  overflow: hidden;
}