/* ══════════════════════════════════════════
   PBS Royalties Portal — Base Styles
   ══════════════════════════════════════════ */

/* ── Font Faces ── */
@font-face {
  font-family: "PBS Sans";
  font-weight: 400;
  src: url(https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans.woff2) format("woff2"),
       url(https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans.woff) format("woff");
  font-display: swap;
}

@font-face {
  font-family: "PBS Sans";
  font-weight: 700;
  src: url(https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-Bold.woff2) format("woff2"),
       url(https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-Bold.woff) format("woff");
  font-display: swap;
}

/* ── CSS Variables ── */
:root {
  --primary: #2638c4;
  accent-color: #2638c4;
  --dark-blue: #0f1e8c;
  --navy-blue: #0a145a;
  --nav-dark: #000525;
  --blue-bright: #0056d2;
  --blue-medium: #486cd8;
  --blue-light: #5680ff;
  --orange: #FE704E;
  --yellow: #ffcf00;
  --green: #087B45;
  --red-alert: #d6383a;
  --text-dark: #040C41;
  --text-light: #94a1b2;
  --onyx: #040613;
  --charcoal: #1e2030;
  --slate: #5c6e85;
  --blue-gray: #3d4a6b;
  --gray-light: #c0cbda;
  --gray-lighter: #d5dde7;
  --border-light: #d5dde7;
  --baby-blue: #EEF0F5;
  --cloud: #f6f6fa;
  --light-bg: #F6F8FA;
  --teal: #48D3CD;

  /* Height of the fixed #main-header: 8px blue bar + 60px navbar. The header is
     position: fixed, so every page has to reserve this much space itself — the number
     was hardcoded as 68px in four places (#main-content plus three `calc(100vh - 68px)`
     page backgrounds). Keep this and the navbar height in step; if they drift, the
     difference shows up as a strip of body background under the nav. */
  --header-h: 68px;
}

/* ── Base Layout ── */
html, body {
  width: 100%;
  height: 100%;
  background: #fff;
}

body {
  font-family: "PBS Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text-dark);
  margin: 0;
}

#wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#main-content {
  flex: 1;
  padding-top: var(--header-h);
}

.content {
  width: 100%;
  max-width: 1440px;
  background: #fff;
  min-height: 100%;
  margin: 0 auto;
}

/* ── Header Navigation ── */
#main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

#main-header .blue-bar {
  display: block;
  height: 8px;
  background: #2638c4;
}

#main-header .navbar {
  background-color: var(--nav-dark) !important;
  padding: 0;
  height: calc(var(--header-h) - 8px);
}

#main-header.scrolled .navbar {
  background-color: var(--primary) !important;
}


#main-header .navbar > .container {
  max-width: 1440px !important;
  width: 100%;
  height: 100%;
  padding: 0 64px;
  margin: 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

@media (max-width: 991px) {
  /* `auto`, not a fixed height, because the burger menu (#main-nav) wraps onto a second
     line inside the container and the dark background has to grow with it. The bar line
     itself keeps its full height — see the .brand / .navbar-toggler rule below. */
  #main-header .navbar {
    height: auto;
  }
  #main-header .navbar-toggler {
    border: none;
    box-shadow: none;
    outline: none;
    padding: 0;
  }
  #main-header .navbar-toggler:focus {
    box-shadow: none;
  }
  #main-header .navbar > .container {
    flex-wrap: wrap;
    padding: 0 16px;
    align-items: center;
    height: auto;
  }
  /* The bar stays the same height as on desktop at every width. It used to be 13px of
     top padding over the 36px logo and nothing below = 49px, so the whole header was
     57px while every page still reserved --header-h (68px) for it. That 11px difference
     was visible as a strip of white body background between the dark nav and the page's
     first element — most obviously on user-lookup / profile / program-submission, whose
     #EEF0F5 breadcrumb bar starts at y=68. It also made the bar visibly thinner below
     992px, which is not in the design system (nav is 60px, one height).

     The height goes on the two items that make up the bar line, not on the container,
     so the collapsed menu can add its own line underneath without shortening the bar. */
  #main-header .navbar > .container > .brand,
  #main-header .navbar > .container > .navbar-toggler {
    min-height: calc(var(--header-h) - 8px);
  }
  #main-header #main-nav {
    flex-basis: 100%;
    width: 100%;
  }
}

#main-header .brand {
  display: flex;
  align-items: center;
  padding: 0;
}

#main-header .brand svg {
  width: 86.5px;
  height: 36px;
}

/* ── Nav Left (links) ── */
#main-header .nav-left {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Fluid spacing, not a breakpoint. The nav shows down to 992px (Bootstrap `lg`),
     but the 7-link admin variant needs 1070px of content — between 992 and 1070 the
     container simply cut the right-hand links off, so "Contact Royalties" ran under
     the user avatar and the user name was sliced at the edge (measured: container
     cuts 46px at 1024, 78px at 992).

     A `max-width: 992px` query cannot reach the 1024px case, and CODE_STANDARDS
     allows only 768/992, so the gap is derived from the viewport instead: full 33px
     design spacing at 1200px and up (so 1440/1366/1280/1200 are untouched),
     compressing to 21px at 992px. The sweep put the widest fitting gap at 22px, so
     this keeps a pixel of headroom rather than landing exactly on the limit —
     fractional gaps (6 × 22.076px) otherwise leave the container 1px over. Applies
     to all three nav variants (7/5/3 links); the ones that already fit simply never
     reach the floor. */
  --nav-gap: clamp(21px, calc(5.77vw - 36.2px), 33px);
  margin-left: var(--nav-gap);
  gap: var(--nav-gap);
}

@media (max-width: 991px) {
  #main-header .nav-left {
    display: none !important;
  }
}

#main-header .nav-left li a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

#main-header .nav-left li a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ── Nav Right (icons + buttons/user) ── */
#main-header .nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  /* The display name is user data of unbounded length, so this side has to be the
     one that yields — the nav links are navigation, the name is decoration and is
     also on the profile page. Without this the name's min-content width pushed the
     row wider than the bar: a 32-character name clipped the container by 184px at
     992px and 60px even at 1200px, cutting the name off mid-word. See .user-name
     below for the ellipsis that makes the shrink land somewhere legible. */
  min-width: 0;
}

#main-header .nav-search {
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
}

#main-header .nav-search:hover {
  color: #fff;
}

/* ── Nav Pill Buttons (Register/Login) ── */
#main-header .btn-nav-pill {
  padding: 8px 20px;
  border-radius: 28.6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  height: 34px;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}

#main-header .btn-nav-pill:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

/* ── User Dropdown ── */
#main-header .nav-user-dropdown {
  position: relative;
  min-width: 0;
}

#main-header .nav-user-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}

#main-header .nav-user-toggle:hover {
  color: #fff;
  text-decoration: none;
}

#main-header .user-avatar {
  width: 33px;
  height: 33px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

#main-header .user-name {
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  /* Truncate rather than push the bar apart — see .nav-right above. min-width:0 is
     what actually lets it shrink; a flex child defaults to min-width:auto and so
     refuses to go below its min-content width, which for nowrap text is the whole
     string. The avatar keeps its initials visible either way (flex-shrink:0). */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Below 1150px the shrink has gone past legibility: a 32-character name renders as
   8 characters or fewer (measured 11 at 1150, 6 at 1100, 1 at 1024, a bare ellipsis
   at 992), which reads as a glitch rather than a name. Drop the text and keep the
   avatar — the full name is still on the avatar's hover tooltip (Figma 1290:20179)
   and on the profile page, so nothing becomes unreachable.

   This is a third breakpoint, which CODE_STANDARDS otherwise limits to 768/992. The
   nav is the one row whose own content width (1070px for the 7-link admin variant)
   falls between those two, so neither can reach it — see the exception recorded in
   docs/CODE_STANDARDS.md. Deliberately not content-aware: one rule for every nav
   variant and page beats a per-name JS measurement, and a short name that would
   still have fit loses only decoration. */
@media (max-width: 1149px) {
  #main-header .user-name {
    display: none;
  }
}

#main-header .dropdown-toggle::after {
  margin-left: 0.5rem;
  border-top-color: #fff;
}

#main-header .dropdown:hover > .dropdown-menu,
#main-header .dropdown-menu.show {
  display: block;
}

#main-header .dropdown-menu {
  position: absolute;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0;
  min-width: 180px;
  margin-top: 0;
  top: 100%;
  left: auto;
  right: 0;
}

#main-header .dropdown-item {
  padding: 0.625rem 1.25rem;
  font-size: 14px;
  color: var(--text-dark);
  transition: background-color 0.15s ease;
}

#main-header .dropdown-item:hover {
  background-color: var(--baby-blue);
  color: var(--primary);
}

#main-header .dropdown-item:active {
  background-color: var(--primary);
  color: #fff;
}

#main-header .dropdown-divider {
  margin: 0.5rem 0;
  border-color: var(--gray-lighter);
}

/* ── Mobile Nav ── */
#main-header #main-nav {
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--nav-dark);
  position: relative;
  z-index: 200;
}

#main-header #main-nav .navbar-nav .nav-link {
  color: #fff;
  padding: 10px 0;
  font-size: 16px;
}

@media (max-width: 991px) {
  #main-header #main-nav .navbar-nav .nav-link {
    padding-left: 16px;
  }
}

#main-header #main-nav .navbar-nav .nav-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* ── Page Header ── */
.page-header {
  background-color: var(--baby-blue);
  padding: 1rem 0;
  margin-bottom: 3rem;
  text-align: center;
}

@media (min-width: 768px) {
  .page-header {
    padding-top: 5rem;
    padding-bottom: 2rem;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .page-header h1 {
    font-size: 48px;
  }
}

/* ── Form Styles ── */
.pbs-prtl-form-wrapper {
  margin-bottom: 1rem;
}

.pbs-prtl-form-wrapper label {
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-gray);
  line-height: 1.5;
  margin-bottom: 8px;
  display: block;
}

.pbs-prtl-form-wrapper input,
.pbs-prtl-form-wrapper textarea,
.pbs-prtl-form-wrapper 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: var(--nav-dark);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.pbs-prtl-form-wrapper textarea {
  height: auto;
  min-height: 100px;
}

.pbs-prtl-form-wrapper input::placeholder,
.pbs-prtl-form-wrapper textarea::placeholder {
  color: var(--slate);
}

.pbs-prtl-form-wrapper input:focus,
.pbs-prtl-form-wrapper textarea:focus,
.pbs-prtl-form-wrapper select:focus {
  outline: none;
  border: 2px solid var(--blue-light);
  padding: 7px 11px;
}

.pbs-prtl-form-wrapper .help-text {
  font-size: 13px;
  color: var(--nav-dark);
  line-height: 1.25;
  margin-top: 2px;
  padding-bottom: 8px;
}

.pbs-prtl-form-wrapper .messages.is-valid {
  color: #28a745;
}

.pbs-prtl-form-wrapper .messages.is-invalid {
  color: var(--red-alert);
}

.pbs-prtl-form-wrapper .field-error {
  color: var(--red-alert);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-top: 4px;
  display: none;
}

.pbs-prtl-form-wrapper .field-error.show {
  display: block;
}

.pbs-prtl-form-wrapper input.is-invalid,
.pbs-prtl-form-wrapper select.is-invalid,
.pbs-prtl-form-wrapper textarea.is-invalid {
  border-color: var(--red-alert) !important;
}

/* ── Buttons ── */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  font-weight: bold;
}

.btn-primary:hover {
  background-color: var(--dark-blue);
  border-color: var(--dark-blue);
}

/* ── Utility Classes ── */
.text-orange {
  color: var(--orange) !important;
}

/* ── List Styles ── */
.content li {
  list-style: none;
  margin-bottom: 0.5em;
}

.content li::before {
  content: "\2022";
  font-size: 1.25em;
  color: var(--orange);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.content .nav li::before,
.content .pagination li::before,
.content .navbar-nav li::before,
.content table li::before,
.content .list-group li::before,
.content .form-check li::before {
  content: none;
}

.content .nav li,
.content .pagination li,
.content .navbar-nav li,
.content table li,
.content .list-group li,
.content .form-check li {
  margin-bottom: 0;
}

/* ── Admin Sub-nav ── */
#admin-sub-nav .nav {
  border-bottom: 2px solid var(--primary);
  margin-bottom: 1rem;
}

#admin-sub-nav .nav-link {
  color: var(--primary);
  font-weight: bold;
  padding: 0.75rem 1.25rem;
}

#admin-sub-nav .nav-link.active {
  border-bottom: 3px solid var(--primary);
  color: var(--dark-blue);
}

/* ── Tables ── */
.table thead {
  border-bottom: 2px solid var(--primary);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f7f9fc;
}

/* ── Footer ── */
#main-footer {
  background-color: var(--nav-dark);
}

#main-footer .footer-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#main-footer .footer-text {
  text-align: center;
  color: var(--baby-blue);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

#main-footer .footer-text a {
  color: var(--baby-blue);
  text-decoration: none;
}

#main-footer .footer-text a:hover {
  color: #fff;
}

/* formatDateTime helper */
.dt-time { color: var(--text-light); font-size: 0.8rem; }