:root {
  --bg: #050710;
  --bg-alt: #0b0f1f;
  --accent: #00e6ff;
  --accent2: #ff00e6;
  --text: #f5f5ff;
  --muted: #9da0c2;
  --danger: #ff4b81;
  --border: #262b4b;
  --shadow: 0 0 24px rgba(0, 230, 255, 0.4);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #101530, #03040a);
  color: var(--text);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent2);
}

/* Header / nav ------------------------------------------------------ */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(5, 7, 24, 0.96);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}

.brand a,
.brand {
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

nav {
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

nav li a {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.85rem;
}

/* Submenu header button should look like the normal nav link */
nav li button.submenu-toggle {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

nav li button.submenu-toggle:hover {
  border-color: var(--accent2);
  box-shadow: 0 0 10px rgba(255, 0, 230, 0.4);
}

/* Never render nested submenu lists inline; drilldown will render them in its own panel */
nav li.has-submenu > ul {
  display: none;
}

/* Compact right-arrow indicator for submenu headers */
nav li button.submenu-toggle::after {
  content: '›';
  float: right;
  margin-left: 0.75rem;
  opacity: 0.9;
}

/* Drilldown mode */
nav ul.nav-drilldown-hidden {
  display: none !important;
}

nav .nav-drilldown-panel {
  width: 100%;
}

nav .nav-drilldown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0.25rem;
}

nav .nav-drilldown-back {
  width: 38px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(5, 7, 24, 0.55);
  color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
}

nav .nav-drilldown-title {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--text);
}

nav .nav-drilldown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
}

nav .nav-drilldown-list li a {
  display: block;
}

nav li a:hover {
  border-color: var(--accent2);
  box-shadow: 0 0 10px rgba(255, 0, 230, 0.4);
}

.hamburger {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  position: relative;
  cursor: pointer;
}

.hamburger span {
  position: absolute;
  left: 7px;
  right: 7px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 0.25s ease, top 0.25s ease, opacity 0.25s ease;
}

.hamburger span:nth-child(1) { top: 9px; }
.hamburger span:nth-child(2) { top: 15px; }
.hamburger span:nth-child(3) { top: 21px; }

.hamburger.active span:nth-child(1) {
  top: 15px;
  transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  top: 15px;
  transform: rotate(-45deg);
}

/* Layout ------------------------------------------------------------ */

.content {
  max-width: 1080px;
  margin: 1.25rem auto;
  padding: 0 1rem 3rem;
}

.site-footer {
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: rgba(5, 7, 24, 0.98);
}

.footer-line {
  margin: 0.25rem 0;
}

/* Flash messages ---------------------------------------------------- */

#flash-container {
  margin-bottom: 1rem;
}

.flash {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  margin-bottom: 0.4rem;
  border: 1px solid var(--border);
  background: rgba(11, 15, 31, 0.95);
  word-break: normal;
  overflow-wrap: break-word;
}

.flash-success { border-color: #27e8a7; }
.flash-danger  { border-color: var(--danger); }
.flash-warning { border-color: #ffc857; }
.flash-info    { border-color: var(--accent); }

/* Tables ------------------------------------------------------------ */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: 0.75rem 0 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(5, 7, 24, 0.96);
  font-size: 0.9rem;
}

thead {
  background: linear-gradient(
    90deg,
    rgba(0, 230, 255, 0.15),
    rgba(255, 0, 230, 0.15)
  );
}

th, td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  text-align: left;
}

th {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--muted);
}

tr:nth-child(even) {
  background: rgba(10, 13, 30, 0.8);
}

.truncate {
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Forms ------------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

label {
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Any label that directly contains a checkbox: keep it inline */
label:has(> input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="datetime-local"],
textarea,
select {
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(4, 6, 20, 0.96);
  color: var(--text);
  font-size: 0.9rem;
}

textarea {
  resize: vertical;
}

/* Baseline button style (kept) */
button {
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  padding: 0.45rem 1.2rem;
  font-size: 0.9rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

button:hover {
  background: radial-gradient(circle at top, rgba(0, 230, 255, 0.2), transparent);
  box-shadow: var(--shadow);
}

.btn-danger {
  border-color: var(--danger);
  color: var(--danger);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

/* Pagination -------------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 1.5rem;
}

/* Status messages --------------------------------------------------- */

.status-message {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(11, 15, 31, 0.95);
  word-break: normal;
  overflow-wrap: break-word;
}

/* Ads --------------------------------------------------------------- */

.ad {
  margin: 0.75rem 0;
  padding: 0.5rem;
  border-radius: var(--radius);
  border: 1px dashed rgba(0, 230, 255, 0.25);
}

/* Responsive nav ---------------------------------------------------- */

@media (max-width: 768px) {
  nav {
    position: absolute;
    z-index: 30000;
    right: 0.5rem;
    top: 3.2rem;
    background: rgba(5, 7, 24, 0.98);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: none;
  }

  nav.open {
    display: block;
  }

  nav ul {
    flex-direction: column;
    padding: 0.4rem;
  }

  .hamburger {
    display: block;
  }
}

/* Checkboxes inline with labels ------------------------------------ */

input[type="checkbox"] {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4rem;
}

label input[type="checkbox"] {
  display: inline-block;
}

/* === Recording page layout & controls ============================= */

/* Make recording page form controls full width */
.recording-page input[type="text"],
.recording-page input[type="email"],
.recording-page input[type="password"],
.recording-page input[type="url"],
.recording-page input[type="number"],
.recording-page input[type="datetime-local"],
.recording-page textarea,
.recording-page select {
  width: 100%;
  display: block;
}

/* Make the datetime picker look like the other inputs and fix height */
.recording-page input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
  min-height: 2.1rem;
  line-height: 1.2;
}

/* Vertical spacing between form rows */
.recording-page .form-group,
.recording-page .checkbox-group,
.recording-page .form-actions {
  margin-bottom: 0.9rem;
}

/* Action buttons row: schedule + reset */
.recording-page .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.6rem;
}

.recording-page .form-actions button {
  flex: 1 1 0;
  text-align: center;
}

/* Quick presets label + wrapper */
.recording-page .preset-wrapper {
  position: relative;
  margin-top: 0.45rem;
}

.recording-page .preset-wrapper .small-label {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 0.25rem;
}

/* Custom neon pickers (saved streams + duration presets) ----------- */

.recording-page .duration-picker,
.recording-page .saved-stream-picker {
  position: relative;
}

/* Disable old ::after arrow hack */
.recording-page .preset-wrapper::after {
  content: none !important;
}

/* Neon pill buttons – sized to match textbox height */
.recording-page .duration-picker-toggle,
.recording-page .saved-stream-picker-toggle {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: radial-gradient(circle at top left,
              rgba(0, 255, 255, 0.18),
              transparent 55%)
              rgba(4, 6, 20, 0.96);
  color: var(--accent);
  font-size: 0.9rem;  /* match textbox font size */
  font-weight: 500;
  padding: 0.35rem 2.6rem 0.35rem 0.85rem; /* slightly slimmer vertically */
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.recording-page .duration-picker-label,
.recording-page .saved-stream-picker-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Big glowing arrows */
.recording-page .duration-picker-arrow,
.recording-page .saved-stream-picker-arrow {
  font-size: 1.8rem;
  line-height: 1;
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.95);
  flex-shrink: 0;
}

/* Dropdown menus */
.recording-page .duration-menu,
.recording-page .saved-stream-menu {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 0.45rem;
  background: rgba(5, 7, 16, 0.98);
  border-radius: 18px;
  border: 1px solid var(--accent);
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.5);
  padding: 0.4rem 0;
  max-height: 12rem;
  overflow-y: auto;
  display: none;
  z-index: 20;
}

.recording-page .duration-picker.open .duration-menu,
.recording-page .saved-stream-picker.open .saved-stream-menu {
  display: block;
}

.recording-page .duration-option,
.recording-page .saved-stream-option {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.recording-page .duration-option:hover,
.recording-page .duration-option:focus,
.recording-page .saved-stream-option:hover,
.recording-page .saved-stream-option:focus {
  background: rgba(0, 230, 255, 0.18);
  color: var(--accent);
}

/* ================================================================== */
/* === Buttons as classes (so <a class="btn"> matches <button>) ====== */
/* ================================================================== */

.btn,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  padding: 0.45rem 1.2rem;
  font-size: 0.9rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  user-select: none;
}

a.btn {
  text-decoration: none;
}

.btn:hover,
a.btn:hover {
  background: radial-gradient(circle at top, rgba(0, 230, 255, 0.2), transparent);
  box-shadow: var(--shadow);
}

.btn:disabled,
.btn.disabled,
a.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Optional semantic variants */
.btn-primary { border-color: rgba(0, 230, 255, 0.65); }
.btn-secondary { border-color: rgba(0, 230, 255, 0.45); color: var(--accent); }

/* ================================================================== */
/* === Recording Player ============================================= */
/* ================================================================== */

.recording-player-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

.rp-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.rp-title {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.2;
}

.rp-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.95rem;
  opacity: 0.95;
}

.rp-meta-row {
  display: flex;
  gap: 0.4rem;
  white-space: nowrap;
}

.rp-meta-label { opacity: 0.8; }
.rp-meta-value { font-weight: 600; }

.rp-nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.rp-nav::-webkit-scrollbar { display: none; }
/* Keep Prev / Next / + Playlist on one row, but stop the glow/border getting clipped */
.rp-nav{
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;

  /* Give room so button glow/border isn't clipped by the scroll container.
     IMPORTANT: no negative margins here (they cause iOS horizontal page overflow). */
  padding: 10px 10px 12px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure the nav card behaves like the other cards and never forces the page wider */
.rp-nav-card{
  width: 100%;
  box-sizing: border-box;
}

.rp-nav > *{
  flex: 0 0 auto;              /* don't let buttons shrink */
  white-space: nowrap;
}

/* optional: if you're using box-shadow glow, ensure it renders cleanly */
.rp-nav .btn,
.rp-nav a,
.rp-nav button{
  box-sizing: border-box;
}


.rp-nav .btn,
.rp-nav .btn.disabled {
  white-space: nowrap;
  flex: 0 0 auto;
}
.player-card {
  border-radius: 16px;
  padding: 1rem;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(0,229,255,0.25);
  box-shadow: 0 0 20px rgba(0,229,255,0.08);
}

.player-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.player-times {
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  opacity: 0.95;
}

.sep { opacity: 0.6; margin: 0 0.25rem; }

.player-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

/* Download pill border slightly darker (as per screenshot) */
#btn-download {
  border-color: rgba(0, 230, 255, 0.32) !important;
}

/* Make the download pill feel like the others on hover too */
#btn-download:hover {
  border-color: rgba(0, 230, 255, 0.42) !important;
}

.link-like {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.rp-under {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.rp-under-left, .rp-under-right {
  flex: 1 1 360px;
  min-width: 280px;
}

.tag-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tag-form-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.tag-label {
  font-weight: 700;
  opacity: 0.95;
}

#tag-track-name {
  flex: 1 1 260px;
  min-width: 220px;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.hint {
  font-size: 0.85rem;
  opacity: 0.8;
}

.rp-columns {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.rp-col {
  flex: 1 1 420px;
  min-width: 320px;
  background: rgba(0,0,0,0.10);
  border: 1px solid rgba(0,229,255,0.18);
  border-radius: 14px;
  padding: 0.9rem;
}

.rp-h2 {
  margin: 0 0 0.6rem 0;
  font-size: 1.15rem;
}

.rp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.rp-list-item {
  padding: 0.6rem 0.65rem;
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.06);
}

.tag-name { font-weight: 700; margin-left: 0.5rem; }
.tag-user { opacity: 0.75; margin-left: 0.5rem; font-size: 0.85rem; }

.comment-head {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.comment-user { font-weight: 700; }
.comment-date { opacity: 0.7; font-size: 0.85rem; margin-left: auto; }

.comment-text {
  opacity: 0.95;
  white-space: pre-wrap;
  word-break: break-word;
}

.pill {
  font-size: 0.75rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
}
.pill-warn {
  border-color: rgba(255,200,0,0.6);
  color: rgba(255,220,80,0.95);
}

.empty {
  opacity: 0.8;
  padding: 0.25rem 0;
}

/* === Waveform frame + PNG mask tint ========================= */
.waveform-frame {
  position: relative;
  margin: 1rem 0;
  width: 100%;
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(0,229,255,0.35);
  background: rgba(0,0,0,0.18);
  overflow: hidden;
}

.waveform-inner {
  position: relative;
  height: 110px;
  padding: 10px;
}

/* Static PNG waveform alignment (used by recording_player.html JS)
   - --wave-inset matches the .waveform-mask inset/top/bottom values (10px)
   - --wave-trim-left/right let you compensate for any blank space inside the PNG itself */
#waveform-image-inner {
  --wave-inset: 10px;
  --wave-trim-left: 0px;
  --wave-trim-right: 0px;
}

/* WaveSurfer will inject a canvas/SVG inside this inner */
#waveform-inner {
  height: 100%;
}

/* Static PNG waveform: use the image as a mask so we can colour it via CSS */
.waveform-mask {
  position: absolute;
  inset: 10px;
  background: var(--wave-unplayed, #666666);
  -webkit-mask-image: var(--wave-img);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--wave-img);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  opacity: 0.95;
}

.waveform-mask.played {
  background: var(--wave-played, #00e5ff);
  opacity: 1;
}

.waveform-played-clip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  overflow: hidden;
  pointer-events: none;
}

.waveform-playhead {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0%;
  width: 3px;
  background: var(--wave-played, #00e5ff);
  box-shadow: 0 0 10px rgba(0,229,255,0.7);
  pointer-events: none;
  transform: translateX(-50%);
}

/* Keep the placeholder centered within the frame */
#waveform-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 1rem;
  opacity: 0.85;
}
/* Header: Logged in as (smaller like "By:" meta) */
.site-header .brand .logged-in-as{
  margin-top: 0.20rem;
  font-size: 0.78rem;   /* smaller */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.95;
}

.site-header .brand .logged-in-as strong{
  font-weight: 800;
}


/* ========================================================= */
/* Quick Actions: buttons side-by-side (admin page)           */
/* ========================================================= */

/* Wrapper that contains the quick-action forms/buttons */
.quick-actions-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

/* Each quick action is often a <form> with a button inside */
.quick-actions-actions form {
  margin: 0;
  flex: 1 1 12rem;     /* grow, shrink, base width */
  min-width: 10.5rem;  /* keeps them from getting silly narrow */
}

/* Make each button fill its “tile” */
.quick-actions-actions button,
.quick-actions-actions .btn,
.quick-actions-actions a.btn {
  width: 100%;
}

/* On wider screens, aim for ~4 across if there’s room */
@media (min-width: 900px) {
  .quick-actions-actions form {
    flex: 1 1 14rem;
  }
}


/* Neon plus sign used inside buttons (avoid grey emoji rendering on iOS) */
.neon-plus{
  color:#00e5ff;
  font-weight:700;
  text-shadow:0 0 8px rgba(0,229,255,0.85);
  margin-right:0.35rem;
  display:inline-block;
}


/* Modal styling (matches playlist modal look) */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-content{
  width: min(520px, 96vw);
  background: rgba(10,12,20,0.95);
  border: 1px solid rgba(0, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(0,255,255,0.08);
  padding: 18px;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}

.modal-close{
  background: transparent;
  border: 1px solid rgba(0,255,255,0.25);
  color: #7ffcff;

  width: 42px;
  height: 42px;
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;
  line-height: 1;
  padding: 0;

  cursor: pointer;
}

.modal-body{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 14px;
}

.help-text{
  opacity: 0.85;
  font-size: 0.95em;
}


/* --- NAV MENU SCROLL CAP (admin setting: max navigation menu items before scroll) --- */
/* Keep the panel width consistent (so submenu doesn't shrink based on its shorter labels). */
#nav {
  --nav-panel-width: clamp(260px, 70vw, 340px);
  width: var(--nav-panel-width);
  box-sizing: border-box;
}
#nav > ul { -webkit-overflow-scrolling: touch; }
#nav .nav-drilldown-panel {
  min-width: var(--nav-panel-width);
  width: var(--nav-panel-width);
  box-sizing: border-box;
}


/* ================================
   Table Manager (client-side tables)
   ================================ */
.tm-pagination-footer{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin:0.75rem 0 0.25rem;
  padding:0.25rem;
  color: rgba(220, 255, 255, 0.95);
}
.tm-page-btn{
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 255, 255, 0.35);
  color: inherit;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.95rem;
}
.tm-page-btn:hover{
  background: rgba(0, 255, 255, 0.12);
}
.tm-page-btn.active{
  background: rgba(0, 255, 255, 0.18);
  border-color: rgba(0, 255, 255, 0.55);
}
.tm-page-btn:disabled{
  opacity: 0.45;
  cursor: default;
}
.tm-page-info{
  font-size: 0.92rem;
  opacity: 0.85;
}

.tm-filter-row th{
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.tm-filter-input{
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(0,255,255,0.20);
  color: rgba(220, 255, 255, 0.95);
  border-radius: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.95rem;
}
.tm-filter-input::placeholder{
  color: rgba(200, 240, 240, 0.6);
}

th.tm-sortable{
  cursor: pointer;
  user-select: none;
}
.tm-sort-indicator{
  opacity: 0.75;
  margin-left: 0.35rem;
  font-size: 0.85em;
}

/* Ensure Table Manager modal is hidden by default */
#tm-modal.hidden{ display:none !important; }
#tm-modal{ display:flex; }

.table-wrapper{ -webkit-overflow-scrolling: touch; }


/* ---- Table Manager injected wrapper ---- */
.tm-wrapper{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
}
.tm-pagination-footer{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ---- Table Manager pagination (current markup: .tm-footer / .tm-pages / .tm-page) ---- */
/*
  Goal: make the "Showing page X of Y" text easier to read (more padding),
  and claw back wasted space in the pill buttons (smaller padding + tighter gaps)
  while staying consistent with the neon button styling.
*/
.tm-wrapper.tm-pagination .tm-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 0.4rem;
  margin: 0.75rem 0 0.25rem;
  padding: 0.25rem;
  color: rgba(220, 255, 255, 0.95);
}

.tm-wrapper.tm-pagination .tm-footer-left{
  flex: 1 1 100%;
  padding: 0.45rem 0.65rem;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 255, 255, 0.18);
  font-size: 0.95rem;
  line-height: 1.25;
}

.tm-wrapper.tm-pagination .tm-footer-right{
  flex: 1 1 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 0.35rem;
  padding: 0.15rem 0.1rem 0.45rem;
}

.tm-wrapper.tm-pagination .tm-pages{
  display:flex;
  align-items:center;
  gap: 0.3rem;
  max-width: 100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding: 0.15rem;
}

/* Tighten pagination buttons inside the footer only */
.tm-wrapper.tm-pagination .tm-footer-right .btn{
  padding: 0.32rem 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.tm-wrapper.tm-pagination .tm-footer-right .tm-page{
  padding: 0.32rem 0.55rem;
  min-width: 2.2rem;
}

/* Active state for page number buttons */
.tm-wrapper.tm-pagination .tm-footer-right .tm-page.active{
  background: rgba(0, 255, 255, 0.14);
  border-color: rgba(0, 255, 255, 0.55);
}

/* On wider screens, keep info on the left and controls on the right */
@media (min-width: 640px){
  .tm-wrapper.tm-pagination .tm-footer-left{ flex: 1 1 auto; }
  .tm-wrapper.tm-pagination .tm-footer-right{ flex: 0 0 auto; justify-content:flex-end; }
}