/* ==========================================================================
   NIU Program Finder — shared stylesheet
   Host this file once, centrally, and reference it from every page that
   embeds the finder (see the embed snippet for the <link> tag).

   Scoped entirely under .niu-program-finder so it never touches the rest
   of the page — no bare h1-h6/body selectors, no :root custom properties.
   Typography intentionally uses NIU's existing site fonts (Georgia for the
   program name "headline," Montserrat for everything else) instead of the
   prototype's Merriweather/Source Sans 3, so the widget reads as part of
   the page it's dropped into rather than a separate tool bolted on.
   ========================================================================== */

.niu-program-finder {
  --niu-red:       #c8102e;
  --niu-red-dark:  #9e0a23;
  --niu-red-light: #f5c6cf;
  --niu-black:     #1a1a1a;
  --niu-gray-dark: #3d3d3d;
  --niu-gray:      #58595a;
  --niu-gray-mid:  #a5a7a8;
  --niu-gray-lt:   #f0f1f2;
  --niu-white:     #ffffff;
  /* Level accent colours */
  --col-ug:        #005587;
  --col-grad:      #2e7d32;
  --col-law:       #7b1d1d;

  color: var(--niu-black);
}

/* ── Filter panel ────────────────────────────────────────── */
.niu-program-finder .filter-panel {
  background: var(--niu-white);
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: 1.1rem 1.4rem 1rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.07);
}

/* Primary row: search + level chips + advanced toggle */
.niu-program-finder .primary-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

/* Search */
.niu-program-finder .search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.niu-program-finder .search-wrap .fa-magnifying-glass {
  position: absolute; left: .9rem; top: 50%;
  transform: translateY(-50%);
  color: var(--niu-gray); pointer-events: none;
}
.niu-program-finder .search-wrap input {
  padding-left: 2.4rem;
  border-radius: .35rem;
  border-color: #ced4da;
  font-size: .95rem;
  height: 2.5rem;
}
.niu-program-finder .search-wrap input:focus {
  border-color: var(--niu-red);
  box-shadow: 0 0 0 .2rem rgba(200,16,46,.18);
}

/* Level filter chips (always visible) */
.niu-program-finder .level-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
}

/* Chip buttons */
.niu-program-finder .chip-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .26rem .7rem;
  border-radius: 100px;
  border: 1.5px solid #d0d4d9;
  background: var(--niu-white);
  font-size: .78rem; font-weight: 700;
  font-family: 'Montserrat', Arial, sans-serif;
  color: var(--niu-gray-dark);
  cursor: pointer;
  transition: all .1s ease;
  white-space: nowrap;
  height: 2rem;
}
.niu-program-finder .chip-btn:hover { border-color: var(--niu-red); color: var(--niu-red); }
.niu-program-finder .chip-btn.active { background: var(--niu-red); border-color: var(--niu-red); color: #fff; }
.niu-program-finder .chip-btn.ug-btn.active   { background: var(--col-ug);   border-color: var(--col-ug); }
.niu-program-finder .chip-btn.grad-btn.active { background: var(--col-grad); border-color: var(--col-grad); }
.niu-program-finder .chip-btn.law-btn.active  { background: var(--col-law);  border-color: var(--col-law); }
.niu-program-finder .chip-btn.completion-btn.active { background: #00838f; border-color: #00838f; }
.niu-program-finder .chip-btn.accel-btn.active      { background: #ad1457; border-color: #ad1457; }

.niu-program-finder .chip-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}

/* Advanced toggle */
.niu-program-finder .adv-toggle-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 0 .9rem;
  height: 2rem;
  border-radius: .35rem;
  border: 1.5px solid #d0d4d9;
  background: var(--niu-white);
  font-size: .78rem; font-weight: 700;
  font-family: 'Montserrat', Arial, sans-serif;
  color: var(--niu-gray-dark);
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s ease;
  flex-shrink: 0;
}
.niu-program-finder .adv-toggle-btn:hover { border-color: var(--niu-red); color: var(--niu-red); }
.niu-program-finder .adv-toggle-btn.open  { background: var(--niu-red); border-color: var(--niu-red); color: #fff; }
.niu-program-finder .adv-toggle-icon { transition: transform .2s ease; }
.niu-program-finder .adv-toggle-btn.open .adv-toggle-icon { transform: rotate(180deg); }
.niu-program-finder .adv-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 3px;
  border-radius: 100px;
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: .65rem; font-weight: 800;
}
.niu-program-finder .adv-filter-count:empty { display: none; }
.niu-program-finder .adv-toggle-btn:not(.open) .adv-filter-count {
  background: var(--niu-red); color: #fff;
}

/* Advanced panel */
.niu-program-finder #niuAdvPanel {
  display: none;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid #eee;
  animation: niuFinderFadein .15s ease;
}
.niu-program-finder #niuAdvPanel.open { display: block; }
@keyframes niuFinderFadein { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

.niu-program-finder .adv-row {
  display: flex; flex-wrap: wrap;
  align-items: flex-start;
  gap: .5rem 0;
  padding: .5rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.niu-program-finder .adv-row:last-child { border-bottom: none; padding-bottom: 0; }

.niu-program-finder .adv-group { display: flex; flex-direction: column; gap: .25rem; padding: 0 .9rem; flex-shrink: 0; }
.niu-program-finder .adv-group:first-child { padding-left: 0; }
.niu-program-finder .adv-group.flex-fill { flex: 1; min-width: 0; }

.niu-program-finder .adv-divider { width: 1px; align-self: stretch; background: #dde0e3; margin: .1rem 0; flex-shrink: 0; }

.niu-program-finder .filter-label {
  font-size: .64rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--niu-gray);
  display: flex; align-items: center; gap: .3rem;
  white-space: nowrap; margin-bottom: 0;
}
.niu-program-finder .filter-label .note {
  font-size: .6rem; font-weight: 600; font-style: italic;
  letter-spacing: 0; text-transform: none; color: #aaa;
}

/* ── Active filter tags ───────────────────────────────────── */
.niu-program-finder .active-filters-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: 1.5rem;
}
.niu-program-finder .active-filter-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--niu-red-light); color: var(--niu-red-dark);
  border: 1px solid var(--niu-red); border-radius: 100px;
  font-size: .72rem; font-weight: 600; padding: .15rem .6rem;
}
.niu-program-finder .active-filter-tag button {
  background: none; border: none; padding: 0;
  color: var(--niu-red-dark); cursor: pointer; font-size: .68rem; line-height: 1;
}

/* ── Results bar ─────────────────────────────────────────── */
.niu-program-finder .results-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  padding: .55rem 0;
  font-size: .875rem; color: var(--niu-gray);
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 1.25rem;
}
.niu-program-finder .results-bar strong { color: var(--niu-black); font-weight: 700; }
.niu-program-finder .sort-select { font-size: .82rem; padding: .22rem .55rem; border-radius: .3rem; }
.niu-program-finder .view-toggle .btn { font-size: .8rem; padding: .26rem .7rem; }
.niu-program-finder .view-toggle .btn.active { background: var(--niu-black); color: #fff; border-color: var(--niu-black); }

/* ── Program cards ───────────────────────────────────────── */
.niu-program-finder .program-card {
  background: var(--niu-white);
  border: 1px solid #e0e2e5;
  border-radius: .5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
  overflow: hidden;
  position: relative;
}
.niu-program-finder .program-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.11);
  transform: translateY(-2px);
}

/* Level accent: left bar reflects the first (or dominant) level in the group */
.niu-program-finder .program-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: .5rem 0 0 .5rem;
}
.niu-program-finder .program-card[data-dominant="undergraduate"]::before { background: var(--col-ug); }
.niu-program-finder .program-card[data-dominant="graduate"]::before      { background: var(--col-grad); }
.niu-program-finder .program-card[data-dominant="law"]::before           { background: var(--col-law); }
.niu-program-finder .program-card[data-dominant="mixed"]::before {
  background: linear-gradient(to bottom, var(--col-ug) 50%, var(--col-grad) 50%);
}

.niu-program-finder .card-body-inner {
  padding: 1rem 1.1rem .9rem 1.3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* Program name — Georgia to match NIU's h1/h2 serif treatment elsewhere on site */
.niu-program-finder .prog-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--niu-black);
}
.niu-program-finder .prog-name a { color: var(--niu-black); text-decoration: none; }
.niu-program-finder .prog-name a:hover { color: var(--niu-red); text-decoration: underline; }

/* Credential pills */
.niu-program-finder .cred-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.niu-program-finder .cred-pill {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  font-size: .72rem;
  font-weight: 700;
  font-family: 'Montserrat', Arial, sans-serif;
  padding: .22rem .62rem;
  border-radius: 100px;
  background: #e8f0fb;
  color: #1a4a8a;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: all .1s;
  white-space: nowrap;
}
.niu-program-finder a.cred-pill:hover {
  background: #1a4a8a;
  color: #fff;
  text-decoration: none;
}
.niu-program-finder .cred-pill.cred-pill-static {
  opacity: .75;
  cursor: default;
}
/* Certificate pills get a slightly different tint */
.niu-program-finder .cred-pill[data-type="certificate"] {
  background: #fff8e1;
  color: #7a5800;
}
.niu-program-finder a.cred-pill[data-type="certificate"]:hover {
  background: #7a5800;
  color: #fff;
}

/* Inline credential-pill badge — flags an attribute (e.g. degree completion)
   that applies to THIS specific credential only, not the whole program record.
   Sits next to a cred-pill rather than in the card's detail row so a trait
   true of one credential (say, the B.S.) is never implied for the others
   (an M.S. or Ph.D. in the same program record). */
.niu-program-finder .cred-attr-badge {
  font-size: .72rem;
  vertical-align: middle;
}
.niu-program-finder .cred-attr-badge.tag-completion { color: #00838f; }
.niu-program-finder .cred-attr-badge.tag-licensure  { color: #4527a0; }
.niu-program-finder .cred-attr-badge.tag-accel      { color: #880e4f; }

/* Attribute / detail tags */
.niu-program-finder .detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: .28rem;
  margin-top: auto;
}
.niu-program-finder .detail-tag {
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  font-size: .68rem;
  font-weight: 600;
  font-family: 'Montserrat', Arial, sans-serif;
  padding: .15rem .48rem;
  border-radius: 100px;
  white-space: nowrap;
}
.niu-program-finder .tag-location  { background: #f0f0f0;  color: #3d3d3d; }
.niu-program-finder .tag-online    { background: #e6f5ec;  color: #1a6b34; }
.niu-program-finder .tag-oncampus  { background: #e3f0ff;  color: #0a4a8f; }
.niu-program-finder .tag-hybrid    { background: #fff3e0;  color: #b35a00; }
.niu-program-finder .tag-licensure { background: #ede7f6;  color: #4527a0; border: 1px dashed #b39ddb; }
.niu-program-finder .tag-accel     { background: #fce4ec;  color: #880e4f; border: 1px dashed #f48fb1; }
.niu-program-finder .tag-completion { background: #e0f7fa; color: #00636e; border: 1px dashed #4dd0e1; }

/* Card footer */
.niu-program-finder .card-footer-inner {
  padding: .55rem 1.1rem .55rem 1.3rem;
  background: #fafafa;
  border-top: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.niu-program-finder .college-link {
  font-size: .75rem;
  font-weight: 600;
  color: var(--niu-gray-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  flex: 1;
  min-width: 0;
}
.niu-program-finder .college-link .fa { color: var(--niu-gray-mid); font-size: .72rem; flex-shrink: 0; }
.niu-program-finder .college-link:hover { color: var(--niu-red); text-decoration: underline; }
.niu-program-finder .college-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Table view ──────────────────────────────────────────── */
.niu-program-finder #niuTableView .table { font-size: .83rem; background: #fff; }
.niu-program-finder #niuTableView .table thead th {
  background: var(--niu-black); color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700; font-size: .74rem;
  letter-spacing: .04em; text-transform: uppercase;
  border-color: var(--niu-gray-dark);
  cursor: pointer; white-space: nowrap;
}
.niu-program-finder #niuTableView .table thead th:hover { background: var(--niu-gray-dark); }
.niu-program-finder #niuTableView .table tbody tr:hover { background: #fef2f4; }
.niu-program-finder #niuTableView .table td { vertical-align: middle; }
.niu-program-finder .sort-icon { margin-left: .3rem; opacity: .5; font-size: .72em; }
.niu-program-finder th.sorted-asc .sort-icon, .niu-program-finder th.sorted-desc .sort-icon { opacity: 1; }

/* ── Empty state ─────────────────────────────────────────── */
.niu-program-finder .empty-state { text-align: center; padding: 3rem 1rem; color: var(--niu-gray); }
.niu-program-finder .empty-state .fa { font-size: 2.5rem; margin-bottom: 1rem; opacity: .35; }
.niu-program-finder .empty-state h4 {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--niu-gray-dark);
}

/* ── Pagination ──────────────────────────────────────────── */
.niu-program-finder .pagination-bar {
  display: flex; justify-content: center; align-items: center;
  gap: .35rem; padding: 1.25rem 0 .5rem; flex-wrap: wrap;
}
.niu-program-finder .page-btn {
  min-width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #dee2e6; border-radius: .3rem;
  background: #fff; font-size: .8rem;
  font-family: 'Montserrat', Arial, sans-serif; font-weight: 700;
  color: var(--niu-gray-dark); cursor: pointer; padding: 0 .5rem;
  transition: all .1s;
}
.niu-program-finder .page-btn:hover { border-color: var(--niu-red); color: var(--niu-red); }
.niu-program-finder .page-btn.active { background: var(--niu-red); border-color: var(--niu-red); color: #fff; }
.niu-program-finder .page-btn:disabled { opacity: .35; cursor: default; }