/* ---------- Base / palette ---------- */
:root {
  --nu-bg-1: #0a0f1a;
  --nu-bg-2: #0e1524;
  --nu-card: rgba(255,255,255,0.06);
  --nu-border: rgba(255,255,255,0.12);
  --nu-text: #e6ebf5;
  --nu-muted: #9fb0cb;
  --nu-accent: #7c5cff;
  --nu-accent-2: #00e0ff;
  --nu-success: #00d084;
  --nu-warning: #ffd166;
  --nu-danger:  #ff5c7a;
  --nu-radius-lg: 16px;
  --nu-radius-xl: 22px;
  --nu-shadow: 0 10px 30px rgba(0,0,0,.35);
  --ds-navbar-h: 56px;  /* updated dynamically by JS */
  --ds-footer-h: 72px;  /* NEW: safe default; JS updates this at runtime */
}

/* ---------- Modal/backdrop & blur ---------- */
.modal-backdrop { background-color: #000 !important; }
.modal-backdrop.show { opacity: 0.55 !important; }

.modal-open .nu-nav,
.modal-open main,
.modal-open .nu-footer {
  filter: blur(6px) brightness(0.6) saturate(0.9);
  transition: filter .15s ease-in-out;
  pointer-events: none;
  user-select: none;
}

.modal-open .modal,
.modal-open .modal *,
.modal-open .modal-backdrop {
  filter: none !important;
  pointer-events: auto !important;
}

.modal-backdrop { z-index: 2050 !important; }   /* Bootstrap default 1050 */
.modal,
.modal.show,
.modal.fade.show { z-index: 2060 !important; }  /* Bootstrap default 1055 */

.nu-dropdown-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 990;
  display: none;
}
.nu-dropdown-open .nu-dropdown-backdrop { display: block; }
.modal-open .nu-dropdown-backdrop { display: none !important; }

/* ---------- Global typography/layout ---------- */
html, body {
  height: 100%;
  color: var(--nu-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
  margin: 0; /* Reset UA default margins so navbar is flush */
}

.nu-bg {
  background: radial-gradient(60% 70% at 10% 10%, #16213a 0%, rgba(22,33,58,0) 60%),
              radial-gradient(40% 60% at 90% 10%, #1a2747 0%, rgba(26,39,71,0) 60%),
              linear-gradient(180deg, var(--nu-bg-2) 0%, var(--nu-bg-1) 55%);
  min-height: 100%;
}

/* ---------- Nav / Footer ---------- */
.nu-nav {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom: 1px solid var(--nu-border);
  backdrop-filter: blur(12px);
  z-index: 1002;
}

/* Make sure fixed-top navbar is full-width and NOT rounded like a card */
.navbar.nu-nav.fixed-top {
  left: 0;
  right: 0;
  top: 0;
  border-radius: 0 !important;
  box-shadow: none !important; /* no halo */
}
/* Opt the navbar OUT of the generic .glassy rounding/shadow below */
.nu-nav.glassy { border-radius: 0 !important; }

/* Body top padding equals actual navbar height */
.has-sticky-nav { padding-top: var(--ds-navbar-h); }

/* Footer styling (precise resets, no wildcard nuke) */
.nu-footer {
  border-top: 1px solid var(--nu-border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.nu-footer p,
.nu-footer small,
.nu-footer strong,
.nu-footer span { margin: 0; }
.nu-footer .brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}

/* ---------- Glassy containers ---------- */
/* IMPORTANT: exclude .nu-nav from this group so the header isn’t rounded */
.glassy:not(.nu-nav),
.card, .modal-content, .dropdown-menu, .offcanvas, .toast {
  background: var(--nu-card) !important;
  border: 1px solid var(--nu-border) !important;
  border-radius: var(--nu-radius-lg) !important;
  box-shadow: var(--nu-shadow);
  color: var(--nu-text);
}
.card-shadow { box-shadow: var(--nu-shadow); }
.card:hover { transform: translateY(-1px); transition: transform .15s ease; }

/* ---------- Branding bits ---------- */
.nu-logo-dot {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block;
  background: radial-gradient(circle at 30% 30%, var(--nu-accent), var(--nu-accent-2));
  box-shadow: 0 0 18px rgba(124,92,255,.65), 0 0 10px rgba(0,224,255,.45);
}

/* ---------- Buttons ---------- */
.btn-nu {
  --bs-btn-bg: var(--nu-accent);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: #6a4aff;
  --bs-btn-color: #fff;
  border-radius: 999px;
  padding: .55rem 1rem;
  box-shadow: 0 8px 20px rgba(124, 92, 255, .35);
}
.btn-outline-light { border-radius: 999px; }

.btn-outline-dark {
  --bs-btn-color: var(--nu-text);
  --bs-btn-border-color: rgba(255,255,255,.55);
  --bs-btn-hover-bg: rgba(255,255,255,.12);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(255,255,255,.85);
  --bs-btn-active-bg: rgba(255,255,255,.18);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: #fff;
  border-radius: 999px;
  text-decoration: none;
}

a.btn, a.btn:link, a.btn:visited { color: inherit; text-decoration: none; }

.btn-outline-secondary {
  --bs-btn-color: var(--nu-muted);
  --bs-btn-border-color: rgba(255,255,255,.35);
  --bs-btn-hover-bg: rgba(255,255,255,.10);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(255,255,255,.65);
}

/* ---------- Forms ---------- */
.form-control, .form-select {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--nu-border);
  color: var(--nu-text);
  border-radius: 12px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--nu-accent);
  box-shadow: 0 0 0 .2rem rgba(124,92,255,.2);
}

/* ---------- Lists / queue items ---------- */
.list-group { --bs-list-group-border-color: var(--nu-border); }
.list-group-item { background: transparent; border-color: var(--nu-border) !important; color: var(--nu-text); }
.list-group-item:hover { background: rgba(255,255,255,.02); }

.top10-list .list-group-item,
.label-list .list-group-item {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
}
.top10-list .list-group-item:not(:last-child),
.label-list .list-group-item:not(:last-child) { border-bottom: 1px solid var(--nu-border) !important; }
.top10-list .list-group-item:last-child,
.label-list .list-group-item:last-child { border-bottom: 0 !important; }

.list-group-numbered > .list-group-item::before {
  background: rgba(255,255,255,.08);
  border: 1px solid var(--nu-border);
  color: var(--nu-text);
}

/* ---------- Hero (optional) ---------- */
.nu-hero { padding: 48px 0 28px; }
.nu-hero h1 { font-weight: 800; letter-spacing: .2px; }
.nu-hero p.lead { color: var(--nu-muted); }

/* ---------- Page structure ---------- */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
.nu-bg { min-height: 100vh; display: flex; flex-direction: column; }
.nu-footer { margin-top: auto; }
.card { overflow: hidden; }
hr { border-color: var(--nu-border); opacity: 1; }

/* ---------- Footer safe-space fallback (prevents content overlap) ---------- */
/* JS updates --ds-footer-h; this guarantees breathing room even if JS is late */
main.container { padding-bottom: calc(var(--ds-footer-h) + 16px); }

/* ====================================================================== */
/*                     FEEDBACK FORM (STACKED + SCROLL)                   */
/* ====================================================================== */
.feedback-form {
  display: flex;
  flex-direction: column;
  max-height: 72vh;
  overflow: hidden;
}
.feedback-form .form-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: calc(72vh - 72px);
  padding-right: .25rem;
}

.feedback-form ul,
.feedback-form ol { list-style: none; padding-left: 0; margin: 0 0 .5rem 0; }
.feedback-form li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.feedback-form li label { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }

.feedback-form input[type="radio"],
.feedback-form input[type="checkbox"] {
  position: static !important;
  float: none !important;
  margin: 0 .5rem 0 0 !important;
  transform: none !important;
  inset: auto !important;
}

.feedback-form .form-check,
.feedback-form .form-check-inline { display: block; padding: 0; margin: 0 0 .35rem 0; }
.feedback-form .form-check-input { float: none !important; margin: 0 .5rem 0 0 !important; }

.feedback-form input[type="text"],
.feedback-form input[type="url"],
.feedback-form input[type="number"],
.feedback-form select,
.feedback-form textarea { width: 100%; }

/* ====================================================================== */
/*                LINK COLOR POLICY — EVERYTHING WHITE EXCEPT             */
/*                         @username (purple accent)                      */
/* ====================================================================== */
.nu-username { color: var(--nu-accent) !important; }
a.nu-username:hover { color: #a48dff !important; text-decoration: underline; }

a:not(.btn):not(.nu-username) {
  color: var(--nu-text) !important;
  text-decoration: none;
}
a:not(.btn):not(.nu-username):hover,
a:not(.btn):not(.nu-username):focus {
  color: #fff !important;
  text-decoration: underline;
}

.navbar .nav-link { color: var(--nu-text) !important; }
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: #fff !important; }

.dropdown-menu .dropdown-item { color: var(--nu-text) !important; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}
.dropdown-menu .dropdown-item i { color: inherit !important; }

.nu-accent { color: var(--nu-accent); }
.nu-muted  { color: var(--nu-muted); }
.nu-chip   { padding: .25rem .5rem; border-radius: 999px; background: rgba(255,255,255,.08); border:1px solid var(--nu-border); }

.btn-outline-primary {
  color: var(--nu-accent);
  border-color: var(--nu-accent);
}
.btn-outline-primary:hover { background: var(--nu-accent); color: #fff; }

/* ===== Sessions-like table card ====================== */
.nu-table-card {
  border-radius: var(--nu-radius-lg);
  overflow: hidden;
  box-shadow: var(--nu-shadow);
}

.table.nu-table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--nu-border);
  color: var(--nu-text);
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.table.nu-table thead th {
  font-weight: 700;
  letter-spacing: .2px;
  border-bottom: 1px solid var(--nu-border);
}

.table.nu-table thead.sticky-top {
  top: 0;
  background: rgba(13,17,23,.85);
  backdrop-filter: blur(6px);
  z-index: 1;
}

.table.nu-table td,
.table.nu-table th {
  padding: .75rem 1rem;
  vertical-align: middle;
  border-color: var(--nu-border);
}

.table.nu-table tbody tr:hover { background: rgba(255,255,255,.03); }

.table.nu-table td.text-end > .btn,
.table.nu-table td.text-end form .btn { white-space: nowrap; }

.nu-table-card { padding: 0; }
.nu-table-card .table-responsive { margin: 0; }

.nu-table-card .table.nu-table tbody tr:last-child td,
.nu-table-card .table.nu-table tbody tr:last-child th { border-bottom: 0 !important; }

.nu-table-card .table.nu-table { border-bottom: 0 !important; }

.dropdown .dropdown-menu.nu-kebab-menu {
  position: absolute;
  z-index: 1003;
  min-width: 320px;
  max-height: 340px;
  overflow: auto;
  padding: .5rem;
  background-color: rgba(13, 13, 13, 0.40) !important;
  border: 1px solid var(--nu-border) !important;
  box-shadow: var(--nu-shadow);
  color: var(--nu-text);
}

.dropdown .dropdown-menu.nu-kebab-menu::-webkit-scrollbar { width: 8px; }
.dropdown .dropdown-menu.nu-kebab-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 8px;
}

/* ==== Profile panes: fixed-height with internal scroll ==== */
.profile-grid { --profile-gap: 1rem; }
@media (min-width: 768px) {
  /* default pane height; JS will update this var for viewport */
  :root { --profile-pane-h: 520px; }
}
.card.pane {
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow children to shrink */
}
.pane-header { padding-bottom: .25rem; }
.pane-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: var(--profile-pane-h, 520px);
}

/* optional: slim internal scrollbars */
.pane-scroll::-webkit-scrollbar { width: 8px; }
.pane-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 8px;
}

/* keep some breathing room above footer on pages with tall content */
main.container { padding-bottom: calc(var(--ds-footer-h, 56px) + 24px); }