/* ====================================================
   CastHost Dashboard – Visual Refresh v2
   Brand: teal #0fb8a9 | Dark navy #0f1923
   ==================================================== */

/* ─── 1. DESIGN TOKENS ─── */
:root {
  --ch-primary: #0fb8a9;
  --ch-primary-rgb: 15, 184, 169;
  --ch-primary-hover: #0da99b;
  --ch-primary-light: rgba(15, 184, 169, .12);
  --ch-primary-glow: rgba(15, 184, 169, .25);
  --ch-dark: #0c1922;
  --ch-dark-rgb: 12, 25, 34;
  --ch-dark-secondary: #111f2e;
  --ch-dark-card: #172535;
  --ch-dark-surface: #1c2f42;
  --ch-white: #fff;
  --ch-off-white: #f4f7fa;
  --ch-text: #b8ccd9;
  --ch-text-muted: #6e8a9e;
  --ch-text-heading: #ddeaf4;
  --ch-border: rgba(255,255,255,.06);
  --ch-border-light: rgba(255,255,255,.1);
  --ch-success: #27ae60;
  --ch-warning: #f39c12;
  --ch-danger: #e74c3c;
  --ch-info: #3498db;
  --ch-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ch-font-mono: "JetBrains Mono", "Fira Code", monospace;
  --ch-space-xs: 0.25rem;
  --ch-space-sm: 0.5rem;
  --ch-space-md: 1rem;
  --ch-space-lg: 1.5rem;
  --ch-space-xl: 2rem;
  --ch-space-2xl: 3rem;
  --ch-shadow-sm: 0 1px 3px rgba(0,0,0,.25);
  --ch-shadow-md: 0 4px 16px rgba(0,0,0,.3);
  --ch-shadow-lg: 0 8px 32px rgba(0,0,0,.4);
  --ch-shadow-glow: 0 0 30px rgba(15,184,169,.12);
  --ch-radius-sm: 6px;
  --ch-radius-md: 10px;
  --ch-radius-lg: 16px;
  --ch-radius-xl: 24px;
  --ch-transition: 0.2s cubic-bezier(0.4,0,0.2,1);
  --ch-transition-slow: 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ─── 2. GLOBAL BASE ─── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--ch-dark) !important;
  color: var(--ch-text) !important;
  font-family: var(--ch-font) !important;
}
::selection { background: var(--ch-primary); color: var(--ch-white); }
::-moz-selection { background: var(--ch-primary); color: var(--ch-white); }
a { transition: color var(--ch-transition); }

/* ─── 3. ADMIN HEADER ─── */
.main-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--ch-dark-secondary) !important;
  border-bottom: 1px solid var(--ch-border) !important;
}
.main-header .header-icon, .main-header .nav-link {
  color: var(--ch-text) !important;
  transition: color var(--ch-transition);
}
.main-header .header-icon:hover, .main-header .nav-link:hover { color: var(--ch-primary) !important; }
.main-header .btn-light {
  background: var(--ch-dark-card) !important;
  border: 1px solid var(--ch-border-light) !important;
  border-radius: var(--ch-radius-sm) !important;
  color: var(--ch-text) !important;
  font-size: .85rem;
  transition: all var(--ch-transition);
}
.main-header .btn-light:hover {
  background: var(--ch-dark-surface) !important;
  border-color: var(--ch-primary) !important;
  color: var(--ch-primary) !important;
}

/* ─── 4. SIDEBAR ─── */
.app-sidebar {
  background: linear-gradient(180deg, var(--ch-dark-secondary) 0%, var(--ch-dark) 100%) !important;
  border-right: 1px solid var(--ch-border) !important;
}
.app-sidebar .side-menu__item {
  border-radius: var(--ch-radius-sm);
  color: var(--ch-text-muted) !important;
  margin: 2px 8px;
  padding: 10px 14px !important;
  transition: all var(--ch-transition);
}
.app-sidebar .side-menu__item.active,
.app-sidebar .side-menu__item:hover {
  background: var(--ch-primary-light) !important;
  color: var(--ch-primary) !important;
}
.app-sidebar .side-menu__item.active { box-shadow: inset 3px 0 0 var(--ch-primary); }
.app-sidebar .side-menu__item.active .side-menu__icon,
.app-sidebar .side-menu__item:hover .side-menu__icon { color: var(--ch-primary) !important; }
.side-menu__icon { color: var(--ch-text-muted) !important; transition: color var(--ch-transition); }
.app-sidebar .side-menu__label { font-size: .875rem; font-weight: 400; letter-spacing: .01em; }
.side-menu .nav-header, .side-menu h3 {
  color: var(--ch-text-muted) !important;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  padding: .75rem 1rem .25rem;
  text-transform: uppercase;
}
.app-sidebar .main-sidebar-header { border-bottom: 1px solid var(--ch-border) !important; }

/* ─── 5. MAIN CONTENT ─── */
.main-content { background: var(--ch-dark) !important; }
.main-container { padding-top: var(--ch-space-lg); }
.breadcrumb-header { padding: var(--ch-space-lg) 0 var(--ch-space-md); }
.main-content-title {
  color: var(--ch-text-heading) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}
.main-content-title.tx-primary {
  color: var(--ch-text-heading) !important;
}

/* ─── 6. CARDS ─── */
.card {
  background: var(--ch-dark-card) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: var(--ch-radius-md) !important;
  box-shadow: var(--ch-shadow-sm) !important;
  transition: box-shadow var(--ch-transition), transform var(--ch-transition);
}
.card:hover { box-shadow: var(--ch-shadow-md) !important; }
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ch-border) !important;
  padding: var(--ch-space-md) var(--ch-space-lg) !important;
}
.card-header .card-title {
  color: var(--ch-text-heading) !important;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0;
}
.card-body { color: var(--ch-text) !important; padding: var(--ch-space-lg) !important; }
.card .fw-bolder, .card h2.fw-bolder, .card h3.fw-bolder { color: var(--ch-white) !important; font-weight: 700 !important; }
.card .card-text { color: var(--ch-text-muted) !important; font-size: .85rem; }
.avatar.bg-light-info { background: rgba(52,152,219,.15) !important; }
.avatar.bg-light-warning { background: rgba(243,156,18,.15) !important; }
.avatar.bg-light-primary { background: var(--ch-primary-light) !important; }
.avatar.bg-light-success { background: rgba(39,174,96,.15) !important; }

/* ─── 7. BUTTONS ─── */
.btn {
  border-radius: var(--ch-radius-sm) !important;
  font-size: .8rem !important;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .5rem 1.25rem !important;
  border: 1px solid transparent;
  transition: all var(--ch-transition);
}
.btn-sm {
  font-size: .72rem !important;
  padding: .38rem .9rem !important;
  border-radius: var(--ch-radius-sm) !important;
}

/* Compact icon copy buttons (Encoder Setup etc.). The .btn-sm padding above
   wraps ~29px of horizontal padding around a tiny glyph, inflating these into
   oversized ovals. Pin them to a tidy fixed-size circle so they render cleanly
   and stay compact on narrow screens. Specificity (.btn.btn-copy) beats .btn-sm. */
.btn.btn-copy {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  border-radius: 50% !important;
}
.btn-primary {
  background: linear-gradient(135deg, var(--ch-primary), #0aa396) !important;
  border-color: transparent !important;
  box-shadow: 0 1px 4px rgba(var(--ch-primary-rgb), .2);
  color: var(--ch-white) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #0ec5b5, var(--ch-primary)) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 12px rgba(var(--ch-primary-rgb), .35) !important;
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(var(--ch-primary-rgb), .2) !important; }
.btn-success { background: linear-gradient(135deg, var(--ch-success), #219a52) !important; border-color: transparent !important; color: var(--ch-white) !important; }
.btn-danger { background: linear-gradient(135deg, var(--ch-danger), #c0392b) !important; border-color: transparent !important; color: var(--ch-white) !important; }
.btn-warning { background: linear-gradient(135deg, var(--ch-warning), #d68910) !important; border-color: transparent !important; color: var(--ch-white) !important; }
.btn-outline-primary,
.btn.btn-outline-primary {
  border: 1px solid rgba(15, 184, 169, .5) !important;
  color: var(--ch-primary) !important;
  background-color: rgba(15, 184, 169, .06) !important;
  background-image: none !important;
}
.btn-outline-primary:hover {
  background: var(--ch-primary) !important;
  border-color: var(--ch-primary) !important;
  color: var(--ch-white) !important;
  box-shadow: 0 3px 12px rgba(var(--ch-primary-rgb), .3) !important;
}
/* Enable action — teal tinted to signal "turn on" */
.btn-action-enable {
  background: rgba(var(--ch-primary-rgb), .15) !important;
  border-color: rgba(var(--ch-primary-rgb), .6) !important;
  color: var(--ch-primary) !important;
}
.btn-action-enable:hover {
  background: var(--ch-primary) !important;
  border-color: var(--ch-primary) !important;
  color: var(--ch-white) !important;
}
/* Disable action — amber/warning tinted to signal "turn off" */
.btn-action-disable {
  background: rgba(255, 193, 7, .08) !important;
  border-color: rgba(255, 193, 7, .45) !important;
  color: #ffc107 !important;
}
.btn-action-disable:hover {
  background: rgba(255, 193, 7, .85) !important;
  border-color: #ffc107 !important;
  color: #1a1a2e !important;
}
/* Outline danger (Delete buttons) */
.btn-outline-danger {
  border: 1px solid rgba(231, 76, 60, .5) !important;
  color: var(--ch-danger) !important;
  background: rgba(231, 76, 60, .06) !important;
}
.btn-outline-danger:hover {
  background: var(--ch-danger) !important;
  border-color: var(--ch-danger) !important;
  color: var(--ch-white) !important;
  box-shadow: 0 3px 12px rgba(231, 76, 60, .3) !important;
}
/* Active path toggle — match outline-primary exactly, override Bootstrap dark theme */
.btn.btn-outline-primary.active,
.btn.btn-outline-primary.active:focus,
.btn.btn-outline-primary.active:active,
.btn.btn-sm.btn-outline-primary.wizard-path-btn.active,
.btn-outline-primary.wizard-path-btn.active {
  background-color: rgba(var(--ch-primary-rgb), .06) !important;
  background-image: none !important;
  background: rgba(var(--ch-primary-rgb), .06) !important;
  border-color: rgba(var(--ch-primary-rgb), .35) !important;
  color: var(--ch-primary) !important;
  box-shadow: none !important;
}
/* Completed step buttons — ghost/subtle */
.btn-outline-secondary {
  border: 1px solid var(--ch-border-light) !important;
  color: var(--ch-text-muted) !important;
  background: rgba(255,255,255,.03) !important;
}
.btn-outline-secondary:hover {
  border-color: var(--ch-primary) !important;
  color: var(--ch-primary) !important;
  background: var(--ch-primary-light) !important;
}
/* Light variant buttons (copy buttons etc.) */
.btn-light {
  background: var(--ch-dark-surface) !important;
  border: 1px solid var(--ch-border-light) !important;
  color: var(--ch-text) !important;
}
.btn-light:hover {
  border-color: var(--ch-primary) !important;
  color: var(--ch-primary) !important;
}

/* ─── 8. FORMS ─── */
.form-control {
  background: var(--ch-dark-surface) !important;
  border: 1px solid var(--ch-border-light) !important;
  border-radius: var(--ch-radius-sm) !important;
  color: var(--ch-text) !important;
  font-size: .9rem;
  padding: .6rem .875rem !important;
  transition: border-color var(--ch-transition), box-shadow var(--ch-transition);
}
.form-control::placeholder { color: var(--ch-text-muted) !important; }
.form-control::-moz-placeholder { color: var(--ch-text-muted) !important; }
.form-control:focus {
  border-color: var(--ch-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--ch-primary-rgb), .15) !important;
  outline: none;
}
.form-control.is-invalid { border-color: var(--ch-danger) !important; box-shadow: 0 0 0 3px rgba(231,76,60,.15) !important; }
.form-select, select.form-control {
  background-color: var(--ch-dark-surface) !important;
  border: 1px solid var(--ch-border-light) !important;
  color: var(--ch-text) !important;
}
label { color: var(--ch-text) !important; font-size: .85rem; font-weight: 500; margin-bottom: .35rem; }

/* ─── 9. TABLES ─── */
.table { color: var(--ch-text) !important; }
.table thead th {
  background: var(--ch-dark-surface) !important;
  color: var(--ch-text-heading) !important;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.table thead th, .table tbody td { border-bottom: 1px solid var(--ch-border) !important; padding: .75rem 1rem !important; }
.table tbody td { vertical-align: middle; }
.table tbody tr:hover { background: rgba(var(--ch-primary-rgb), .04) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,.02) !important; }

/* ─── 10. ALERTS & BADGES ─── */
.badge { font-size: .75rem; font-weight: 500; padding: .3em .65em; border-radius: var(--ch-radius-sm) !important; }
span.badge.bg-primary,
.badge.bg-primary,
.card-body .badge.bg-primary {
  background-color: rgba(var(--ch-primary-rgb), .15) !important;
  background: rgba(var(--ch-primary-rgb), .15) !important;
  color: var(--ch-primary) !important;
  border: 1px solid rgba(var(--ch-primary-rgb), .3);
  font-weight: 600;
}
.wizard-badge-progress {
  background: rgba(15, 184, 169, .15) !important;
  color: #0fb8a9 !important;
  border: 1px solid rgba(15, 184, 169, .3) !important;
  font-weight: 600 !important;
  font-size: .75rem !important;
  padding: .3em .65em !important;
  border-radius: 6px !important;
}
.alert { border: none !important; border-radius: var(--ch-radius-sm) !important; }
.alert-success { background: rgba(39,174,96,.15) !important; color: #2ecc71 !important; }
.alert-danger { background: rgba(231,76,60,.15) !important; color: #e74c3c !important; }
.alert-warning { background: rgba(243,156,18,.15) !important; color: #f39c12 !important; }
.alert-info { background: rgba(52,152,219,.15) !important; color: #3498db !important; }

/* ─── 11. MODALS ─── */
.modal-content {
  background: var(--ch-dark-card) !important;
  border: 1px solid var(--ch-border-light) !important;
  border-radius: var(--ch-radius-lg) !important;
  box-shadow: var(--ch-shadow-lg) !important;
}
.modal-header { border-bottom: 1px solid var(--ch-border) !important; padding: var(--ch-space-lg) !important; }
.modal-header .modal-title { color: var(--ch-text-heading) !important; font-weight: 600; }
.modal-body { color: var(--ch-text) !important; padding: var(--ch-space-lg) !important; }
.modal-footer { border-top: 1px solid var(--ch-border) !important; }
.btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

/* Credential rows (FTP, connection details, etc.) */
.ftp-credential-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-md);
  overflow: hidden;
}
.ftp-credential-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--ch-border);
}
.ftp-credential-row:last-child {
  border-bottom: none;
}
.ftp-credential-label {
  color: var(--ch-text-muted);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
  margin-right: 1rem;
}
.ftp-credential-value {
  color: var(--ch-primary) !important;
  background: rgba(var(--ch-primary-rgb), .08) !important;
  border: 1px solid rgba(var(--ch-primary-rgb), .2);
  border-radius: var(--ch-radius-sm);
  padding: .3rem .65rem;
  font-size: .82rem;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
  cursor: pointer;
  transition: all var(--ch-transition);
  user-select: all;
}
.ftp-credential-value:hover {
  background: rgba(var(--ch-primary-rgb), .15) !important;
  border-color: rgba(var(--ch-primary-rgb), .4);
}

/* ─── 12. DROPDOWNS ─── */
.dropdown-menu {
  background: var(--ch-dark-card) !important;
  border: 1px solid var(--ch-border-light) !important;
  border-radius: var(--ch-radius-md) !important;
  box-shadow: var(--ch-shadow-lg) !important;
  padding: .5rem !important;
}
.dropdown-item {
  border-radius: var(--ch-radius-sm) !important;
  color: var(--ch-text) !important;
  font-size: .875rem;
  padding: .5rem .75rem !important;
  transition: all var(--ch-transition);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--ch-primary-light) !important; color: var(--ch-primary) !important; }
.dropdown-item.active { background: var(--ch-primary) !important; color: var(--ch-white) !important; }

/* ─── 13. FOOTER ─── */
.main-footer {
  background: var(--ch-dark-secondary) !important;
  border-top: 1px solid var(--ch-border) !important;
  color: var(--ch-text-muted) !important;
  font-size: .8rem;
}
.main-footer .tx-primary { color: var(--ch-primary) !important; }

/* ─── 14. NPROGRESS ─── */
#nprogress .bar { background: var(--ch-primary) !important; height: 3px !important; }
#nprogress .peg { box-shadow: 0 0 10px var(--ch-primary), 0 0 5px var(--ch-primary) !important; }
.progress-top-bar { display: none !important; }

/* ─── 15. SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ch-dark); }
::-webkit-scrollbar-thumb { background: var(--ch-dark-surface); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ch-primary); }

/* ─── 16. AUTH PAGES ─── */
/* Body base for all auth pages */
body.error-page1.bg-primary {
  background: #080f18 !important;
  min-height: 100vh;
}

/* Remove the default teal SVG overlay that causes the blue-teal cast */
.bg-svg::before {
  display: none !important;
}

/* Dark, on-brand auth background with teal radial glows */
.bg-svg {
  background:
    radial-gradient(ellipse at 12% 55%, rgba(var(--ch-primary-rgb), 0.16) 0%, transparent 50%),
    radial-gradient(ellipse at 88% 15%, rgba(var(--ch-primary-rgb), 0.09) 0%, transparent 40%),
    radial-gradient(ellipse at 55% 95%, rgba(var(--ch-primary-rgb), 0.06) 0%, transparent 35%),
    linear-gradient(145deg, #050c14 0%, #0c1922 55%, #071219 100%) !important;
  min-height: 100vh;
}

/* Floating circles - subtle teal borders instead of white */
.square-box {
  position: fixed !important;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.square-box div {
  border-color: rgba(var(--ch-primary-rgb), 0.1) !important;
  background: transparent !important;
}

/* Content above decorative layer */
.bg-svg .page {
  position: relative;
  z-index: 1;
}

/* Auth card wrapper */
.card-sigin { background: transparent !important; }

/* Login / signup / forgot-password card */
.main-card-signin {
  background: var(--ch-dark-card) !important;
  border: 1px solid var(--ch-border-light) !important;
  border-top: 3px solid var(--ch-primary) !important;
  border-radius: var(--ch-radius-lg) !important;
  box-shadow: var(--ch-shadow-lg), var(--ch-shadow-glow) !important;
  padding: var(--ch-space-2xl) !important;
}
.main-card-signin .tx-medium,
.main-card-signin h2 {
  color: var(--ch-primary) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}
.main-card-signin .font-weight-semibold,
.main-card-signin h6 { color: var(--ch-text-muted) !important; }
.main-card-signin .form-control {
  background: var(--ch-dark-surface) !important;
  border: 1px solid var(--ch-border-light) !important;
  border-radius: var(--ch-radius-sm) !important;
  color: var(--ch-text) !important;
  font-size: .9rem;
  height: auto !important;
  padding: .75rem 1rem !important;
}
.main-card-signin .form-control:focus {
  border-color: var(--ch-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--ch-primary-rgb), .15) !important;
}
.main-card-signin .form-control::placeholder { color: var(--ch-text-muted) !important; }
.main-card-signin .form-control::-moz-placeholder { color: var(--ch-text-muted) !important; }
.main-card-signin .btn-primary,
.main-card-signin input[type="submit"].btn-primary {
  background: var(--ch-primary) !important;
  border-color: var(--ch-primary) !important;
  border-radius: var(--ch-radius-sm) !important;
  box-shadow: 0 4px 16px rgba(var(--ch-primary-rgb), .35);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .65rem 1.5rem !important;
  transition: all var(--ch-transition);
}
.main-card-signin .btn-primary:hover,
.main-card-signin input[type="submit"].btn-primary:hover {
  background: var(--ch-primary-hover) !important;
  box-shadow: 0 6px 22px rgba(var(--ch-primary-rgb), .5) !important;
  transform: translateY(-1px);
}
.main-card-signin .tx-primary,
.main-card-signin a.tx-primary { color: var(--ch-primary) !important; }
.main-card-signin a.tx-primary:hover { color: var(--ch-primary-hover) !important; text-decoration: underline; }
.main-card-signin .custom-control-label { color: var(--ch-text-muted) !important; font-size: .85rem; }
.main-card-signin .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ch-primary) !important;
  border-color: var(--ch-primary) !important;
}
.main-card-signin .form-group { margin-bottom: var(--ch-space-md); }
.formError { color: var(--ch-danger) !important; }

/* ─── 17. LOADER ─── */
#global-loader { background: var(--ch-dark) !important; }

/* ─── 18. BACK TO TOP ─── */
#back-to-top {
  background: var(--ch-primary) !important;
  border: none !important;
  box-shadow: var(--ch-shadow-md) !important;
  color: var(--ch-white) !important;
}

/* ─── 19. TOASTR ─── */
.toast { border-radius: var(--ch-radius-sm) !important; }
.toast-success { background-color: var(--ch-success) !important; }
.toast-error { background-color: var(--ch-danger) !important; }
.toast-info { background-color: var(--ch-info) !important; }
.toast-warning { background-color: var(--ch-warning) !important; }

/* ─── 20. SWEETALERT2 ─── */
.swal2-popup {
  background: var(--ch-dark-card) !important;
  border: 1px solid var(--ch-border-light) !important;
  border-radius: var(--ch-radius-lg) !important;
}
.swal2-title { color: var(--ch-text-heading) !important; }
.swal2-html-container { color: var(--ch-text) !important; }

/* ─── 21. CHAT WIDGET ─── */
.chat-floating-icon {
  background: var(--ch-primary) !important;
  box-shadow: 0 4px 16px rgba(var(--ch-primary-rgb), .4) !important;
  transition: all var(--ch-transition);
}
.chat-floating-icon:hover {
  box-shadow: 0 6px 22px rgba(var(--ch-primary-rgb), .55) !important;
  transform: scale(1.08);
}
.chat-box-container {
  background: var(--ch-dark-card) !important;
  border: 1px solid var(--ch-border-light) !important;
  border-radius: var(--ch-radius-lg) !important;
  box-shadow: var(--ch-shadow-lg) !important;
}
.chat-box-header {
  background: var(--ch-primary) !important;
  border-radius: var(--ch-radius-lg) var(--ch-radius-lg) 0 0 !important;
}
.chat-box-body { background: var(--ch-dark) !important; }
.user-bubble {
  background: rgba(var(--ch-primary-rgb), .15) !important;
  border-radius: var(--ch-radius-md) var(--ch-radius-md) var(--ch-radius-sm) var(--ch-radius-md) !important;
  color: var(--ch-text) !important;
}
.assistant-bubble {
  background: var(--ch-dark-surface) !important;
  border-radius: var(--ch-radius-md) var(--ch-radius-md) var(--ch-radius-md) var(--ch-radius-sm) !important;
  color: var(--ch-text) !important;
}
.chat-box-footer { background: var(--ch-dark-card) !important; border-top: 1px solid var(--ch-border) !important; }
.chat-box-footer input[type="text"] {
  background: var(--ch-dark-surface) !important;
  border: 1px solid var(--ch-border-light) !important;
  border-radius: var(--ch-radius-sm) !important;
  color: var(--ch-text) !important;
}
.chat-box-footer input[type="text"]:focus { border-color: var(--ch-primary) !important; outline: none; }
.chat-box-footer button { background: var(--ch-primary) !important; border-radius: var(--ch-radius-sm) !important; font-weight: 500; }
.beta-badge { background: var(--ch-danger) !important; border-radius: var(--ch-radius-sm) !important; font-size: 9px !important; }

/* ─── 22. UTILITIES ─── */
.text-primary, .tx-primary, a.tx-primary { color: var(--ch-primary) !important; }
.text-dark { color: var(--ch-text) !important; }
.text-muted, .tx-muted { color: var(--ch-text-muted) !important; }
.nav-tabs .nav-link { color: var(--ch-text-muted) !important; transition: all var(--ch-transition); }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: var(--ch-primary) !important; }
.page-link { background: var(--ch-dark-card) !important; border-color: var(--ch-border) !important; color: var(--ch-text) !important; transition: all var(--ch-transition); }
.page-item.active .page-link { background: var(--ch-primary) !important; border-color: var(--ch-primary) !important; color: var(--ch-white) !important; }
.page-link:hover { background: var(--ch-dark-surface) !important; color: var(--ch-primary) !important; }
.tooltip-inner { background: var(--ch-dark-card) !important; border-radius: var(--ch-radius-sm) !important; font-size: .8rem; }

/* ─── 23. SUMOSELECT ─── */
.SumoSelect > .CaptionCont { background: var(--ch-dark-surface) !important; color: var(--ch-text) !important; }
.SumoSelect > .CaptionCont, .SumoSelect > .optWrapper { border-color: var(--ch-border-light) !important; border-radius: var(--ch-radius-sm) !important; }
.SumoSelect > .optWrapper { background: var(--ch-dark-card) !important; }
.SumoSelect > .optWrapper > .options > li { color: var(--ch-text) !important; }
.SumoSelect > .optWrapper > .options > li.selected,
.SumoSelect > .optWrapper > .options > li:hover { background: var(--ch-primary-light) !important; color: var(--ch-primary) !important; }

/* ─── 24. RESPONSIVE ─── */
@media (max-width: 768px) {
  .main-card-signin { margin: 0 var(--ch-space-sm); padding: var(--ch-space-xl) var(--ch-space-lg) !important; }
  .breadcrumb-header { padding: var(--ch-space-md) 0; }
  .main-content-title { font-size: 1.25rem !important; }
}
@media (max-width: 480px) {
  .main-card-signin { padding: var(--ch-space-lg) var(--ch-space-md) !important; }
}

/* ─── 25. 404 / ERROR PAGES ─── */
.error-page1 h1, .error-page1 h2, .error-page1 h6 {
  color: var(--ch-text-heading) !important;
}
.error-page1 .btn-yellow, .error-page1 .btn {
  background: var(--ch-primary) !important;
  border-color: var(--ch-primary) !important;
  color: var(--ch-white) !important;
  border-radius: var(--ch-radius-sm) !important;
  font-weight: 600;
  padding: .65rem 2rem !important;
}

/* ─── 26. 404 PAGE FIXES (overrides section 25) ─── */
/* Ensure text-white is actually white */
.text-white { color: #fff !important; }
/* 404 subtitle */
.main-error-wrapper h6 { color: var(--ch-text) !important; }
/* 404 "Back to Home" button */
.main-error-wrapper .btn-secondary,
.main-error-wrapper a.btn {
  background: var(--ch-primary) !important;
  border-color: var(--ch-primary) !important;
  color: var(--ch-white) !important;
  border-radius: var(--ch-radius-sm) !important;
  font-weight: 600;
  padding: .65rem 2rem !important;
  box-shadow: 0 4px 14px rgba(var(--ch-primary-rgb), .35) !important;
}
.main-error-wrapper .btn-secondary:hover,
.main-error-wrapper a.btn:hover {
  background: var(--ch-primary-hover) !important;
  transform: translateY(-1px);
}

/* ─── 27. 404 SPECIFIC OVERRIDES ─── */
.main-error-wrapper h1 { color: #fff !important; }
.main-error-wrapper h2 { color: var(--ch-text-heading) !important; }
.main-error-wrapper h6 { color: var(--ch-text-muted) !important; }
.main-error-wrapper .btn,
.main-error-wrapper a.btn,
.main-error-wrapper .sp-container button {
  background: var(--ch-primary) !important;
  border-color: var(--ch-primary) !important;
  color: #fff !important;
  border-radius: var(--ch-radius-sm) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(var(--ch-primary-rgb), .4) !important;
}

/* ─── 28. DASHBOARD HOME PAGE ─── */

/* Page title — tone down the all-caps teal */
.main-content-title,
.breadcrumb-header .main-content-title {
  color: var(--ch-text-heading) !important;
  text-transform: none !important;
}

/* Getting Started progress card */
.card .progress {
  background: rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  height: 8px !important;
  overflow: hidden;
}
.card .progress-bar {
  background: linear-gradient(90deg, var(--ch-primary), #12d4c2) !important;
  border-radius: 20px !important;
}

/* Station info & details cards — better spacing */
.card-body h5, .card-body h6 {
  color: var(--ch-text-heading) !important;
  font-weight: 600;
}
.card-body p, .card-body div {
  line-height: 1.65;
}

/* Encoder setup items — cleaner spacing */
.card-body .mb-1,
.card-body .mb-2 {
  padding: 4px 0;
}

/* ch-col-gutter-restore: the rule above zeroes horizontal padding on ANY .mb-1/.mb-2
   inside a card body, including Bootstrap grid columns (`col-md-6 mb-1`). Those columns
   still carry the row's negative gutter margin, so they end up 12px left of everything
   else in the form. Give the gutter back to columns only, using Bootstrap's own formula
   so per-row overrides (e.g. .g-0) still resolve correctly. */
.card-body .row > [class*="col-"].mb-1,
.card-body .row > [class*="col-"].mb-2 {
  padding-left: calc(var(--bs-gutter-x) * .5);
  padding-right: calc(var(--bs-gutter-x) * .5);
}

/* Recent Tracks sidebar — improve text contrast */
.card-body .media-body,
.card-body .media-body small,
.card-body .media-body .tx-12,
.card-body .media-body .tx-13 {
  color: var(--ch-text) !important;
}
.card-body .media-body .font-weight-semibold,
.card-body .media-body strong {
  color: var(--ch-text-heading) !important;
  font-weight: 600;
}

/* Album art thumbnails */
.card-body img[class*="avatar"],
.card-body .media img {
  border-radius: var(--ch-radius-sm) !important;
  border: 1px solid var(--ch-border-light);
}

/* Copy buttons — subtle style */
.card-body button[title*="Copy"],
.card-body .btn-clipboard {
  background: transparent !important;
  border: none !important;
  color: var(--ch-text-muted) !important;
  font-size: .8rem;
  padding: 2px 6px !important;
  transition: color var(--ch-transition);
}
.card-body button[title*="Copy"]:hover,
.card-body .btn-clipboard:hover {
  color: var(--ch-primary) !important;
}

/* Card section headers (STATION DETAILS, RECENT TRACKS etc.) */
.card-header h4,
.card-header .card-title,
h4.card-title {
  color: var(--ch-text-heading) !important;
  font-size: .95rem !important;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* AutoDJ badge-like status */
.card-header .badge,
.card-header span.badge {
  font-size: .7rem;
  padding: .25em .6em;
}

/* PLS / M3U download buttons */
.btn-info {
  background: var(--ch-info) !important;
  border-color: var(--ch-info) !important;
  border-radius: var(--ch-radius-sm) !important;
  color: var(--ch-white) !important;
  font-size: .8rem;
  font-weight: 500;
}

/* ─── 29. FOOTER REFRESH ─── */
.main-footer {
  background: var(--ch-dark-secondary) !important;
  border-top: 1px solid var(--ch-border) !important;
  color: var(--ch-text-muted) !important;
  font-size: .8rem;
  padding: var(--ch-space-md) var(--ch-space-lg) !important;
  text-align: center;
}

/* ─── 30. SIDEBAR BADGE (BETA etc.) ─── */
.app-sidebar .badge-danger,
.app-sidebar .badge.bg-danger {
  background: var(--ch-danger) !important;
  font-size: .6rem;
  padding: .15em .45em;
  border-radius: 3px;
  vertical-align: middle;
}

/* ─── 31. HEADER TOP BAR STATS ─── */
.main-header .nav-item .nav-link span,
.main-header .navbar-nav .nav-item span {
  color: var(--ch-text) !important;
  font-size: .8rem;
}

/* ─── 33. STREAM LINKS & TECHNICAL TEXT ─── */
.card-body code,
.card-body .text-monospace {
  background: var(--ch-dark) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 4px !important;
  color: var(--ch-primary) !important;
  font-family: var(--ch-font-mono) !important;
  font-size: .8rem;
  padding: 2px 6px;
}
.card-body a:not(.btn) {
  color: var(--ch-primary) !important;
  text-decoration: none;
  transition: color var(--ch-transition);
}
.card-body a:not(.btn):hover {
  color: var(--ch-primary-hover) !important;
  text-decoration: underline;
}

/* ─── 34. SETUP WIZARD POLISH ─── */

/* Step number label — bolder with teal accent */
[data-step-id] .text-muted.small:first-child,
[data-step-id] .card-body > div > div > .text-muted.small:first-child {
  color: var(--ch-primary) !important;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 1 !important;
}

/* Step title — brighter */
[data-step-id] h5 {
  color: var(--ch-white) !important;
  font-weight: 600;
  font-size: 1.05rem;
}

/* Step description — more readable */
[data-step-id] p.text-muted {
  color: var(--ch-text) !important;
  font-size: .875rem;
  line-height: 1.5;
}

/* Step cards — more spacing, subtle left accent on pending */
[data-step-id] .card-body {
  padding: var(--ch-space-lg) var(--ch-space-xl) !important;
}
[data-step-id] + [data-step-id] {
  margin-top: var(--ch-space-sm);
}

/* Pending badge — softer amber instead of harsh yellow */
.wizard-step-badge--pending {
  background: rgba(245, 166, 35, .15) !important;
  color: #f5a623 !important;
  border: 1px solid rgba(245, 166, 35, .3) !important;
  font-weight: 600 !important;
  font-size: .75rem !important;
  padding: .3em .75em !important;
  border-radius: var(--ch-radius-sm) !important;
}

/* Complete badge — refined with check feel */
[data-step-badge].bg-success {
  background: rgba(39, 174, 96, .15) !important;
  color: #2ecc71 !important;
  border: 1px solid rgba(39, 174, 96, .3);
  font-weight: 600;
  font-size: .75rem !important;
  padding: .3em .75em !important;
  border-radius: var(--ch-radius-sm) !important;
}

/* Warning/blocker text — subtle alert bar */
p.text-warning[data-step-blocker] {
  background: rgba(245, 166, 35, .08) !important;
  border-left: 3px solid #f5a623;
  border-radius: 0 var(--ch-radius-sm) var(--ch-radius-sm) 0;
  color: #f5a623 !important;
  font-size: .8rem !important;
  padding: .5rem .75rem !important;
  margin-top: var(--ch-space-sm) !important;
}

/* Progress card heading */
.card-body > .d-flex > h5 {
  color: var(--ch-text-heading) !important;
  font-weight: 600;
}

/* Stats badges (Playlists: 3, etc.) — dark theme friendly */
.badge.bg-light.text-dark {
  background: var(--ch-dark-surface) !important;
  color: var(--ch-text) !important;
  border: 1px solid var(--ch-border-light);
  font-weight: 500;
  font-size: .78rem;
  padding: .4em .75em;
  margin-right: .25rem;
}

/* Step number labels */
.card-body .text-muted.small:first-child {
  color: var(--ch-primary) !important;
  font-weight: 700;
  font-size: .7rem !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Current Status sidebar — dividers and polish */
.col-lg-4 .list-unstyled li {
  padding: .5rem 0;
  border-bottom: 1px solid var(--ch-border);
}
.col-lg-4 .list-unstyled li:last-child {
  border-bottom: none;
}
.col-lg-4 .list-unstyled li strong {
  color: var(--ch-text-heading) !important;
  font-size: .85rem;
}
.col-lg-4 .card-body h6 {
  color: var(--ch-text-heading) !important;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--ch-primary);
  margin-bottom: var(--ch-space-sm) !important;
}

/* Back to Dashboard button */
.btn-outline-secondary {
  border-color: var(--ch-border-light) !important;
  color: var(--ch-text) !important;
  background: transparent !important;
  border-radius: var(--ch-radius-sm) !important;
  font-size: .85rem;
  transition: all var(--ch-transition);
}
.btn-outline-secondary:hover {
  border-color: var(--ch-primary) !important;
  color: var(--ch-primary) !important;
  background: var(--ch-primary-light) !important;
}

/* ─── 35. NAV TABS (interior pages) ─── */
.nav-tabs {
  border-bottom: 1px solid var(--ch-border) !important;
  gap: .25rem;
}
.nav-tabs .nav-link {
  color: var(--ch-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid transparent !important;
  border-color: transparent !important;
  padding: .65rem 1.25rem !important;
  font-size: .82rem !important;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 0 !important;
  transition: all var(--ch-transition);
  position: relative;
  margin-bottom: -1px;
}
.nav-tabs .nav-link:hover {
  color: var(--ch-text-heading) !important;
  border-color: transparent !important;
  border-bottom: 2px solid rgba(var(--ch-primary-rgb), .3) !important;
  background: rgba(var(--ch-primary-rgb), .04) !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--ch-primary) !important;
  border-color: transparent !important;
  border-bottom: 2px solid var(--ch-primary) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

/* Panel container — remove legacy teal box border */
.panel.tabs-style1 {
  border: none !important;
  background: transparent !important;
}
.panel-head {
  margin-bottom: var(--ch-space-md);
}
.panel-body {
  background: transparent !important;
}

/* ─── 36. FORM RADIO & CHECKBOX ACCENT ─── */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--ch-primary);
}

/* ─── 37. SELECT / DROPDOWN DARK FIX ─── */
select.form-control,
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236e8a9e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 16px 12px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 2.25rem !important;
}

/* ─── 38. EMPTY STATE ─── */
.table tbody td[colspan] {
  text-align: center;
  color: var(--ch-text-muted) !important;
  font-style: italic;
  padding: var(--ch-space-xl) var(--ch-space-md) !important;
}

/* ─── 39. CARD HEADER TOOLBAR ─── */
.card-header .card-title {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

/* ─── 35b. ADD PLAYLIST MODAL ─── */
.modal-header-teal {
  background: rgba(var(--ch-primary-rgb), .1) !important;
  border-bottom: 2px solid rgba(var(--ch-primary-rgb), .3) !important;
}
.modal-header-teal .modal-title {
  color: var(--ch-primary) !important;
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Add Playlist track list */
#addPlaylistFiles {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 3px;
}
#addPlaylistFiles::-webkit-scrollbar { width: 4px; }
#addPlaylistFiles::-webkit-scrollbar-track { background: transparent; }
#addPlaylistFiles::-webkit-scrollbar-thumb { background: rgba(var(--ch-primary-rgb),.25); border-radius: 2px; }
.playlist-track-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .45rem .65rem;
  border-radius: var(--ch-radius-sm);
  cursor: pointer;
  transition: background var(--ch-transition), border-left-color var(--ch-transition);
  border-left: 3px solid transparent;
  margin: 0;
  user-select: none;
}
.playlist-track-row:hover {
  background: rgba(var(--ch-primary-rgb), .07);
}
.playlist-track-row:has(.playlist-track-checkbox:checked) {
  background: rgba(var(--ch-primary-rgb), .12);
  border-left-color: var(--ch-primary);
}
.playlist-track-checkbox {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--ch-primary);
  cursor: pointer;
}
.playlist-track-art {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.playlist-track-meta {
  flex: 1;
  min-width: 0;
}
.playlist-track-title {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ch-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playlist-track-artist {
  font-size: .73rem;
  color: var(--ch-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.playlist-track-duration {
  font-size: .71rem;
  color: var(--ch-text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  padding: .15rem .4rem;
  border-radius: 3px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--ch-border);
}

/* Playlist form help text */
.playlist-help-list {
  list-style: none;
  padding-left: 0;
  margin-top: .5rem;
  border-left: 2px solid rgba(var(--ch-primary-rgb), .25);
  padding-left: .75rem;
}
.playlist-help-list li {
  color: var(--ch-text-muted) !important;
  font-size: .78rem;
  line-height: 1.5;
  margin-bottom: .35rem;
}

/* Playlist files search toolbar */
.playlist-files-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: .75rem;
}
.playlist-files-toolbar .form-control {
  flex: 1;
  min-width: 180px;
}

/* Playlist form section label */
.playlist-section-label {
  color: var(--ch-text-muted) !important;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--ch-border);
}

/* Modal form validation error */
.modal-error-text {
  color: #f87171 !important;
  font-size: .82rem;
  font-weight: 500;
  margin-right: auto;
}

/* ─── 36. ALL FILES MODAL ─── */

/* All files table */
#manageFilesModal .table,
#manageJingleFilesModal .table {
  border-collapse: separate;
  border-spacing: 0;
}
#manageFilesModal .table thead th,
#manageJingleFilesModal .table thead th {
  color: var(--ch-text-muted) !important;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 2px solid rgba(var(--ch-primary-rgb), .2) !important;
  padding: .6rem .75rem;
  white-space: nowrap;
  background: transparent !important;
}
#manageFilesModal .table tbody tr,
#manageJingleFilesModal .table tbody tr {
  transition: background var(--ch-transition);
}
#manageFilesModal .table tbody tr:hover,
#manageJingleFilesModal .table tbody tr:hover {
  background: rgba(var(--ch-primary-rgb), .04) !important;
}
#manageFilesModal .table tbody td,
#manageJingleFilesModal .table tbody td {
  border-color: var(--ch-border) !important;
  padding: .55rem .75rem;
  vertical-align: middle;
  font-size: .85rem;
}

/* Path name - monospace for filenames */
#manageFilesModal .table tbody td:first-child .custom-control-label,
#manageJingleFilesModal .table tbody td:first-child .custom-control-label {
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
  font-size: .78rem;
  color: var(--ch-text-muted) !important;
}

/* Cover art cell */
#manageFilesModal .table tbody td img[src*="art"],
#manageJingleFilesModal .table tbody td img[src*="art"] {
  width: 44px !important;
  height: 44px;
  object-fit: cover;
  border-radius: var(--ch-radius-sm);
  border: 1px solid var(--ch-border);
}

/* Search toolbar styling */
#manageFilesModal .rdiobox span,
#manageJingleFilesModal .rdiobox span {
  color: var(--ch-text-muted) !important;
  font-size: .82rem;
}
#manageFilesModal .rdiobox input:checked + span,
#manageJingleFilesModal .rdiobox input:checked + span {
  color: var(--ch-primary) !important;
}

/* Delete Selected panel */
.deleteSelectedPanel .btn-danger {
  font-size: .8rem;
}

/* ─── 38. ALL FILES TABLE LAYOUT ─── */

/* Compact checkbox column */
.all-files-checkbox-cell {
  width: 36px !important;
  min-width: 36px;
  max-width: 36px;
  text-align: center;
  padding: .4rem !important;
}
.all-files-checkbox-cell .custom-control-label {
  padding-left: 0 !important;
}

/* Track info cell (title + artist stacked) */
.track-info-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.track-info-cell .track-title {
  font-weight: 600;
  font-size: .85rem;
  color: var(--ch-text-heading) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-info-cell .track-artist {
  font-size: .75rem;
  color: var(--ch-text-muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-info-cell .track-path {
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
  font-size: .68rem;
  color: rgba(var(--ch-primary-rgb), .45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Cover art cell */
.cover-art-cell {
  text-align: center;
  padding: .4rem !important;
  width: 70px;
}
.cover-art-wrapper {
  position: relative;
  display: inline-block;
}
.cover-art-wrapper img {
  width: 48px !important;
  height: 48px;
  object-fit: cover;
  border-radius: var(--ch-radius-sm);
  border: 1px solid var(--ch-border);
  display: block;
}
.cover-art-change-btn {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .6rem !important;
  padding: .1rem .4rem !important;
  opacity: 0;
  transition: opacity var(--ch-transition);
  white-space: nowrap;
}
.cover-art-wrapper:hover .cover-art-change-btn {
  opacity: 1;
}

/* Remove nowrap on table for better column sizing */
#manageFilesModal .table.text-md-nowrap,
#manageJingleFilesModal .table.text-md-nowrap {
  white-space: normal;
}

/* ─── 37. EDITOR MODAL (TRACK INFO) ─── */
#advancedTrackInfoModal .modal-header {
  background: rgba(var(--ch-primary-rgb), .1) !important;
  border-bottom: 2px solid rgba(var(--ch-primary-rgb), .3) !important;
}
#advancedTrackInfoModal .modal-header .modal-title {
  color: var(--ch-primary) !important;
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#advancedTrackInfoModal .card.bg-gradient-primary {
  background: linear-gradient(135deg, rgba(var(--ch-primary-rgb), .15), rgba(var(--ch-primary-rgb), .05)) !important;
  border: 1px solid rgba(var(--ch-primary-rgb), .2);
  border-radius: var(--ch-radius-md);
}
#advancedTrackInfoModal .card.bg-gradient-primary .card-body {
  color: var(--ch-text) !important;
}
#advancedTrackInfoModal .card.bg-gradient-primary h6 {
  color: var(--ch-text-heading) !important;
}
#advancedTrackInfoModal .card.bg-gradient-primary small {
  color: var(--ch-text-muted) !important;
}
#advancedTrackInfoModal .form-label {
  color: var(--ch-text-muted) !important;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ─── 37b. EDITOR MODAL POLISH ─── */
/* Set Current buttons — teal outline, compact */
#advancedTrackInfoModal .currentValueBtn {
  border-color: rgba(var(--ch-primary-rgb), .4) !important;
  color: var(--ch-primary) !important;
  font-size: .72rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .25rem .6rem !important;
  white-space: nowrap;
}
#advancedTrackInfoModal .currentValueBtn:hover {
  background: rgba(var(--ch-primary-rgb), .15) !important;
  border-color: var(--ch-primary) !important;
}

/* Play button — teal accent */
#advancedTrackInfoModal .btn-play-track,
#advancedTrackInfoModal .card .btn[onclick*="togglePlay"],
#advancedTrackInfoModal .card button[class*="btn-dark"] {
  background: rgba(var(--ch-primary-rgb), .15) !important;
  border: 1px solid rgba(var(--ch-primary-rgb), .3) !important;
  color: var(--ch-primary) !important;
  border-radius: 50% !important;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#advancedTrackInfoModal .card button:hover {
  background: rgba(var(--ch-primary-rgb), .25) !important;
}

/* Artist text slightly more visible */
#advancedTrackInfoModal .card.bg-gradient-primary small {
  color: rgba(255,255,255,.55) !important;
}

/* Duration text */
#advancedTrackInfoModal .card .text-end,
#advancedTrackInfoModal .card small.text-muted {
  color: rgba(255,255,255,.5) !important;
  font-size: .8rem;
}

/* Input fields — subtle teal focus */
#advancedTrackInfoModal .form-control:focus {
  border-color: rgba(var(--ch-primary-rgb), .5) !important;
  box-shadow: 0 0 0 2px rgba(var(--ch-primary-rgb), .1) !important;
}

/* Mobile: keep Set Current buttons compact */
@media (max-width: 576px) {
  #advancedTrackInfoModal .currentValueBtn {
    font-size: .65rem !important;
    padding: .2rem .5rem !important;
  }
  #advancedTrackInfoModal .form-label {
    font-size: .7rem;
  }
}

/* ── 39  Change Tracks Order modal ─────────────────────── */
#changeOrderModal .modal-body { padding: 1rem; }

#change_order_form .order-track-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border-radius: 6px;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
#change_order_form .order-track-row:hover {
  background: rgba(var(--ch-primary-rgb), .06);
}
#change_order_form .order-track-row.selected {
  border-left-color: var(--ch-primary);
  background: rgba(var(--ch-primary-rgb), .10);
}

.order-track-num {
  min-width: 24px;
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ch-text-muted);
  opacity: .7;
}

.order-track-radio {
  accent-color: var(--ch-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.order-track-art {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.order-track-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.order-track-title {
  font-weight: 600;
  font-size: .85rem;
  color: var(--ch-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-track-artist {
  font-size: .75rem;
  color: var(--ch-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-track-duration {
  font-size: .7rem;
  font-weight: 600;
  color: var(--ch-text-muted);
  background: rgba(255,255,255,.06);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Footer controls */
#changeOrderFormFooter {
  gap: .5rem;
}
#changeOrderFormFooter .move-controls {
  display: flex;
  align-items: center;
  gap: .4rem;
}
#changeOrderFormFooter .move-input {
  display: inline-block;
  width: 36px;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(var(--ch-primary-rgb), .5);
  color: var(--ch-text);
  text-align: center;
  padding: 2px 0;
  font-size: .85rem;
  font-weight: 600;
}
#changeOrderFormFooter .move-input:focus {
  border-bottom-color: var(--ch-primary);
  outline: none;
}

/* ===== Section 40: Scheduling Tool ===== */

/* Day Pill Toggle Buttons */
.day-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.day-pill-input {
    display: none;
}
.day-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.day-pill:hover {
    border-color: rgba(var(--ch-primary-rgb),0.4);
    color: rgba(255,255,255,0.85);
    background: rgba(var(--ch-primary-rgb),0.08);
}
.day-pill-input:checked + .day-pill {
    background: rgba(var(--ch-primary-rgb),0.2);
    border-color: var(--ch-primary);
    color: var(--ch-primary);
    font-weight: 600;
}

/* Schedule Info Bar */
.schedule-info-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(var(--ch-primary-rgb),0.06);
    border: 1px solid rgba(var(--ch-primary-rgb),0.12);
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.4;
}
.schedule-info-bar i {
    font-size: 1rem;
    color: var(--ch-primary);
    flex-shrink: 0;
}
.schedule-add-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Schedule Empty State (list view) */
.schedule-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: rgba(255,255,255,0.5);
}
.schedule-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.4;
}
.schedule-empty-state p {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 500;
}
.schedule-empty-state .text-muted {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.35) !important;
}

/* Mobile Calendar Responsive */
@media (max-width: 576px) {
    #calendar2 {
        height: auto !important;
        min-height: 400px;
    }
    .fc-daygrid-day {
        min-height: 60px !important;
    }
    .fc-toolbar {
        flex-direction: column;
        gap: 8px;
    }
    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
    .fc-toolbar-title {
        font-size: 1.1rem !important;
    }
    .schedule-info-bar {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    .schedule-add-btn {
        width: 100%;
    }
    td.fc-day {
        height: auto !important;
    }
}

/* ── Section 43: Widgets page ────────────────────────────── */
.widget-preview {
    min-height: 400px;
    padding: 4px;
    border: 1px solid var(--ch-border-light, rgba(255, 255, 255, 0.1));
    width: 100%;
    overflow: auto;
    border-radius: var(--ch-radius-md, 10px);
}
.widget-preview iframe {
    width: 100%;
    border: none;
}
.widget-card .card-body h6.form-label {
    color: var(--ch-text, #c8d6e5);
    font-weight: 500;
}
.widget-card pre {
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--ch-radius-sm, 6px);
    padding: 12px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.8rem;
    color: #c8d6e5;
    border: 1px solid var(--ch-border, rgba(255, 255, 255, 0.06));
}
.widget-card pre code {
    color: #0fb8a9;
    word-break: break-all;
    white-space: pre-wrap;
}
.widget-card .form-label {
    font-weight: 500;
}
.copyable-code {
    position: relative;
    cursor: pointer;
    transition: all var(--ch-transition, 0.2s cubic-bezier(0.4, 0, 0.2, 1));
}
.copyable-code:hover {
    border-color: var(--ch-primary, #0fb8a9);
    box-shadow: 0 0 0 2px rgba(15, 184, 169, 0.15);
}
.copyable-code::after {
    content: 'Click to copy';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.7rem;
    color: var(--ch-text-muted, #7f8fa6);
    opacity: 0;
    transition: opacity 0.2s;
    font-family: 'Poppins', sans-serif;
}
.copyable-code:hover::after {
    opacity: 1;
}
.copyable-code.copied::after {
    content: 'Copied!';
    color: var(--ch-primary, #0fb8a9);
    opacity: 1;
}
/* ── Song Request Form refinements ──────────────────────── */
.sr-fields-box {
    border: 1px solid var(--ch-border-light, rgba(255,255,255,0.1));
    border-radius: var(--ch-radius-sm, 6px);
    padding: 0.75rem 1rem;
    background: var(--ch-dark-surface, #1e3044);
}
.sr-fields-box .form-check-label {
    font-size: 0.85rem;
}
.sr-embed-section {
    border-top: 1px solid var(--ch-border, rgba(255,255,255,0.06));
    padding-top: 1rem;
    margin-top: 0.5rem;
}
.form-check.form-switch .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
    cursor: pointer;
}
.form-check.form-switch .form-check-input:checked {
    background-color: var(--ch-primary, #0fb8a9);
    border-color: var(--ch-primary, #0fb8a9);
}
#srStatusBadge {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

/* ─── Mobile conversion — Task 1 (2026-06-24) ─────────────────────────────
   Audit: departments/marketing/cro/MOBILE_AUDIT_2026-06-24.md
   Two fixes from the audit. (Audit item #2, the AutoDJ Playlists table, was
   verified already wrapped in .table-responsive and scrolls fine — no change.) */

/* #1 — Page title clipped under the fixed second nav row on phones.
   .responsive-navbar .navbar-collapse is position:fixed (top:63px) and on a
   ~390px viewport its stacked icons run down to ~155px, covering the top of
   the page title (.main-content-title sits at ~133px → ~23px hidden). Give the
   content container enough top padding on phones to clear the full header
   stack. Scoped to ≤576px: at ≥577px the bar is shorter and never overlaps. */
@media (max-width: 576px) {
  .main-content.app-content { padding-top: 32px !important; }
}

/* #3 — "Ban stream for selected countries" multiselect rendered as a native
   white box because it carries class .selectsum2, not .form-control/.form-select,
   so it missed the dark-theme input styling. Match the other inputs. */
select.selectsum2 {
  background-color: var(--ch-dark-surface) !important;
  border: 1px solid var(--ch-border-light) !important;
  border-radius: var(--ch-radius-sm) !important;
  color: var(--ch-text) !important;
  font-size: .9rem;
  padding: .35rem !important;
  width: 100%;
  transition: border-color var(--ch-transition), box-shadow var(--ch-transition);
}
select.selectsum2:focus {
  border-color: var(--ch-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--ch-primary-rgb), .15) !important;
  outline: none;
}
select.selectsum2 option {
  background-color: var(--ch-dark-surface) !important;
  color: var(--ch-text) !important;
  padding: .25rem .4rem;
}
select.selectsum2 option:checked {
  background: var(--ch-primary) !important;
  color: var(--ch-white) !important;
}

/* ─── Mobile conversion — Task 3 (2026-06-27) ───────────────────────────────
   Persistent free-trial countdown + upgrade banner. A fixed full-width strip
   pinned above the whole app shell, shown only to free-trial accounts: the
   layout adds the .has-trial-banner body class when $trialBanner is set
   (TrialBannerData composer → OnboardingWizardService::getTrialBanner). The
   shell chrome is position:fixed to the top, so every top-pinned piece is
   pushed down by one variable, --ch-trial-h. Everything is gated by
   .has-trial-banner, so non-trial accounts render exactly as before. */
:root { --ch-trial-h: 40px; }

.has-trial-banner { padding-top: var(--ch-trial-h) !important; }
.has-trial-banner .main-header { top: var(--ch-trial-h) !important; }
.has-trial-banner .app-sidebar { top: var(--ch-trial-h) !important; }
.has-trial-banner .main-sidebar-header { top: var(--ch-trial-h) !important; }
.has-trial-banner .progress-top-bar { top: var(--ch-trial-h) !important; }
/* On phones the collapsed second nav row is itself position:fixed at top:63px. */
@media (max-width: 576px) {
  .has-trial-banner .responsive-navbar .navbar-collapse { top: calc(63px + var(--ch-trial-h)) !important; }
}

.ch-trial-banner {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--ch-trial-h);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 14px;
  background: linear-gradient(90deg, #0fb8a9 0%, #0c8478 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
.ch-trial-banner:hover { color: #fff; text-decoration: none; }
.ch-trial-banner__text {
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-trial-banner__text b { font-weight: 800; }
.ch-trial-banner__cta {
  flex: 0 0 auto;
  display: inline-block;
  background: #fff;
  color: #0a6f64;
  font-weight: 700;
  font-size: .8rem;
  line-height: 1.4;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ch-trial-banner:hover .ch-trial-banner__cta {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}

/* Urgent (≤2 days / ends today): amber to signal the deadline. */
.ch-trial-banner--urgent { background: linear-gradient(90deg, #e8920c 0%, #cf6f0a 100%); }
.ch-trial-banner--urgent .ch-trial-banner__cta { color: #b4630a; }

/* ─── 40. ALL FILES / ALL JINGLES MODAL — MOBILE CARD LAYOUT ─── */
/* On a phone the 7-column files table rendered ~900px wide inside a ~372px
   modal body, so a single row needed scrolling in both axes and the Album /
   Length / Editor / Actions columns were unreachable. Below 992px (where
   Bootstrap also caps this dialog at 500px) each row becomes a two-line card:
   cover + title on top, then length, album and the row actions. Every rule
   sits inside the media query, so the desktop table is untouched. */
@media (max-width: 991.98px) {

  /* Modal chrome — use the width we have */
  #manageFilesModal .modal-dialog,
  #manageJingleFilesModal .modal-dialog {
    margin: .4rem;
    max-width: none;
  }
  #manageFilesModal .modal-body,
  #manageJingleFilesModal .modal-body {
    padding: .75rem;
  }

  /* The row wrappers get an inline display:flex from JS — let the table fill them */
  #manageFilesModal #all_files,
  #manageJingleFilesModal #all_jingle_media_files {
    display: block !important;
    margin-left: 0;
    margin-right: 0;
  }

  /* ── Search toolbar: stack the fixed col-7 / col-3 / col-2 / col-4 grid ── */
  #filesSearchBar .row > div[class*="col-"],
  #jingleFilesSearchBar .row > div[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin: 0 0 .5rem !important;
  }
  #filesSearchBar .row > div[class*="col-"]:last-child,
  #jingleFilesSearchBar .row > div[class*="col-"]:last-child {
    margin-bottom: 0 !important;
  }
  #filesSearchBar input[type="text"],
  #jingleFilesSearchBar input[type="text"] {
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
  }
  #filesSearchBar .col-3,
  #jingleFilesSearchBar .col-3 {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  #filesSearchBar .rdiobox,
  #jingleFilesSearchBar .rdiobox {
    margin-bottom: 0;
  }
  #filesSearchBar input[type="submit"],
  #jingleFilesSearchBar input[type="submit"],
  #manageFilesModal .deleteSelectedPanel .btn,
  #manageJingleFilesModal .deleteSelectedPanel .btn {
    width: 100%;
    min-height: 38px;
  }
  #filesSearchBar .deleteSelectedPanel,
  #jingleFilesSearchBar .deleteSelectedPanel {
    padding: 0 !important;
  }

  /* ── Table → cards ── */
  #manageFilesModal .modal-body .table,
  #manageJingleFilesModal .modal-body .table {
    display: block;
    width: 100%;
    border: 0 !important;
  }
  #manageFilesModal .modal-body .table thead,
  #manageJingleFilesModal .modal-body .table thead {
    display: none;
  }
  #manageFilesModal .modal-body .table tbody,
  #manageJingleFilesModal .modal-body .table tbody {
    display: block;
  }
  #manageFilesModal .modal-body .table tbody tr,
  #manageJingleFilesModal .modal-body .table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .55rem;
    row-gap: .3rem;
    padding: .6rem .65rem;
    margin-bottom: .5rem;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-md);
  }
  /* A zero-height flex item breaks the card into its two lines:
     [check | art | title]  /  [length · album | Editor  edit  delete] */
  #manageFilesModal .modal-body .table tbody tr::after,
  #manageJingleFilesModal .modal-body .table tbody tr::after {
    content: "";
    flex: 0 0 100%;
    height: 0;
    order: 4;
  }
  #manageFilesModal .modal-body .table tbody td,
  #manageJingleFilesModal .modal-body .table tbody td {
    display: block;
    min-width: 0;
    border: 0 !important;
    padding: 0 !important;
  }

  /* Select checkbox — the input is hidden, the label draws the box, so give the
     label a real tap target and pin the box inside it. */
  #manageFilesModal .modal-body .table tbody td:has(input[type="checkbox"]),
  #manageJingleFilesModal .modal-body .table tbody td:has(input[type="checkbox"]) {
    order: 1;
    flex: 0 0 auto;
    width: 26px !important;
  }
  #manageFilesModal .modal-body .table tbody td:has(input[type="checkbox"]) .custom-control,
  #manageJingleFilesModal .modal-body .table tbody td:has(input[type="checkbox"]) .custom-control {
    padding-left: 0;
    min-height: 0;
  }
  #manageFilesModal .modal-body .table tbody td .custom-control-label,
  #manageJingleFilesModal .modal-body .table tbody td .custom-control-label {
    position: relative;
    display: block;
    width: 26px;
    height: 40px;
    /* the jingle table repeats the file path in this label; the card already
       shows it under the title, so hide the text and keep the box */
    font-size: 0 !important;
  }
  #manageFilesModal .modal-body .table tbody td .custom-control-label::before,
  #manageJingleFilesModal .modal-body .table tbody td .custom-control-label::before,
  #manageFilesModal .modal-body .table tbody td .custom-control-label::after,
  #manageJingleFilesModal .modal-body .table tbody td .custom-control-label::after {
    left: 0 !important;
    top: 50% !important;
    width: 22px;
    height: 22px;
    margin-top: -11px;
  }

  /* Cover art + its Change button (no hover on touch, so it is always shown) */
  #manageFilesModal .modal-body .table tbody td.cover-art-cell,
  #manageJingleFilesModal .modal-body .table tbody td.cover-art-cell {
    order: 2;
    flex: 0 0 auto;
    width: auto !important;
  }
  #manageFilesModal .modal-body .cover-art-wrapper,
  #manageJingleFilesModal .modal-body .cover-art-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
  }
  #manageFilesModal .modal-body .cover-art-wrapper img,
  #manageJingleFilesModal .modal-body .cover-art-wrapper img {
    width: 42px !important;
    height: 42px;
  }
  #manageFilesModal .modal-body .cover-art-wrapper .btn,
  #manageJingleFilesModal .modal-body .cover-art-wrapper .btn {
    position: static;
    transform: none;
    opacity: 1;
    font-size: .55rem !important;
    line-height: 1.4;
    padding: .05rem .3rem !important;
  }

  /* Title / artist / filename */
  #manageFilesModal .modal-body .table tbody td:has(.track-info-cell),
  #manageJingleFilesModal .modal-body .table tbody td:has(.track-info-cell) {
    order: 3;
    flex: 1 1 0;
  }
  #manageFilesModal .modal-body .track-info-cell .track-title,
  #manageJingleFilesModal .modal-body .track-info-cell .track-title {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: .88rem;
  }
  #manageFilesModal .modal-body .track-info-cell .track-artist,
  #manageJingleFilesModal .modal-body .track-info-cell .track-artist {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Album and Length are the only text-only cells — they open the second line */
  #manageFilesModal .modal-body .table tbody td:not(:has(*)),
  #manageJingleFilesModal .modal-body .table tbody td:not(:has(*)) {
    order: 5;
    flex: 0 0 auto;
    font-size: .72rem !important;
    color: var(--ch-text-muted) !important;
  }
  #manageFilesModal .modal-body .table tbody td:not(:has(*)) + td:not(:has(*))::before,
  #manageJingleFilesModal .modal-body .table tbody td:not(:has(*)) + td:not(:has(*))::before {
    content: "·";
    margin-right: .4rem;
    opacity: .5;
  }
  #manageFilesModal .modal-body .table tbody td:empty,
  #manageJingleFilesModal .modal-body .table tbody td:empty {
    display: none;
  }
  #manageFilesModal .modal-body .table tbody td:empty + td::before,
  #manageJingleFilesModal .modal-body .table tbody td:empty + td::before {
    content: none;
  }

  /* Editor + the inline edit / delete buttons close the second line, right-aligned */
  #manageFilesModal .modal-body .table tbody td:has(> button[data-bs-target="#advancedTrackInfoModal"]),
  #manageJingleFilesModal .modal-body .table tbody td:has(> button[data-bs-target="#advancedTrackInfoModal"]) {
    order: 8;
    flex: 0 0 auto;
    margin-left: auto;
  }
  #manageFilesModal .modal-body .table tbody td:has(> button[data-bs-target="#advancedTrackInfoModal"]) .btn,
  #manageJingleFilesModal .modal-body .table tbody td:has(> button[data-bs-target="#advancedTrackInfoModal"]) .btn {
    font-size: .7rem !important;
    padding: .3rem .6rem !important;
  }
  #manageFilesModal .modal-body .table tbody td:has(button#bDel),
  #manageJingleFilesModal .modal-body .table tbody td:has(button#bDel) {
    order: 9;
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
  }
  #manageFilesModal .modal-body .table tbody td:has(button#bDel) .btn,
  #manageJingleFilesModal .modal-body .table tbody td:has(button#bDel) .btn {
    min-width: 34px;
    min-height: 32px;
    padding: .25rem .35rem !important;
  }
}

/* ─── 41. MODAL CLOSE BUTTON ─── */
/* The theme's bootstrap.min.css keeps only the positioning half of Bootstrap's
   .btn-close (`position:absolute;top:0;right:0;padding:1.25rem 1rem`) and drops
   the icon. So a modal written the Bootstrap 5 way — an empty
   <button class="btn-close"></button> — renders a completely invisible control.
   On a phone, where the modal fills the screen and there is no backdrop left to
   tap, that leaves no way to close it (reported on the DJ page's All Jingles
   modal; it affects every modal written that way across the dashboard).
   The markup is inconsistent — some of these buttons ship a literal x, some are
   empty, some hold only a newline — so rather than patch each one, paint the
   icon here and mute whatever text the button happens to carry. Every modal
   close button then shows exactly one x. */
.modal-header .btn-close {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  /* mutes any literal x / <span>&times;</span> the markup ships, so the icon
     below is the only glyph */
  font-size: 0;
  border: 0;
  opacity: .7;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 16px 16px no-repeat;
  transition: opacity var(--ch-transition);
}
.modal-header .btn-close:hover,
.modal-header .btn-close:focus {
  opacity: 1;
}
/* This variant inverts an icon that no longer existed; on the icon above it
   would flip white to black on a dark header. */
.modal-header .btn-close-white {
  filter: none;
}
@media (max-width: 767.98px) {
  /* Comfortable tap target on a phone */
  .modal-header .btn-close {
    padding: 14px;
  }
}


/* GLOBAL PAGE-HEADING TIGHTENING
   Trim the dead space around every .breadcrumb-header page title
   (style.css margin-block:20px + custom.css margin-bottom:2rem !important
   + theme padding 24px/16px). !important beats custom.css's !important; this
   file loads last, so it wins the source-order tie at all widths.
   Values proven on Store Payout (testdash 01317fdf / prod b0433502). */
.breadcrumb-header {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

/* Stacked mobile headers: style.css turns .breadcrumb-header into display:block
   at <=633px, so the title block and its sibling action button/right-content
   stack. Give them a small gap so the button is not flush against the title. */
@media (max-width: 633px) {
  .breadcrumb-header > * + * { margin-top: 0.5rem; }
}