/* ==========================================================================
   1) Design tokens (CSS variables)
   ========================================================================== */
:root{
  --bg:#f6f7f8;
  --card:#fff;
  --border:#e6e6e6;
  --text:#222;
  --muted:#666;
  --primary:#2f2f2f;
  --secondary:#cfcfcf;
  --chip:#edf3f7;
  --chip-text:#2f5068;
  --shadow:0 4px 16px rgba(0,0,0,.12);
  --radius:10px;
  --cols: 3;       /* columns in filters grid */
  --gap: 16px;     /* gap in filters grid */
}

/* ==========================================================================
   2) Base / Reset
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:#fff;
  color:var(--text);
}

/* ==========================================================================
   3) Layout
   ========================================================================== */
.page{max-width:980px;margin:48px auto;padding:0 24px}
h1{font-size:32px;margin:0 0 24px}

/* Controls row that holds the primary (country) dropdown */
.controls{margin-bottom:16px}

/* Utility */
.hidden{display:none !important}

/* Make the primary dropdown span exactly one grid cell width */
#countryDropdown{
  width: calc((100% - calc(var(--cols) - 1) * var(--gap)) / var(--cols));
  max-width: 100%;
}

/* ==========================================================================
   4) Dropdowns (primary + secondary)
   ========================================================================== */
.dropdown{position:relative;width:360px;max-width:100%}

/* Button */
.dropdown .dropdown-toggle{
  width:100%;
  border:0;
  padding:12px 16px;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:14px;
  min-width:0; /* allow truncation */
  color:#fff;  /* overridden in .secondary */
}
.dropdown.primary   .dropdown-toggle{ background:var(--primary); }
.dropdown.secondary .dropdown-toggle{ background:var(--secondary); color:#222; }

/* Truncate only the text part */
.dropdown .dropdown-toggle .label{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.dropdown .dropdown-toggle .arrow{ flex:0 0 auto; }

/* Menu panel */
.dropdown .dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0; right:0;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:10;
}
.dropdown .dropdown-menu.show{display:flex}

/* Menu search row */
.dropdown .search-row{padding:8px 10px;border-bottom:1px solid var(--border)}
.dropdown .search-row input{
  width:100%;
  border:0;
  outline:0;
  font-size:1rem;
  padding:6px 2px;
}

/* Menu list */
.dropdown .list{
  list-style:none;
  margin:0;
  padding:0;
  max-height:210px;
  overflow:auto;
}
.dropdown .item{border-bottom:1px solid #f2f2f2}
.dropdown .item:last-child{border-bottom:0}
.dropdown .item label{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  cursor:pointer;
}
.dropdown .item:hover{background:#f9f9f9}
.dropdown input[type="checkbox"]{width:16px;height:16px}

/* Menu apply button */
.dropdown .apply{
  margin:10px;
  padding:10px;
  border:0;
  border-radius:8px;
  background:#ddd;
  cursor:pointer;
  font-weight:600;
}

/* ==========================================================================
   5) Year range UI (inside the "year" dropdown)
   ========================================================================== */
.year-range{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
  padding:12px 12px 6px;
}
.year-range .yr-col{display:flex;flex-direction:column;gap:6px}
.year-range label{font-size:.9rem;color:#555}
.year-range input{
  width:110px;
  padding:8px 10px;
  border:1px solid #bbb;
  border-radius:8px;
  font-size:1rem;
  outline:none;
}
.year-range .yr-sep{padding-bottom:10px;color:#777}

/* ==========================================================================
   6) Filters grid (secondary filters + global search)
   ========================================================================== */
#filtersSection{margin-top:8px}
.filters-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
  align-items:start;
}
.filters-grid > * { min-width: 0; }
.filters-grid .dropdown{width:100%}

/* Global search input box */
.search-standalone{
  display:flex;
  gap:8px;
  background:#eee;
  border-radius:8px;
  padding:6px 8px;
  align-items:center;
}
.search-standalone input{
  flex:1;
  border:0;
  background:transparent;
  outline:0;
  font-size:1rem;
  padding:8px 6px;
}
.search-standalone button{
  border:0;
  background:#ddd;
  border-radius:6px;
  padding:8px 10px;
  cursor:pointer;
}
#globalSearchBtn {
  width: 32px;
  height: 32px;
  background-color: #ddd;
  background-image: url("data:image/svg+xml,%3Csvg stroke='%23444' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8' stroke-width='2'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

/* ==========================================================================
   7) Actions (Print / Help)
   ========================================================================== */
.actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin:12px 0;
}
.actions #printBtn,
.actions #helpBtn{
  background:#e2e2e2;
  color:#333;
  border:1px solid var(--border);
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  font-family:inherit;
  line-height:1.2;
}
.actions #printBtn:hover,
.actions #helpBtn:hover{background:#ccc}

/* ==========================================================================
   8) Results bar (count + chips + clear)
   ========================================================================== */
.results-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:6px 0 12px;
}
#resultCount{color:#333;font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  background:var(--chip);
  color:var(--chip-text);
  border:1px solid #cfe0ea;
  border-radius:999px;
  padding:6px 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
}
.chip .x{
  background:#c8d7e2;
  border:0;
  border-radius:50%;
  width:18px;
  height:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chip-clear{
  background:#f0f0f0;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  cursor:pointer;
}
.chip-clear:hover{background:#ccc}

/* ==========================================================================
   9) Cards (results)
   ========================================================================== */
.cards{display:flex;flex-direction:column;gap:14px}
.card{
  background:var(--card);
  border:1px solid #CCCCCC; /* subtle lift */
  border-radius:14px;
  padding:16px;
  box-shadow:0 2px 0 rgba(0,0,0,.02);
}
.card-h h1{margin:0 0 8px;font-size:18px}

/* Meta rows + leading icon */
.meta-h{display:flex;flex-direction:column;gap:10px}
.meta-h .m-row{
  display:inline-flex;
  align-items:flex-start;
  gap:6px;
}
.m-row::before{
  content:"";
  display:inline-block;
  width:14px;height:14px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  flex-shrink:0;
  opacity:.8;
  margin-top:2px;
  background-image:var(--icon);
}

/* Inline icon presets */
.title-line{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23444' d='M622.34 153.2 343.4 43.17c-15.14-5.94-31.67-5.94-46.81 0L17.66 153.2C6.88 157.5 0 167.8 0 179.4s6.88 21.93 17.66 26.23l77.6 30.5c-4.06 13.6-6.26 28.1-6.26 43.4 0 71.1 57.3 128.4 128.4 128.4 55.9 0 103.4-35.7 121.2-85.1l100.1 39.3c-12.5 9.1-21.5 23.9-21.5 40.8 0 27.5 22.3 49.8 49.8 49.8h128.4c27.5 0 49.8-22.3 49.8-49.8 0-16.9-9-31.7-21.5-40.8l73.7-28.9c10.8-4.2 17.6-14.6 17.6-26.2s-6.8-21.9-17.6-26.2z'/%3E%3C/svg%3E")}
.institution-line{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23444' d='M0 480V48C0 21.5 21.5 0 48 0h288c26.5 0 48 21.5 48 48v432h-96v-96h-96v96H0zM96 288h64v-64H96v64zm128 0h64v-64h-64v64zM96 160h64V96H96v64zm128 0h64V96H64v64z'/%3E%3C/svg%3E")}
.location-line{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23444' d='M168 0C75.1 0 0 75.1 0 168c0 87.8 144 312 144 312s144-224.2 144-312C288 75.1 212.9 0 168 0zM168 240c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z'/%3E%3C/svg%3E")}
.duration-line{--icon:url("data:image/svg+xml,%3Csvg fill='%23444' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.07 1H9v2h6.07V1zM11 8h2v5h-2V8zm9.03-2.39l1.42-1.42-1.44-1.44-1.41 1.42A9.969 9.969 0 0 0 12 4C6.48 4 2 8.48 2 14s4.48 10 10 10 10-4.48 10-10c0-2.64-1.03-5.05-2.74-6.84zM12 22c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E")}
.completion-line{--icon:url("data:image/svg+xml,%3Csvg fill='%23444' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2zm0 16H5V9h14v11z'/%3E%3Cpath d='M10.0 15.0l-2.0-2.0-1.41 1.41L10.0 17.83l7.41-7.41L16.0 9.0l-6.0 6.0z'/%3E%3C/svg%3E")}

/* Card body and headings */
.card-b{
  border-top:1px solid var(--border);
  margin-top:12px;
  padding-top:12px;
}
.card-b strong{display:block;margin-bottom:6px}
.card-b h2{margin:0 0 8px;font-size:16px;font-weight:600}
.card-b h3{margin:16px 0 8px;font-size:16px;font-weight:600}

/* Date text used in header/body */
.date{display:block;color:var(--muted);font-style:italic}
.card-b .date{ margin-top:16px; }
.card-h .date{ margin-bottom:16px; }

/* Multi-degree grouping */
.degree-blocks{display:flex;flex-direction:column;gap:14px}
.degree-block{padding-top:12px;border-top:1px solid var(--border)}
.degree-block:first-child{border-top:0;padding-top:0}
.degree-title{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--text)}
.degree-meta{display:flex;flex-direction:column;gap:10px}
.degree-meta .m-row{display:inline-flex;align-items:flex-start;gap:6px}

/* ==========================================================================
   10) Responsive
   ========================================================================== */
@media (max-width:900px){
  .filters-grid{grid-template-columns:1fr 1fr}
  #countryDropdown { --cols: 2; }
}
@media (max-width:560px){
  .filters-grid{grid-template-columns:1fr}
  .dropdown{width:100%}
  #countryDropdown { --cols: 1; }
}

/* ==========================================================================
   11) Print (only cards)
   ========================================================================== */
@media print {
  body * { visibility: hidden; }
  #cardsSection, #cardsSection * { visibility: visible; }
  #cardsSection {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
  }
}

/* ==========================================================================
   12) Infinite scroll sentinel & spinner
   ========================================================================== */
.sentinel{
  display:flex;
  justify-content:center;
  padding:16px 0;
}
.sentinel .spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid #ddd; border-top-color:#666;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   13) Cards loading indicator
   ========================================================================== */
.cards-loading{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:8px 0;
  color:#333;
  font-size:16px;
  font-weight:600;
}
.cards-loading .msg{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.cards-loading .dots{
  display:inline-block;
  width: 2ch;            /* space for up to '..' (we'll manage width via JS) */
  text-align:left;
  margin-left:2px;
}