/* =========================================================================
   RMBL Design System — Hub Theme
   Shared styles for all JupyterHub pages.
   Tokens from colors_and_type.css in the RMBL Design System package.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* ---- Design tokens ---- */
:root {
  --rmbl-orange: #F05028;
  --rmbl-orange-deep: #C23E1C;
  --rmbl-orange-soft: #F8A383;
  --rmbl-char: #32321E;
  --rmbl-cream: #F4EEE4;
  --rmbl-bone: #E8E1D1;
  --bg: #1A1A10;
  --bg-elev-1: #232318;
  --bg-elev-2: #2E2E20;
  --bg-elev-3: #3D3D2B;
  --fg-1: #F4EEE4;
  --fg-2: #C8C0A8;
  --fg-3: #8A8268;
  --fg-muted: #5F5A45;
  --border: rgba(244, 238, 228, 0.10);
  --border-strong: rgba(244, 238, 228, 0.22);
  --accent: #F05028;
  --accent-hover: #FF6138;
  --accent-weak: rgba(240, 80, 40, 0.15);
  --focus-ring: rgba(240, 80, 40, 0.45);
  --ok: #7FA670;
  --warn: #E6B84A;
  --danger: #E05B3A;
  --info: #7FA8BF;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 0 0 1px rgba(244,238,228,0.04);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 1px rgba(244,238,228,0.06);
  --font-sans: 'Jost', 'Futura PT', Futura, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Bodoni URW', 'Didot', serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
}

/* ---- Base reset ---- */
html, body {
  background: var(--bg) !important;
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--rmbl-orange); color: #fff; }

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-hover); }

/* ---- Navbar ---- */
.navbar-default {
  background: var(--bg-elev-1) !important;
  border: none !important;
  box-shadow: var(--shadow-1);
  font-family: var(--font-sans);
  margin-bottom: 0;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
  color: var(--fg-2) !important;
  font-weight: 400;
  font-size: 14px;
  transition: color 120ms ease-out;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--fg-1) !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  background: transparent !important;
  color: var(--fg-1) !important;
}

.navbar-default .navbar-text {
  color: var(--fg-2) !important;
  font-size: 14px;
}

.navbar-default .navbar-toggle {
  border-color: var(--border-strong) !important;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--fg-2) !important;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: var(--bg-elev-2) !important;
}

.navbar-default .navbar-collapse {
  border-color: var(--border) !important;
}

/* Dropdown menus */
.navbar-default .dropdown-menu {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
}
.navbar-default .dropdown-menu > li > a {
  color: var(--fg-2) !important;
}
.navbar-default .dropdown-menu > li > a:hover {
  background: var(--accent-weak) !important;
  color: var(--fg-1) !important;
}

/* Logout / Login buttons in navbar */
.navbar .btn-default,
.navbar .btn-default:focus {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg-2) !important;
  font-family: var(--font-sans);
  font-size: 13px;
  border-radius: var(--r-md);
  transition: background 120ms ease-out, color 120ms ease-out;
}
.navbar .btn-default:hover {
  background: var(--bg-elev-2);
  color: var(--fg-1) !important;
}

/* JupyterHub logo in navbar */
#jupyterhub-logo img.jpy-logo {
  height: 28px;
}

/* ---- Container ---- */
.container, .container-fluid {
  background: transparent !important;
}

/* ---- Buttons ---- */
.btn-jupyter,
.btn-primary {
  background: var(--rmbl-orange) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: var(--r-md);
  transition: background 120ms ease-out;
}
.btn-jupyter:hover, .btn-jupyter:focus,
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-hover) !important;
}
.btn-jupyter:active,
.btn-primary:active {
  background: var(--rmbl-orange-deep) !important;
  transform: translateY(1px);
}

.btn-danger {
  background: transparent !important;
  border: 1px solid rgba(224,91,58,0.4) !important;
  color: var(--danger) !important;
  font-family: var(--font-sans);
  border-radius: var(--r-md);
}
.btn-danger:hover {
  background: rgba(224,91,58,0.12) !important;
}

.btn-default {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg-1);
  font-family: var(--font-sans);
  border-radius: var(--r-md);
}
.btn-default:hover {
  background: rgba(244,238,228,0.06);
  color: var(--fg-1);
}

/* ---- Focus rings ---- */
.btn:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* ---- Forms ---- */
.form-control {
  background: var(--bg) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--fg-1) !important;
  font-family: var(--font-sans);
  border-radius: var(--r-md);
}
.form-control:focus {
  border-color: var(--rmbl-orange) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* ---- Tables ---- */
.table { color: var(--fg-1); }
.table > thead > tr > th {
  border-bottom: 1px solid var(--border-strong) !important;
  color: var(--fg-3);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.table > tbody > tr > td {
  border-top: 1px solid var(--border) !important;
  color: var(--fg-2);
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(244, 238, 228, 0.02) !important;
}
.table-striped > tbody > tr:nth-of-type(even) {
  background: transparent !important;
}

/* ---- Alerts ---- */
.alert-warning {
  background: rgba(230, 184, 74, 0.12);
  border: 1px solid rgba(230, 184, 74, 0.3);
  color: var(--warn);
}

/* ---- Modals ---- */
.modal-content {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  color: var(--fg-1);
  box-shadow: var(--shadow-2);
  border-radius: var(--r-lg);
}
.modal-header {
  border-bottom: 1px solid var(--border);
}
.modal-footer {
  border-top: 1px solid var(--border);
}
.modal-header .close {
  color: var(--fg-3);
  opacity: 0.8;
}
.modal-header .close:hover {
  color: var(--fg-1);
  opacity: 1;
}

/* ---- Spawn page — profile list ---- */
#kubespawner-profiles-list .profile {
  display: flex;
  flex-direction: row;
  font-weight: normal;
  border: 1px solid var(--border);
  background: var(--bg-elev-1);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 120ms ease-out, background 120ms ease-out;
}

#kubespawner-profiles-list .profile:hover {
  border-color: var(--border-strong);
  background: var(--bg-elev-2);
}

#kubespawner-profiles-list .profile .radio {
  padding: 2px 14px 0 0;
}

#kubespawner-profiles-list .profile .radio input[type="radio"] {
  accent-color: var(--rmbl-orange);
  width: 18px;
  height: 18px;
  margin-top: 4px;
}

#kubespawner-profiles-list .profile h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--fg-1);
  margin: 0 0 4px;
}

#kubespawner-profiles-list .profile p {
  font-size: 14px;
  color: var(--fg-3);
  margin: 0;
}

#kubespawner-profiles-list .profile .option {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 8px;
}

#kubespawner-profiles-list .profile .option label {
  font-weight: normal;
  color: var(--fg-2);
  margin-right: 8px;
  min-width: 96px;
  font-size: 14px;
}

#kubespawner-profiles-list .profile .option.hidden,
#kubespawner-profiles-list .js-other-input-container.hidden {
  display: none;
}

/* Highlight selected profile */
#kubespawner-profiles-list .profile:has(input[type="radio"]:checked) {
  border-color: rgba(240, 80, 40, 0.35);
  background: rgba(240, 80, 40, 0.06);
}

/* ---- Spawn page layout ---- */
.spawn-page-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px;
}

.spawn-page-container h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.10;
  color: var(--fg-1);
  margin: 0 0 8px;
}

.spawn-page-container .spawn-subtitle {
  color: var(--fg-3);
  font-size: 15px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.spawn-error-msg {
  color: var(--danger) !important;
  background: rgba(224, 91, 58, 0.08);
  border: 1px solid rgba(224, 91, 58, 0.25);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 16px;
}

.spawn-page-container .btn-jupyter,
.spawn-page-container .btn-primary {
  padding: 12px 32px;
  font-size: 15px;
  margin-top: 8px;
}

.feedback-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feedback-widget { color: var(--rmbl-orange); }

/* ---- Home page ---- */
.home-page-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px;
}

.home-page-container h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.10;
  color: var(--fg-1);
  margin: 0 0 8px;
}

.home-subtitle {
  color: var(--fg-3);
  font-size: 15px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.home-server-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 32px;
}

.home-server-actions .btn {
  padding: 10px 24px;
  font-size: 15px;
}

.home-server-status {
  font-size: 14px;
  color: var(--fg-3);
}

.home-server-status .status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.home-server-status .status-dot.active { background: var(--ok); }
.home-server-status .status-dot.inactive { background: var(--fg-muted); }

/* Named servers section */
.named-servers-section h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--fg-1);
  margin: 0 0 8px;
}

.named-servers-section p {
  color: var(--fg-3);
  font-size: 14px;
  margin-bottom: 16px;
}

.server-table {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.new-server-name {
  background: var(--bg) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--fg-1) !important;
  font-family: var(--font-sans);
  border-radius: var(--r-md);
  padding: 6px 12px;
  margin-right: 8px;
}

.new-server-btn {
  font-size: 13px !important;
}

/* ---- Noscript ---- */
#noscript {
  background: var(--bg-elev-2);
  color: var(--warn);
  text-align: center;
  padding: 16px;
  font-family: var(--font-sans);
}

/* ---- Footer shared ---- */
.rmbl-footer {
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 13px;
  color: var(--fg-3);
}
.rmbl-footer p { margin: 0; }
.rmbl-footer a {
  color: var(--fg-2);
  text-decoration: none;
  transition: color 120ms ease-out;
}
.rmbl-footer a:hover { color: var(--accent); }