/* SciComHub — site chrome.
 *
 * The branded pages (login, spawn, home) draw their own dark panel inside
 * {% block main %}; this file themes everything around it — JupyterHub's
 * Bootstrap 5 navbar and the page background — so the two stop clashing.
 * Loaded via {% block stylesheet %} in those templates, after JupyterHub's own
 * CSS, so plain overrides are enough and !important is only used where
 * Bootstrap sets the property through a utility class.
 */

:root {
  --ssdc-bg: #030817;
  --ssdc-bg-panel: rgba(13, 25, 46, 0.72);
  --ssdc-border: rgba(148, 222, 255, 0.28);
  --ssdc-text: #e8f7ff;
  --ssdc-text-dim: #8ba5bf;
  --ssdc-accent: #38bdf8;
}

body {
  background-color: var(--ssdc-bg);
  color: var(--ssdc-text);
}

/* ── navbar ──────────────────────────────────────────────────────────────── */

.navbar {
  background-color: var(--ssdc-bg-panel) !important;   /* bg-body-tertiary */
  border-bottom: 1px solid var(--ssdc-border);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);

  /* Bootstrap 5.3 renders navbar text through these variables; overriding the
   * variables (not just `color`) is what keeps every state white, including the
   * muted default that otherwise shows up grey. */
  --bs-navbar-color: #ffffff;
  --bs-navbar-hover-color: var(--ssdc-accent);
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-disabled-color: var(--ssdc-text-dim);
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
  --bs-emphasis-color: #ffffff;
}

.navbar .nav-link,
.navbar .navbar-text,
.navbar .navbar-brand,
.navbar .dropdown-toggle,
.navbar #login_widget .username {
  color: #ffffff !important;
  opacity: 1;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--ssdc-accent) !important;
}

/* The JupyterHub logo is a light-on-transparent mark: keep it readable here. */
.navbar .jpy-logo {
  height: 32px;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.45));
}

.navbar-toggler {
  border-color: var(--ssdc-border);
}

.navbar-toggler-icon {
  /* Bootstrap ships a dark glyph; swap it for a light one. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e8f7ff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Logout / other navbar buttons */
.navbar .btn,
.navbar #logout {
  background-color: transparent;
  border: 1px solid var(--ssdc-border);
  color: var(--ssdc-text);
}

.navbar .btn:hover,
.navbar #logout:hover {
  background-color: rgba(56, 189, 248, 0.16);
  border-color: var(--ssdc-accent);
  color: var(--ssdc-text);
}

/* ── pages without their own panel (token, admin, error bodies) ──────────── */

.container > h1,
.container > h2,
.container > p,
#login-main,
#token-area {
  color: var(--ssdc-text);
}

a {
  color: var(--ssdc-accent);
}

a:hover {
  color: #7dd3fc;
}

/* Tables on the admin and token pages */
.table {
  --bs-table-color: var(--ssdc-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ssdc-border);
  --bs-table-striped-color: var(--ssdc-text);
  --bs-table-striped-bg: rgba(148, 222, 255, 0.06);
  --bs-table-hover-color: var(--ssdc-text);
  --bs-table-hover-bg: rgba(56, 189, 248, 0.12);
}

/* Form controls outside the branded panels */
.form-control,
.form-select {
  background-color: rgba(3, 8, 23, 0.6);
  border-color: var(--ssdc-border);
  color: var(--ssdc-text);
}

.form-control:focus,
.form-select:focus {
  background-color: rgba(3, 8, 23, 0.8);
  border-color: var(--ssdc-accent);
  color: var(--ssdc-text);
  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25);
}

.form-text,
.text-muted {
  color: var(--ssdc-text-dim) !important;
}