/* ═══════════════════════════════════════════════════════════════════════════
   CB·Engine Guard — Codebeans brand layer
   ───────────────────────────────────────────────────────────────────────────
   Loaded LAST, on purpose. cb-admin.css is the shared Codebeans admin shell
   used across several apps; this file is the only place that knows what
   codebeans.net looks like, so the shell stays reusable and the brand stays in
   one file that can be dropped into the next app.

   TAKEN FROM THE SITE, not invented:
     · the signature gradient, linear-gradient(to right, #B476E5, #47BDFF)
     · #47BDFF cyan and #B476E5 purple as the two accents
     · #08111F / #101626 / #252C3E as the dark ladder
     · #7780A1 for muted text, #FB5A5A for danger
     · Mulish, which is the site's typeface

   WHY THE GRADIENT IS RATIONED. It is the brand's one loud element, so it marks
   identity and the single primary action on a screen — the logo, the sign-in
   button, an active nav item's edge. Applied to every heading and border it
   stops meaning "Codebeans" and starts meaning nothing.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── brand constants: the same in both themes, because they ARE the brand ── */
  --bge-cyan: #47bdff;
  --bge-purple: #b476e5;
  --bge-gradient: linear-gradient(to right, #b476e5, #47bdff);
  --bge-gradient-135: linear-gradient(135deg, #b476e5, #47bdff);

  /* ── dark ladder, from the site's own sections ── */
  --cb-bg-primary: #050717;
  --cb-bg-secondary: #08111f;
  --cb-bg-card: #101626;
  --cb-bg-card-hover: #161f33;
  --cb-bg-input: #070b18;
  --cb-border: #1e2740;
  --cb-text-primary: #f5f7fb;
  --cb-text-secondary: #a6b0cc;
  --cb-text-muted: #7780a1;

  /* Mapped onto the shell's existing semantic names so every screen that
     already uses them is re-themed without being rewritten. */
  --cb-accent-blue: #47bdff;
  --cb-accent-purple: #b476e5;
  --cb-accent-red: #fb5a5a;
  --cb-accent-emerald: #1fd1a5;
  --cb-accent-amber: #f5a524;

  --cb-radius: 14px;
  --cb-radius-sm: 9px;
  --cb-glow-blue: 0 0 24px rgba(71, 189, 255, 0.16);
  --cb-glow-emerald: 0 0 24px rgba(31, 209, 165, 0.16);
  --cb-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --cb-shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}

.cb-light {
  --cb-bg-primary: #f6f8fc;
  --cb-bg-secondary: #eef2f9;
  --cb-bg-card: #ffffff;
  --cb-bg-card-hover: #f6f8fc;
  --cb-bg-input: #f1f4fa;
  --cb-border: #d8dfed;
  --cb-text-primary: #101626;
  --cb-text-secondary: #465475;
  --cb-text-muted: #7780a1;
  /* Both accents darken in light mode: #47BDFF on white is decorative, not
     readable, and these carry button labels and link text. */
  --cb-accent-blue: #0d8ecf;
  --cb-accent-purple: #8b4dc4;
  --cb-shadow-card: 0 1px 2px rgba(16, 22, 38, 0.06), 0 8px 24px -16px rgba(16, 22, 38, 0.18);
}

body,
.cb-admin-root,
.cb-auth-page {
  font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ═══ brand primitives ═══════════════════════════════════════════════════ */

.bge-gradient-text {
  background: var(--bge-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* The logo mark. A rounded gradient tile with the monogram knocked out of it —
   the same shape at every size, so it reads at 28px in the sidebar and at 52px
   on the login screen. */
.bge-mark {
  display: grid;
  place-items: center;
  flex: none;
  background: var(--bge-gradient-135);
  color: #050717;
  font-weight: 900;
  letter-spacing: -0.02em;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  font-size: 13px;
  box-shadow: 0 6px 18px -6px rgba(71, 189, 255, 0.55);
}

.bge-mark-lg {
  width: 52px;
  height: 52px;
  font-size: 19px;
  border-radius: 15px;
}

.bge-btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--cb-radius-sm);
  background: var(--bge-gradient);
  color: #050717;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 10px 26px -12px rgba(71, 189, 255, 0.7);
}

.bge-btn-brand:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.bge-btn-brand:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* ═══ the site chrome ════════════════════════════════════════════════════
   The login screen is the only page a signed-out person sees, so it is the
   only one dressed as a website: a header that names the company, a pitch
   beside the form, and a footer. Everything past sign-in is an application and
   keeps the sidebar shell. */

.bge-site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cb-bg-primary);
  color: var(--cb-text-primary);
  position: relative;
  overflow-x: hidden;
}

/* The aurora. Two soft brand-coloured lights behind the content — where the
   gradient comes from on a page that must not have a gradient button in every
   corner. `fixed` so it does not scroll into a seam on a short viewport. */
.bge-site::before,
.bge-site::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

.bge-site::before {
  width: 620px;
  height: 620px;
  top: -280px;
  left: -180px;
  background: rgba(180, 118, 229, 0.2);
}

.bge-site::after {
  width: 560px;
  height: 560px;
  bottom: -260px;
  right: -160px;
  background: rgba(71, 189, 255, 0.16);
}

.cb-light .bge-site::before { background: rgba(180, 118, 229, 0.16); }
.cb-light .bge-site::after { background: rgba(71, 189, 255, 0.14); }

.bge-site > * {
  position: relative;
  z-index: 1;
}

.bge-site-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--cb-border);
  background: color-mix(in srgb, var(--cb-bg-secondary) 72%, transparent);
  backdrop-filter: blur(10px);
}

.bge-site-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.bge-site-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.bge-site-brand-text strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.bge-site-brand-text span {
  font-size: 11.5px;
  color: var(--cb-text-muted);
  font-weight: 600;
}

.bge-site-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cb-text-secondary);
  background: var(--cb-bg-card);
  white-space: nowrap;
}

.bge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cb-accent-emerald);
  box-shadow: 0 0 0 3px rgba(31, 209, 165, 0.16);
  flex: none;
}

.bge-dot-off {
  background: var(--cb-accent-red);
  box-shadow: 0 0 0 3px rgba(251, 90, 90, 0.16);
}

.bge-site-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 60px;
  align-items: center;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 28px 72px;
}

.bge-site-footer {
  border-top: 1px solid var(--cb-border);
  padding: 18px 28px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: var(--cb-text-muted);
}

.bge-site-footer .bge-spacer { margin-left: auto; }

/* ── the pitch ── */

.bge-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cb-text-muted);
  margin-bottom: 18px;
}

.bge-hero h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}

.bge-hero p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--cb-text-secondary);
  margin: 0;
  max-width: 46ch;
}

.bge-hero-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.bge-hero-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--cb-text-secondary);
  line-height: 1.6;
}

.bge-hero-list strong {
  color: var(--cb-text-primary);
  font-weight: 700;
}

.bge-tick {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  color: #050717;
  background: var(--bge-gradient-135);
}

/* ── the card ── */

.bge-card {
  background: var(--cb-bg-card);
  border: 1px solid var(--cb-border);
  border-radius: 20px;
  padding: 34px 32px;
  box-shadow: var(--cb-shadow-lg);
  /* The gradient hairline along the top edge: enough brand to tie the card to
     the logo without competing with the sign-in button below it. */
  position: relative;
  overflow: hidden;
}

.bge-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--bge-gradient);
}

.bge-card h2 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.bge-card-sub {
  font-size: 13.5px;
  color: var(--cb-text-muted);
  margin: 0 0 26px;
  line-height: 1.6;
}

.bge-field {
  display: block;
  margin-bottom: 17px;
}

.bge-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cb-text-secondary);
  margin-bottom: 7px;
}

.bge-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--cb-bg-input);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  color: var(--cb-text-primary);
  font-family: inherit;
  font-size: 14.5px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.bge-input::placeholder { color: var(--cb-text-muted); }

.bge-input:focus {
  outline: none;
  border-color: var(--bge-cyan);
  box-shadow: 0 0 0 3px rgba(71, 189, 255, 0.16);
}

.bge-alert {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--cb-radius-sm);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 17px;
  border: 1px solid;
}

.bge-alert-err {
  border-color: rgba(251, 90, 90, 0.4);
  background: rgba(251, 90, 90, 0.09);
  color: #ffb4b4;
}

.cb-light .bge-alert-err { color: #a41c1c; }

.bge-alert-info {
  border-color: rgba(71, 189, 255, 0.35);
  background: rgba(71, 189, 255, 0.08);
  color: var(--cb-text-secondary);
}

.bge-card-note {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cb-border);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--cb-text-muted);
}

/* ═══ sidebar brand, retuned ══════════════════════════════════════════════ */

.cb-sidebar-brand h2 {
  letter-spacing: -0.02em;
  font-weight: 800;
}

/* The active nav item gets the gradient as a left edge — the one place it
   appears inside the application shell, marking position rather than decorating. */
.cb-sidebar-link.active {
  position: relative;
}

.cb-sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--bge-gradient);
}

.bge-role-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--cb-border);
  color: var(--cb-text-secondary);
  background: var(--cb-bg-secondary);
  white-space: nowrap;
}

.bge-role-chip.is-super {
  border-color: transparent;
  background: var(--bge-gradient-135);
  color: #050717;
}

/* ═══ users & permissions ═════════════════════════════════════════════════ */

.bge-perm-groups {
  display: grid;
  gap: 18px;
}

.bge-perm-group > h4 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cb-text-muted);
  margin: 0 0 10px;
}

.bge-perm {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 13px;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-bg-secondary);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.bge-perm:hover { border-color: var(--bge-cyan); }

.bge-perm input {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--bge-cyan);
  cursor: pointer;
}

.bge-perm-body { min-width: 0; }

.bge-perm-body strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cb-text-primary);
  margin-bottom: 2px;
}

.bge-perm-body code {
  font-size: 11px;
  color: var(--cb-text-muted);
}

.bge-perm-body p {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cb-text-secondary);
}

/* Sensitive permissions are marked, not hidden or blocked: the person ticking
   them is allowed to, and the only useful thing the UI can add is what happens
   if they are wrong. */
.bge-perm.is-sensitive {
  border-left: 3px solid var(--cb-accent-red);
}

.bge-perm.is-sensitive input { accent-color: var(--cb-accent-red); }

.bge-role-options {
  display: grid;
  gap: 9px;
  margin-bottom: 4px;
}

.bge-role-option {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-bg-secondary);
  cursor: pointer;
  transition: border-color 0.16s ease;
}

.bge-role-option:hover { border-color: var(--bge-purple); }

.bge-role-option input {
  margin: 2px 0 0;
  accent-color: var(--bge-purple);
  flex: none;
  cursor: pointer;
}

.bge-role-option strong {
  display: block;
  font-size: 13.5px;
  margin-bottom: 2px;
}

.bge-role-option p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cb-text-secondary);
}

/* A password shown exactly once. Styled to look like something to copy now
   rather than a field to come back to. */
.bge-secret {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px 15px;
  border-radius: var(--cb-radius-sm);
  border: 1px dashed var(--bge-cyan);
  background: rgba(71, 189, 255, 0.07);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--cb-text-primary);
  word-break: break-all;
}

.bge-user-disabled {
  opacity: 0.52;
}

/* ═══ narrow screens ══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .bge-site-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
    padding: 40px 20px 56px;
  }

  /* The pitch goes below the form on a phone: somebody on a small screen is
     signing in, not being sold to. */
  .bge-hero { order: 2; }
  .bge-auth-col { order: 1; }

  .bge-site-header,
  .bge-site-footer { padding: 14px 18px; }

  .bge-card { padding: 26px 20px; border-radius: 16px; }
}

/* The shared shell capitalises this line because it used to hold a role name
   ("administrator"). It now holds the signed-in person's email address, and a
   capitalised address is a wrong address — it is the thing they type to sign in. */
.cb-sidebar-user-info span {
  text-transform: none;
}