/* ==========================================================================
   UI-KIT: sameiginlegt "cards og tabs" hönnunarkerfi fyrir ALLAR síður.

   Að beiðni notanda: "Ég vill breyta öllu útliti alls staðar til að nota
   svona cards og tabs þegar ég segi 'nota tabs'. Búðu til global css skrá
   til að nota." - fyrirmyndin var skjáskot af öðru kerfi (PQTrack) með
   dökkum "card-header" haus (titill/undirtitill/merki/aðgerðahnappur),
   "alvöru" flipum (tabs) fyrir neðan hausinn sem tengjast við spjaldið sem
   opnast, og ljósum "inset" kössum fyrir texta-innihald.

   Litirnir eru ALDREI harðkóðaðir hér - allt sækir í --theme-primary o.fl.
   úr theme.css, sem er litaþemað sem notandinn sjálfur velur á Stillingar
   síðunni. Grunn-"card" stíllinn sjálfur (hvítt, hringað, með skugga) er
   áfram í base.css (.card) enda er hann nú þegar notaður á fjölda síðna -
   þessi skrá bætir OFAN Á það: card-header/badge/tabs/section-heading/
   inset-box, sem eru öll ný, valfrjáls viðbót ofan á .card.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kortahaus (.card-header) - settur efst inni í .card þegar kortið á að
   hafa nafn/titil, undirtitil og merki (badges), sbr. "Verk" spjaldið í
   PQTrack skjáskotinu. Neikvæðu spássíurnar láta hausinn teygja sig út í
   jaðra kortsins sjálfs (sem er með padding) og hringa sig með kortinu.
   -------------------------------------------------------------------------- */
.card-header {
  background: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-primary));
  color: var(--theme-header-text, #fff);
  border-radius: 11px 11px 0 0;
  padding: 1.25rem 1.5rem;
  margin: -1.5rem -1.5rem 1.5rem;
}

.card-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.card-header-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin: 0 0 0.15rem;
}

.card-header-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
}

.card-header-subtitle {
  margin: 0.25rem 0 0;
  opacity: 0.85;
  font-size: 0.9rem;
}

/* Hnappar (t.d. "Breyta") settir beint inni í hausnum - .primary-btn/
   .secondary-btn erfa annars sinn vanalega lit, sem gæti sokkið í
   bakgrunninn hér, svo þeir fá ljósa/gagnsæja útgáfu í staðinn. */
.card-header .secondary-btn {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  white-space: nowrap;
}

.card-header .secondary-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* --------------------------------------------------------------------------
   Merki (badges) - litlar hringaðar "pillur", ýmist inni í dökkum
   card-header (gagnsæ/ljós útgáfa) eða beint á ljósum bakgrunni annars
   staðar (.badge-light).
   -------------------------------------------------------------------------- */
.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
}

.badge-light {
  background: #f0f0f0;
  border-color: #ddd;
  color: #444;
}

/* --------------------------------------------------------------------------
   Flipar (tabs) - "alvöru" flipar sem tengjast beint við spjaldið (.tab-
   panel) sem opnast fyrir neðan, ólíkt eldri "pill" flipunum (sjá
   .student-detail-tab í schedule.css, sem fær að halda sínu upprunalega
   útliti að sinni). Virka og virkir-flokkar (.tab-btn/.tab-btn.active) eru
   sömu flokksnöfn og áður voru notuð fyrir "pill" útgáfuna, svo engar
   breytingar þarf í JS/EJS - bara þetta nýja útlit tekur gildi alls
   staðar sem þau eru þegar notuð (t.d. Stundatöflur síðan, sjá
   class-schedule.js/renderClassTabs).

   Virkur flipi "sker sig inn" í strikið undir flipastikunni (border-
   bottom-color: sami litur og spjaldið) svo hann virðist tengjast beint
   við innihaldið fyrir neðan - klassísk möppuflipa-tækni.
   -------------------------------------------------------------------------- */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.25rem;
  border-bottom: 2px solid #e0e0e0;
  margin: 0.75rem 0 0;
  padding: 0 0.25rem;
}

.tab-btn {
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: #666;
  border-radius: 10px 10px 0 0;
  padding: 0.6rem 1.15rem;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: -2px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tab-btn:hover {
  background: #f2f2f2;
  color: #333;
}

.tab-btn.active {
  background: #fff;
  border-color: #e0e0e0;
  border-bottom-color: #fff;
  color: var(--theme-primary);
  font-weight: 600;
}

/* Spjaldið sem flipastikan að ofan "opnar" - loðir beint við .tab-bar (sjá
   neikvæða margin-top sem lætur rammana skarast rétt undir virka
   flipanum, svo úr verði EIN samfelld heild). Notað t.d. utan um
   #schedule-section á Stundatöflur síðunni. */
.tab-panel {
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 11px 11px;
  background: #fff;
  padding: 1.5rem;
  margin-top: -2px;
}

/* --------------------------------------------------------------------------
   Kaflafyrirsögn innan korts - hástöfuð, með línu undir (t.d. "STAÐA
   VERKS" í PQTrack skjáskotinu) - notað til að skipta korti/spjaldi upp í
   nokkra rökrétta hluta án þess að þurfa alveg nýtt kort fyrir hvern.
   -------------------------------------------------------------------------- */
.section-heading {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #888;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.4rem;
  margin: 1.5rem 0 0.9rem;
}

.section-heading:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Ljós innskotskassi (inset box) - t.d. fyrir lýsingartexta eða annað
   efni sem á að skera sig lítillega frá kortinu/spjaldinu sjálfu.
   -------------------------------------------------------------------------- */
.inset-box {
  background: #f7f7f8;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 1rem 1.1rem;
}