/* ══════════════════════════════════════════
   PBS Royalties Portal — Shared UI Components
   ══════════════════════════════════════════

   TABLE OF CONTENTS:
   1. Page Banner
   2. Card & Form Sections
   3. Section Headers
   4. Buttons
   5. Filters
   6. Data Tables
   7. Status Badges
   8. Status Popovers
   9. Pagination
   10. Timeline Cards
   11. Form Elements
   12. Responsive Styles
   13. Bulk Selection Checkboxes
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   13. BULK SELECTION CHECKBOXES
   ══════════════════════════════════════════ */
/* Custom checkbox — matches Figma 24×24px spec */
/* ── Shared checkbox checked state (single source of truth) ─────────────────
   All checkbox variants (bulk-checkbox, custom-checkbox, afl-row-checkbox,
   dds-checkbox, warranty-checkbox-custom) share this checked appearance.
   SVG tick: Figma icon-check-white.svg, centered.
   ─────────────────────────────────────────────────────────────────────────── */
.bulk-checkbox:checked,
.bulk-checkbox.checked,
.custom-checkbox:checked,
.custom-checkbox.checked,
.afl-row-checkbox.checked,
.dds-checkbox.dds-checked,
.warranty-checkbox-label input[type="checkbox"]:checked + .warranty-checkbox-custom,
.register-checkbox-row input[type="checkbox"]:checked {
  background-color: #2638C4;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  border-color: #2638C4;
  border: none;
  transition: none;
}

/* Checkbox — Figma node 2244:41133 */
.bulk-checkbox {
  -webkit-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 1px solid rgba(148,161,178,0.6);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
  flex-shrink: 0;
}
/* Hover: only when unchecked */
.bulk-checkbox:not(:checked):not(.checked):hover {
  background: rgba(72,108,216,0.1);
  border-color: #2638C4;
}
/* Checked: shared rule above */
/* Indeterminate: #2638C4 fill, white dash 12×2px */
.bulk-checkbox:indeterminate {
  background: #2638C4;
  border: none;
}
.bulk-checkbox:indeterminate::after {
  content: '';
  display: block;
  width: 12px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}
/* Disabled: #EEF0F5 bg */
.bulk-checkbox:disabled {
  background: #EEF0F5;
  border-color: rgba(148,161,178,0.6);
  cursor: not-allowed;
  opacity: 1;
}

/* Checkbox styling handled by th:last-child / td:last-child in section 19 */

/* ══════════════════════════════════════════
   0. BREADCRUMB BAR
   ══════════════════════════════════════════ */
.breadcrumb-bar {
  background: #EEF0F5;
  border-bottom: 1px solid #D5D9E2;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-family: var(--font-family);
  line-height: 1.5;
  /* inner padding centered to match nav 1440px container */
  padding: 10px calc(64px + max(0px, (100% - 1440px) / 2));
  margin-top: 0;
}
.breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 4px;
  height: 8px;
}
.breadcrumb-home {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.breadcrumb-sep {
  flex-shrink: 0;
}
/* The Figma arrow asset points left; Figma renders it flipped to point right
   (›). Flip it here so every breadcrumb separator points forward. */
.breadcrumb-sep img {
  transform: scaleX(-1);
}
.breadcrumb-link {
  color: #2638C4;
  font-weight: 700;
  text-decoration: none;
}
.breadcrumb-link:hover {
  text-decoration: underline;
}
.breadcrumb-current {
  color: #000525;
  font-weight: 400;
}

/* ══════════════════════════════════════════
   1. PAGE BANNER
   ══════════════════════════════════════════ */
.page-banner {
  background: linear-gradient(96deg, #2638c4 0.1%, #0f1e8c 100%);
  border-radius: 16px;
  padding: 32px 24px;
  color: #fff;
  margin: 1.5rem 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Figma node 475:32566 — drop shadow (0px 20px 12.5px + 0px 8px 5px, both rgba(0,0,0,.1)) */
  box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.page-banner .banner-label {
  font-size: 14px;
  font-weight: 700;
  color: #C0CBDA;
  margin-bottom: 0.25rem;
}
.page-banner h1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 0.25rem;
}
.page-banner .banner-sub {
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
}

/* Banner item rows (.banner-methods-list / .ul-info-cards / .banner-info-cards /
   .badges) share one responsive rule — see section 38 at the end of this file.
   It has to live after the per-component `flex: 1` declarations to win. */

/* Banner badges (dashboard) */
/* Figma: gap-12px between cards, each card h-58px */
.page-banner .badges { display: flex; gap: 12px; align-items: flex-start; flex-shrink: 0; }

.banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  padding: 13px;
  height: 58px;
  box-sizing: border-box;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
  width: max-content;
  transition: opacity 0.25s ease;
}

/* Icon circle: size-32, rounded-50px, px-8 */
.banner-badge .b-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px;
  box-sizing: border-box;
}
.banner-badge .b-icon.red { background: #D6383A; }
.banner-badge .b-icon.blue { background: rgba(255,255,255,0.2); }
/* Variant2 — normal user view: different bg, red icon slightly muted */
.banner-badge.banner-badge--user { background: rgba(15,30,140,0.5); }
.banner-badge.banner-badge--hidden { position: relative; opacity: 0.45 !important; border: 1px dashed rgba(148,161,178,0.6) !important; }
.banner-badge.banner-badge--hidden::after { content: 'Hidden'; position: absolute; top: -8px; right: 4px; font-size: 9px; font-weight: 700; color: #5c6e85; text-transform: uppercase; letter-spacing: 0.5px; }
.banner-badge-action.is-hidden-active svg { opacity: 0.4; }
.banner-badge .b-icon.red.b-icon--user { background: rgba(214,56,58,0.8); }
.banner-badge .b-icon svg { width: 16px; height: 16px; display: block; }

/* Text group: gap-8 between title and subtitle */
.banner-badge .badge-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}
.banner-badge .badge-text > strong { display: block; font-weight: 700; font-size: 14px; line-height: 1.5; white-space: nowrap; }
.banner-badge .badge-text > span { display: block; font-size: 14px; line-height: 1.25; white-space: nowrap; font-weight: 400; }

/* Action buttons: size-32, circle */
.banner-badge-action {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.15s;
}
.banner-badge-action:hover { background: rgba(255,255,255,0.2); }
.banner-badge-action svg { width: 16px; height: 16px; display: block; }

/* Royalty Year add success alert */
/* Figma node 1762:34771 — Alert Message (success toast) */
.ry-success-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-color: #e9efec;
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 1rem;
  font-size: 16px;
  color: #000525;
  overflow: hidden;
}
.ry-success-alert-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.ry-success-alert-inner p { margin: 0; line-height: 1.5; font-size: 16px; }
.ry-success-alert-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.7;
}
.ry-success-alert-close:hover { opacity: 1; }

/* Banner info cards (Royalty Years page) */
.page-banner .banner-desc { flex: 0 1 280px; max-width: 280px; }
.page-banner .banner-info-cards {
  display: flex;
  gap: 16px;
  flex: 1;
}
.banner-info-card {
  display: flex;
  gap: 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  flex: 1;
}
.banner-info-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.banner-info-icon svg { stroke: #fff; }
.banner-info-icon img { width: 16px; height: 16px; display: block; }
.banner-info-body { display: flex; flex-direction: column; gap: 4px; }
.banner-info-title { font-size: 14px; font-weight: 700; line-height: 1.4; margin-bottom: 2px; }
.banner-info-body p { font-size: 13px; line-height: 1.4; margin: 0; color: rgba(255,255,255,0.9); }
.banner-info-body p strong { font-weight: 700; color: #fff; }

/* ══════════════════════════════════════════
   2. CARD & FORM SECTIONS
   ══════════════════════════════════════════ */
.card-section {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  margin: 0 64px 1.5rem;
  border: 1px solid #D5DDE7;
}
.form-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  margin: 0 64px 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ══════════════════════════════════════════
   3. SECTION HEADERS
   ══════════════════════════════════════════ */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.section-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--nav-dark);
  margin: 0;
  line-height: 1.25;
}
.section-header h2 span {
  font-weight: 400;
  color: var(--charcoal);
  font-size: 1rem;
}
.section-header p {
  font-size: 14px;
  color: var(--charcoal);
  margin: 0;
  line-height: 1.5;
}
.section-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   4. BUTTONS
   ══════════════════════════════════════════ */
.btn-pill {
  border-radius: 28.6px;
  padding: 8px 20px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  min-height: 32px;
}
.btn-pill:hover { text-decoration: none; }
.btn-pill-primary { background: var(--primary); color: #fff; transition: background 0.2s, color 0.2s; }
.btn-pill-primary:hover { background: #0F1E8C; color: #C0CBDA; }
.btn-pill-light { background-color: #f6f6fa; color: var(--primary); transition: background-color 0.2s, color 0.2s; }
.btn-pill-light:hover { background-color: #eef0f5; color: #0f1e8c; }
.btn-pill-outline {
  background: #fff;
  color: var(--text-dark);
  border: 1px solid #e2e8f0;
}
.btn-pill-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-pill-outline-primary {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
  transition: border-color 0.2s, color 0.2s;
}
.btn-pill-outline-primary:hover {
  text-decoration: none;
  background: #fff;
  border-color: #0F1E8C;
  color: #0F1E8C;
}
.btn-circle {
  width: 24px; height: 24px; border-radius: 8px;
  border: 1px solid rgba(148,161,178,0.6); background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--nav-dark); padding: 0;
  font-size: 12px;
}
.btn-circle:hover { border-color: var(--primary); color: var(--primary); }
.btn-circle-primary {
  border: none; background: var(--primary); color: #fff;
}
.btn-circle-primary:hover { background: var(--dark-blue); }
.btn-circle-sm {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid; background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.1rem; font-weight: 700;
}

/* ══════════════════════════════════════════
   5. FILTERS
   ══════════════════════════════════════════ */
.filters-row {
  background: #F6F6FA;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 1.25rem;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-search {
  position: relative;
  width: 432px;
  flex-shrink: 0;
  /* Never narrower than the text it has to show. Longest placeholder is "Search
     submissions" at 122px, plus 12px left padding and 40px right padding for the
     search icon = 174px; 180px keeps a little headroom. Without a floor the search
     collapsed to 0px (see .ps-filter-search). */
  min-width: 180px;
}
.filter-search input {
  width: 100%;
  height: 33px;
  padding: 8px 40px 8px 12px;
  border: 1px solid rgba(148,161,178,0.6);
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  color: var(--slate);
  background: #fff;
  transition: border-color 0.15s;
}
.filter-search input::placeholder { color: var(--slate); }
.filter-search input:focus { outline: none; border: 2px solid #5680ff; padding: 7px 39px 7px 11px; color: var(--nav-dark); }
.filter-search .search-icon,
.filter-search .search-icon-right {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.filter-select {
  height: 33px;
  padding: 0 36px 0 12px;
  border: 1px solid rgba(148,161,178,0.6);
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  color: var(--slate);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232638c4' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  box-sizing: border-box;
  min-width: 150px;
  flex: 1;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-select:hover {
  background-color: rgba(246,246,250,0.5);
}
.filter-select:focus {
  outline: 2px solid #5680ff;
  outline-offset: -1px;
  border-color: #5680ff;
  background-color: #fff;
  color: var(--nav-dark);
}
/* When a value is selected (not placeholder) */
.filter-select.has-value {
  color: var(--nav-dark);
}
/* Filter select wrapper with count badge */
.filter-select-wrap {
  position: relative;
  flex: 1;
  min-width: 150px;
}
/* custom dropdown inside filter row — behave like filter-select */
.filters-row .pbs-dd-wrap {
  flex: 1;
  min-width: 150px;
  width: auto;
}
.filters-row .pbs-dd-wrap .pbs-dd-trigger {
  width: 100%;
}
.filter-select-wrap .filter-select {
  width: 100%;
}
.filter-count-badge {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 12px;
  min-width: 18px;
  text-align: center;
  display: none;
  pointer-events: none;
}
.filter-select-wrap.has-value .filter-count-badge {
  display: block;
}
.filter-select-wrap.has-value .filter-select {
  color: var(--nav-dark);
  padding-right: 58px;
}

/* ══════════════════════════════════════════
   6. DATA TABLES
   ══════════════════════════════════════════ */
.table-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  cursor: grab;
}
.table-scroll-wrap:active { cursor: grabbing; }
.data-table {
  cursor: default;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 600px;
}
.data-table thead th {
  padding: 16px 12px;
  font-weight: 700;
  color: var(--slate);
  border-bottom: 1px solid #F3F4F6;
  white-space: nowrap;
  position: relative;
  font-size: 14px;
}
.data-table thead th.sortable {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.data-table thead th .sort-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  width: 12px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235C6E85' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.data-table thead th.sortable:hover .sort-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232638c4' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}
.data-table thead th.sort-asc .sort-icon {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232638c4' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}
.data-table thead th.sort-desc .sort-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232638c4' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}
.data-table tbody tr {
  border-bottom: 1px solid #F9FAFB;
  transition: background 0.15s;
}
.data-table tbody tr:nth-child(odd) { background: #F6F6FA; }
.data-table tbody tr:hover { background: #EEF0F5; }
.data-table tbody td {
  padding: 16px 12px;
  vertical-align: middle;
  color: var(--text-dark);
}
.data-table .cell-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.data-table .cell-link:hover { text-decoration: underline; }

/* Date cell — two lines (date + time), #000525, 13px, gap 10px — Figma node 144:14590 */
.date-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  color: #000525;
  line-height: 1.25;
  white-space: nowrap;
}

/* CRB spawned multiselect in filters-row — constrain to same flex size as other selects */
.filters-row .pbs-ms-wrap {
  flex: 1;
  min-width: 150px;
}

/* ══════════════════════════════════════════
   7. STATUS BADGES
   ══════════════════════════════════════════ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 23px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  border: 1.2px solid;
  white-space: nowrap;
}
.status-badge .badge-icon {
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.status-badge .badge-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Figma node 257:25898 — exact status badge variants */
.status-badge.pending-review { color: #000525; border-color: #FFCF00; background: #FFCF00; }
.status-badge.approved { color: #FFFFFF; border-color: var(--green); background: var(--green); }
.status-badge.active-status { color: #FFFFFF; border-color: var(--green); background: var(--green); }
.status-badge.disabled-status { color: #000525; border-color: #FFBBAD; background: #FFBBAD; }
.status-badge.draft { color: #000525; border-color: #D5DDE7; background: #D5DDE7; }
.status-badge.needs-action { color: #000525; border-color: #FFCF00; background: #FFCF00; }
.status-badge.pending-approval { color: #000525; border-color: #FFCF00; background: #FFCF00; }
.status-badge.denied { color: #000525; border-color: #FFBBAD; background: #FFBBAD; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}
.status-pill.open   { color: var(--green); background: rgba(8,123,69,0.1); border: 1.2px solid var(--green); }
.status-pill.closed { color: #000525; background: #FFBBAD; border: 1.2px solid #FFBBAD; }
/* Figma node 1801:26682 — Royalty Year status badges */
.status-badge.ry-closed { color: #000525; background-color: #FFBBAD; border-color: #FFBBAD; }
.status-badge.ry-open   { color: #fff;    background-color: var(--green); border-color: var(--green); }
/* New row flash — green bg for 3s (Figma node 1874:31360 annotation) */
@keyframes newRowFlash { 0%,80% { background: rgba(8,123,69,0.1); } 100% { background: transparent; } }
.data-table tbody tr.row-new-flash { animation: newRowFlash 3s ease forwards; }

.status-badge[title] { cursor: help; }

/* ══════════════════════════════════════════
   8. STATUS POPOVERS
   ══════════════════════════════════════════ */
.status-popover-wrap { position: relative; display: inline-block; }
.status-badge.has-comment { cursor: pointer; }
.status-badge.has-comment::after { content: ' ⓘ'; font-size: 0.7rem; opacity: 0.7; }

.comment-info-btn {
  background: none;
  border: none;
  padding: 0 0 0 4px;
  font-size: 0.65rem;
  color: var(--text-light);
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
}
.comment-info-btn:hover { color: var(--primary); opacity: 1; }
.status-popover {
  display: none;
  position: fixed;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 0.85rem 1rem;
  max-width: 300px;
  min-width: 180px;
  z-index: 99999;
  font-size: 0.85rem;
  color: var(--text-dark);
  line-height: 1.5;
}
.status-popover.open { display: block; }
.status-popover-title {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
  margin-bottom: 0.4rem;
}
.status-popover-close {
  position: absolute;
  top: 0.4rem; right: 0.5rem;
  background: none; border: none;
  font-size: 1rem; cursor: pointer;
  color: var(--text-light);
  line-height: 1;
}
.status-popover-close:hover { color: var(--text-dark); }

.status-comment {
  font-size: 13px;
  color: #000525;
  margin-top: 6px;
  line-height: 1.25;
}
.status-comment[data-comment-tooltip] { cursor: help; }
.banner-badge--linked { cursor: pointer; }

/* ══════════════════════════════════════════
   9. PAGINATION
   ══════════════════════════════════════════ */
.pagination-buttons {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.pagination-buttons .page-btn {
  box-sizing: border-box;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--nav-dark);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 32px;
  font-weight: 400;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination-buttons .page-btn:hover:not(:disabled) {
  background-color: var(--baby-blue);
}
.pagination-buttons .page-btn.active {
  background-color: var(--primary);
  color: #fff;
  font-weight: 400;
  border: 2px solid var(--primary);
}
.pagination-buttons .page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-buttons .page-btn.nav-btn {
  font-weight: 400;
  color: var(--nav-dark);
  gap: 4px;
}
.pagination-buttons .page-btn.nav-btn:not(.page-btn-edge) {
  width: auto;
  padding: 2px 10px;
}
.pagination-ellipsis {
  padding: 0 0.25rem;
  color: var(--slate);
  font-size: 13px;
}
.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #F3F4F6;
}
.table-pagination .showing-text {
  font-size: 14px;
  color: var(--nav-dark);
}
.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #F3F4F6;
  flex-wrap: wrap;
  gap: 1rem;
}
.pagination-info {
  font-size: 14px;
  color: var(--nav-dark);
}
.pagination-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.pagination-controls label {
  margin-bottom: 0;
}
/* Keep the per-page custom dropdown compact inside pagination */
.pagination-controls .pbs-dd-wrap {
  width: 70px;
  flex-shrink: 0;
}
.pagination-controls .pbs-dd-wrap .pbs-dd-trigger {
  min-height: 28px;
  padding: 2px 8px;
  font-size: 0.85rem;
}
.pagination-controls .page-btn {
  box-sizing: border-box;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--nav-dark);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 32px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.pagination-controls .page-btn:hover:not(:disabled) { background-color: var(--baby-blue); }
.pagination-controls .page-btn.active {
  background-color: var(--primary);
  color: #fff;
  border: 2px solid var(--primary);
}
.pagination-controls .page-btn.nav-btn { font-weight: 400; }
.pagination-controls .page-btn.nav-btn:not(.page-btn-edge) { width: auto; padding: 2px 10px; }
.pagination-controls .page-btn-edge {
  min-width: 28px;
  width: 28px;
  padding: 0;
  border: 1px solid var(--gray-lighter);
  border-radius: 6px;
}

/* ══════════════════════════════════════════
   10. TIMELINE CARDS
   ══════════════════════════════════════════ */
.timeline-cards {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}
.timeline-cards::-webkit-scrollbar { height: 4px; }
.timeline-cards::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
/* Timeline Card — Figma 87:14077 spec
   Container: 302×146, bg #EEF0F5, radius 16, padding 24/16, gap 24, items-start
   Body: h=92, justify-content:space-between (top group vs date at bottom)
   Top group: gap 16 between (title+badge) and subtitle
   Title+badge: h=44, gap 16, justify-center */
.timeline-card {
  min-width: 302px;
  max-width: 380px;
  height: 140px;
  flex: 1;
  background: #EEF0F5;
  border-radius: 16px;
  padding: 24px 16px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  transition: transform 0.2s;
  box-sizing: border-box;
}
.timeline-card:hover { transform: translateY(-2px); }

.timeline-card .card-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background-color: rgba(38,56,196,0.2);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
}
.timeline-card .card-icon svg {
  width: 24px; height: 24px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.timeline-card .card-icon.ending { background-color: rgba(255,207,0,0.2); color: var(--yellow); }
.timeline-card .card-icon.important { background-color: rgba(254,112,78,0.2); color: var(--orange); }
.timeline-card .card-icon.new { background-color: rgba(8,123,69,0.2); color: var(--green); }
.timeline-card .card-icon.urgent { background-color: rgba(214,56,58,0.2); color: var(--red-alert); }
.timeline-card .card-icon.upcoming { background-color: rgba(148,161,178,0.2); color: var(--text-light); }

.timeline-card .card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 24px 0 0;
  overflow: hidden;
}
.timeline-card .card-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.timeline-card .card-title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 2px;
}
.timeline-card h4 {
  font-family: "PBS Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #040613;
  line-height: 1.25;
  margin: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.timeline-card .card-status,
.timeline-card .card-date {
  font-family: "PBS Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #3D4A6B;
  line-height: normal;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  flex-shrink: 0;
}
.timeline-card .card-description {
  font-family: "PBS Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #3D4A6B;
  max-width: 182px;
  line-height: normal;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badges — H6 Min CAPS: 10/700/1.5, padding 5, radius 5 */
.timeline-card .badge-active,
.timeline-card .badge-upcoming,
.timeline-card .badge-new,
.timeline-card .badge-important,
.timeline-card .badge-urgent,
.timeline-card .badge-ending,
.timeline-card .badge-completed {
  display: inline-block;
  align-self: flex-start;
  font-family: "PBS Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 5px;
  border-radius: 5px;
  line-height: 1.5;
  white-space: nowrap;
}
.timeline-card .badge-active    { background: #2638C4; color: #FFFFFF; }
.timeline-card .badge-completed { background: #2638C4; color: #FFFFFF; }
.timeline-card .badge-upcoming  { background: #94A1B2; color: #FFFFFF; }
.timeline-card .badge-new       { background: var(--green); color: #FFFFFF; }
.timeline-card .badge-important { background: #FE704E; color: #FFFFFF; }
.timeline-card .badge-urgent    { background: #D6383A; color: #FFFFFF; }
.timeline-card .badge-ending    { background: #FFCF00; color: #000525; }

/* ══════════════════════════════════════════
   11. FORM ELEMENTS
   ══════════════════════════════════════════ */
.row-checkbox {
  width: 18px; height: 18px;
  border: 2px solid #ccc; border-radius: 4px;
  cursor: pointer;
}

/* ══════════════════════════════════════════
   12. RESPONSIVE STYLES
   ══════════════════════════════════════════ */
/* ── Mobile filter drawer ─────────────────────────────────────────────────── */
.mobile-filter-toggle {
  display: none; /* shown only on mobile via media query */
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(148,161,178,0.6);
  border-radius: 5px;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  color: #000525;
  cursor: pointer;
  /* Always small. `flex: 0 0 auto` stops it growing on a row line, and `fit-content`
     stops it stretching when its container is a column with align-items: stretch —
     as .filters-row--stacked is, which blew the button up to 662px at 768px and
     432px at 375px on program-submission. */
  flex: 0 0 auto;
  width: fit-content;
}
.mobile-filter-toggle svg { flex-shrink: 0; }

/* Drawer overlay */
.mobile-filter-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0,5,37,0.4);
}
.mobile-filter-drawer-overlay.open { display: block; }

/* Drawer panel slides up from bottom */
.mobile-filter-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1051;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.mobile-filter-drawer.open { transform: translateY(0); }

.mobile-filter-drawer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #d5dde7;
  font-size: 16px;
  font-weight: 700;
  color: #000525;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.mobile-filter-drawer-title { flex: 1; }
/* The action group's circle buttons are sized for a full filters row; smaller here
   so they don't dominate the header next to the title and close button. */
.mobile-filter-drawer-header .filter-action-group .filter-action-btn {
  width: 30px;
  height: 30px;
}
.mobile-filter-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #5c6e85;
  display: flex;
  align-items: center;
}
.mobile-filter-drawer-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-filter-drawer-body .filter-search,
.mobile-filter-drawer-body .filter-select-wrap,
.mobile-filter-drawer-body .pbs-ms-wrap,
.mobile-filter-drawer-body .pbs-dd-wrap,
.mobile-filter-drawer-body > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
}
/* Every filter widget pops its option list as an absolutely-positioned layer, and ms.js
   flips that layer *above* the trigger whenever there is less than 320px of room below —
   inside a bottom sheet that is always true. The list therefore rendered above the
   sheet's top edge, where the sheet's own `overflow-y: auto` clipped it away: measured
   348px tall on user-lookup at 375px with 279px of it outside the sheet, so all that
   showed was the panel's Filter/Clear footer over the header, and the 13 options were
   invisible and unclickable (the overlay swallowed the clicks).

   In the drawer the panel goes back into the flow instead — opening a filter expands the
   sheet content and the sheet scrolls. One rule for all three panel types (PbsMultiSelect,
   the custom dropdown, DropdownSearch) so every row behaves identically. The `top` /
   `bottom` / `max-height` that ms.js writes inline are inert on a static box, and the
   list keeps its own 240px cap. The date picker needs nothing: `.pbs-cal` is fixed on
   <body> at z-index 9999, above the overlay. */
.mobile-filter-drawer-body :is(.pbs-ms-panel, .pbs-dd-list-wrap, .dds-panel) {
  position: static;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 4px;
}
.mobile-filter-drawer-footer {
  padding: 12px 20px 20px;
  display: flex;
  gap: 8px;
}
.mobile-filter-drawer-apply {
  flex: 1;
  height: 44px;
  background: #2638C4;
  color: #fff;
  border: none;
  border-radius: 28.6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 768px) {
  .breadcrumb-bar { margin-top: 1rem; }
  .page-banner { flex-direction: column; gap: 1.5rem; align-items: flex-start; margin: 1rem; padding: 1.5rem; }
  .page-banner .badges { flex-direction: column; }
  .card-section, .form-card { margin: 0 1rem 1rem; padding: 1.25rem; }
  .section-header { flex-direction: column; align-items: flex-start; }
  .filter-search { max-width: 100%; }
  /* With the pills in the drawer the search is the only field left, so let it take the
     rest of the line on every row. Without this it depended on which grow value the row
     happened to set: .ps-filter-search rows (program-submission, dashboard users) grew
     to 506px while .filter-search rows stayed pinned at their desktop 432px/260px with
     dead space beside them. The 180px floor from .filter-search still applies, so on a
     narrow phone it drops to its own line rather than shrinking under its placeholder. */
  .filters-row.mobile-drawer-active .filter-search {
    flex: 1 1 auto;
    width: auto;
  }
  .data-table { font-size: 0.8rem; }
  .table-pagination { flex-direction: column; gap: 1rem; }
  /* Show the Filters button, and once it is out there is no reason for the pills — or
     the +/× add/clear actions, which move into the drawer header — to be out too, they
     all live in the drawer now. Only the search stays (plus the active-filter chips,
     which are not filters themselves).

     Targets the pill classes rather than "every child except X". The old rules were
     three `> *:not(...)` chains, one per row shape, which (a) hid the search along with
     the pills, (b) needed a new chain for every nesting variant — profile's pills sit
     inside .filters-inline and were missed entirely — and (c) could not survive a new
     child class being added to a row. The drawer is appended to <body>, so pills moved
     into it are outside .filters-row and stay visible. */
  .mobile-filter-toggle { display: inline-flex; }
  .filters-row.mobile-drawer-active
    :is(.filter-select-wrap, .pbs-ms-wrap, .pbs-dd-wrap, .extra-filter-wrap, .filter-select, .filter-action-group) {
    display: none !important;
  }
}


/* ══════════════════════════════════════════
   14. PRINT STYLES
   ══════════════════════════════════════════ */
@media print {
  #main-header,
  .page-banner,
  .filters-row,
  .filter-chips,
  .section-actions,
  .table-pagination,
  .pagination-wrapper,
  .bulk-checkbox {
    display: none !important;
  }

  #royalty-years-table th:first-child,
  #royalty-years-table td:first-child,
  #royalty-years-table th:last-child,
  #royalty-years-table td:last-child,
  #ry-filter-chips,
  #ry-pagination,
  #royalty-years-table {
    display: none !important;
  }

  .print-only-table {
    display: block !important;
  }

  .print-only-table .d-none {
    display: table-cell !important;
  }

  .card-section {
    margin: 0;
    padding: 1rem;
    box-shadow: none;
  }

  .data-table {
    width: 100%;
    font-size: 10px;
  }

  .data-table thead th {
    background: #f0f0f0 !important;
    border: 1px solid #ddd;
    padding: 6px 8px;
    font-weight: 600;
    text-align: left;
  }

  .data-table tbody td {
    border: 1px solid #ddd;
    padding: 6px 8px;
  }

  .data-table tbody tr {
    page-break-inside: avoid;
  }

  .section-header h2 {
    font-size: 18px;
    margin-bottom: 1rem;
  }

  /* Dashboard separate table printing */
  body.printing-submissions #timeline-section,
  body.printing-submissions #pending-users-section {
    display: none !important;
  }

  body.printing-users #timeline-section,
  body.printing-users #submissions-section {
    display: none !important;
  }

  /* Profile page printing — hide everything except submissions table */
  body.printing-profile .profile-banner,
  body.printing-profile .profile-tabs-bar,
  body.printing-profile #tab-profile,
  body.printing-profile .section-header,
  body.printing-profile .filters-row,
  body.printing-profile .filter-chips {
    display: none !important;
  }
}

/* Icon action buttons */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #94a1b2;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s;
  padding: 0;
  color: var(--primary);
  flex-shrink: 0;
  position: relative;
}
.icon-btn:hover {
  border-color: #2638C4;
}
.icon-btn svg { flex-shrink: 0; }

/* ══════════════════════════════════════════
   15. PROGRAM SUBMISSION — BANNER METHODS
   ══════════════════════════════════════════ */
.banner-title-col {
  /* 510px basis, shrinkable — see "Banner item rows" in section 1. Was
     width:510px + flex-shrink:0, which starved the methods row. */
  flex: 0 1 510px;
  display: flex;
  align-items: center;
}
/* user-lookup's title column is narrower (Figma 329px). Was an inline style on
   the element, which no shared rule could override. */
.banner-title-col--narrow { flex-basis: 329px; }
.page-banner h1 {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.25;
}
.banner-methods {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.banner-methods-intro {
  font-size: 14px;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}
.banner-methods-list {
  display: flex;
  flex-direction: row;
  gap: 24px;
  padding: 12px 0;
}
.banner-method {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: #fff;
  flex: 1;
  min-width: 0;
}
.method-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(246,246,250,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.method-icon img { width: 16px; height: 16px; display: block; }
.method-icon svg { stroke: #fff; }

/* ══════════════════════════════════════════
   16. REGISTER A PROGRAM BUTTON
   ══════════════════════════════════════════ */
.btn-register-program {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 28.6px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
  height: 34px;
  min-height: 32px;
}
.btn-register-program:hover {
  background: #0F1E8C;
  color: #C0CBDA;
  text-decoration: none;
}
.btn-register-program:focus {
  text-decoration: none;
  outline: none;
}
.btn-register-program:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Banner user actions (non-admin) — My Program Library row above badges (Figma 2746:72070) */
.banner-user-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}
.banner-user-actions-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.banner-user-actions .badges {
  justify-content: flex-end;
}
.banner-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  color: #fff;
}

/* Banner outline button — white border, transparent bg (Figma 2746:72027) */
.btn-banner-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 28.6px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
  height: 34px;
  min-height: 32px;
  line-height: 1.25;
}
.btn-banner-outline:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  text-decoration: none;
}
.btn-program-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 28.6px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  height: 34px;
  min-height: 32px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  line-height: 1.25;
}
.btn-program-outline:hover {
  background: #fff;
  border-color: #3D4A6B;
  color: #3D4A6B;
  text-decoration: none;
}

/* ══════════════════════════════════════════
   17. FILTER ACTION BUTTONS (+ and X)
   ══════════════════════════════════════════ */
/* Profile's filter row wraps its pills in this extra flex layer. It was the only
   filter row in the app with no `flex-wrap`, so instead of wrapping it overflowed:
   measured 4px of clip at 1280px growing to 722px by 480px, and the overflow was
   pushing the whole document sideways (the widest offender at 1100–992 was the row's
   own .pbs-dd-wrap, not a table). Wrapping matches `.filters-row` and
   `.filters-row-line`; the pills' 240px cap then applies here as it does everywhere. */
.filters-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.filter-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #94a1b2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s;
  padding: 0;
  flex-shrink: 0;
  background: #fff;
  font-size: 16px;
  line-height: 1;
  position: relative;
}
.filter-action-group {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.filter-row-break {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: -6px 0 0;
}
#filters-row-user, #ul-filters-row, .filters-row-line { row-gap: 6px; }
#ul-filters-row .filter-search { width: 260px; }
/* ── Wrapped-line width cap — EVERY filter row ──
   These rows hold a fixed search box plus N `flex: 1` filter pills. A pill's width
   is therefore its share of whatever line it lands on, so a trailing pill that wraps
   onto its own line stretches across the full row: measured 690px for Status on
   royalty-years at 900px, ~400px on the others.

   Keyed off `.filters-row` rather than a list of row IDs. The ID list only covered
   dashboard/user-lookup/program-submission and silently missed royalty-years and
   profile — the pills are the same component on all six rows, so the rule has to be
   the one shared rule (parity), not an enumeration somebody has to remember to
   extend. `.filters-row-line` (program-submission) and `.filters-inline` (profile)
   are both inside `.filters-row`, so the descendant selector reaches them.

   Not applied to `.filter-search` (fixed 432px / 260px on user-lookup) or to bare
   `.extra-filter-wrap` date pills, which are content-sized and never stretch. The
   mobile drawer overrides this with `max-width: 100% !important`, so pills still go
   full width inside the drawer.

   240px is above every pill's design-width share at 1440px on five of the six rows
   (176–229px), so those are pixel-identical on desktop. Royalty-years is the
   exception: it has only two pills, so its share is 387px and this narrows them —
   which also brings the one outlier row into line with every other filter row in
   the app. Not verified against Figma (no MCP access in that session). */
.filters-row :is(.filter-select-wrap, .pbs-dd-wrap, .pbs-ms-wrap, .filter-select) {
  max-width: 240px;
}
.filter-add-btn {
  color: var(--primary);
}
.filter-add-btn:hover {
  border-color: #2638C4;
}
.filter-clear-btn[hidden] { display: none !important; }
.filter-action-group[hidden] { display: none !important; }
.filter-clear-btn {
  color: #FE704E;
}
.filter-clear-btn:hover {
  border-color: #D6383A;
  color: #D6383A;
}
/* Legacy */

/* ── Multi-select dropdown (Status filter) ── */
.ms-wrap { position: relative; }
.ms-trigger {
  width: 100%;
  height: 33px;
  border: 1px solid rgba(148,161,178,0.6);
  border-radius: 5px;
  background: #fff;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: #5c6e85;
  transition: border-color 0.2s;
}
.ms-trigger:hover { border-color: var(--primary); }
.ms-trigger[aria-expanded="true"] { border-color: var(--primary); }
.ms-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.ms-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-label.has-values { color: #000525; font-weight: 600; }

.ms-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(148,161,178,0.4);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 601;
  padding: 6px 0;
}
.ms-dropdown[hidden] { display: none; }
.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: #000525;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.ms-option:hover { background: rgba(38,56,196,0.06); }
.ms-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.ms-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* ── Filter picker dropdown ── */
.filter-picker {
  position: absolute;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 200px;
  z-index: 600;
  padding: 6px 0;
  border: 1px solid rgba(148,161,178,0.4);
}
/* Above the mobile filter drawer (1051) — set only while its trigger is anchored in
   the drawer header (see positionFilterPicker in utils.js). #main-header is 1030, so
   this can't stay on unconditionally or the picker would paint over it once scrolled;
   the drawer locks body scroll, so that can't happen while this class is active. */
.filter-picker.filter-picker--elevated {
  z-index: 1052;
}
.filter-picker-item {
  padding: 9px 16px;
  font-size: 13px;
  color: #000525;
  cursor: pointer;
}
.filter-picker-item:hover { background: rgba(38,56,196,0.06); color: #2638c4; }

/* ── Extra filter row ── */
.filters-row--extra {
  padding-top: 8px;
  gap: 8px;
  margin-bottom: 0;
}
/* ── Stacked filter rows (multiple lines inside one grey box) ── */
.filters-row--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.filters-row-line {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.filters-row-line .filter-select { flex: 1 1 150px; min-width: 150px; }
.filters-row-line .filter-select-wrap { flex: 1 1 150px; min-width: 150px; }
.filters-row-line .filter-action-btn { flex-shrink: 0; order: 999; }
.extra-filter-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(148,161,178,0.6);
  border-radius: 5px;
  padding: 0 10px;
  height: 33px;
}
.extra-filter-wrap:focus-within {
  border: 2px solid #5680ff;
  padding: 0 9px;
}
.extra-filter-label {
  font-size: 14px;
  font-weight: 400;
  color: #5c6e85;
  white-space: nowrap;
}
.extra-filter-input {
  border: none;
  background: transparent;
  font-size: 14px;
  color: #000525;
  outline: none;
  min-width: 80px;
  max-width: 140px;
  font-family: inherit;
}
.extra-filter-input::placeholder { color: #94a1b2; }
.extra-filter-input[type="number"]::-webkit-outer-spin-button,
.extra-filter-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.extra-filter-input[type="number"] { -moz-appearance: textfield; }
/* ── Date inputs — general (filter rows, forms, modals) ── */
input[type="date"] {
  accent-color: #2638c4;
  color-scheme: light;
  cursor: pointer;
}
input[type="date"]::-webkit-datetime-edit { font-family: inherit; }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(18%) sepia(93%) saturate(2000%) hue-rotate(215deg) brightness(85%);
}
/* Filter-row date input: placeholder=slate, selected=blue bold */
.extra-filter-input[type="date"] {
  min-width: 120px;
  max-width: 160px;
}
.extra-filter-input[type="date"]::-webkit-datetime-edit { color: #5c6e85; }
.extra-filter-input[type="date"]:valid::-webkit-datetime-edit { color: #2638c4; font-weight: 600; }
/* Date extra-filter-wrap: match filter-select pill style */
.extra-filter-wrap:has(input[type="date"]) {
  border-radius: 5px;
  height: 33px;
  padding: 0 10px;
  gap: 4px;
}
.extra-filter-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #2638C4;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
  display: flex;
  align-items: center;
}
.extra-filter-remove:hover { opacity: 1; color: #d6383a; }

/* ══════════════════════════════════════════
   18. FILTER SEARCH — ICON ON RIGHT
   ══════════════════════════════════════════ */
.filter-search .search-icon-right {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #5C6E85;
}

/* ══════════════════════════════════════════
   19. TABLE CHECKBOX COLUMN (LAST)
   ══════════════════════════════════════════ */
.data-table thead th:last-child,
.data-table tbody td:last-child {
  width: 80px;
  text-align: center;
  vertical-align: middle;
}
.data-table tbody td:last-child {
  display: table-cell;
  padding: 12px;
  vertical-align: middle;
}
.data-table tbody td:last-child .bulk-checkbox {
  margin: 0 auto;
  display: block;
}

/* ── Status cell hover tooltip ── */
.status-cell-wrap {
  position: relative;
  display: inline-block;
  cursor: default;
}
#sub-row-tooltip {
  position: fixed;
  z-index: 9999;
  background: #5c6e85;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  font-family: "PBS Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.25;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  display: none;
}
#sub-row-tooltip strong { color: rgba(255,255,255,0.75); font-weight: 600; }

/* ── User status badge — Figma node 270:25964 ── */
.user-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 23px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  color: #000525;
  white-space: nowrap;
  line-height: 1.25;
}
.user-status-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}
/* Figma shared Status Badge set (node 257:25898) */
.user-status-pending  { background: #FFCF00; border: 1.2px solid #FFCF00; color: #000525; }
.user-status-active   { background: var(--green); border: 1.2px solid var(--green); color: #FFFFFF; }
.user-status-disabled { background: #FFBBAD; border: 1.2px solid #FFBBAD; color: #000525; }

/* ══════════════════════════════════════════
   20. PROFILE BANNER
   ══════════════════════════════════════════ */
.profile-banner {
  color: var(--text-dark);
  margin: 1.5rem 64px;
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}
.profile-banner-left {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  background: var(--cloud);
  border-radius: 12px;
  padding: 1.5rem 2rem;
}
.profile-banner-top {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(38, 56, 196, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
}
.profile-banner-info {
  flex: 1;
}
.profile-name-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.profile-name-row h1 {
  font-size: 30px;
  font-weight: 700;
  color: var(--dark-blue);
  margin: 0;
}
.profile-name-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--blue-gray);
}
.profile-id-badge {
  background: transparent;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
}
.profile-invited-by {
  font-size: 0.85rem;
  color: var(--blue-gray);
}
.profile-invited-by a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}
.profile-status-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.profile-status-card {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid rgba(148, 161, 178, 0.4);
  border-radius: 12px;
  padding: 16px;
  width: fit-content;
}
.profile-meta-sep {
  width: 2px;
  height: 24px;
  background: rgba(148, 161, 178, 0.6);
  border-radius: 1px;
  display: inline-block;
  flex-shrink: 0;
}
.profile-status-card .status-badge {
  font-size: 0.8rem;
}
.profile-role-select {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 5px;
  padding: 0.2rem 0.5rem;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}
.profile-role-select:focus {
  border: 2px solid var(--blue-light);
  outline: none;
}

.profile-edit-icon {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--blue-gray);
  margin-left: 0.25rem;
  padding: 4px;
  border-radius: 4px;
  text-decoration: none;
}
.profile-edit-icon:hover {
  color: var(--primary);
  background: rgba(38, 56, 196, 0.1);
}
.profile-toggles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
  background: var(--cloud);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  align-items: flex-end;
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
}
.toggle-row label {
  font-size: 0.85rem;
  margin: 0;
  color: var(--primary);
}
.terms-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.terms-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--primary);
  cursor: pointer;
  font-family: inherit;
  text-align: right;
}
.toggle-toast {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  margin-top: 0.5rem;
  text-align: center;
  animation: fadeIn 0.2s ease;
}
.toggle-toast-success {
  background: #e6f9f0;
  color: #0a7b3e;
}
.toggle-toast-error {
  background: #fde8e8;
  color: #d6383a;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.toggle-switch {
  -webkit-appearance: none;
  appearance: none;
  width: 48px;
  height: 24px;
  background: var(--blue-gray);
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.toggle-switch:checked {
  background: var(--primary);
}
.toggle-switch:checked::after {
  transform: translateX(24px);
}
.toggle-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════
   21. PROFILE TABS
   ══════════════════════════════════════════ */
/* Figma 3212:55834 — Outer white card wrapping tabs + content */
.profile-tabs-container {
  background: #fff;
  border: 1px solid #D5DDE7;
  border-radius: 12px;
  padding: 6px;
  margin: 0 64px 1.5rem;
  max-width: 1312px;
}
/* Figma 1121:14735 — Inner cloud tab strip */
.profile-tabs-bar {
  background: var(--cloud);
  margin: 0;
  max-width: none;
  border-radius: 8px;
  padding: 0 24px;
}
.profile-tabs {
  display: flex;
  gap: 24px;
  align-items: center;
}
.profile-tab {
  background: none;
  border: none;
  padding: 0;
  height: 48px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--blue-gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  font-family: inherit;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.profile-tab:hover {
  color: var(--primary);
}
.profile-tab.active {
  color: var(--primary);
}
.profile-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--teal);
  border-radius: 2px 2px 0 0;
}
.profile-tab:disabled {
  color: var(--text-light);
  cursor: not-allowed;
}
.profile-tab-content {
  padding: 0;
}
.profile-tab-content .card-section {
  margin: 0;
  border: none;
  padding: 24px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .profile-tabs-container {
    margin: 0 1rem 1rem;
    padding: 4px;
  }
  .profile-tabs-bar {
    padding: 0 16px;
    border-radius: 6px;
  }
  .profile-tabs {
    gap: 16px;
  }
  .profile-tab {
    font-size: 16px;
  }
}

/* ══════════════════════════════════════════
   22. PROFILE DETAILS GRID
   ══════════════════════════════════════════ */
.profile-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
.profile-field {
  background: var(--cloud);
  border: 1px solid rgba(148, 161, 178, 0.4);
  border-radius: 12px;
  padding: 1rem;
}
.profile-field-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.profile-field-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--blue-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-field-icon svg {
  width: 16px;
  height: 16px;
}
.profile-field label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-gray);
  margin: 0;
  display: block;
}
.profile-field p {
  font-size: 1rem;
  color: var(--blue-gray);
  margin: 0;
  line-height: 1.5;
}
.profile-field .email-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.profile-field .copy-icon {
  cursor: pointer;
  color: var(--blue-gray);
  display: inline-flex;
  align-items: center;
}
.profile-field .copy-icon:hover {
  color: var(--primary);
}
@media (max-width: 768px) {
  .profile-details-grid {
    grid-template-columns: 1fr;
  }
}

.btn-reset-password-outline {
  background: transparent;
  color: #5c6e85;
  border: 2px solid #5c6e85;
  border-radius: 28.6px;
  padding: 0.4rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.btn-reset-password-outline:hover {
  background: #5c6e85;
  color: #fff;
}
/* Library icon in btn-reset-password-outline: default = slate, hover = white */
.btn-program-library-btn { display: inline-flex; align-items: center; gap: 6px; }
.btn-program-library-icon { filter: brightness(0) saturate(100%) invert(44%) sepia(14%) saturate(690%) hue-rotate(175deg) brightness(92%) contrast(87%); transition: filter 0.2s; }
.btn-program-library-btn:hover .btn-program-library-icon { filter: brightness(0) invert(1); }

/* ══════════════════════════════════════════
   24. PROFILE EDIT FORM
   ══════════════════════════════════════════ */
.edit-form-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.edit-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.edit-form-row-full {
  grid-template-columns: 1fr;
}
.edit-form-field {
  display: flex;
  flex-direction: column;
}
.edit-field-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.edit-field-label label {
  font-size: 1rem;
  font-weight: 700;
  color: #3d4a6b;
  margin: 0;
}
.edit-field-label .required {
  color: #d6383a;
  margin-left: 1px;
}
.edit-field-icon {
  width: 16px;
  height: 16px;
  color: #3d4a6b;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.edit-form-input {
  width: 100%;
  height: 47px;
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--nav-dark);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.edit-form-input::placeholder {
  color: var(--slate);
}
.edit-form-input:focus {
  border: 2px solid var(--blue-light);
  padding: 7px 11px;
}
.edit-form-input:disabled {
  background: #d5dde7;
  cursor: not-allowed;
}
.edit-form-input[readonly] {
  background: #f9fafb;
  cursor: not-allowed;
}
.edit-form-input.is-invalid,
.edit-form-input.rymodal-input-error {
  border-color: var(--red-alert);
}
.edit-form-input.is-invalid:focus,
.edit-form-input.rymodal-input-error:focus {
  border: 2px solid var(--red-alert);
  padding: 7px 11px;
}
.edit-field-error {
  font-size: 0.8rem;
  color: var(--red-alert);
  line-height: 1.5;
  margin-top: 2px;
}
.edit-form-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235c6e85' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 2.5rem;
}
/* ── Alert banner (Figma 2863:47936) ── */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #E9EFEC;
  border-radius: 16px;
  padding: 16px;
  margin: 0 1.5rem 1rem;
  animation: alert-fade-in 0.2s ease-out;
}
@keyframes alert-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.alert-banner-icon { flex-shrink: 0; display: flex; align-items: center; }
.alert-banner-text { flex: 1; font-size: 16px; color: #000525; line-height: 1.5; }
.alert-banner-close {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; align-items: center; opacity: 0.6; flex-shrink: 0;
}
.alert-banner-close:hover { opacity: 1; }

/* ── Status picker (profile edit) ── */
.status-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.status-pick-btn {
  cursor: pointer;
  border: none;
  font-family: inherit;
  opacity: 0.45;
  transition: opacity 0.15s, box-shadow 0.15s;
}
.status-pick-btn:hover { opacity: 0.75; }
.status-pick-btn.selected {
  opacity: 1;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}

.edit-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 2rem;
}
.btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 1.5rem;
  border: 2px solid var(--blue-gray);
  border-radius: 28.6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-gray);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
}
.btn-cancel:hover {
  background: var(--blue-gray);
  color: #fff;
  text-decoration: none;
}
.btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 1.5rem;
  border: none;
  border-radius: 28.6px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  cursor: pointer;
}
.btn-save:hover {
  background: var(--dark-blue);
}
@media (max-width: 768px) {
  .edit-form-row {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════
   BREADCRUMB BAR
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   23. SUBMISSION DETAIL PAGE
   ══════════════════════════════════════════ */
.submission-back-link {
  padding: 1rem 64px 0;
}
.submission-back-link a {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.submission-back-link a:hover {
  text-decoration: underline;
}
.submission-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem 64px;
}
/* Figma node 1196:17017 — #F6F6FA Cloud background */
.submission-info-card {
  margin: 0 !important;
  background-color: #f6f6fa;
  border-color: transparent;
  /* Flex column so user-info pins to the bottom when the grid stretches this
     card to match a taller CRB card (right column) */
  display: flex;
  flex-direction: column;
  /* Grid items default to min-width: auto, so a long unbroken string (e.g. a
     comment with no spaces) sets the min-content width and forces this 1fr
     track to expand, squeezing .submission-crb-card off-screen. */
  min-width: 0;
}
.submission-crb-card { margin: 0 !important; min-width: 0; }

/* CRB section header */
.crb-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.crb-title { font-size: 22px; font-weight: 700; color: #000525; margin: 0; line-height: 1.25; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crb-subtitle { font-size: 14px; color: #3D4A6B; margin: 4px 0 0; line-height: 1.5; }
.crb-info-btn { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; }
/* CRB Info Modal — Figma 3569:39604 */
.crb-info-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1050; align-items: center; justify-content: center; }
.crb-info-modal { background: #fff; border-radius: 6px; box-shadow: 0 0.5px 35px 0 rgba(96,115,138,0.25); width: 480px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; overflow: hidden; }
.crb-info-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border-light); flex-shrink: 0; }
.crb-info-modal-title-row { display: flex; align-items: center; gap: 8px; }
.crb-info-modal-heading { font-size: 22px; font-weight: 700; color: var(--nav-dark); margin: 0; line-height: 1.25; }
.crb-info-modal-close { background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; color: var(--nav-dark); }
.crb-info-modal-body { padding: 24px; overflow-y: auto; }
.crb-info-modal-body p { font-size: 14px; color: var(--nav-dark); line-height: 1.5; margin: 0; }
.crb-info-modal-footer { display: flex; justify-content: flex-end; padding: 16px 14px; border-top: 1px solid var(--border-light); flex-shrink: 0; }
.crb-header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.crb-file-count { font-size: 14px; color: #5c6e85; white-space: nowrap; }

/* CRB body: when files exist — dropzone left (260px), docs panel right */
.crb-body { display: flex; gap: 16px; align-items: flex-start; }
.crb-body .crb-dropzone-wrap { flex: 0 0 auto; width: 260px; }
.crb-docs-panel { flex: 1; min-width: 0; max-height: 280px; overflow-y: auto; }
.crb-docs-panel .crb-docs-list { margin-bottom: 0; }
/* No files: dropzone takes full width */
.crb-body.crb-no-files .crb-dropzone-wrap { width: 100%; flex: 1 1 auto; }
.crb-body.crb-no-files .crb-docs-panel { display: none; }
/* Submission hero — Figma 935:13860 */
/* Title + year badge side-by-side */
.submission-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.submission-detail-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--dark-blue);
  margin: 0;
  line-height: 1.25;
}
.submission-year-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--dark-blue);
  color: var(--cloud);
  padding: 8px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  flex-shrink: 0;
}
.submission-year-badge img { flex-shrink: 0; filter: brightness(0) invert(1); }
/* Status row container — status box on left, numbers on right */
.submission-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  border: none;
  padding: 0;
  margin-bottom: 16px;
  gap: 16px;
  background: transparent;
  box-sizing: border-box;
}
.submission-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(148, 161, 178, 0.4);
  border-radius: 16px;
  padding: 12px 16px;
  background-color: #fff;
  box-sizing: border-box;
}
/* Default state — Figma 761:10847: 16px padding, fixed 57px, label + badge 4px apart */
.submission-status-row:not(.is-editing) { padding: 16px; min-height: 57px; align-items: center; }
.status-display-group { display: flex; align-items: center; gap: 16px; }
.status-container { display: flex; align-items: center; gap: 4px; }
.status-container #status-badge-display { display: flex; }
.status-edit-btn {
  display: none; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0;
}
/* Edit state — Figma 761:10864: 150px form column, 16px to the button group */
#status-select-wrap {
  display: none;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}
.status-form-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 150px;
  flex-shrink: 0;
}
.status-button-container { display: flex; align-items: center; gap: 8px; }
.submission-status-row label {
  font-weight: 400;
  font-size: 14px;
  color: var(--blue-gray);
  margin: 0;
  white-space: nowrap;
}
.submission-status-select { min-width: 100%; }
.submission-status-row .pbs-dd-wrap { width: 100%; }
/* Status edit Cancel/Save — Figma 761:10864 */
.btn-status-cancel {
  display: inline-flex; align-items: center; justify-content: center;
  /* Figma draws the 1px stroke inside the 6px/12px padding box — inset it so both pills match */
  border: 1px solid var(--blue-gray); background-color: transparent; color: var(--blue-gray);
  border-radius: 28.6px; padding: 5px 11px;
  font-size: 13px; font-weight: 700; line-height: 1.25; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.btn-status-cancel:hover { background-color: var(--blue-gray); color: #fff; }
.btn-status-save {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--primary); border: none; color: #fff;
  border-radius: 28.6px; padding: 6px 12px;
  font-size: 13px; font-weight: 700; line-height: 1.25; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.btn-status-save:hover { background-color: #1c2a9e; }
#status-badge-display .status-badge { font-size: 14px; padding: 4px 12px; height: 23px; }
.submission-numbers {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* keeps the block right-aligned after .submission-meta-row wraps it onto its own line */
  margin-left: auto;
  gap: 16px;
  padding: 8px 0;
  text-align: right;
  font-size: 14px;
  color: var(--blue-gray);
  white-space: nowrap;
}
.submission-numbers p {
  margin: 0;
  line-height: 1.5;
}
/* Figma 935:12779 (Default) has no time line — only shown once editing (761:10864) */
.submission-updated-time { display: none; }
.submission-status-row.is-editing ~ .submission-numbers .submission-updated-time { display: block; }
.submission-numbers strong { color: var(--nav-dark); }
/* Comments section — Figma 935:12865 */
.submission-comments-btn-row {
  margin-top: 0;
  margin-bottom: 0;
}
/* Variant3: saved comment — inline row, no card (icon + text + edit pencil) */
.admin-comments-saved-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
}
.admin-comments-saved-row .admin-comments-text-display {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #3D4A6B;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Row: circular icon button + white card side-by-side */
.admin-comments-display-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 16px;
}
/* Circular PBS Blue comment icon button */
.comment-icon-btn {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-top: 4px;
}
.comment-icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* White card wrapping saved comment or editor */
.admin-comments-card {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0px 0.5px 17.5px rgba(96,115,138,0.25);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.admin-comments-text-display {
  font-size: 14px;
  color: #000525;
  line-height: 1.5;
  flex: 1;
}
.btn-add-comments {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #2638c4;
  border: 1px solid #2638c4;
  border-radius: 28.6px;
  padding: 8px 20px;
  height: 34px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.btn-add-comments:hover {
  background: #2638c4;
  color: #fff;
}
.btn-add-comments svg { stroke: currentColor; }
.btn-add-comments:hover .btn-add-comments-icon { filter: brightness(0) invert(1); }

/* Admin comments display (saved state) */
/* Old .admin-comments-display replaced by .admin-comments-display-row */
.admin-comments-display {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #000525;
  line-height: 1.4;
}
.admin-comments-display svg { flex-shrink: 0; margin-top: 2px; }
.admin-comments-display span {
  flex: 1;
}
.admin-comments-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
  color: #5C6E85;
}
.admin-comments-edit-btn:hover {
  color: var(--primary);
}

/* Admin comments editor */
.admin-comments-editor {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0px 0.5px 17.5px rgba(96,115,138,0.25);
  background: #fff;
  border: 1px solid #D5DDE7;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 1rem;
}
.admin-comments-title {
  font-size: 16px;
  font-weight: 700;
  color: #000525;
  margin: 0 0 12px;
}
.admin-comments-editor textarea {
  width: 100%;
  border: 1px solid #D5DDE7;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
}
.admin-comments-editor textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.admin-comments-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}
.admin-comments-cancel {
  background: #fff;
  border: 1px solid #D5DDE7;
  border-radius: 20px;
  padding: 6px 20px;
  font-size: 14px;
  cursor: pointer;
  color: #000525;
}
.admin-comments-cancel:hover {
  border-color: #94a1b2;
}
.admin-comments-save {
  background: #2638C4;
  color: #fff;
  border: none;
  border-radius: 28.6px;
  padding: 6px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.admin-comments-save:hover {
  background: #0f1e8c;
}
/* User info row — Figma 935:13999 */
/* Figma 935:13860 — user row below divider */
.submission-user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--gray-lighter);
  padding-top: 16px;
  /* auto top margin pushes this block to the bottom of the flex-column card */
  margin-top: auto;
  flex-wrap: wrap;
}
.submission-user-info-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
}
.submission-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(38, 56, 196, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.submission-user-avatar svg {
  display: block;
  flex-shrink: 0;
}
.submission-user-info strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.5;
  white-space: nowrap;
}
.submission-user-meta {
  font-size: 14px;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  white-space: normal;
  word-break: break-word;
  min-width: 0;
  flex: 1;
}
.submission-user-meta span strong {
  color: var(--text-dark);
  font-size: 14px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* CRB Dropzone */
.crb-dropzone-wrap { display: flex; flex-direction: column; gap: 8px; }
.crb-dropzone {
  border: 1px dashed #94A1B2;
  border-radius: 12px;
  padding: 17px 13px;
  height: 184px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, border-width 0.1s;
  box-sizing: border-box;
}
.crb-dropzone:hover {
  border-color: var(--primary);
  background: #f6f6fa;
}
.crb-dropzone.drag-over {
  border: 2px solid var(--primary);
  background: #f6f6fa;
  padding: 16px 12px;
}
.crb-dropzone.dz-uploading {
  border-color: var(--primary);
  background: #f6f6fa;
}
.crb-dropzone.dz-success {
  border: 2px solid var(--green);
  background: #e7f7f0;
  padding: 16px 12px;
  cursor: default;
}
.crb-dropzone.dz-error {
  border: 2px solid #D6383A;
  background: #feeae9;
  padding: 16px 12px;
  cursor: pointer;
}
.crb-dropzone.dz-error .crb-dropzone-hint { color: #D6383A; }
.crb-dropzone-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f4f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
.crb-dropzone:hover .crb-dropzone-icon,
.crb-dropzone.dz-uploading .crb-dropzone-icon,
.crb-dropzone.drag-over .crb-dropzone-icon {
  background: #c5cee9;
}
.crb-dropzone.dz-success .crb-dropzone-icon { background: #ccf1e0; }
.crb-dropzone.dz-error .crb-dropzone-icon { background: #fed9d8; }
.crb-dropzone-text {
  font-size: 14px;
  line-height: 1.5;
  color: #000525;
}
.crb-dropzone-text a {
  color: #2638C4;
  font-weight: 400;
  text-decoration: none;
}
.crb-dropzone-text a:hover { text-decoration: underline; }
.crb-dropzone-hint {
  font-size: 13px;
  color: #5C6E85;
  margin-top: 4px;
}
.crb-upload-error {
  font-size: 13px;
  color: #d6383a;
  margin: 6px 0 0;
  line-height: 1.4;
  text-align: center;
}
/* Upload progress bar */
.crb-upload-progress {
  display: none;
  height: 4px;
  background: #d7dee5;
  border-radius: 99px;
  overflow: hidden;
}
.crb-upload-progress.show { display: block; }
.crb-upload-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  width: 0%;
  transition: width 0.3s;
}
.crb-docs-list {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Figma 1043:25442 — 1px divider line between file rows */
.crb-docs-list .crb-doc-item + .crb-doc-item {
  border-top: 1px solid #d5dde7;
}
/* CRB file item — Figma node 1043:25442 */
/* CRB file row — Figma node 1774:25978 */
.crb-doc-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border-radius: 6px;
  opacity: 0.8;
  font-size: 14px;
}
.crb-doc-item:hover { opacity: 1; background: #f8f9fa; }
.crb-doc-item-icon { flex-shrink: 0; display: flex; align-items: center; }
.crb-doc-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.75px; }
.crb-doc-item-name {
  font-size: 14px; font-weight: 400; color: #000525;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25;
}
.crb-doc-item-name a { color: #000525; text-decoration: none; }
.crb-doc-item-name a:hover { text-decoration: underline; }
.crb-doc-item-meta { font-size: 13px; color: #94a1b2; line-height: 1.25; white-space: nowrap; }

/* Missing file state — DB record exists but file not found on server */
.crb-doc-item--missing { opacity: 0.55; cursor: help; }
.crb-doc-item--missing .crb-doc-item-name { color: #94a1b2; }
.crb-missing-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #D6383A;
  background: rgba(214,56,58,0.08);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.crb-delete-btn {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  padding: 0; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
}
.crb-delete-btn:hover { background: rgba(214,56,58,0.08); }
.crb-delete-btn:hover svg { stroke: #D6383A; }

/* Programs section */
.submission-programs-card {
  margin: 0 64px 1.5rem !important;
}
.programs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.programs-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}
.programs-title span {
  font-weight: 400;
  color: var(--text-light);
}
.programs-empty-state {
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.programs-empty-state .submission-program-buttons {
  justify-content: center;
}
.submission-program-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.programs-expand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
/* Expand All toggle container — Figma: 147×40px, bg #f6f6fa, rounded-[16px] */
.expand-toggle-pill,
.programs-expand-row > div:first-child {
  background-color: #f6f6fa;
  border-radius: 16px;
  padding: 0 8px;
  height: 40px;
  min-width: 147px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Expand All / Collapse All label — Figma: #2638c4, 14px regular, right-aligned (flex:1, text-right) */
.programs-expand-row label {
  font-size: 14px;
  font-weight: 400;
  color: #2638c4;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  flex: 1;
  text-align: right;
}
/* Legacy selector kept for JS compatibility */
.programs-expand-toggle { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.programs-expand-toggle label { font-size: 0.85rem; font-weight: 600; color: var(--text-dark); margin: 0; }

/* Program group card */
.program-group {
  border: 1px solid var(--gray-lighter);
  border-radius: 9px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.program-group:hover {
  border-color: var(--gray-light);
  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.06);
}
.program-group.expanded {
  border-color: rgba(38,56,196,0.3);
  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.06);
}
.program-group-header {
  display: flex;
  align-items: center;
  padding: 6px 11px;
  gap: 0.75rem;
  background: #fff;
  cursor: pointer;
  overflow: visible;
}
/* Figma node 1149:16061 — 1.875px × 15px pill bar */
.program-group-bar {
  width: 2px;
  height: 15px;
  background: var(--primary);
  border-radius: 999px;
  flex-shrink: 0;
}
/* Figma node 1149:16062 — expand arrow, rotates 90° when expanded */
.program-group-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
  display: flex;
  align-items: center;
}
.program-group-chevron img {
  display: block;
}
.program-group.expanded .program-group-chevron {
  transform: rotate(90deg);
}
.program-group-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.program-group-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nav-dark);
  flex: 1;
}
.program-group-warning {
  color: #FE704E;
  flex-shrink: 0;
}
.program-group-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
  z-index: 10;
}
.program-group-actions button {
  background-color: transparent;
  background-image: url("../images/icons/icon-action-btn-bg.e090550fc445.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--primary);
  padding: 0;
  position: relative;
}
.program-group-actions button:hover {
  background-image: url("../images/icons/icon-action-btn-bg.e090550fc445.svg");
  background-color: rgba(38, 56, 196, 0.08);
}
.program-group-actions button.pg-delete-btn {
  color: #D6383A;
}
.program-group-actions button.pg-delete-btn:hover {
  background-color: rgba(214, 56, 58, 0.08);
}
/* Program action button tooltips handled by JS (CSS ::after clipped by overflow:hidden on .program-group) */
.program-group-body {
  border-top: 1px solid #e2e8f0;
  overflow-x: auto;
}
.program-group.collapsed .program-group-body {
  display: none;
}
.program-group-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.pg-sort-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.pg-sort-th:hover { background: #e2e5f0; }
.pg-sort-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  vertical-align: middle;
  transition: transform 0.15s;
}
.pg-sort-desc .pg-sort-arrow img { transform: rotate(180deg); }
.program-group-table thead th.pg-sort-active { color: var(--primary); }
.pg-sort-th-pct { text-align: right; white-space: nowrap; }
.pg-sort-th-pct .pg-sort-arrow { margin-left: 0; margin-right: 2px; }
.program-group-table thead th {
  background: #eef0f5;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-gray);
  white-space: nowrap;
  border-bottom: 1px solid rgba(15,22,41,0.05);
  line-height: 1.25;
}
.program-group-table thead th.claimant-1-col {
  color: #FE704E;
}
.program-group-table thead th.claimant-1-col.pg-sort-active {
  color: var(--primary);
}
/* 7-column schema (Program Library / Add-from-Library modals) — fixed widths
   so stacked groups line up instead of each table auto-sizing independently */
.program-group-table.pg-table-fixed { table-layout: fixed; }
.program-group-table.pg-table-fixed .col-season { width: 8%; }
.program-group-table.pg-table-fixed .col-episode { width: 30%; }
.program-group-table.pg-table-fixed .col-copyright-year { width: 12%; }
.program-group-table.pg-table-fixed .col-royalty-year { width: 12%; }
.program-group-table.pg-table-fixed .claimant-1-col { width: 20%; }
.program-group-table.pg-table-fixed .claimant-1-pct-col { width: 8%; }
.program-group-table.pg-table-fixed .col-joint { width: 10%; }
/* Section tints — opaque pre-mixed values so colour is identical on all rows */
/* Station: rgba(72,108,216,0.05) on white ≈ #f2f4fc */
.program-group-table th.station-col, .program-group-table td.station-col { background: #f2f4fc; border-left: 2px solid #486CD8; }
.program-group-table th.station-pct-col, .program-group-table td.station-pct-col { background: #f2f4fc; text-align: right; }
/* Claimant 1: rgba(254,112,78,0.05) on white ≈ #fef4f1 */
.program-group-table th.claimant-1-col, .program-group-table td.claimant-1-col { background: #fef4f1; border-left: 2px solid #FE704E; }
.program-group-table th.claimant-1-pct-col, .program-group-table td.claimant-1-pct-col { background: #fef4f1; text-align: right; }
/* Claimant 2: rgba(78,5,172,0.05) on white ≈ #f5f0fd */
.program-group-table th.claimant-2-col, .program-group-table td.claimant-2-col { background: #f5f0fd; border-left: 2px solid #4E05AC; }
.program-group-table th.claimant-2-pct-col, .program-group-table td.claimant-2-pct-col { background: #f5f0fd; text-align: right; }
/* Alternating rows — even rows grey on all cols, section tints blended on top of #f6f6fa */
.program-group-table tbody tr:nth-child(even) td { background-color: #f6f6fa; }
/* Station rgba(72,108,216,0.05) blended on #f6f6fa */
.program-group-table tbody tr:nth-child(even) td.station-col,
.program-group-table tbody tr:nth-child(even) td.station-pct-col { background: #eef0fb; }
/* Claimant 1 rgba(254,112,78,0.05) blended on #f6f6fa */
.program-group-table tbody tr:nth-child(even) td.claimant-1-col,
.program-group-table tbody tr:nth-child(even) td.claimant-1-pct-col { background: #f6eff2; }
/* Claimant 2 rgba(78,5,172,0.05) blended on #f6f6fa */
.program-group-table tbody tr:nth-child(even) td.claimant-2-col,
.program-group-table tbody tr:nth-child(even) td.claimant-2-pct-col { background: #eeeaf6; }
/* Hover state — #eef0f5 base, section tints blended on top */
.program-group-table tbody tr:hover td { background-color: #eef0f5; }
.program-group-table tbody tr:hover td.station-col,
.program-group-table tbody tr:hover td.station-pct-col { background: #e6e9f8; }
.program-group-table tbody tr:hover td.claimant-1-col,
.program-group-table tbody tr:hover td.claimant-1-pct-col { background: #ede8eb; }
.program-group-table tbody tr:hover td.claimant-2-col,
.program-group-table tbody tr:hover td.claimant-2-pct-col { background: #e6e2f3; }
/* Coloured dot prefix on Station/Claimant headers */
.col-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative; top: -1px;
}
.col-dot-blue   { background: #486CD8; }
.col-dot-coral  { background: #FE704E; }
.col-dot-purple { background: #4E05AC; }
.program-group-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #f0f2f5;
  color: var(--text-dark);
  vertical-align: top;
}
.program-group-table tbody tr:last-child td {
  border-bottom: none;
}
.program-group-table .row-warning {
  color: #FE704E;
  flex-shrink: 0;
}
.program-group-table .claimant-cell {
  line-height: 1.4;
}
.ep-title-cell { color: var(--primary); font-weight: 600; }
.program-group-table .claimant-name {
  font-weight: 600;
}
.program-group-table .claimant-company {
  font-size: 0.75rem;
  color: var(--text-light);
}
.program-group-table th.total-col,
.program-group-table td.total-col {
  text-align: center;
  white-space: nowrap;
  width: 100px;
}
.pct-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background-color: #ecfdf5;
  border: 1px solid rgba(8,123,69,0.1);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--green);
  white-space: nowrap;
}
.pct-badge img {
  display: block;
  flex-shrink: 0;
}
.pct-badge--warn {
  background-color: #fff7ed;
  border-color: rgba(254,112,78,0.15);
  color: #c05621;
}

/* Footer buttons */
/* Figma node 1774:26038 — sticky Save / Update Submission footer bar */
/* Pad page content so fixed footer doesn't overlap last element */
.submission-detail-page-wrap { padding-bottom: 80px; }

.submission-footer-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 16px 64px;
  background-color: #fff;
  box-shadow: 0px 0.5px 35px 0px rgba(96, 115, 138, 0.25);
}
/* Update Submission button — Figma: filled PBS Blue, 36px, 16px Bold */
#submit-btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 10px 24px;
  border: none;
  border-radius: 28.6px;
  background: #2638C4;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
#submit-btn:not(:disabled):hover { background-color: #0f1e8c; }
/* :disabled only covers the in-flight PATCH lock — field validation is
   handled by the click guard's inline error message, button stays blue. */
#submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 768px) {
  .submission-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════
   24. FILTER CHIPS
   ══════════════════════════════════════════ */
.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  overflow: hidden;
  align-items: center;
  max-height: 29px;
}
.filter-chips-more-btn { flex-shrink: 0; }
.filter-chips:not(:empty) { margin-bottom: 1rem; }
.filter-chips.expanded {
  flex-wrap: wrap;
  overflow: visible;
  max-height: none;
}
.filter-chips-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  color: #2638C4;
  border: 1.2px solid rgba(86,128,255,0.5);
  border-radius: 16px;
  padding: 0 12px;
  height: 23px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.filter-chips-more-btn:hover { background: rgba(86,128,255,0.1); border-color: #5680ff; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(86,128,255,0.05);
  color: #2638C4;
  border: 1.2px solid rgba(86,128,255,0.5);
  border-radius: 16px;
  padding: 0 12px;
  height: 23px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  white-space: nowrap;
}
.filter-chip-remove {
  background: none;
  border: none;
  color: #2638C4;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.filter-chip-remove:hover { color: #D6383A; }
.filter-chips + .filter-chips-more {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 500;
  cursor: pointer;
}

/* ══════════════════════════════════════════
   25. PER-PAGE SELECT
   ══════════════════════════════════════════ */
.per-page-select {
  padding: 0.35rem 1.5rem 0.35rem 0.6rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%2360738A' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 0.5rem center;
  cursor: pointer;
  margin-right: 1rem;
}
.per-page-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* ══════════════════════════════════════════
   26. TIMELINE CARD EXTRAS
   ══════════════════════════════════════════ */
.timeline-card {
  position: relative;
}
/* Three-dot menu — Figma: absolute top:16px right:16px */
.timeline-card-menu {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
}
.timeline-card-menu svg {
  width: 4px;
  height: 14px;
  fill: #3D4A6B;
}
.timeline-card-menu:hover {
  color: var(--text-dark);
  background: rgba(0,0,0,0.05);
}
/* Hidden card — dimmed for admins, invisible for users */
.timeline-card[data-visibility="hidden"] {
  opacity: 0.45;
  border: 1px dashed rgba(148,161,178,0.6);
}
.timeline-card[data-visibility="hidden"]::after {
  content: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Timeline card mega menu ── */
.card-mega-menu {
  position: fixed;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 6px;
  box-shadow: 0 4px 7.5px rgba(0,0,0,0.25);
  width: 134px;
  z-index: 600;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-mega-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-family: inherit;
  color: #000525;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.card-mega-item img,
.card-mega-item svg { flex-shrink: 0; }
.card-mega-item img { filter: brightness(0); }
.card-mega-item:hover { background: #eef0f5; color: #2638c4; }
.card-mega-item:hover img { filter: brightness(0) saturate(100%) invert(19%) sepia(72%) saturate(2786%) hue-rotate(221deg) brightness(89%) contrast(104%); }

/* Section 27 — removed duplicate (canonical rule is in section 1) */

/* ══════════════════════════════════════════
   28. ROYALTY YEAR MODAL (New Submission)
   ══════════════════════════════════════════ */
.rymodal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 5, 37, 0.45);
  padding: 2rem;
}
.rymodal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  padding: 40px;
  width: 100%;
  max-width: 560px;
  position: relative;
  animation: rymodal-in 0.2s ease;
}
@keyframes rymodal-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.rymodal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: #5C6E85;
  padding: 4px;
  border-radius: 4px;
}
.rymodal-close:hover {
  color: #000525;
}
.rymodal-title {
  font-size: 22px;
  font-weight: 700;
  color: #000525;
  line-height: 1.25;
  margin: 0 0 40px;
}
/* Matches Figma "Modal / Register a Program" (960:22539). Scoped so it never
   touches the bare .rymodal used by Add User (add_user.html). */
.rymodal-register-program {
  max-width: 480px;
  padding: 0;
  border-radius: 6px;
  box-shadow: 0 0.5px 35px 0 rgba(96, 115, 138, 0.25);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.rymodal-register-program .rymodal-close {
  position: static;
}
.rymodal-register-program .rymodal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--gray-lighter);
}
.rymodal-register-program .rymodal-title {
  margin: 0;
}
.rymodal-register-program .rymodal-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 24px;
}
.rymodal-register-program .rymodal-subtitle {
  font-size: 16px;
  color: var(--nav-dark);
  line-height: 1.5;
  margin: 0 0 40px;
}
.rymodal-register-program .rymodal-fields {
  margin-bottom: 0;
}
.rymodal-register-program .rymodal-warning {
  margin-bottom: 0;
}
.rymodal-register-program .rymodal-actions {
  padding: 16px 24px;
  border-top: 1px solid var(--gray-lighter);
}
.rymodal-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}
.rymodal-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rymodal-field-label {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 16px;
}
.rymodal-field-label span {
  font-size: 16px;
  font-weight: 700;
  color: #3D4A6B;
  line-height: 1.5;
}
.rymodal-input-wrap {
  position: relative;
}
/* Containing block for .rymodal-results — without it the panel anchors to the modal */
.rymodal-field {
  position: relative;
}
.rymodal-input {
  width: 100%;
  height: 47px;
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 5px;
  padding: 8px 44px 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--nav-dark);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.rymodal-input::placeholder {
  color: var(--slate);
}
/* Number inputs: hide browser spinner, use consistent styling */
.rymodal-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  padding-right: 12px;
}
.rymodal-input[type="number"]::-webkit-outer-spin-button,
.rymodal-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Hover: Figma State=Hover — bg rgba(246,246,250,0.5) */
.rymodal-input:hover:not(:focus):not([readonly]):not(:disabled) {
  background: rgba(246,246,250,0.5);
}
.rymodal-input:focus {
  border: 2px solid var(--blue-light);
  padding: 7px 43px 7px 11px;
}
/* Disabled: bg #D5DDE7 */
.rymodal-input:disabled {
  background: #D5DDE7;
  cursor: not-allowed;
  opacity: 1;
}
.rymodal-input[readonly] {
  background: #fff;
  cursor: default;
  color: #5C6E85;
}
.rymodal-input.rymodal-input-error {
  border-color: var(--red-alert);
}
.rymodal-input.rymodal-input-error:focus {
  border: 2px solid var(--red-alert);
  padding: 7px 43px 7px 11px;
}
.rymodal-input-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.rymodal-select-wrap {
  position: relative;
}
.rymodal-select {
  width: 100%;
  height: 47px;
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 5px;
  padding: 0 40px 0 12px;
  font-size: 14px;
  font-family: inherit;
  color: #5c6e85;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.rymodal-select:focus {
  border: 2px solid var(--blue-light);
  padding: 0 39px 0 11px;
}
.rymodal-select.rymodal-input-error {
  border-color: var(--red-alert);
}
.rymodal-select.rymodal-input-error:focus {
  border: 2px solid var(--red-alert);
  padding: 0 39px 0 11px;
}
.prog-field-error {
  color: var(--red-alert);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 4px 0 0;
  display: none;
}
.rymodal-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}
.rymodal-select:focus + .rymodal-select-arrow {
  transform: translateY(-50%) rotate(180deg);
}
.rymodal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}
.rymodal-btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 8px 20px;
  border: 1px solid #2638C4;
  border-radius: 28.6px;
  font-size: 13px;
  font-weight: 700;
  color: #2638C4;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
}
.rymodal-btn-cancel:hover {
  background: rgba(38, 56, 196, 0.05);
  text-decoration: none;
  color: #2638C4;
}
.rymodal-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 12px 24px;
  background: #2638C4;
  border: none;
  border-radius: 28.6px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
.rymodal-btn-submit:hover {
  background: #0f1e8c;
}
.rymodal-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #F6F6FA;
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 40px;
}
.rymodal-warning-text {
  font-size: 14px;
  color: #D6383A;
  line-height: 1.5;
}
.rymodal-message {
  text-align: center;
  font-size: 14px;
  margin: 0 0 16px;
  min-height: 0;
}
.rymodal-message:empty {
  display: none;
}
.rymodal-message-error {
  color: #D6383A;
}
.rymodal-results {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  max-height: 240px;
  overflow-y: auto;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
}
.rymodal-results:empty {
  display: none;
}
.rymodal-result-item {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  color: #000525;
  text-decoration: none;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
}
.rymodal-result-item:hover {
  background: #EEF0F5;
  text-decoration: none;
  color: #000525;
}
.rymodal-result-item:last-child {
  border-bottom: none;
}
.rymodal-result-empty,
.rymodal-result-error {
  cursor: default;
  color: #5C6E85;
}
.rymodal-result-error {
  color: #D6383A;
}
@media (max-width: 768px) {
  .rymodal-backdrop {
    padding: 1rem;
  }
  .rymodal {
    padding: 24px;
  }
  .rymodal-title {
    font-size: 18px;
    margin-bottom: 24px;
  }
  .rymodal-fields {
    margin-bottom: 24px;
  }
  .rymodal-register-program {
    padding: 0;
  }
  .rymodal-register-program .rymodal-title {
    font-size: 18px;
    margin-bottom: 0;
  }
  .rymodal-register-program .rymodal-fields {
    margin-bottom: 0;
  }
}

/* ══════════════════════════════════════════
   32. USER LOOKUP — INFO CARDS (inline in banner)
   ══════════════════════════════════════════ */
.ul-info-cards {
  display: flex;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.ul-info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.ul-info-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(246,246,250,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.ul-info-icon svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
}
.ul-info-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 4px;
}
.ul-info-desc {
  font-size: 13px;
  color: #fff;
  margin: 0;
  line-height: 1.25;
}
/* No @media stacking rule here on purpose — the shared "Banner item rows" block
   in section 1 wraps this row intrinsically, same as the other three banners. */

/* ══════════════════════════════════════════
   29. ADD USER — RADIO BUTTONS
   ══════════════════════════════════════════ */
.au-radio-btn {
  display: flex;
  flex: 0 1 406px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 24px;
  background: #EEF0F5;
  border-radius: 5px;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}
.au-radio-btn:hover {
  border-color: #5680ff;
  background: #F6F6FA;
}
.au-radio-group.is-invalid-group .au-radio-btn { border-color: #D6383A; }
.au-radio-tooltip {
  display: none;
  position: fixed;
  background: #5C6E85;
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: center;
  width: 258px;
  z-index: 9999;
  white-space: normal;
  pointer-events: none;
}
.au-radio-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #5C6E85;
}
/* tooltip shown via JS mouseenter/mouseleave */
.au-radio-btn.selected {
  background: #fff;
  border-color: #5680ff;
}
.au-radio-btn.selected > span:not(.au-radio-tooltip) {
  color: #2638C4;
  font-weight: 700;
}
.au-radio-btn > span:not(.au-radio-tooltip) {
  font-size: 14px;
  color: #000525;
  white-space: nowrap;
}
.au-radio-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(148,161,178,0.6);
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.au-radio-btn:hover .au-radio-circle {
  background: rgba(72,108,216,0.1);
  border-color: #2638C4;
}
.au-radio-btn.selected .au-radio-circle {
  background: #2638C4;
  border-color: #2638C4;
}
.au-radio-btn.selected .au-radio-circle svg { display: block; }
.au-radio-circle svg {
  display: none;
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ══════════════════════════════════════════
   30. ADD USER — TOGGLE ROWS
   ══════════════════════════════════════════ */
.au-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.au-pw-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  pointer-events: auto;
}
.au-modal-close { color: var(--nav-dark); display: flex; align-items: center; text-decoration: none; }
.au-modal-close:hover { opacity: 0.7; }
#au-submit-btn:disabled {
  background: var(--slate);
  cursor: not-allowed;
}
#au-submit-btn:disabled:hover {
  background: var(--slate);
}

/* ── Custom Dropdown (Figma node 2957:54426) ── */
.pbs-dd-wrap {
  position: relative;
  width: 100%;
}
/* Episode form dropdowns need 47px height to match rymodal-input */
.episode-field .pbs-dd-trigger,
.episode-field .pbs-dd-wrap { height: 47px; }
.episode-field .pbs-dd-trigger,
.rymodal-field .pbs-dd-trigger { height: 47px; }
.edit-form-field .pbs-dd-trigger,
.edit-form-field .pbs-dd-wrap { height: 47px; }

.pbs-dd-trigger {
  width: 100%;
  height: 33px;
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 5px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
}
.pbs-dd-trigger:hover,
.pbs-dd-wrap:hover .pbs-dd-trigger { border-color: #2638c4; }
.pbs-dd-trigger:focus-visible { outline: 2px solid #2638c4; outline-offset: 2px; }
.pbs-dd-trigger.is-invalid, .pbs-dd-trigger.rymodal-input-error { border-color: var(--red-alert) !important; }
.pbs-dd-value { flex: 1; color: #000525; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbs-dd-value.pbs-dd-placeholder { color: #5c6e85; }
.pbs-dd-arrow { flex-shrink: 0; display: flex; align-items: center; transition: transform 0.2s; }
.pbs-dd-trigger[aria-expanded="true"] .pbs-dd-arrow { transform: rotate(180deg); }

/* Wrapper for search + list */
.pbs-dd-list-wrap {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 5px;
  box-shadow: 0 0.5px 35px 0 rgba(96, 115, 138, 0.25);
  z-index: 500;
  overflow: hidden;
}
.pbs-dd-list-wrap.open { display: block; }
.pbs-dd-list-wrap.above { top: auto; bottom: calc(100% + 4px); }

/* Search input inside dropdown */
.pbs-dd-search {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(148, 161, 178, 0.4);
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #000525;
  background: #fff;
  outline: none;
  box-shadow: none;
  margin: 0;
  box-sizing: border-box;
  display: block;
}
.pbs-dd-search:focus { outline: none !important; box-shadow: none !important; border-bottom-color: rgba(148, 161, 178, 0.4); }
.pbs-dd-search::placeholder { color: #94a1b2; }

.pbs-dd-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 161, 178, 0.5) rgba(148, 161, 178, 0.15);
}
.pbs-dd-list::-webkit-scrollbar { width: 4px; }
.pbs-dd-list::-webkit-scrollbar-track { background: rgba(148, 161, 178, 0.15); border-radius: 2px; }
.pbs-dd-list::-webkit-scrollbar-thumb { background: rgba(148, 161, 178, 0.5); border-radius: 2px; }
.pbs-dd-empty { color: #94a1b2; font-style: italic; cursor: default; }
.pbs-dd-item {
  padding: 8px 16px;
  font-size: 14px;
  color: #000525;
  cursor: pointer;
  white-space: nowrap;
}
.pbs-dd-item.hover,
.pbs-dd-item:hover { background: rgba(38, 56, 196, 0.1); }
.pbs-dd-item.selected { font-weight: 700; color: #2638c4; }

/* Table Select All checkbox (Figma 330:27095) */
.table-select-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

/* Per-row checkbox */
.row-checkbox-cell { text-align: center; width: 40px; }
.row-checkbox-cell .custom-checkbox { cursor: pointer; }

/* Custom checkbox — Figma spec: 24×24, border-radius 4px, checked bg #2638c4 */
.custom-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
}
.custom-checkbox:not(:checked):not(.checked):hover {
  border-color: #2638c4;
  background: rgba(38, 56, 196, 0.06);
}
/* .custom-checkbox.checked — shared rule above */
.custom-checkbox:focus-visible {
  outline: 2px solid #2638c4;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════
   31. FIELD ERRORS (form validation)
   ══════════════════════════════════════════ */
.field-error {
  font-size: 0.8rem;
  color: var(--red-alert);
  margin-top: 4px;
  display: none;
}
.field-error.show {
  display: block;
}

/* ══════════════════════════════════════════
   32. EPISODE ENTRY FORM (Program Entry)
   ══════════════════════════════════════════ */
.episode-entry {
  border: 1px solid rgba(38, 56, 196, 0.3);
  border-radius: 9.375px;
  margin-bottom: 16px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
  padding: 1px;
}
.episode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid rgba(148, 161, 178, 0.2);
  border-radius: 8.375px 8.375px 0 0;
}
/* Body carries the bottom corners so the header keeps sharp bottom corners
   against its own border. When collapsed the header is the whole box, so it
   needs all four corners — was previously handled by clipping the card with
   overflow:hidden, which also clipped an upward-flipped season/episode
   dropdown (.pbs-dd-list-wrap.above) whenever a field sat near the top of a
   card, making that option list unclickable. */
.episode-entry.collapsed .episode-header {
  border-radius: 8.375px;
}
.episode-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.episode-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.episode-bar {
  width: 3px;
  height: 20px;
  background: #2638C4;
  border-radius: 2px;
}
.episode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}
.episode-entry.collapsed .episode-toggle {
  transform: rotate(-90deg);
}
.episode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(38, 56, 196, 0.2);
  color: #2638c4;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
}
.episode-label {
  font-size: 16px;
  font-weight: 700;
  color: #0f1629;
}
.episode-warning {
  margin-left: 4px;
}
.episode-action-btn {
  background: none;
  border: 1px solid rgba(148, 161, 178, 0.4);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.episode-action-btn:hover {
  background: #F6F6FA;
}
.episode-body {
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 0 0 8.375px 8.375px;
}
.episode-entry.collapsed .episode-body {
  display: none;
}
.episode-fields-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
/* Responsive: give each field a floor so a narrow modal wraps fields onto
   the next line ("unele sub altele") instead of squishing them into an
   unreadable row. 140px never exceeds any fixed field width (140/160/200),
   so the desktop layout is unchanged. */
.episode-fields-row > .episode-field {
  min-width: 140px;
}
.episode-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.episode-field-label {
  font-size: 14px;
  font-weight: 700;
  color: #3D4A6B;
  line-height: 1.5;
}
.episode-section {
  background: #f6f6fa;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.episode-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #3d4a6b;
  margin: 0;
}
.episode-owners-list,
.episode-cast-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.episode-owner-entry,
.episode-cast-entry {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid #d5dde7;
  border-radius: 12px;
  padding: 12px;
  position: relative;
}
.episode-owner-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.episode-person-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(38, 56, 196, 0.2);
  border-radius: 50%;
}
.episode-owner-label {
  font-size: 16px;
  font-weight: 700;
  color: #3d4a6b;
}
.episode-add-another {
  border: 1px dashed #c0cbda;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 31px;
  margin-top: 8px;
  cursor: pointer;
  background: none;
  width: 100%;
  transition: border-color 0.2s;
}
.episode-add-another:hover {
  border-color: #2638c4;
}
.episode-add-btn-row {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.episode-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid #2638C4;
  border-radius: 28.6px;
  background: #fff;
  color: #2638C4;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.episode-add-btn:hover {
  background: rgba(38, 56, 196, 0.05);
}
/* Remove button on Owner/Cast 2+ — reuses the circular bordered
   .episode-action-btn treatment from the episode header; pushed to the
   right edge of the owner/cast header row. */
.episode-remove-btn {
  margin-left: auto;
}
.episode-program-title-row {
  display: flex;
  gap: 16px;
}

/* ══════════════════════════════════════════
   33. PROGRAM COMMENTS PANEL
   ══════════════════════════════════════════ */
.program-comments-panel {
  display: none;
  flex-direction: column;
  border-left: 1px solid #C0CBDA;
  background: #fff;
  width: 320px;
  min-width: 280px;
  height: 100%;
}
.program-comments-panel.open {
  display: flex;
}
.comments-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}
.comments-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #000525;
}
.comments-panel-title .comments-count {
  font-weight: 400;
  color: #1E2030;
}
.comments-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #5C6E85;
}
.comments-panel-body {
  flex: 1;
  overflow-y: auto;
  background: #F6F6FA;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.comment-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}
.comment-bubble {
  flex: 1;
  background: #C1EFD9;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #000525;
  line-height: 1.5;
  opacity: 0.8;
  box-shadow: 0px 0.5px 4px rgba(96, 115, 138, 0.25);
}
.comment-bubble.reply {
  background: #fff;
}
.comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #486CD8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.comment-avatar.alt {
  background: #2638C4;
}
.comment-more-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: #5C6E85;
  flex-shrink: 0;
}
.comments-panel-footer {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid #F6F6FA;
}
.comments-input-wrap {
  width: 100%;
}
.comments-input-wrap textarea {
  width: 100%;
  min-height: 80px;
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 5px;
  padding: 12px;
  font-size: 14px;
  color: #000525;
  resize: vertical;
  font-family: inherit;
}
.comments-input-wrap textarea::placeholder {
  color: #5C6E85;
}
.comments-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.comments-btn-cancel {
  border: 2px solid #94A1B2;
  background: none;
  border-radius: 30px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #5C6E85;
  cursor: pointer;
  height: 32px;
}
.comments-btn-cancel:hover {
  background: #f6f6fa;
}
.comments-btn-submit {
  background: #486CD8;
  border: none;
  border-radius: 30px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  height: 32px;
}
.comments-btn-submit:hover {
  background: #2638C4;
}
/* Delete button styles */
.btn-danger-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #D6383A;
  background: none;
  color: #D6383A;
  border-radius: 28.6px;
  padding: 0.5rem 1.25rem;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-danger-outline:hover {
  background: rgba(214, 56, 58, 0.08);
}
/* Confirm dialog (Delete all programs, etc.) — matches screenshot */
.confirm-dialog {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 4px 40px rgba(96, 115, 138, 0.2);
  overflow: hidden;
}
.confirm-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px 20px;
  border-bottom: 1px solid #eef0f5;
}
.confirm-dialog-title {
  font-size: 22px;
  font-weight: 700;
  color: #000525;
  margin: 0;
}
.confirm-dialog-body {
  padding: 28px 32px;
}
.confirm-dialog-body p {
  font-size: 16px;
  color: #3D4A6B;
  margin: 0;
  line-height: 1.5;
}
.confirm-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 32px 24px;
  border-top: 1px solid #eef0f5;
}
.confirm-dialog-cancel {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  border: 1.5px solid #2638C4;
  border-radius: 28.6px;
  background: transparent;
  color: #2638C4;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.confirm-dialog-cancel:hover { background: rgba(38,56,196,0.06); }
.confirm-dialog-delete {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 28px;
  border: none;
  border-radius: 28.6px;
  background: #D6383A;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.confirm-dialog-delete:hover { background: #b82e30; }

.btn-delete-confirm {
  background: #D6383A;
  border: none;
  color: #fff;
  border-radius: 28.6px;
  padding: 8px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  height: 36px;
  display: flex;
  align-items: center;
}
.btn-delete-confirm:hover {
  background: #b82e30;
}

/* Program Information Modal */
.program-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 5, 37, 0.5);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.program-modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 1300px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 4px 40px rgba(96, 115, 138, 0.25);
}
.program-modal-layout {
  display: flex;
  height: 100%;
  max-height: 90vh;
}
.program-modal-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.program-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
  flex-shrink: 0;
}
.program-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #000525;
  margin: 0;
}
.program-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #5C6E85;
  padding: 4px;
}
.program-modal-close:hover {
  color: #000525;
}
.program-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 32px 24px;
}
/* Program title autocomplete */
.prog-title-wrap { position: relative; }
.prog-title-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(96,115,138,0.18);
  max-height: 220px;
  overflow-y: auto;
  z-index: 1200;
  margin-top: 2px;
}
.prog-title-suggestion {
  padding: 9px 14px;
  font-size: 14px;
  color: var(--nav-dark);
  cursor: pointer;
  line-height: 1.3;
}
.prog-title-suggestion:hover,
.prog-title-suggestion.active {
  background: var(--bg-light);
  color: var(--primary);
}
.prog-title-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.prog-title-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: prog-title-spin 0.6s linear infinite;
  display: inline-block;
}
@keyframes prog-title-spin {
  to { transform: rotate(360deg); }
}
.program-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  box-shadow: 0px 0.5px 35px rgba(96, 115, 138, 0.25);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   27. Warranty of Titles Modal
   ═══════════════════════════════════════════ */
.warranty-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 5, 37, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.warranty-modal {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0.5px 35px 0 rgba(96, 115, 138, 0.25);
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.warranty-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid #D5DDE7;
  flex-shrink: 0;
}
.warranty-modal-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #000525;
  margin: 0;
  line-height: 1.25;
}
.warranty-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #5C6E85;
  padding: 4px;
  border-radius: 4px;
}
.warranty-modal-close:hover {
  color: #000525;
}
.warranty-modal-body {
  padding: 24px 32px;
  overflow-y: auto;
  flex: 1;
}
.warranty-modal-body p {
  font-size: 14px;
  font-weight: 400;
  color: #000525;
  line-height: 1.5;
  margin: 0 0 16px;
}
.warranty-modal-body p:last-child {
  margin-bottom: 0;
}
.warranty-modal-footer {
  padding: 20px 32px;
  border-top: 1px solid #D5DDE7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.warranty-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #3D4A6B;
  -webkit-user-select: none;
  user-select: none;
}
.warranty-checkbox-label input[type="checkbox"] {
  display: none;
}
.warranty-checkbox-custom {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
/* .warranty-checkbox-custom checked — shared rule above */
.warranty-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.warranty-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 12px 24px;
  border: none;
  border-radius: 28.6px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background-color: var(--primary);
  cursor: pointer;
}
.warranty-submit-btn:hover {
  background-color: #0f1e8c;
}

/* ═══════════════════════════════════════════
   28. Add Royalty Year Modal
   ═══════════════════════════════════════════ */
.add-year-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 5, 37, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.add-year-modal {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0.5px 35px 0 rgba(96, 115, 138, 0.25);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  overflow: clip;
}
.add-year-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  height: 68px;
  border-bottom: 1px solid #D5DDE7;
  background: #fff;
}
.add-year-modal-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #000525;
  margin: 0;
  line-height: 1.25;
}
.add-year-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #5C6E85;
  padding: 4px;
  border-radius: 4px;
}
.add-year-modal-close:hover {
  color: #000525;
}
.add-year-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.add-year-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.add-year-label {
  font-size: 16px;
  font-weight: 700;
  color: #3D4A6B;
  line-height: 1.5;
}
.add-year-input {
  width: 100%;
  height: 47px;
  padding: 8px 12px;
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  color: #000525;
  background: #fff;
  outline: none;
}
.add-year-input::placeholder {
  color: #5C6E85;
}
.add-year-input:focus {
  border: 2px solid #5680ff;
  padding: 7px 11px;
}
.add-year-input.has-error {
  border-color: var(--red-alert);
}
.add-year-select-wrap {
  position: relative;
}
.add-year-modal .pbs-dd-wrap,
.add-year-modal .pbs-dd-trigger { height: 47px; }
.add-year-select {
  width: 100%;
  height: 47px;
  padding: 8px 12px;
  padding-right: 40px;
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  color: #5C6E85;
  background: #fff;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-appearance: none;
}
.add-year-select:focus {
  border: 2px solid #5680ff;
  padding: 7px 11px;
  padding-right: 39px;
}
.add-year-select.has-error {
  border-color: var(--red-alert);
}
.add-year-select option:not([value=""]) {
  color: #000525;
}
.add-year-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
}
.add-year-error {
  font-size: 0.8rem;
  color: var(--red-alert);
  line-height: 1.5;
  margin: 4px 0 0;
  display: none;
}
.add-year-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #D5DDE7;
}
.add-year-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 12px 24px;
  border: none;
  border-radius: 28.6px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background-color: var(--primary);
  cursor: pointer;
}
/* :disabled only covers the in-flight POST lock — field validation is
   handled by the click guard's inline error messages, button stays blue. */
.add-year-submit-btn:disabled {
  color: var(--text-light);
  background-color: var(--slate);
  cursor: not-allowed;
}
.add-year-submit-btn:not(:disabled):hover {
  background-color: #0f1e8c;
}

/* ══════════════════════════════════════════
   31. REGISTER PAGE
   ══════════════════════════════════════════ */
.register-page {
  background: linear-gradient(135deg, #0f1e8c 0%, #080d2f 96%);
  min-height: 100vh;
  padding: 40px 64px 80px;
  box-sizing: border-box;
}
.register-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.register-breadcrumb a {
  color: #c0cbda;
  text-decoration: none;
}
.register-breadcrumb a:hover { text-decoration: underline; }
.register-breadcrumb .sep { color: #94a1b2; }
.register-breadcrumb .current { color: #fff; }
.register-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.register-form-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.register-form-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
}
.register-sidebar {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.register-sidebar-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 24px;
  color: #fff;
}
.register-sidebar-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}
.register-sidebar-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.register-sidebar-item:last-child { margin-bottom: 0; }
.register-sidebar-icon {
  width: 32px;
  height: 32px;
  background: #486cd8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.register-sidebar-icon svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.register-sidebar-text h4 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}
.register-sidebar-text p {
  font-size: 14px;
  color: #c0cbda;
  margin: 0;
  line-height: 1.25;
}
.register-form-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--nav-dark);
  margin-bottom: 8px;
}
.register-form-desc {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.5;
  margin-bottom: 4px;
}
.register-required-note {
  font-size: 14px;
  color: var(--red-alert);
  text-align: right;
  margin-bottom: 32px;
}
.register-field-group {
  margin-bottom: 16px;
}
.register-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-gray);
  margin-bottom: 8px;
}
.register-field-label svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--blue-gray);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.register-field-label .req { color: var(--red-alert); margin-left: 1px; }

/* Form inputs: bg white, border rgba(148,161,178,0.6), h-47, rounded-5, px-12 py-8 */
.register-form-card input[type="text"],
.register-form-card input[type="email"],
.register-form-card input[type="tel"],
.register-form-card input[type="password"],
.register-form-card select,
.register-form-card textarea {
  width: 100%;
  height: 47px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid rgba(148,161,178,0.6);
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  color: var(--nav-dark);
  box-sizing: border-box;
  transition: border-color 0.15s;
}
/* Hover: bg rgba(246,246,250,0.5) — Figma State=Hover */
.register-form-card input[type="text"]:hover,
.register-form-card input[type="email"]:hover,
.register-form-card input[type="tel"]:hover,
.register-form-card input[type="password"]:hover,
.register-form-card select:hover,
.register-form-card textarea:hover {
  background: rgba(246,246,250,0.5);
}
/* Focus/Selected: bg #fff, border 2px #5680FF — Figma State=Selected */
.register-form-card input:focus:not(.pbs-dd-search):not([type="checkbox"]),
.register-form-card select:focus,
.register-form-card textarea:focus {
  outline: none;
  background: #fff;
  border: 2px solid #5680FF;
}
.register-form-card input::placeholder,
.register-form-card textarea::placeholder { color: #5C6E85; }
/* Error: border 1px #D6383A — Figma State=Error */
.register-form-card input.is-invalid,
.register-form-card select.is-invalid,
.register-form-card textarea.is-invalid { border: 1px solid #D6383A; }
/* Disabled: bg #D5DDE7 — Figma State=Disabled */
.register-form-card input:disabled,
.register-form-card select:disabled,
.register-form-card textarea:disabled {
  background: #D5DDE7;
  cursor: not-allowed;
  opacity: 1;
}
.register-form-card textarea { height: auto; min-height: 120px; resize: vertical; padding: 12px; }
/* Select arrow */
.register-form-card select {
  -webkit-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232638C4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.register-form-section {
  margin-bottom: 40px;
}
.register-row {
  display: flex;
  gap: 16px;
}
.register-row > .register-field-group { flex: 1; min-width: 0; }
/* Radio select buttons */
.register-radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  overflow: visible;
}
.register-radio-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--baby-blue);
  border: 2px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  color: var(--nav-dark);
  font-family: inherit;
  font-weight: 400;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
  overflow: visible;
}
.register-radio-btn:hover,
.register-radio-btn:focus {
  background: #fff !important;
  border-color: #5680FF !important;
  outline: none;
}
.register-radio-btn.selected {
  background: #fff;
  border: 2.5px solid #5680FF;
  color: var(--primary);
  font-weight: 700;
}
.register-radio-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(148,161,178,0.6);
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
/* Hover: circle gets blue tint bg + blue border (same as add_user) */
.register-radio-btn:hover .register-radio-circle,
.register-radio-btn:focus .register-radio-circle {
  background: rgba(72,108,216,0.1);
  border-color: #2638C4;
}
/* Selected: PBS blue bg + white checkmark SVG */
.register-radio-btn.selected .register-radio-circle {
  background: var(--primary);
  border-color: var(--primary);
}
.register-radio-btn.selected .register-radio-circle svg {
  display: block;
}
.register-radio-circle svg {
  display: none;
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.register-radio-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #5C6E85;
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: center;
  width: 258px;
  z-index: 10;
  white-space: normal;
  pointer-events: none;
}
.register-radio-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--slate);
}
.register-radio-btn:hover .register-radio-tooltip { display: block; }
/* pw eye toggle */
.register-pw-wrap { position: relative; }
.register-pw-wrap input { padding-right: 44px; }
.register-pw-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-light);
  display: flex;
  align-items: center;
}
.register-pw-eye:hover { color: var(--primary); }
.register-pw-eye svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Terms */
.register-terms-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-gray);
  margin-bottom: 8px;
}
.register-terms-body {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.5;
  margin-bottom: 12px;
}
.register-terms-body a { color: var(--primary); }
.register-agree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--charcoal);
}
.register-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}
.register-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 10px 24px;
  border: none;
  border-radius: 28.6px;
  font-size: 16px;
  font-weight: 700;
  background: var(--slate);
  color: #94a1b2;
  cursor: not-allowed;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.register-submit-btn.active {
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}
.register-submit-btn.active:hover { background: var(--dark-blue); }
/* help link */
.register-help-link {
  color: var(--teal);
  text-decoration: underline;
}
.register-help-link:hover { color: #fff; }

/* PBS Member Station checkbox row */
.register-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1E2030;
  cursor: pointer;
  line-height: 21px;
}
.register-checkbox-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(148,161,178,0.6);
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-appearance: none;
}
/* .register-checkbox-row input:checked — shared rule above */

/* Contact Royalties Support button: border-2 white, rounded pill */
.register-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 10px 24px;
  border: 2px solid #fff;
  border-radius: 28.6px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: transparent;
  transition: background 0.15s;
}
.register-contact-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  text-decoration: none;
}
/* responsive */
@media (max-width: 991px) {
  .register-page { padding: 24px 24px 48px; }
  .register-layout { flex-direction: column; }
  .register-sidebar { width: 100%; }
  .register-row { flex-direction: column; gap: 0; }
}

/* ══════════════════════════════════════════
   34. ROYALTY YEAR DETAIL PAGE
   ══════════════════════════════════════════ */
.ryd-header-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ryd-title-card {
  background: #F6F6FA;
  border-radius: 16px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 280px;
  max-width: 538px;
  flex-shrink: 0;
}
.ryd-title {
  font-size: 30px;
  font-weight: 700;
  color: #363846;
  line-height: 1.25;
  margin: 0;
}
.ryd-status-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(148, 161, 178, 0.4);
  border-radius: 12px;
  padding: 16px;
  min-height: 56px;
  flex-wrap: wrap;
}
.ryd-status-label {
  font-size: 14px;
  color: #3D4A6B;
  line-height: 1.5;
  flex-shrink: 0;
}
.ryd-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  color: #fff;
  border: 1.2px solid;
}
.ryd-status-open {
  background: #087B45;
  border-color: #087B45;
}
.ryd-status-closed {
  background: #FFBBAD;
  border-color: #FFBBAD;
  color: #000525;
}
.ryd-edit-link {
  color: #3D4A6B;
  display: inline-flex;
  align-items: center;
}
.ryd-edit-link:hover { color: var(--primary); }
.ryd-metrics-row {
  display: flex;
  flex: 1;
  gap: 16px;
  flex-wrap: wrap;
  align-items: stretch;
}
.ryd-metric-card {
  background: #F6F6FA;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  min-width: 120px;
  flex: 1;
}
.ryd-metric-label {
  font-size: 14px;
  font-weight: 700;
  color: #000525;
  line-height: 1.5;
}
.ryd-metric-value {
  font-size: 22px;
  font-weight: 700;
  color: #2638C4;
  line-height: 1.25;
}
.ryd-actions {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
/* Tab bar — reuses btn-pill shape, active tab has filled primary style */
.ryd-tab-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 2px solid #eef0f5;
  padding-bottom: 0;
  margin-bottom: 0;
}
.ryd-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 4px 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  background: none;
  color: var(--primary, #2638C4);
  transition: background 0.15s, color 0.15s;
  position: relative;
  bottom: -2px;
}
.ryd-tab:hover:not(:disabled) {
  background: #eef0f5;
}
.ryd-tab-panel .btn-pill:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ryd-tab.active {
  background: #fff;
  color: var(--primary, #2638C4);
  border-color: #eef0f5;
  border-bottom-color: #fff;
}
.ryd-tab-panel {
  display: none;
  border: 1px solid #eef0f5;
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 20px;
  background: #fff;
}
.ryd-tab-panel.active {
  display: block;
}
@media (max-width: 768px) {
  .ryd-header-row { flex-direction: column; }
  .ryd-title-card { max-width: 100%; }
  .ryd-metrics-row { flex-direction: column; }
  .ryd-actions { flex-direction: column; }
}

/* ══════════════════════════════════════════
   35. DROPDOWN SEARCH (Multi-select filter)
   Implements all 8 states from Figma 2280:15965
   ══════════════════════════════════════════ */

/* ── Trigger button ── */
.dds-wrap {
  position: relative;
  display: inline-block;
}
.dds-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 33px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid rgba(148,161,178,0.6);
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.25;
  color: #5C6E85;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
  font-family: inherit;
  font-weight: 400;
  width: 100%;
  outline: none;
}
.dds-trigger:hover { border-color: var(--primary); }
.dds-trigger.dds-active { border: 2px solid #5680FF; padding: 0 9px; }
.dds-trigger.dds-has-value { border-color: #2638C4; color: #000525; font-weight: 700; }
.dds-trigger.dds-disabled { opacity: 0.6; cursor: not-allowed; }
.dds-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.dds-trigger-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #2638C4;
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
/* Chevron ▼ arrow — gray default, blue when active or has value */
.dds-arrow {
  flex-shrink: 0;
  width: 10px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%235C6E85' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.15s;
}
.dds-trigger.dds-active .dds-arrow,
.dds-trigger.dds-has-value .dds-arrow {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%232638C4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}
.dds-trigger.dds-active .dds-arrow { transform: rotate(180deg); }

/* ── Panel (white card with shadow, border-radius 12px) ── */
.dds-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 300;
  width: 237px;
  background: #fff;
  border: 1px solid #C0CBDA;
  border-radius: 12px;
  box-shadow: 0 0.5px 35px rgba(96,115,138,0.25);
  overflow: hidden;
  flex-direction: column;
}
.dds-panel.dds-open { display: flex; }

/* ── Search input area (#EEF0F5 bg, top-rounded) ── */
.dds-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #EEF0F5;
  border-radius: 12px 12px 0 0;
  flex-shrink: 0;
  /* State=Default: no border */
}
/* State=Search-Focused: 2px #486CD8 border */
.dds-search-wrap.dds-search-focused {
  border: 2px solid #486CD8;
  padding: 14px;  /* compensate for 2px border */
}
/* State=Search-Active (filled value) */
.dds-search-wrap.dds-search-filled {
  /* same as default, value shown in input */
}
.dds-search-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5C6E85;
}
.dds-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: #000525;
  outline: none;
  min-width: 0;
  line-height: 1.25;
}
.dds-search-input::placeholder { color: #5C6E85; }
/* Blinking cursor for focused state */
.dds-search-wrap.dds-search-focused .dds-search-input { caret-color: #2638C4; }
.dds-search-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  color: #5C6E85;
  width: 24px;
  height: 24px;
  justify-content: center;
}
.dds-search-clear:hover { color: #000525; }

/* ── List rows ── */
.dds-list {
  overflow-y: auto;
  max-height: 200px;
  flex: 1;
}
/* Default row */
.dds-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid #EEF0F5;
  font-size: 14px;
  font-weight: 400;
  color: #000525;
  cursor: pointer;
  background: #fff;
  -webkit-user-select: none;
  user-select: none;
}
/* Row-Hover: #F6F6FA bg, checkbox gets blue hover tint */
.dds-row.dds-row-hover { background: #EEF0F5; }
/* Item-Selected / All-Selected row: #DFE2ED bg */
.dds-row.dds-row-selected { background: #DFE2ED; }
/* Disabled row */
.dds-row.dds-row-disabled {
  background: #EEF0F5;
  color: #94A1B2;
  cursor: not-allowed;
  pointer-events: none;
}
.dds-row-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

/* ── Checkbox (24×24, border-radius 4px) ── */
.dds-checkbox {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(148,161,178,0.6);
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, border-color 0.1s;
}
/* Hover state: light blue tint + blue border */
.dds-row.dds-row-hover .dds-checkbox:not(.dds-checked):not(.dds-indeterminate) {
  background: rgba(72,108,216,0.1);
  border-color: #2638C4;
  border-width: 1px;
}
/* Search-Focused: thicker border on unchecked */
.dds-search-wrap.dds-search-focused ~ .dds-list .dds-checkbox:not(.dds-checked) {
  border: 1.5px solid #94A1B2;
}
/* .dds-checkbox.dds-checked — shared rule above */
/* Indeterminate: blue bg + white dash */
.dds-checkbox.dds-indeterminate {
  background: #2638C4;
  border-color: #2638C4;
}
/* Disabled unchecked: #EEF0F5 bg */
.dds-checkbox.dds-checkbox-disabled {
  background: #EEF0F5;
  border-color: rgba(148,161,178,0.6);
}

/* ── Empty state (search-empty) ── */
.dds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px;
  color: #5C6E85;
  font-size: 13px;
  line-height: 1.5;
}
.dds-empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #EEF0F5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Actions footer (Filter + Clear) ── */
.dds-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px;
  flex-shrink: 0;
}
/* Filter button: blue outline pill */
.dds-btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 6px 12px;
  border: 1px solid #2638C4;
  border-radius: 28.6px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #2638C4;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.25;
}
.dds-btn-filter:hover { background: rgba(38,56,196,0.05); }
/* Disabled state: grey */
.dds-panel .dds-btn-filter[disabled],
.dds-btn-filter.dds-btn-disabled {
  border-color: #94A1B2;
  color: #94A1B2;
  cursor: not-allowed;
}
/* Clear button: grey 2px outline → red 1px when active */
.dds-btn-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 6px 12px;
  border: 2px solid #94A1B2;
  border-radius: 28.6px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #94A1B2;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.25;
}
/* When items are selected: red border+text */
.dds-btn-clear.dds-clear-active {
  border: 1px solid #D6383A;
  color: #D6383A;
}
.dds-btn-clear:hover { background: rgba(148,161,178,0.08); }
.dds-btn-clear.dds-clear-active:hover { background: rgba(214,56,58,0.04); }

/* Program Submission filter bar — equal-width flex dropdowns */
.ps-filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
/* Used by program-submission's filter line and dashboard's users row (not by the dead
   .ps-filters-bar above it). Was `flex: 2; min-width: 0`; the `min-width: 0` is what let
   the search collapse outright — measured 0px at 375px and 68px at 768px on
   program-submission, and 20px on dashboard's users row. Dropping it lets the 180px floor
   on .filter-search apply, so the field wraps to its own line instead of shrinking under
   its placeholder.

   The basis stays at 0 (`flex: 2` is `2 1 0%`) on purpose. Giving it the 432px basis from
   .filter-search instead would make the search hold its full desktop width at 1440 and
   take 39px off each pill on this row, which pushed the pills to their 150px floor and
   clipped two of the four labels. Grow-from-zero keeps the desktop split as designed. */
.ps-filter-search {
  flex: 2 1 0%;
}
.ps-filters-bar .dds-wrap {
  flex: 1;
  min-width: 0;
}

/* ══════════════════════════════════════════
   36. TIMELINE CARD CONTEXT MENU + TOAST
   ══════════════════════════════════════════ */
.tc-context-menu {
  position: absolute;
  z-index: 500;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 6px;
  box-shadow: 0 4px 7.5px rgba(0,0,0,0.25);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 134px;
}
/* Pointer caret at top-left matching Figma */
.tc-context-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 16px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid rgba(255,255,255,0.8);
  filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.08));
}
.tc-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: none;
  background: none;
  font-size: 16px;
  font-family: inherit;
  color: #000525;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
  line-height: 1.5;
}
.tc-menu-edit { background: none; color: #000525; }
.tc-menu-edit:hover { background: #EEF0F5; color: #2638C4; }
.tc-menu-item:hover { background: #EEF0F5; }
/* Delete is dark (#000525), not red */
.tc-menu-delete { color: #000525; }
.tc-menu-delete:hover { background: #EEF0F5; }

/* Fixed overlay backdrop for dashboard card modal */
.tc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Toast — blurred dark pill, bottom-right */
.tc-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
  background: rgba(61,74,107,0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 6px;
  box-shadow: 0 0.5px 35px rgba(0,5,37,0.5);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  max-width: 440px;
  text-align: center;
}
.tc-toast-error { background: rgba(214,56,58,0.85); }
.tc-toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  opacity: 0.7;
}
.tc-toast-close:hover { opacity: 1; }

/* ── Dashboard success toast (Figma node 1635:38140) ── */
.dash-toast-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}
.dash-toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #E9EFEC;
  border-radius: 12px;
  padding: 12px 16px;
  width: 580px;
  max-width: calc(100vw - 32px);
  min-width: 320px;
  font-size: 14px;
  font-family: inherit;
  color: #000525;
  line-height: 1.5;
}
.dash-toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-toast-msg { flex: 1; min-width: 0; }
.dash-toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  color: var(--green);
}
.dash-toast--error { background: #FDE8E8; }
.dash-toast--error .dash-toast-icon svg circle { stroke: #D6383A; }
.dash-toast--error .dash-toast-icon svg path { stroke: #D6383A; }
.dash-toast--error .dash-toast-close { color: #D6383A; }

/* ══════════════════════════════════════════
   Ann Overlay / Modal (shared modal system)
   ══════════════════════════════════════════ */
.ann-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
  animation: ann-fade-in 0.2s ease-out;
}
.ann-overlay[hidden] { display: none; }
@keyframes ann-fade-in { from { opacity: 0; } to { opacity: 1; } }

.ann-modal {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0.5px 35px 0 rgba(96,115,138,0.25);
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  animation: ann-scale-in 0.2s ease-out;
}
@keyframes ann-scale-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.ann-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #d5dde7;
  flex-shrink: 0;
}
.ann-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #000525;
  line-height: 1.25;
  margin: 0;
}
.ann-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #5c6e85;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  line-height: 0;
}
.ann-modal-close:hover { color: #000525; }
.ann-modal-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ann-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ann-field { display: flex; flex-direction: column; gap: 8px; }
.ann-label { font-size: 16px; font-weight: 700; color: #3d4a6b; line-height: 1.5; }
.ann-required { color: #d6383a; margin-left: 1px; }
.ann-input {
  width: 100%;
  height: 33px;
  border: 1px solid rgba(148,161,178,0.6);
  border-radius: 5px;
  padding: 9px 13px;
  font-size: 14px;
  font-family: inherit;
  color: #000525;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.ann-input::placeholder { color: #5c6e85; }
.ann-input:disabled { background: var(--gray-lighter); cursor: not-allowed; }
.ann-input:focus { border: 2px solid var(--primary); padding: 8px 12px; }
input[type="date"].ann-input { color: #000525; }
input[type="date"].ann-input::-webkit-datetime-edit { color: #000525; }
.ann-input.rymodal-input-error { border: 1px solid var(--red-alert); }
.ann-input.rymodal-input-error:focus { border: 2px solid var(--red-alert); padding: 7px 11px; }
.ann-field-error { font-size: 0.8rem; color: var(--red-alert); line-height: 1.5; padding-bottom: 8px; padding-top: 1px; display: none; }
.ann-field-error.show { display: block; }

.ann-select-wrap { position: relative; }
.ann-select {
  width: 100%;
  height: 33px;
  border: 1px solid rgba(148,161,178,0.6);
  border-radius: 5px;
  padding: 9px 36px 9px 13px;
  font-size: 14px;
  font-family: inherit;
  color: #000525;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.ann-select:focus { border: 2px solid var(--primary); padding: 8px 35px 8px 12px; }
.ann-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}
/* When initCustomDropdown wraps the select, hide the static arrow to prevent doubling */
.ann-select-wrap > .pbs-dd-wrap ~ .ann-select-arrow { display: none; }
.ann-textarea-wrap { position: relative; }
.ann-textarea {
  width: 100%;
  min-height: 100px;
  border: 1px solid rgba(148,161,178,0.6);
  border-radius: 5px;
  padding: 12px 12px 32px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #000525;
  background: #fff;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s;
  box-sizing: border-box;
  display: block;
}
.ann-textarea::placeholder { color: #5c6e85; }
.ann-textarea:focus { border: 2px solid var(--primary); padding: 11px 11px 31px 11px; }
.ann-char-count {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 13px;
  color: #5c6e85;
  line-height: 1.25;
  pointer-events: none;
}
.ann-help-text { font-size: 13px; color: #000525; line-height: 1.25; margin: 0; }

.ann-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 14px;
  border-top: 1px solid #d5dde7;
  flex-shrink: 0;
}
.ann-btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 8px 20px;
  border: 1px solid var(--primary);
  border-radius: 28.6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.ann-btn-cancel:hover { background: rgba(38,56,196,0.05); }
.ann-btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 10px 24px;
  background: var(--primary);
  border: none;
  border-radius: 28.6px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.ann-btn-save:hover { background: #0f1e8c; }
.ann-btn-save:disabled { opacity: 0.65; cursor: not-allowed; }
.ann-btn-danger { background: #d6383a !important; }
.ann-btn-danger:hover:not(:disabled) { background: #b02a2c !important; }

/* ══════════════════════════════════════════
   30. CONTACT PAGE
   ══════════════════════════════════════════ */
.contact-page-bg {
  background: linear-gradient(-34.38deg, #0f1e8c 0%, #080d2f 96.49%);
  min-height: calc(100vh - var(--header-h));
  padding: 40px 65px 80px;
}

.contact-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: normal;
  margin-bottom: 16px;
  font-family: inherit;
  max-width: 1310px;
  margin-left: auto;
  margin-right: auto;
}
.contact-breadcrumb-home { color: #c0cbda; text-decoration: none; }
.contact-breadcrumb-home:hover { color: #fff; }
.contact-breadcrumb-sep { color: #94a1b2; }
.contact-breadcrumb-current { color: #fff; }

.contact-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 1310px;
  margin: 0 auto;
}

.contact-form-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  flex: 1;
  min-width: 0;
  max-width: 886px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact-form-card h1 {
  font-size: 30px;
  font-weight: 700;
  color: #000525;
  line-height: 1.25;
  margin: 0;
  padding: 10px 0;
}

.contact-desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-desc p { font-size: 14px; color: #5c6e85; line-height: 1.5; margin: 0; }
.contact-desc a { color: #2638c4; text-decoration: underline; }
.contact-desc a:hover { color: #0f1e8c; }

/* Alert banner */
.contact-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #faefef;
  border-radius: 16px;
  padding: 16px;
  overflow: hidden;
}
.contact-alert-icon { flex-shrink: 0; color: #d6383a; display: flex; align-items: flex-start; }
.contact-alert-body {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.contact-alert-text { flex: 1; font-size: 16px; color: #000525; line-height: 1.5; margin: 0; }
.contact-alert-close {
  background: none; border: none; cursor: pointer;
  color: #d6383a; padding: 0; display: flex; align-items: center; flex-shrink: 0;
  width: 16px; height: 16px;
}
.contact-alert-close:hover { opacity: 0.7; }

/* Form fields */
.contact-form-fields { display: flex; flex-direction: column; gap: 16px; }
.contact-form-row { display: flex; gap: 16px; }
.contact-form-row .contact-field { flex: 1; min-width: 0; }
.contact-field { display: flex; flex-direction: column; }
.contact-field-zip { width: 252px; flex: none; }

.contact-label {
  font-size: 16px; font-weight: 700; color: #3d4a6b;
  line-height: 1.5; margin-bottom: 8px; display: block;
}
.contact-label .req { color: #d6383a; }

.contact-input,
.contact-select {
  width: 100%; height: 47px; padding: 8px 12px;
  border: 1px solid rgba(148,161,178,0.6); border-radius: 5px;
  font-size: 14px; font-family: inherit; color: #000525;
  background: #fff; outline: none; transition: border-color 0.2s;
  box-sizing: border-box;
}
/* initCustomDropdown replaces .contact-select with .pbs-dd-trigger — match input height */
.contact-form-card .pbs-dd-wrap,
.contact-form-card .pbs-dd-trigger { height: 47px; }
.contact-input::placeholder { color: #5c6e85; }
.contact-input:focus,
.contact-select:focus {
  border: 2px solid #5680ff; padding: 7px 11px; outline: none;
}

.contact-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232638c4' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px; cursor: pointer;
}
.contact-select:focus { padding: 7px 35px 7px 11px; }

.contact-input.rymodal-input-error,
.contact-select.rymodal-input-error,
.contact-textarea.rymodal-input-error { border-color: var(--red-alert) !important; }
.contact-input.rymodal-input-error:focus,
.contact-select.rymodal-input-error:focus,
.contact-textarea.rymodal-input-error:focus { border: 2px solid var(--red-alert); padding: 7px 11px; }

/* Textarea */
.contact-textarea-wrap { position: relative; }
.contact-textarea {
  width: 100%; min-height: 100px; padding: 16px 12px 28px;
  border: 1px solid rgba(148,161,178,0.6); border-radius: 5px;
  font-size: 14px; font-family: inherit; color: #000525;
  background: #fff; outline: none; resize: vertical;
  transition: border-color 0.2s; box-sizing: border-box; display: block;
}
.contact-textarea::placeholder { color: #5c6e85; }
.contact-textarea:focus { border: 2px solid #5680ff; padding: 15px 11px 27px; outline: none; }
.contact-textarea.rymodal-input-error:focus { border: 2px solid var(--red-alert); padding: 15px 11px 27px; }
.contact-char-count {
  position: absolute; bottom: 8px; left: 12px;
  font-size: 13px; color: #5c6e85; line-height: 1.25; pointer-events: none;
}

/* Submit */
.contact-form-actions { display: flex; justify-content: flex-end; }
.btn-contact-submit {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 10px 24px; background: #5c6e85;
  border: none; border-radius: 28.6px; font-size: 16px; font-weight: 700;
  color: #94a1b2; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s;
}
.btn-contact-submit.enabled { background: var(--primary); color: #fff; }
.btn-contact-submit.enabled:hover { background: var(--dark-blue); }

/* FAQs sidebar */
.contact-faqs-card {
  width: 400px; flex-shrink: 0;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 24px;
  display: flex; flex-direction: column; gap: 24px;
  align-self: flex-start;
}
.contact-faqs-card h3 {
  font-size: 20px; font-weight: 700; color: #fff;
  line-height: 1.25; margin: 0; padding: 6px 0;
}
.contact-faqs-desc { font-size: 14px; color: #c0cbda; line-height: 1.25; margin: 0; }
.contact-faqs-desc a { color: #c0cbda; text-decoration: underline; }
.contact-faqs-desc a:hover { color: #fff; }
.contact-faq-items { display: flex; flex-direction: column; gap: 24px; }
.contact-faq-item { border-bottom: 1px solid #5c6e85; padding-bottom: 32px; width: 100%; }
.contact-faq-row { display: flex; align-items: center; gap: 16px; }
.contact-faq-question {
  flex: 1; font-size: 16px; font-weight: 700; color: #fff;
  line-height: 1.25; margin: 0;
}
.contact-faq-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.05);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; padding: 0; transition: background 0.15s;
}
.contact-faq-btn:hover { background: rgba(255,255,255,0.15); }
.contact-faq-answer {
  font-size: 14px; color: #eef0f5; line-height: 1.5;
  margin-top: 22px;
}
.contact-faq-item[data-open] .contact-faq-answer { display: block; }
.btn-contact-faqs {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  padding: 10px 24px; background: transparent;
  border: 2px solid #fff; border-radius: 28.6px;
  font-size: 16px; font-weight: 700; color: #fff; line-height: 1.25;
  cursor: pointer; font-family: inherit; text-decoration: none; transition: background 0.15s;
  white-space: nowrap;
}
.btn-contact-faqs:hover { background: rgba(255,255,255,0.15); color: #fff; text-decoration: none; }

@media (max-width: 992px) {
  .contact-page-bg { padding: 24px 24px 60px; }
  .contact-layout { flex-direction: column; }
  .contact-form-card { width: 100%; max-width: 100%; box-sizing: border-box; }
  .contact-faqs-card { width: 100%; margin-top: 0; box-sizing: border-box; }
  .contact-field-zip { width: 100%; }
}
@media (max-width: 768px) {
  .contact-page-bg { padding: 16px 16px 40px; }
  .contact-form-card { padding: 24px; gap: 24px; }
  .contact-form-row { flex-direction: column; }
}

/* ══════════════════════════════════════════
   UNIVERSAL ICON BUTTON TOOLTIP
   Applies to every button with an aria-label attr
   ══════════════════════════════════════════ */
.icon-btn[aria-label],
.filter-action-btn[aria-label],
.banner-badge-action[aria-label],
.btn-circle[aria-label],
.profile-edit-icon[aria-label],
.episode-action-btn[aria-label],
.admin-comments-edit-btn[aria-label],
.forms-add-btn[aria-label],
.ryd-edit-link[aria-label],
#upload-info-btn[aria-label] {
  position: relative;
}
/* tooltip pill */
.icon-btn[aria-label]:hover::before,
.filter-action-btn[aria-label]:hover::before,
.banner-badge-action[aria-label]:hover::before,
.btn-circle[aria-label]:hover::before,
.profile-edit-icon[aria-label]:hover::before,
.episode-action-btn[aria-label]:hover::before,
.admin-comments-edit-btn[aria-label]:hover::before,
.forms-add-btn[aria-label]:hover::before,
.ryd-edit-link[aria-label]:hover::before,
#upload-info-btn[aria-label]:hover::before {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #5c6e85;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  font-family: "PBS Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.25;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 9999;
}
/* tooltip arrow */
.icon-btn[aria-label]:hover::after,
.filter-action-btn[aria-label]:hover::after,
.banner-badge-action[aria-label]:hover::after,
.btn-circle[aria-label]:hover::after,
.profile-edit-icon[aria-label]:hover::after,
.episode-action-btn[aria-label]:hover::after,
.admin-comments-edit-btn[aria-label]:hover::after,
.forms-add-btn[aria-label]:hover::after,
.ryd-edit-link[aria-label]:hover::after,
#upload-info-btn[aria-label]:hover::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #5c6e85;
  pointer-events: none;
  z-index: 10000;
}
/* Duplicate/Delete (data-tip) use their own JS tooltip (#ep-action-tip in
   submission_detail.js) — it stood in for this pill while .episode-entry
   clipped it with overflow:hidden. Now that overflow is gone (it was also
   clipping dropdown lists), suppress the pill here so the two tooltips
   don't double up. Scoped to [data-tip] only — the owner/cast Remove
   buttons have no JS tooltip and must keep this pill as their only label. */
.episode-action-btn[data-tip]:hover::before,
.episode-action-btn[data-tip]:hover::after {
  content: none;
}

/* ══════════════════════════════════════════
   30. CUSTOM CALENDAR PICKER (Figma 3855:33361)
   ══════════════════════════════════════════ */
.pbs-cal {
  display: none;
  position: fixed;
  z-index: 9999;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 0.5px 17.5px rgba(96, 115, 138, 0.25);
  width: 294px;
  font-family: "PBS Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}
.pbs-cal-inner { display: flex; flex-direction: column; gap: 24px; padding: 16px 0; }
.pbs-cal-header { border-bottom: 1px solid #D5DDE7; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.pbs-cal-nav { width: 100%; }

/* Nav row */
.pbs-cal-nav { display: flex; align-items: center; justify-content: space-between; }
.pbs-cal-title {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 16px; font-weight: 700; color: #000525; line-height: 1.5;
}
.pbs-cal-title--plain { cursor: default; }
.pbs-cal-title svg { flex-shrink: 0; }
.pbs-cal-arrows { display: flex; align-items: center; gap: 16px; }
.pbs-cal-arrow { background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.pbs-cal-arrow:hover { background: #EEF0F5; }

/* Day-of-week header */
.pbs-cal-dow { display: grid; grid-template-columns: repeat(7, 32px); }
.pbs-cal-dow span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 12px; font-weight: 700; color: #000525; }

/* Day grid */
.pbs-cal-grid { display: grid; grid-template-columns: repeat(7, 32px); gap: 0; }
.pbs-cal-day {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 400; color: #000525; background: none; border: none;
  border-radius: 50%; cursor: pointer; font-family: inherit; padding: 0;
}
.pbs-cal-day:hover:not(.pbs-cal-day--other):not(.pbs-cal-day--selected) { background: #EEF0F5; }
.pbs-cal-day--other { color: #5C6E85; cursor: default; pointer-events: none; }
.pbs-cal-day--today { font-weight: 700; color: #2638C4; }
.pbs-cal-day--selected { background: #2638C4; color: #fff; border: 1px solid #5C6E85; }

/* Month grid */
.pbs-cal-months-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.pbs-cal-month {
  height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 400; color: #000525; background: none; border: none;
  border-radius: 24px; cursor: pointer; font-family: inherit; padding: 0 16px;
}
.pbs-cal-month:hover { background: #EEF0F5; }
.pbs-cal-month--selected { background: #D5DDE7; }

/* Year grid */
.pbs-cal-years-grid { display: grid; grid-template-columns: repeat(4, 62px); gap: 2px 0; }
.pbs-cal-year {
  height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 400; color: #000525; background: none; border: none;
  border-radius: 24px; cursor: pointer; font-family: inherit; padding: 0 4px;
}
.pbs-cal-year:hover { background: #EEF0F5; }
.pbs-cal-year--selected { background: #D5DDE7; }

/* Footer */
.pbs-cal-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
.pbs-cal-btn-clear {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid #D6383A; border-radius: 28.6px;
  background: none; cursor: pointer; padding: 6px 12px;
  font-size: 13px; font-weight: 700; color: #D6383A; font-family: inherit;
}
.pbs-cal-btn-clear:hover { background: rgba(214,56,58,0.06); }
.pbs-cal-btn-today {
  border: 1px solid #2638C4; border-radius: 28.6px;
  background: none; cursor: pointer; padding: 6px 12px;
  font-size: 13px; font-weight: 700; color: #2638C4; font-family: inherit;
}
.pbs-cal-btn-today:hover { background: rgba(38,56,196,0.06); }

/* Date filter trigger button (replaces native <input type="date">) */
.extra-filter-wrap--date { gap: 6px; }
.extra-filter-date-trigger {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: "PBS Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; color: #5c6e85; white-space: nowrap; min-width: 90px;
  text-align: left;
}
.extra-filter-date-trigger.has-value { color: #2638c4; font-weight: 600; }
.extra-filter-date-trigger:hover { color: #2638c4; }

/* ── Global: suppress browser default select arrow on all portal selects ── */
select.form-input-custom,
select.form-control,
select#upload-table,
select#ds-period-filter,
select#ary-status,
select#ary-edit-status {
  -webkit-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232638c4' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ── % of Royalty spinner — Figma node 993:13777 ── */
.pct-spinner-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.pct-spinner-wrap .pct-spinner-input {
  padding-right: 36px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pct-spinner-wrap .pct-spinner-input::-webkit-outer-spin-button,
.pct-spinner-wrap .pct-spinner-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pct-spinner-arrows {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pct-arrow {
  width: 24px;
  height: 14px;
  background: #fff;
  border: 1px solid rgba(148, 161, 178, 0.6);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.pct-arrow img {
  width: 5px;
  height: 9px;
  display: block;
}
.pct-up img { transform: rotate(90deg); }
.pct-down img { transform: rotate(-90deg); }
.pct-arrow:hover { background: #eef0f5; border-color: #2638c4; }

/* ══════════════════════════════════════════
   Program Library Modal (Figma 2695:41368)
   ══════════════════════════════════════════ */
.pl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
  animation: ann-fade-in 0.2s ease-out;
}
.pl-overlay[hidden] { display: none; }
.pl-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0.5px 35px 0 rgba(96,115,138,0.25);
  width: 100%;
  max-width: 1240px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #d5dde7;
}
.pl-modal-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #000525;
  margin: 0;
}
.pl-modal-body {
  padding: 24px;
  flex: 1;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pl-modal > .pagination-wrapper {
  border-top: 1px solid var(--gray-lighter);
  margin-top: 0;
  padding: 16px 24px;
}
.pl-groups {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
#pl-pagination-wrap, #afl-pagination-wrap {
  flex-shrink: 0;
}
.pl-count-row { margin-bottom: 16px; flex-shrink: 0; }
.pl-total-count { font-size: 22px; font-weight: 700; color: #000525; line-height: 1.25; }
.pl-subtitle { font-size: 14px; color: #5c6e85; margin-top: 4px; }
.pl-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}
.pl-expand-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #3d4a6b;
}
.toggle-switch-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.toggle-track {
  display: block;
  width: 48px;
  height: 24px;
  border-radius: 14px;
  background: #d5dde7;
  position: relative;
  transition: background 0.2s;
}
.toggle-switch-btn[aria-pressed="true"] .toggle-track { background: #2638c4; }
.toggle-thumb {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: left 0.2s;
}
.toggle-switch-btn[aria-pressed="true"] .toggle-thumb { left: 28px; }
/* .pl-group-* removed — modal uses .program-group-* classes from submission page */
.pl-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #d5dde7;
}

/* ══════════════════════════════════════════
   37. BATCH UPLOAD MODAL (Figma 3634:37748)
   ══════════════════════════════════════════ */
.bu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  animation: ann-fade-in 0.2s ease-out;
}
.bu-overlay[hidden] { display: none; }
.bu-modal {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0.5px 35px 0 rgba(96,115,138,0.25);
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.bu-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #d5dde7;
  flex-shrink: 0;
}
.bu-modal-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #000525;
  margin: 0;
  line-height: 1.25;
}
.bu-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bu-modal-body p {
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.5;
  margin: 0;
}
.bu-form-row {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid #eef0f5;
  border-radius: 12px;
  padding: 20px 16px;
}
.bu-form-row-icon {
  width: 48px;
  height: 48px;
  background: #eef0f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bu-form-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bu-form-row-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.5;
}
.bu-form-row-sub {
  font-size: 14px;
  color: #000525;
  line-height: 1.5;
}
.bu-upload-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-gray);
  line-height: 1.5;
  display: block;
  margin-bottom: 8px;
}
.bu-dropzone {
  border: 1px dashed #94a1b2;
  border-radius: 12px;
  padding: 17px 13px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.bu-dropzone:hover, .bu-dropzone.drag-over {
  border-color: var(--primary);
  background: var(--baby-blue);
}
.bu-dropzone-icon {
  width: 40px;
  height: 40px;
  background: #f4f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bu-dropzone-text {
  font-size: 14px;
  line-height: 1.5;
  color: #000525;
}
.bu-dropzone-text a {
  color: var(--primary);
  text-decoration: none;
}
.bu-dropzone-hint {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
  margin-top: 2px;
}
.bu-file-selected {
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #000525;
  margin-top: 8px;
}
.bu-file-selected.visible { display: flex; }
.bu-file-clear {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--slate);
  flex-shrink: 0;
}
.bu-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 14px;
  border-top: 1px solid #d5dde7;
  flex-shrink: 0;
}
.btn-register-program:disabled { opacity: 0.5; cursor: not-allowed; }
#bu-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
}
#bu-modal-close:hover { background: #f0f2f5; }
.bu-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 0;
  transition: opacity 0.15s;
}
.bu-download-btn:hover { opacity: 0.75; }

/* ══════════════════════════════════════════════════
   Add a Program from Library Modal (Figma 1139:16946)
   ══════════════════════════════════════════════════ */
.afl-modal { max-width: 1240px; }
.afl-count-label { font-size: 20px; font-weight: 700; color: var(--text-dark); line-height: 1.25; margin-bottom: 4px; }

.afl-search-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: 432px;
}
.afl-search-col .filter-search { width: 100%; }
.afl-select-all-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 11px;
}
.afl-select-all-label {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.5;
  white-space: nowrap;
}

/* Row-level checkbox inside library table */
.afl-row-checkbox {
  width: 20px;
  height: 20px;
  border: 0.833px solid rgba(148,161,178,0.6);
  border-radius: 3.333px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-block;
  position: relative;
  padding: 0;
  transition: border-color 0.15s, background-color 0.15s;
}
/* .afl-row-checkbox.checked — shared rule above */

/* ══════════════════════════════════════════
   Submission Success Page — Figma 1760:33147
   ══════════════════════════════════════════ */
.success-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  padding: 16px 0;
}
.success-back-link:hover { color: var(--dark-blue); text-decoration: none; }

.success-card {
  background: var(--cloud);
  border-radius: 12px;
  padding: 40px 24px;
  max-width: 646px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.success-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--nav-dark);
  line-height: 1.25;
  margin: 0;
}
.success-message {
  font-size: 22px;
  font-weight: 700;
  color: var(--nav-dark);
  line-height: 1.25;
  margin: 0;
}
.success-message a { color: var(--primary); text-decoration: none; }
.success-message a:hover { text-decoration: underline; }
.success-note {
  font-size: 16px;
  color: #000525;
  line-height: 1.5;
  margin: 0;
}
.success-icon.icon-error { background: var(--red-alert); }

/* ══════════════════════════════════════════
   38. BANNER ITEM ROWS — SHARED RESPONSIVE RULE
   ══════════════════════════════════════════
   Every page banner is [ title column | row of icon+text items ]:

     .banner-methods-list  > .banner-method     program-submission
     .ul-info-cards        > .ul-info-card      user-lookup
     .banner-info-cards    > .banner-info-card  royalty-years
     .badges               > .banner-badge      dashboard

   The title columns were fixed-width and non-shrinking, so every pixel lost on
   resize came off the item row: items collapsed to 23–91px while the icon alone
   is 32px + 16px gap, and the text spilled out of its own box (measured +79px at
   820px viewport) — on screen that reads as text sitting on top of the next item.

   The rule is intrinsic, not a breakpoint. Each item declares a flex-basis floor,
   so a row reflows 3-up → 2-up → 1-up at whatever width it actually runs out of
   room. That matters because the four banners have different title widths
   (510 / 329 / 280 / auto): one shared pixel breakpoint would leave
   program-submission still clipping while stacking royalty-years too early.

   Must stay after the per-component `flex: 1` rules above — `flex: 1` is
   shorthand for `1 1 0%` and would otherwise reset the basis to zero.
   Verified with scripts/check_responsive.py; unchanged at the 1440px design
   width. Any new banner item row belongs on this rule, not a bespoke one. */
.banner-methods-list,
.page-banner .banner-info-cards,
.ul-info-cards,
.page-banner .badges {
  flex-wrap: wrap;
}
/* The item block needs a basis, not `flex: 1` (= basis 0), or the title column
   never yields: shrinking only starts once the line overflows, and with a zero
   basis it never does. That left the title pinned at 510px even at 900px wide —
   ~220px of empty blue next to it while the item row was squeezed into wrapping.
   520px ≈ three items at their 165px floor plus the two gaps between them, so the
   title gives ground before the row breaks. Measured: 3-up still holds to 1280px
   and the row now stays 2-up down to 900px instead of collapsing to 3 lines. */
.banner-methods,
.ul-info-cards,
.page-banner .banner-info-cards {
  flex: 1 1 520px;
}
/* 165px basis chosen by sweeping 150–220px against the width range: it holds the
   designed 3-across at 1440, 1366 and 1280 (the two commonest laptop widths) and
   wraps below that. 220px already wrapped at 1400; 150px held 3-up to 1200 but
   left the longest label 5 lines tall. */
.banner-method,
.banner-info-card,
.ul-info-card {
  flex: 1 1 165px;
  min-width: 0;
  overflow-wrap: break-word;
}
/* The item's own min-width:0 is not enough — its inner text wrapper is itself a
   flex child, and a flex child defaults to min-width:auto, i.e. it refuses to
   shrink below its min-content width. That is what still clipped +7px at 820px on
   royalty-years: the card was 164px but .banner-info-body demanded 171px. The
   icons are unaffected (flex-shrink:0 already pins them at 32px). */
.banner-method > *,
.banner-info-card > *,
.ul-info-card > *,
.banner-badge > * {
  min-width: 0;
}
/* Title columns yield space before the item row is crushed, and never force the
   banner wider than the viewport (was HSCROLL +136px at 414px). */
.banner-title-col,
.page-banner .banner-desc {
  min-width: 0;
}

/* ── Column mode: cancel every width basis above ─────────────────────────────
   .page-banner flips to `flex-direction: column` at 768px (section 12), and
   flex-basis always follows the *main* axis. So each basis declared above — 510px
   on the title column, 520px on the item block, 280px on .banner-desc — silently
   became a HEIGHT below 768px, padding the banner out to 1102px tall with a
   510px-tall column holding a 38px heading.

   The old code used `width: 510px`, which is axis-independent and never had this
   problem; the basis is what introduced it. Reset to auto here and let each row
   own the full width instead. Keep this block in step with the direction switch —
   changing one without the other reintroduces the tall empty banner. */
@media (max-width: 768px) {
  .banner-title-col,
  .page-banner .banner-desc,
  .banner-methods,
  .ul-info-cards,
  .page-banner .banner-info-cards {
    flex: 0 1 auto;
    width: 100%;
  }
}