/* EduAI.bd light, high-contrast theme for the lab panel, assistant panel and super-admin panel.
   Loaded after site.css / lab.css / platform.css. Numbers, names and amounts must be easy to read,
   so text is dark on white and the base font is larger. The sidebar stays deep navy (EduAI.bd brand)
   with light text. */
:root {
  --ink: #0b1f2a;
  --ink-soft: #24404d;
  --forest: #0b7277;
  --forest-deep: #075358;
  --forest-mid: #0f8d92;
  --cream: #f1f7f9;
  --cream-deep: #e3eff3;
  --paper: #ffffff;
  --sand: #e6f1f4;
  --line: #d2e2e8;
  --line-strong: #a9c4cd;
  --muted: #3f5b67;
  --muted-light: #5d7884;
  --saffron: #f5b301;
  --saffron-deep: #a86f00;
  --clay: #c2255c;
  --clay-soft: #fde7ef;
  --sage: #e0f2f1;
  --mint: #e6f7f5;
  --white: #ffffff;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --ok: #137a3a;
  --ok-soft: #e4f5ea;
  --shadow-sm: 0 1px 2px rgba(11, 31, 42, 0.06), 0 6px 18px rgba(11, 31, 42, 0.06);
  --shadow: 0 2px 4px rgba(11, 31, 42, 0.06), 0 14px 36px rgba(11, 31, 42, 0.08);
  --shadow-lg: 0 12px 24px rgba(11, 31, 42, 0.08), 0 28px 64px rgba(11, 31, 42, 0.12);
  --readable-body: 18px;
  --readable-text: 17px;
  --readable-label: 15px;
  --readable-small: 14px;
  --readable-micro: 13px;
}

body.lab-mode,
body {
  background:
    radial-gradient(900px 480px at 0% -10%, rgba(15, 141, 146, 0.10), transparent 60%),
    radial-gradient(800px 480px at 100% 0%, rgba(56, 189, 248, 0.08), transparent 60%),
    var(--cream);
  color: var(--ink);
  font-size: var(--readable-body);
  line-height: 1.6;
}

/* ---------- shell ---------- */
body.lab-mode main#main,
body.lab-mode #labRoot,
.lab-app,
.lab-main,
.lab-view {
  background: transparent;
}
.lab-topbar {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--line);
  box-shadow: 0 1px 0 var(--line);
}
.lab-topbar-title strong,
.lab-page-head h1,
.lab-card-head h2 {
  color: var(--ink);
  font-size: 1.6rem;
}
.lab-topbar-title span,
.lab-page-head p {
  color: var(--muted);
  font-size: var(--readable-text);
}
.lab-sidebar {
  background: linear-gradient(180deg, #0b2a3c 0%, #071b28 100%);
  color: #eaf6f8;
  border-color: rgba(255, 255, 255, 0.08);
}
.lab-sidebar * {
  color: inherit;
}
.lab-nav-link {
  color: #e3f1f5;
  font-size: 1.02rem;
}
.lab-nav-link small,
.lab-nav-label,
.lab-sidebar-brand span {
  color: #9fc7d1;
}
.lab-nav-link.is-active {
  background: rgba(45, 212, 191, 0.18);
  color: #ffffff;
}

/* ---------- cards, KPIs, tables ---------- */
.lab-kpi,
.lab-card,
.lab-table-wrap,
.lab-login-card,
.lab-sub-current,
.lab-plan-card,
.lab-result-card {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.lab-kpi strong,
.lab-kpi small,
.lab-kpi div > span {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lab-kpi strong {
  font-size: 2.1rem;
  font-weight: 800;
}
.lab-kpi small,
.lab-kpi div > span {
  font-size: var(--readable-text);
  color: var(--muted);
}
.lab-table th {
  color: var(--ink-soft);
  font-size: var(--readable-label);
  font-weight: 700;
  background: #eef6f8;
}
.lab-table td {
  color: var(--ink);
  font-size: var(--readable-text);
  font-variant-numeric: tabular-nums;
}
.lab-table tbody tr:hover {
  background: #f0f8fa;
}
.lab-cell-sub,
.lab-muted,
.lab-hint {
  color: var(--muted);
  font-size: var(--readable-label);
}
.lab-text-right,
.lab-mono {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ---------- forms ---------- */
.lab-field {
  color: var(--ink);
  font-size: var(--readable-label);
  font-weight: 600;
}
.lab-field input,
.lab-field select,
.lab-field textarea,
.lab-filter-bar input,
.lab-filter-bar select,
.lab-billing input,
.lab-billing select {
  background: #ffffff;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.lab-field input:focus,
.lab-field select:focus,
.lab-field textarea:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(11, 114, 119, 0.18);
  outline: none;
}

/* subscription plan cards: three colours (teal, sky, gold) with white, readable text and a 3D hover */
.lab-plan-card {
  transform-style: preserve-3d;
  transition: transform 0.25s ease, box-shadow 0.35s ease;
  will-change: transform;
}
.lab-plan-card[class*="--tier"] {
  color: #ffffff;
  box-shadow: 0 24px 50px -28px rgba(7, 27, 40, 0.8);
}
.lab-plan-card--tier0 {
  background: linear-gradient(160deg, #0b3b44 0%, #0b7277 100%);
  border: 1px solid rgba(45, 212, 191, 0.5);
}
.lab-plan-card--tier1 {
  background: linear-gradient(160deg, #0b2d4a 0%, #0369a1 100%);
  border: 1px solid rgba(56, 189, 248, 0.5);
}
.lab-plan-card--tier2 {
  background: linear-gradient(160deg, #3a2805 0%, #b45309 100%);
  border: 1px solid rgba(251, 191, 36, 0.55);
}
.lab-plan-card[class*="--tier"] h3,
.lab-plan-card[class*="--tier"] strong,
.lab-plan-card[class*="--tier"] li span,
.lab-plan-card[class*="--tier"] .lab-plan-price strong {
  color: #ffffff;
}
.lab-plan-card[class*="--tier"] .lab-plan-price span,
.lab-plan-card[class*="--tier"] .lab-eyebrow,
.lab-plan-card[class*="--tier"] .lab-plan-renewal {
  color: #d7eef3;
}
.lab-plan-card[class*="--tier"] .lab-plan-features svg {
  color: #fbbf24;
}
.lab-plan-card[class*="--tier"] .lab-plan-tag {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.lab-plan-card[class*="--tier"] .btn {
  background: #ffffff;
  color: #0b2a3c;
  border: none;
  font-weight: 700;
}
.lab-plan-card[class*="--tier"] .btn:hover {
  background: #fbbf24;
  color: #3a2805;
}
.lab-plan-card[class*="--tier"] .lab-plan-disabled {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.lab-plan-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.55;
}

.lab-field[hidden] {
  display: none;
}

/* ---------- badges, alerts, banners ---------- */
.lab-badge {
  font-size: var(--readable-label);
  font-weight: 700;
}
.lab-badge--green { background: var(--ok-soft); color: var(--ok); }
.lab-badge--amber { background: #fff4d6; color: var(--saffron-deep); }
.lab-badge--red { background: var(--danger-soft); color: var(--danger); }

/* ---------- login ---------- */
.lab-login-visual {
  background: linear-gradient(160deg, #0b2a3c 0%, #071b28 80%);
  color: #eaf6f8;
}
.lab-login-logo {
  display: block;
  height: 72px;
  width: auto;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  padding: 10px 18px;
  margin: 18px 0 14px;
  box-shadow: 0 14px 30px -14px rgba(45, 212, 191, 0.7);
}
.lab-login-visual h1 {
  color: #ffffff;
  font-size: 2.6rem;
}
.lab-login-visual h1 em {
  background: linear-gradient(90deg, #2dd4bf, #38bdf8, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lab-login-visual > p,
.lab-login-points li {
  color: #d3e9ee;
  font-size: 1.1rem;
}
.lab-login-card h2 {
  color: var(--ink);
  font-size: 2rem;
}
.lab-login-card > p {
  color: var(--muted);
  font-size: 1.05rem;
}
.lab-otp-box {
  background: #f4fbfc;
  border: 1.5px solid var(--line-strong);
  border-radius: 18px;
  padding: 22px;
  margin-top: 16px;
  color: var(--ink);
}
.lab-otp-box h2 {
  font-size: 1.7rem;
  margin: 6px 0;
}
.lab-otp-box strong {
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  color: var(--forest-deep);
}

/* ---------- buttons ---------- */
.btn,
.lab-mini-btn,
.lab-public-btn {
  font-size: 1.02rem;
  font-weight: 700;
}
.btn-primary,
.lab-row-btn--primary {
  background: var(--forest);
  color: #ffffff;
  border-color: var(--forest);
}
.btn-primary:hover,
.lab-row-btn--primary:hover {
  background: var(--forest-deep);
}