/* =========================================================
   RADIO WATERS – COMBINED SCOPE-SAFE STYLESHEET (REFactored)
   ========================================================= */

:root{
  --bg:#0e1a22;
  --panel:#132532;
  --accent:#3cc0e0;
  --accent-soft:rgba(60,192,224,0.15);
  --text:#e8f1f6;
  --muted:#9fb6c3;
  --border:#1f3a4a;
  --danger:rgba(255,99,99,0.35);
  --danger-soft:rgba(255,99,99,0.08);
  --field:#0f2230;
  --field-upload:#0c1922;
}

*{box-sizing:border-box;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

.logo{max-width:200px;height:auto;display:block;margin-bottom:30px;}

/* =========================================================
   SHARED BASE: font + background + text for dark pages
   (keeps upload page max-width separate)
   ========================================================= */

body.page-edit,
body.page-admin-index{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:linear-gradient(180deg,#0b141a,var(--bg));
  color:var(--text);
}

body.page-upload,
body.page-thanks{
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:linear-gradient(180deg,#0b141a,#0e1a22);
  /* Prevent any visible tiling if a background image is ever introduced */
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
  color:var(--text);
}


/* Shared container/panel used by admin pages */
body.page-edit .container,
body.page-admin-index .container{
  margin:40px auto;
  padding:0 16px;
}

body.page-edit .panel,
body.page-admin-index .panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

/* =========================================================
   SHARED FORMS: input/select/textarea base + focus for admin pages
   ========================================================= */

body.page-edit input[type="text"],
body.page-edit input[type="datetime-local"],
body.page-edit textarea,
body.page-admin-index input[type="text"],
body.page-admin-index input[type="date"],
body.page-admin-index select{
  background:var(--field);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}

body.page-edit input:focus,
body.page-edit textarea:focus,
body.page-admin-index input:focus,
body.page-admin-index select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* Shared button base for admin pages */
body.page-edit button,
body.page-edit .btn,
body.page-admin-index button,
body.page-admin-index .btn{
  border:1px solid var(--border);
  background:var(--field);
  color:var(--text);
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

body.page-edit button:hover,
body.page-edit .btn:hover,
body.page-admin-index button:hover,
body.page-admin-index .btn:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* Admin section navigation */
body.page-edit .btn-nav-active,
body.page-edit .btn-nav-active,
body.page-admin-index .btn-nav-active,
body.page-admin-index .btn-nav-active
{
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
    cursor: default;
    pointer-events: none;
}

/* Optional: make inactive nav buttons slightly muted */
body.page-edit .btn-nav-inactive,
body.page-edit .btn-nav-inactive,
body.page-admin-index .btn-nav-inactive,
body.page-admin-index .btn-nav-inactive
 {
    opacity: 0.8;
}


/* Shared notices for admin pages */
body.page-edit .notice,
body.page-admin-index .notice{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.12);
  margin:12px 0;
}

body.page-edit .notice.error,
body.page-admin-index .notice.error{
  border-color:var(--danger);
  background:var(--danger-soft);
}

body.page-edit .notice.notice-amber,
body.page-admin-index .notice.notice-amber,
body.page-upload .notice.notice-amber{
  border-color: rgba(245,177,66,0.2);
  background: rgba(245,177,66,0.1);
}

body.page-edit .muted,
body.page-admin-index .muted{color:var(--muted);}

/* =========================================================
   PAGE: UPLOAD (root index.php)
   ========================================================= */

body.page-upload{
  max-width:900px;
  margin:40px auto;
  padding:0 20px;
}

body.page-upload h2{
  font-weight:600;
  letter-spacing:0.4px;
  margin-bottom:20px;
  border-left:4px solid var(--accent);
  padding-left:12px;
}

body.page-upload form{
  background:var(--panel);
  padding:28px;
  border-radius:10px;
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
}

/* Upload page notice boxes (for live track-title validation messages) */
body.page-upload .notice{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.12);
  margin:12px 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

body.page-upload .notice.error{
  border-color: rgba(255,99,99,0.45);
  background: rgba(255,99,99,0.14);
}

body.page-upload .muted{
  color:var(--muted);
}

body.page-upload label{
  display:block;
  margin-top:18px;
  font-size:0.9rem;
  color:var(--muted);
}

body.page-upload label input[type="checkbox"]{margin-right:10px;}

body.page-upload #notUploadedLabel,
body.page-upload #notBroadcastLabel{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:500;
  color:var(--muted);
}

body.page-upload input[type="text"],
body.page-upload input[type="file"],
body.page-upload input[type="datetime-local"],
body.page-upload textarea{
  width:100%;
  padding:10px 12px;
  margin-top:6px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--field-upload);
  color:var(--text);
  font-size:0.95rem;
}

body.page-upload input:focus,
body.page-upload textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}

body.page-upload textarea{
  height:500px;
  resize:vertical;
}

/* Upload page button is intentionally different (gradient) */
body.page-upload button{
  margin-top:24px;
  padding:12px 26px;
  border-radius:6px;
  border:none;
  font-size:0.95rem;
  font-weight:600;
  background:linear-gradient(135deg,#2fb6d9,#1c8fb0);
  color:#06202b;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

body.page-upload button:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(60,192,224,0.35);
}

body.page-upload button:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

body.page-upload .progress-container{margin-top:18px;display:none;}
body.page-upload progress{width:100%;height:22px;border-radius:6px;overflow:hidden;}
body.page-upload progress::-webkit-progress-bar{background:var(--field-upload);}
body.page-upload progress::-webkit-progress-value{background:linear-gradient(90deg,#2fb6d9,#5fd3ec);}
body.page-upload .status{margin-top:10px;font-weight:500;color:var(--muted);}
body.page-upload .disabled{opacity:0.6;}
body.page-upload #trackTitlesSection{display:none;}
body.page-upload #trackTitlesSection.visible{display:block;}
body.page-upload #submitBtn{display:block;}
body.page-upload #trackTitlesSection.visible + #submitBtn{margin-top:24px;}

/* =========================================================
   PAGE: THANK YOU (add_to_playlist.php / upload_successful.php)
   ========================================================= */

body.page-thanks{
  margin:0;
  padding:40px 16px;
}

/* Boxed panel (mirrors the upload form styling) */
body.page-thanks .panel{
  max-width:900px;
  margin:0 auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px;
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
}

body.page-thanks p{color:var(--muted);line-height:1.6;}
body.page-thanks .actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;}

body.page-thanks .btn-primary{
  border:none;
  border-radius:10px;
  padding:12px 16px;
  font-weight:600;
  background:linear-gradient(135deg,#2fb6d9,#1c8fb0);
  color:#06202b;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
body.page-thanks .btn-primary:hover{
  box-shadow:0 8px 20px rgba(60,192,224,0.35);
  text-decoration:none;
}

body.page-thanks h1{
  font-weight:600;
  letter-spacing:0.4px;
  margin:0 0 14px 0;
  border-left:4px solid var(--accent);
  padding-left:12px;
}


/* =========================================================
   PAGE: EDIT (admin/edit.php)
   ========================================================= */

body.page-edit .container{max-width:980px;}
body.page-edit .panel{padding:22px;}

body.page-edit h1{
  margin:0 0 14px 0;
  font-size:20px;
  font-weight:650;
}

body.page-edit .form{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:12px;
}

body.page-edit .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

@media (max-width:780px){
  body.page-edit .row{grid-template-columns:1fr;}
}

body.page-edit .field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

body.page-edit label{
  color:var(--muted);
  font-size:12px;
}

body.page-edit textarea{
  min-height:220px;
  resize:vertical;
}

body.page-edit input[readonly]{opacity:0.8;cursor:not-allowed;}

body.page-edit .checks{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(0,0,0,0.12);
}

body.page-edit .chk{display:flex;gap:10px;align-items:center;}

body.page-edit .btn-accent,
body.page-admin-index .btn-accent
{border-color:rgba(60,192,224,0.35);}

body.page-edit .readonly{
  padding:10px 12px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:rgba(0,0,0,0.10);
  color:var(--text);
}

body.page-edit .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}

/* Secondary filter tabs (Active / Deleted) */
.subtabs {
    display: flex;
    gap: 12px;
    margin: 10px 0 16px;
}

.subtabs a {
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.subtabs a.active {
    background: rgba(255,255,255,0.08);
    color: var(--text);
    font-weight: 600;
}

.subtabs a:hover {
    color: var(--text);
}


/* =========================================================
   PAGE: ADMIN LISTING (admin/index.php)
   ========================================================= */

body.page-admin-index .container{max-width:1180px;}
body.page-admin-index .panel{padding:18px;}

body.page-admin-index h1,
body.page-admin-index h2{
  margin:0 0 12px 0;
  font-weight:650;
  letter-spacing:0.2px;
}

body.page-admin-index h1{font-size:20px;}

body.page-admin-index .toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin:12px 0 14px 0;
}

body.page-admin-index .filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
/* Keep Apply + Reset aligned and evenly spaced */
body.page-admin-index .filters .actions{
  display:flex;
  gap:10px;
  align-items:flex-end;
}

/* Danger button variant for admin listing */
body.page-admin-index .btn-danger{border-color:var(--danger);}
body.page-admin-index .btn-danger:hover{
  box-shadow:0 0 0 3px var(--danger-soft);
  border-color:rgba(255,99,99,0.55);
}

body.page-admin-index .table-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:14px;
}

body.page-admin-index table{
  width:100%;
  border-collapse:collapse;
  min-width:900px;
  background:rgba(0,0,0,0.08);
}

body.page-admin-index th,
body.page-admin-index td{
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
  font-size:13px;
}

body.page-admin-index th{
  color:var(--muted);
  font-weight:600;
  background:rgba(0,0,0,0.18);
  position:sticky;
  top:0;
  z-index:1;
}

body.page-admin-index tr:hover td{background:rgba(60,192,224,0.06);}

body.page-admin-index .mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

body.page-admin-index .pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.18);
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

body.page-admin-index .pill.yes{
  border-color:rgba(60,192,224,0.35);
  color:var(--text);
}

body.page-admin-index .pill.no{
  border-color:rgba(255,99,99,0.35);
  color:var(--text);
}

body.page-admin-index .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Smaller, cleaner pagination */
body.page-admin-index .pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  font-size:12px;
}

body.page-admin-index .pages{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

body.page-admin-index .page-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(0,0,0,0.12);
  color:var(--text);
  font-size:12px;
  text-decoration:none;
}

body.page-admin-index .page-link:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

body.page-admin-index .page-link.current{
  border-color:rgba(60,192,224,0.55);
  background:rgba(60,192,224,0.12);
  color:var(--text);
  cursor:default;
  pointer-events:none;
}


/* =========================================================
   PRS REMINDERS — TEST MODE (reminders index.php)
   <body class="page-reminders-test">
   ========================================================= */

body.page-reminders-test{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:linear-gradient(180deg,#0b141a,#0e1a22);
  color:var(--text, #e8f1f6);
  padding:40px 16px;
}

body.page-reminders-test .panel{
  max-width:980px;
  margin:0 auto;
  background:var(--panel, #132532);
  border:1px solid var(--border, #1f3a4a);
  border-radius:14px;
  padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

body.page-reminders-test h1{
  margin:0 0 10px 0;
  font-size:20px;
  font-weight:650;
}

body.page-reminders-test h2{
  margin:18px 0 10px 0;
  font-weight:600;
  letter-spacing:0.4px;
  border-left:4px solid var(--accent, #3cc0e0);
  padding-left:12px;
}

body.page-reminders-test label{
  display:block;
  margin:12px 0 6px 0;
  color:var(--muted, #9fb6c3);
  font-size:0.95rem;
}

body.page-reminders-test select{
  width:100%;
  max-width:100%;
  background:#0f2230;
  color:var(--text, #e8f1f6);
  border:1px solid var(--border, #1f3a4a);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}

body.page-reminders-test select:focus{
  border-color:var(--accent, #3cc0e0);
  box-shadow:0 0 0 3px rgba(60,192,224,0.15);
}

body.page-reminders-test button{
  margin-top:14px;
  padding:12px 18px;
  border-radius:10px;
  border:1px solid var(--border, #1f3a4a);
  background:#0f2230;
  color:var(--text, #e8f1f6);
  cursor:pointer;
}

body.page-reminders-test button:hover{
  border-color:var(--accent, #3cc0e0);
  box-shadow:0 0 0 3px rgba(60,192,224,0.15);
}

body.page-reminders-test hr{
  border:0;
  border-top:1px solid var(--border, #1f3a4a);
  margin:18px 0;
}

body.page-reminders-test small{
  color:var(--muted, #9fb6c3);
}

/* =========================================================
   FLATPICKR – RADIO WATERS DARK THEME
   ========================================================= */

/* Calendar container */
.flatpickr-calendar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);
  color: var(--text);
}

/* Month / year header */
.flatpickr-months {
  background: transparent;
  border-bottom: 1px solid var(--border);
}

.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--text);
  font-weight: 600;
}

.flatpickr-monthDropdown-months {
  background: var(--panel);
}

/* Weekday row */
.flatpickr-weekdays {
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid var(--border);
}

.flatpickr-weekday {
  color: var(--muted);
  font-weight: 500;
}

/* Day cells */
.flatpickr-day {
  color: var(--text);
  border-radius: 8px;
}

.flatpickr-day:hover {
  background: var(--accent-soft);
  border-color: transparent;
}

/* Selected / range */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--accent);
  color: #06202b;
  border-color: transparent;
}

/* Today */
.flatpickr-day.today {
  border-color: var(--accent);
}

.flatpickr-day.today:hover {
  background: var(--accent-soft);
}

/* Disabled days */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  color: rgba(255,255,255,0.25);
  background: transparent;
}

/* Time picker */
.flatpickr-time {
  border-top: 1px solid var(--border);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  background: var(--field-upload);
  color: var(--text);
  border-radius: 6px;
}

/* Flatpickr time fields: keep dark background on hover/focus so text stays readable */
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus{
  background: var(--field-upload) !important;
  color: var(--text) !important;
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
  border-color: var(--accent);
}


/* Arrow icons */
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: var(--muted);
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: var(--accent);
}

/* Alt input (visible field) – make it match upload inputs perfectly */
.flatpickr-input[readonly] {
  background: var(--field-upload);
  color: var(--text);
  cursor: text;
}

/* =========================================================
   FLATPICKR – PATCH: readability + font consistency
   Append AFTER the existing flatpickr theme block
   ========================================================= */

/* Ensure Flatpickr uses the same font as the page */
.flatpickr-calendar,
.flatpickr-calendar *{
  font-family: inherit;
}

/* Month dropdown: make it look like your inputs */
.flatpickr-current-month .flatpickr-monthDropdown-months{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: var(--field-upload);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 28px 4px 10px; /* room for arrow */
  font-weight: 600;
  line-height: 1.2;
}

/* Options inside the month dropdown (important for unreadable dropdown list) */
.flatpickr-current-month .flatpickr-monthDropdown-months option{
  background: var(--panel);
  color: var(--text);
}

/* Year input in header (match styling + improve contrast) */
.flatpickr-current-month input.cur-year{
  background: var(--field-upload);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 8px;
  font-weight: 600;
}

/* The little up/down arrows beside the year can be too faint */
.numInputWrapper span{
  border-color: var(--border);
}
.numInputWrapper span:after{
  border-top-color: var(--muted);
  border-bottom-color: var(--muted);
}
.numInputWrapper span:hover:after{
  border-top-color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Weekday labels: bump contrast slightly (Sun/Mon/etc) */
.flatpickr-weekday{
  color: rgba(232, 241, 246, 0.78); /* close to --text but softer */
}

/* If any day numbers look dim on your setup, this ensures they stay readable */
.flatpickr-day{
  color: rgba(232, 241, 246, 0.92);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
  color: rgba(232, 241, 246, 0.55);
}

/* =========================================================
   FLATPICKR – PATCH 2: weekday contrast + static month header
   ========================================================= */

/* Weekday row: make it match your panel and increase contrast */
.flatpickr-weekdays{
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.flatpickr-weekday{
  color: var(--text);
  opacity: 0.85;
  font-weight: 600;
  font-size: 0.85rem;
}

/* When using monthSelectorType: "static", month becomes text (not a <select>) */
.flatpickr-current-month .cur-month{
  color: var(--text);
  font-weight: 650;
}

/* Keep header typography consistent */
.flatpickr-current-month,
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year{
  font-family: inherit;
}

/* Force weekday labels to be readable (Flatpickr default is rgba(0,0,0,0.54)) */
.flatpickr-weekday {
  color: var(--text) !important;
  opacity: 0.85 !important;
  font-weight: 600;
}

/* =========================================================
   PRS REPORT BUILDER - additions (scoped)
   ========================================================= */

/* Use a wider working area for PRS Builder so long timeline rows wrap less. */
body.page-prsrb .container{
  max-width: 1380px;
}

body.page-prsrb .prsrb-panel{
  padding: 20px;
}

body.page-prsrb .prsrb-steps{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 18px;
}

body.page-prsrb .prsrb-step{
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.85rem;
  background: var(--field);
  color: var(--muted);
}

body.page-prsrb .prsrb-step.current{
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

body.page-prsrb .prsrb-step.done{
  color: var(--text);
  background: rgba(60,192,224,0.10);
}

body.page-prsrb .prsrb-check{
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: rgba(0,0,0,0.10);
}

body.page-prsrb .prsrb-check > summary{
  cursor: pointer;
}

body.page-prsrb .prsrb-issue{
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.12);
}

body.page-prsrb .prsrb-issue > summary{
  cursor: pointer;
  position: relative;
  list-style: none;
  padding-right: 140px;
}

body.page-prsrb .prsrb-issue > summary::-webkit-details-marker{
  display: none;
}

body.page-prsrb .prsrb-issue > summary::after{
  content: '▸';
  position: absolute;
  right: 8px;
  top: 2px;
  color: var(--muted);
  transition: transform 0.12s ease;
}

body.page-prsrb .prsrb-issue[open] > summary::after{
  transform: rotate(90deg);
}

body.page-prsrb .prsrb-openhint{
  float: right;
  color: var(--muted);
  font-size: 0.78rem;
  margin-left: 10px;
}

body.page-prsrb .prsrb-detail-list{
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

body.page-prsrb .prsrb-detail-item{
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0,0,0,0.14);
  padding: 7px 9px;
}

/* Keep timeline rows visually compact and color-highlight replay lines clearly. */
body.page-prsrb .prsrb-timeline-box{
  padding: 8px 10px;
}

body.page-prsrb .prsrb-timeline-line{
  margin: 0;
  padding: 1px 0;
  line-height: 1.15;
}

body.page-prsrb .prsrb-timeline-line-strike{
  text-decoration: line-through;
  opacity: 0.72;
}

body.page-prsrb .prsrb-timeline-line-highlight{
  font-weight: 600;
}

body.page-prsrb .prsrb-timeline-line-highlight.prsrb-green{
  color: rgb(86,196,109);
}

body.page-prsrb .prsrb-timeline-line-highlight.prsrb-amber{
  color: rgb(245,177,66);
}

body.page-prsrb .prsrb-timeline-line-highlight.prsrb-red,
body.page-prsrb .prsrb-timeline-line-highlight.prsrb-error{
  color: rgb(255,99,99);
}

/* PRB addition: keep row links inline with their detail line text. */
body.page-prsrb .prsrb-detail-item a{
  display: inline;
  margin-left: 4px;
}

body.page-prsrb .prsrb-badge{
  display: inline-block;
  min-width: 56px;
  text-align: center;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  text-transform: uppercase;
}

body.page-prsrb .prsrb-direction{
  display: inline-block;
  margin: 0 4px;
  font-weight: 700;
  text-transform: lowercase;
}

body.page-prsrb .prsrb-direction-over{
  color: #58c8ff;
}

body.page-prsrb .prsrb-direction-under{
  color: #ff9bd0;
}

body.page-prsrb .prsrb-green{
  background: rgba(86,196,109,0.5);
}

body.page-prsrb .prsrb-amber{
  background: rgba(245,177,66,0.5);
}

body.page-prsrb .prsrb-red,
body.page-prsrb .prsrb-error{
  background: rgba(255,99,99,0.5);
}

body.page-prsrb .prsrb-warning{
  background: rgba(255,150,85,0.16);
}

body.page-prsrb .prsrb-info{
  background: rgba(60,192,224,0.16);
}

body.page-prsrb .prsrb-tracklist{
  margin: 8px 0 8px 18px;
  padding: 0;
}

body.page-prsrb .prsrb-track-note{
  color: rgba(232,241,246,0.9);
}

body.page-prsrb .prsrb-track-note-sep{
  color: rgba(60,192,224,0.9);
  margin: 0 4px 0 6px;
}

@media (max-width: 980px){
  body.page-prsrb .prsrb-steps{
    grid-template-columns: 1fr 1fr;
  }
}

/* Admin index addition: add breathing room before Active/Deleted subtabs. */
body.page-admin-index .filters{
  margin-bottom: 8px;
}

/* Admin index addition: force Apply/Reset text size parity in filter action row. */
body.page-admin-index .filters .field.actions > button.btn,
body.page-admin-index .filters .field.actions > a.btn{
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

/* Admin index addition: add clearer spacing before Active/Deleted toggle row. */
body.page-admin-index .subtabs{
  margin-top: 16px;
}

/* Admin index addition: visual grouping for the search/filter controls. */
body.page-admin-index .search-box{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
  padding: 12px;
  margin-bottom: 8px;
}