/* ---------------- Fonts (project rule #10) ---------------- */
@font-face {
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_normal_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_italic_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_400_normal_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_400_italic_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti Bold";
  src: url("../fonts/helveesti_700_normal_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti Bold";
  src: url("../fonts/helveesti_700_italic_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------------- Design tokens (section-scoped) ---------------- */
.uni-tabs {
  /* Palette (project rule #11) */
  --uni-bg: #F8F2E9;
  --uni-ink: #170B01;
  --uni-accent: #1C1BAE;
  --uni-accent-1: #BDCFFB;
  --uni-accent-2: #FDF18B;

  /* Typography */
  --font-heading: "Arizona Flare", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: "Helveesti", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-label: "Helveesti Bold", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Radii */
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;

  /* Transitions */
  --t: 180ms ease;

  background: var(--uni-bg);
  color: var(--uni-ink);
  font-family: var(--font-body);
  padding: var(--s-6) var(--s-4);
  /* Shadow avoided; palette-only constraint — using borders for elevation */
  /*border: 1px solid var(--uni-accent-1);*/
}

.uni-tabs * { box-sizing: border-box; }

/* Header */
.uni-tabs__header {
  display: flex;
  /*align-items: center;*/
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--uni-accent-1);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--uni-bg);
}

.state-tabs__header {
  justify-content: space-between;
  gap: var(--s-4);
  border-bottom: 1px solid var(--uni-accent-1);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--uni-bg);
}

.uni-tabs__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.2px;
  color: var(--uni-ink);
}

/* Mobile select (visible < 768px) */
.uni-tabs__mobile { display: none; }
.uni-tabs__select, .uni-tabs__search {
  appearance: none;
  border: 1px solid var(--uni-accent-1);
  background: var(--uni-bg);
  color: var(--uni-ink);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  width: 100%;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}
.uni-tabs__select:focus, .uni-tabs__search:focus {
  outline: 2px solid var(--uni-accent);
  outline-offset: 2px;
}

/* Grid */
.uni-tabs__grid {
  display: grid;
  grid-template-columns: 1fr;
}
.uni-tabs__left {
  padding: var(--s-4);
  border-right: 0;
}
.uni-tabs__right {
  padding: var(--s-6) var(--s-4);
}
/* Desktop layout */
@media (min-width: 960px) {
  .uni-tabs__mobile { display: none; }
  .uni-tabs__grid { grid-template-columns: 30% 70%; }
  .uni-tabs__left { border-right: 1px solid var(--uni-accent-1); }
}
/* Mobile layout */
@media (max-width: 959.98px) {
  .uni-tabs__mobile { display: block; }
}

/* Search */
.uni-tabs__search-wrap { margin-bottom: var(--s-4); }
.uni-tabs__label {
  display: block;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
  color: var(--uni-ink);
}

/* Tablist */
.uni-tabs__tablist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow: auto;
}
.uni-tabs__tab {
  width: 100%;
  text-align: left;
  background: var(--uni-bg);
  color: var(--uni-ink);
  border: 1px solid var(--uni-accent-1);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-2);
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.uni-tabs__tab:hover { background: var(--uni-accent-1); }
.uni-tabs__tab[aria-selected="true"] {
  background: var(--uni-accent);
  color: var(--uni-bg);
  border-color: var(--uni-accent);
}
.uni-tabs__tab:focus {
  outline: 2px solid var(--uni-accent);
  outline-offset: 2px;
}

.uni-tabs__uni-name {
  margin: 0 0 var(--s-2);
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 25px;
}
.uni-tabs__desc {
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 var(--s-5);
  line-height: 1.3;
}
.uni-tabs__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-5);
}
.uni-tabs__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--uni-accent-1);
  background: var(--uni-accent-1);
  color: var(--uni-ink);
  font-size: 12px;
}
.uni-tabs__awards {
  margin: var(--s-3) 0 var(--s-5);
  padding-left: 20px;
}
.uni-tabs__awards li { 
  margin: 3px 0;
  font-size: 14px; 
}

/* Buttons */
.uni-tabs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-family: var(--font-label);
  font-size: 14px;
  cursor: pointer;
  transition: transform var(--t), background-color var(--t), color var(--t), border-color var(--t);
  border: 1px solid transparent;
}
.uni-tabs__btn:focus { outline: 2px solid var(--uni-accent); outline-offset: 2px; }
.uni-tabs__btn--primary {
  background: var(--uni-accent);
  color: var(--uni-bg);
  border-color: var(--uni-accent);
  text-decoration: none;
}
.uni-tabs__btn--primary:hover { transform: translateY(-1px); }
.uni-tabs__btn--secondary {
  background: var(--uni-bg);
  color: var(--uni-ink);
  border-color: var(--uni-accent-1);
  text-decoration: none;
}
.uni-tabs__btn--secondary:hover { background: var(--uni-accent-1); }
.uni-tabs__btn--ghost {
  background: transparent;
  color: var(--uni-ink);
  border-color: var(--uni-accent-1);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
}
.uni-tabs__btn--ghost:hover { background: var(--uni-accent-2); }

/* Filters */
.uni-tabs__filters {
  background: var(--uni-accent-1);
  border: 1px solid var(--uni-accent-1);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin: var(--s-5) 0 var(--s-4);
}
.uni-tabs__filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.uni-tabs__filter-group { margin-bottom: var(--s-3); }
.uni-tabs__legend {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.uni-tabs__chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.uni-tabs__chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--uni-accent-1);
  background: var(--uni-bg);
  color: var(--uni-ink);
  border-radius: var(--r-md);
  padding: 8px 10px;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.uni-tabs__chip-toggle:hover { background: var(--uni-accent-2); }
.uni-tabs__chip-toggle[aria-pressed="true"] {
  background: var(--uni-accent);
  color: var(--uni-bg);
  border-color: var(--uni-accent);
}

/* Table */
.uni-tabs__table-wrap { overflow-x: auto; }
.uni-tabs__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.uni-tabs__table th, .uni-tabs__table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--uni-accent-1);
}
.uni-tabs__table th {
  position: sticky; top: 0;
  background: var(--uni-bg);
  font-family: var(--font-label);
  text-align: left;
}



/* Load more */
.uni-tabs__loadmore { margin-top: var(--s-3); }

/* States: empty/error/skeleton */
.uni-tabs__empty {
  border: 1px solid var(--uni-accent-1);
  background: var(--uni-bg);
  border-radius: var(--r-md);
  padding: var(--s-4);
  font-size: 14px;
}
.uni-tabs__error {
  border: 1px solid var(--uni-accent);
  background: var(--uni-accent-1);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.uni-tabs__error-text { margin: 0 0 var(--s-3); }

/* Skeletons (palette-only gradients) */
@keyframes uniTabsShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.uni-tabs__skeleton-line,
.uni-tabs__skeleton-title,
.uni-tabs__skeleton-block,
.uni-tabs__skeleton-chiprow,
.uni-tabs__skeleton-list,
.uni-tabs__skeleton-cta,
.uni-tabs__skeleton-table {
  background: linear-gradient(90deg, var(--uni-accent-1) 0%, var(--uni-bg) 50%, var(--uni-accent-1) 100%);
  background-size: 200% 100%;
  animation: uniTabsShimmer 1.4s linear infinite;
  border-radius: var(--r-md);
}
.uni-tabs__tabs-skeleton .uni-tabs__skeleton-line { height: 40px; margin-bottom: var(--s-2); }
.uni-tabs__panel-skeleton .uni-tabs__skeleton-title { height: 28px; width: 60%; margin-bottom: var(--s-4); }
.uni-tabs__panel-skeleton .uni-tabs__skeleton-block { height: 72px; margin-bottom: var(--s-4); }
.uni-tabs__panel-skeleton .uni-tabs__skeleton-chiprow { height: 30px; margin-bottom: var(--s-4); }
.uni-tabs__panel-skeleton .uni-tabs__skeleton-list { height: 80px; margin-bottom: var(--s-4); }
.uni-tabs__panel-skeleton .uni-tabs__skeleton-cta { height: 40px; width: 50%; margin-bottom: var(--s-4); }
.uni-tabs__panel-skeleton .uni-tabs__skeleton-table { height: 160px; }

/* Modal */
.uni-tabs__modal[hidden] { display: none; }
.uni-tabs__modal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: var(--s-4);
}
.uni-tabs__modal-backdrop {
  position: absolute; inset: 0;
  background: var(--uni-ink);
  opacity: 0.4;
}
.uni-tabs__modal-card {
  position: relative;
  width: min(560px, 100%);
  background: var(--uni-bg);
  border: 1px solid var(--uni-accent-1);
  border-radius: var(--r-xl);
  padding: var(--s-6);
}
.uni-tabs__modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.uni-tabs__modal-title {
  margin: 0; font-family: var(--font-heading); font-weight: 300; font-size: 20px;
}
.uni-tabs__modal-close {
  border: 1px solid var(--uni-accent-1);
  background: var(--uni-bg);
  color: var(--uni-ink);
  border-radius: var(--r-md);
  padding: 4px 10px;
  cursor: pointer;
}
.uni-tabs__modal-close:focus { outline: 2px solid var(--uni-accent); outline-offset: 2px; }
.uni-tabs__modal-sub { margin: var(--s-2) 0 var(--s-4); }

.uni-tabs__form { display: grid; gap: var(--s-3); }
.uni-tabs__field-label { display: block; margin-bottom: var(--s-2); font-family: var(--font-label); }
.uni-tabs__input {
  width: 100%;
  border: 1px solid var(--uni-accent-1);
  background: var(--uni-bg);
  color: var(--uni-ink);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}
.uni-tabs__input:focus { outline: 2px solid var(--uni-accent); outline-offset: 2px; }
.uni-tabs__field-error { margin: var(--s-1) 0 0; color: var(--uni-accent); font-size: 12px; }
.uni-tabs__form-actions { display: flex; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-2); }

/* Utility hides shown via [hidden] attribute already available */

/*======================================Issues Solving====================================*/

.uni-tabs__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-5);
}

.uni-tabs__table th { z-index: 1; }

.course-container {
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ===== University Tabs: Title-right Pills (non-breaking) ===== */
.uni-tabs__pills {
  display: inline-flex;
  gap: var(--s-2);
  margin-left: auto;           /* title se right push */
  align-self: center;          /* vertical align without touching header rules */
}

.uni-tabs__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--uni-accent-1);  /* soft blue border */
  background: #EAFD8B;               /* same bg as header */
  color: var(--uni-ink);
  font-size: 14px;
  line-height: 1;
  border-radius: 3px;
  white-space: nowrap;                     /* text wrap avoid */
}

.uni-tabs__pill--primary {
  background: #FDF18B;           /* deep blue */
  color: #170B01;                    /* light text on blue */
}

/* Mobile: header me space bachane ke liye pills hide */
@media (max-width: 959.98px) {
  .uni-tabs__pills { display: none; }
}


/*======================================Mobile Responsive====================================*/

/* ====== 430px & below — refined ultra-mobile layout ====== */
@media (max-width: 430px) {
  /* Shell spacing */
  .uni-tabs { padding: var(--s-4) var(--s-3);}

  /* Header: stack + tighter */
  .uni-tabs__header { display: flex; flex-direction: column; padding: 5px; padding-bottom: 20px; }
  .uni-tabs__title { font-size: 20px; line-height: 1.3;}

  #university-tabs .uni-tabs__title {
    text-align: left !important;   /* parent ki centering ko override */
    margin-inline: 0 !important;   /* agar auto margins se center ho raha ho */
    align-self: flex-start !important; /* flex container me left stick */
  }

  /* Grid areas */
  .uni-tabs__left  { padding: 5px; padding-top: 15px;}
  .uni-tabs__right { padding: 15px 5px; }

  /* Mobile control visible; vertical tablist hidden to declutter */
  .uni-tabs__mobile { display: block; }
  .uni-tabs__tablist { display: none; }

  /* Search: comfy touch target */
  .uni-tabs__search-wrap { margin-bottom: var(--s-3); }
  .uni-tabs__search { padding: 10px 12px; font-size: 14px; }

  /* Empty + error blocks */
  .uni-tabs__empty, .uni-tabs__error { padding: var(--s-3); font-size: 14px; }

  /* University header in panel */
  .uni-tabs__uni-name { font-size: 20px; margin-bottom: var(--s-2); line-height: 1.2; }
  .uni-tabs__desc { font-size: 13px; margin-bottom: var(--s-4); }

  /* Actions: stacked, full width */
  .uni-tabs__actions { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .uni-tabs__actions .uni-tabs__btn { width: 100%; padding: 12px; }

  /* Filters: chip density lower */
  .uni-tabs__filters { padding: var(--s-3); }
  .uni-tabs__chips { gap: 6px; }
  .uni-tabs__chip { font-size: 11px; padding: 5px 8px; }
  .uni-tabs__chip-toggle { font-size: 13px; padding: 6px 8px; }

  /* Courses table → cards */
  .uni-tabs__table-wrap { overflow: visible; }
  .uni-tabs__table { font-size: 13px; border-collapse: separate; }
  .uni-tabs__table thead { display: none; }
  .uni-tabs__table tbody tr {
    display: block;
    margin-bottom: var(--s-3);
    border: 1px solid var(--uni-accent-1);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--uni-bg);
  }
  .uni-tabs__table tbody td {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--uni-accent-1);
  }
  .uni-tabs__table tbody td:last-child { border-bottom: 0; }

  /* Self labels (match JS headers order) */
  .uni-tabs__table tbody td:nth-child(1)::before,
  .uni-tabs__table tbody td:nth-child(2)::before,
  .uni-tabs__table tbody td:nth-child(3)::before,
  .uni-tabs__table tbody td:nth-child(4)::before {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .2px;
    opacity: .8;
    content: attr(data-th);
  }
  /* Fallback labels if data-th not present */
  .uni-tabs__table tbody td:nth-child(1):not([data-th])::before { content: "Course Name"; }
  .uni-tabs__table tbody td:nth-child(2):not([data-th])::before { content: "Specialization"; }
  .uni-tabs__table tbody td:nth-child(3):not([data-th])::before { content: "Duration"; }
  .uni-tabs__table tbody td:nth-child(4):not([data-th])::before { content: "Eligibility"; }

  /* Load more: full width */
  .uni-tabs__loadmore .uni-tabs__btn { width: 100%; }

  /* Modal: mobile-friendly sheet */
  .uni-tabs__modal-card { 
    width: 100%;
    max-width: none;
    margin: 0;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: var(--s-4);
  }
  .uni-tabs__modal-title { font-size: 18px; }
  .uni-tabs__form-actions { flex-direction: column; gap: var(--s-2); }
  .uni-tabs__form-actions .uni-tabs__btn { width: 100%; }

  .course-container {
    padding-inline: 0;
  }
  
}