/* =====================================================================
   KOLEGE v2 — redizajn po ColleaguesPage referenci (pink/violet, bijele
   kartice na #f7f8fc, meke sjene). Učitan NAKON style.css/mobile.css pa
   pobjeđuje u kaskadi — sve kolege klase restilizirane na jednom mjestu,
   logika (classroom.js) netaknuta. Postulati ostaju: 3 reakcije, pitanje
   dana, streak, ankete, bljesak, anonimnost, kruna, pager na mobitelu.
   ===================================================================== */

:root {
  /* AKCENT = coral/crvena iz ikone Kolega (topla, uniseks — nije "pinky").
     --kg-pink imena su zadržana kao aliasi da postojeći CSS/JS rade. */
  --kg-accent: #e0533a;
  --kg-accent-deep: #a3402a;
  --kg-accent-bg: #fdeee9;
  --kg-accent-border: #f2c4b4;

  /* Topli neutrali (taupe) — slažu se s coral akcentom, ne hladno "mrtvo" sivo. */
  --kg-bg: #f8f7f3;
  --kg-surface: #ffffff;
  --kg-text: #201f1c;
  --kg-body: #4a443e;
  --kg-muted: #867d73;
  --kg-border: #eae7e0;
  --kg-chip-bg: #f1eee8;
  --kg-chip-fg: #6b6259;

  /* Role-boje (nose značenje): info / uspjeh / naglasak / upozorenje. */
  --kg-info: #2563eb;
  --kg-info-bg: #e8f0fe;
  --kg-success: #0f9d6f;
  --kg-success-bg: #e3f6ee;
  --kg-warn: #b45309;
  --kg-danger: #dc2626;

  /* Aliasi (stari nazivi → coral). */
  --kg-pink: var(--kg-accent);
  --kg-pink-dark: var(--kg-accent-deep);
  --kg-pink-bg: var(--kg-accent-bg);
  --kg-violet: #7c3aed;
  --kg-grad: linear-gradient(135deg, #f0673c, #d83a3a);
  --kg-shadow: 0 14px 40px rgba(60, 45, 35, 0.09);
  --kg-shadow-soft: 0 8px 24px rgba(60, 45, 35, 0.06);
}

/* ---- podloga i raspored ---- */
#view-classmates { background:
  radial-gradient(circle at 80% 0%, rgba(224, 83, 58, 0.05), transparent 22rem),
  var(--kg-bg); }
.kolege-wrap { padding: 1.35rem 1rem 4rem; }

/* ---- jedna ljepljiva naslovna kartica (naslov + statistika + tabovi) ---- */
.kolege-headbar { position: sticky; top: 0; z-index: 30;
  background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: 16px;
  box-shadow: var(--kg-shadow-soft); padding: 1rem 1.2rem; margin: 0 0 .9rem;
  transition: padding .16s ease; }
.kolege-headbar .khb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.kolege-headbar .kh-titlerow { display: flex; align-items: center; gap: .6rem; }
.kolege-headbar .kh-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--kg-text); transition: font-size .16s ease; }
.kolege-headbar .kh-sub { font-size: .84rem; color: var(--kg-muted); margin-top: .2rem; }
.kolege-headbar .khb-tabs { margin-top: .8rem; transition: margin-top .16s ease; }
.kolege-toolbar-actions { display: flex; align-items: center; gap: .45rem; }

/* skupljeno stanje pri skrolanju: ostaju samo naslov + tabovi + akcije */
.kolege-headbar.compact { padding: .55rem .9rem; }
.kolege-headbar.compact .kh-sub { display: none; }
.kolege-headbar.compact .kh-title { font-size: 1.15rem; }
.kolege-headbar.compact .khb-tabs { margin-top: .5rem; }

.kolege-refresh { width: 40px; height: 40px; border-radius: 12px; background: var(--kg-surface);
  border: 1px solid var(--kg-border); color: #857d73; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; }
.kolege-refresh:hover { background: #f3f0ea; color: var(--kg-pink); }
.kolege-bell-badge { background: var(--kg-pink); }

.kolege-streak { background: var(--kg-surface); border: 1px solid var(--kg-border);
  color: #c2410c; border-radius: 12px; padding: .38rem .7rem; }

/* ---- stories (predmeti) — gradient shell + prsteni ---- */
.kolege-stories { background: linear-gradient(90deg, rgba(255,240,247,.9), rgba(250,243,255,.9)), #fff;
  border: 1px solid var(--kg-border); border-radius: 22px; padding: .9rem 1rem;
  box-shadow: var(--kg-shadow-soft); gap: 1rem; margin-bottom: .9rem; }
.kolege-story .ks-ring { background: linear-gradient(135deg, #eb247c, #7c3aed, #ff874d);
  padding: 3px; border-radius: 50%; }
.kolege-story .ks-av { border: 2px solid #fff; width: 52px; height: 52px; font-size: .95rem; font-weight: 800; }
.kolege-story .ks-name { color: var(--kg-body); font-weight: 700; font-size: .74rem; }
.kolege-story .ks-count { background: var(--kg-pink); }

/* ---- feed tabovi + filtriraj ---- */
.kolege-sort { background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: 14px; padding: 4px; }
.kolege-sort-tab { min-width: 74px; border-radius: 10px; color: #6b6259; font-size: .76rem; }
.kolege-sort-tab:hover { color: var(--kg-pink); }
.kolege-sort-tab.active { background: var(--kg-pink-bg); color: var(--kg-pink); }

/* ---- trending: centralni red + tag-cloud u lijevom railu ---- */
.kolege-trending-label { color: var(--kg-pink); }
.kolege-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; padding: .1rem .5rem .4rem; }
.kolege-tagcloud button { padding: 7px 10px; border: 0; border-radius: 9px; color: #5d6574;
  background: #eceef4; font-size: .7rem; font-weight: 700; cursor: pointer; }
.kolege-tagcloud button:hover, .kolege-tagcloud button.active { color: var(--kg-pink); background: var(--kg-pink-bg); }

/* ---- kartica objave ---- */
.kolege-card { position: relative; background: var(--kg-surface); border: 1px solid var(--kg-border);
  border-radius: 20px; box-shadow: var(--kg-shadow-soft); }
.kolege-page-card { position: relative; }
.kolege-card:hover { transform: translateY(-1px); box-shadow: var(--kg-shadow);
  transition: transform 160ms ease, box-shadow 160ms ease; }
.kolege-card.is-fresh { border-color: var(--kg-accent-border); background: linear-gradient(180deg, var(--kg-accent-bg), #fff 55%); }
.kolege-card.is-relevant { border-color: var(--kg-border); }
.kolege-card.is-featured { border-color: var(--kg-border); }

.kolege-name { font-size: .88rem; font-weight: 700; color: var(--kg-text); }
.kolege-meta { color: var(--kg-muted); }
.kolege-author-sub { display: block; font-size: .72rem; color: var(--kg-muted); margin-top: .05rem; }
.kolege-level { background: var(--kg-chip-bg); color: var(--kg-chip-fg); border-radius: 999px; padding: .16rem .5rem;
  font-size: .62rem; font-weight: 800; }
.kolege-level.is-bot { background: var(--kg-info-bg); color: var(--kg-info); }
.kolege-text { color: var(--kg-body); font-size: .9rem; line-height: 1.58; }

/* header ikonice: spremi + ⋯ */
.kolege-iconbtn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; color: #8b93a2; background: transparent; cursor: pointer; font-size: .95rem; }
.kolege-iconbtn:hover { background: #f3f0ea; }
.kolege-iconbtn.is-saved { color: var(--kg-pink); }

/* ⋯ meni */
.kolege-menu { position: absolute; right: .6rem; top: 2.9rem; z-index: 30; min-width: 160px;
  background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: 14px;
  box-shadow: var(--kg-shadow); padding: .35rem; display: flex; flex-direction: column; }
.kolege-menu button { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem;
  border: 0; background: transparent; border-radius: 9px; font-size: .8rem; font-weight: 600;
  color: var(--kg-body); cursor: pointer; text-align: left; }
.kolege-menu button:hover { background: #f3f0ea; }
.kolege-menu button.is-danger { color: #dc2626; }
.kolege-menu button.is-danger:hover { background: #fef2f2; }

/* ---- badgevi (poglavlje, tip, echo, discover, flash) ---- */
.kolege-badge { background: var(--kg-chip-bg); color: var(--kg-chip-fg); border-radius: 999px; font-weight: 700;
  display: inline-flex; align-items: center; gap: .28rem; padding: .18rem .55rem; }
.kolege-badge .ti { font-size: .9rem; vertical-align: 0; }
.kolege-badge.is-hot { background: var(--kg-accent-bg); color: var(--kg-accent-deep); }
.kolege-badge.is-material { background: var(--kg-info-bg); color: var(--kg-info); }   /* info plava */
.kolege-badge.is-echo { background: #f1eafe; color: var(--kg-violet); }              /* sekundarna ljubičasta */
.kolege-badge.is-discover { background: #fbeee9; color: var(--kg-accent-deep); }     /* topli akcent */
.kolege-badge.is-flash { background: #faedd7; color: var(--kg-warn); }               /* amber/žuta */
/* ikone unutar avatara i level-badgeva okomito poravnate */
.kolege-av-anon .ti { font-size: 1.1rem; }
.kolege-level .ti { font-size: .85rem; vertical-align: -1px; }
.kolege-subject-tag { border-radius: 9px; }

/* ---- v3 red akcija: glavna reakcija (+paleta) · odgovori · spremi ---- */
.kolege-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: .75rem; }
.kolege-rx { position: relative; display: inline-flex; }
.kolege-rx-main { touch-action: manipulation; }
.kolege-rx-palette { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30;
  display: flex; gap: 2px; padding: 5px; white-space: nowrap;
  background: var(--kg-surface); border: 1px solid var(--kg-border);
  border-radius: 999px; box-shadow: var(--kg-shadow);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease; }
.kolege-rx:hover .kolege-rx-palette,
.kolege-rx.show .kolege-rx-palette { opacity: 1; visibility: visible; transform: none; }
.kolege-rx-opt { border: 0; background: transparent; border-radius: 999px;
  padding: .34rem .6rem; font-size: .76rem; font-weight: 700; color: #6b6259; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem; }
.kolege-rx-opt:hover, .kolege-rx-opt.active { background: var(--kg-pink-bg); color: var(--kg-pink); }

/* ---- Tabler ikone: malo veće od teksta, okomito poravnate ---- */
#view-classmates .ti { font-size: 1.02rem; line-height: 1; vertical-align: -2px; }
.kolege-pill .ti, .kolege-rx-opt .ti { font-size: 1rem; }
.kolege-refresh .ti, .kolege-bell .ti { font-size: 1.2rem; vertical-align: -3px; }
.kolege-streak .ti { font-size: 1rem; vertical-align: -2px; }

/* ---- akcijske pilule: "soft elevated" (kao početni ekran / hg-chip) ----
   bijele, 999px, blaga sjena, suptilan topli rub; glavna reakcija rozi
   tekst, a puna roza kad je aktivna. Isti oblik kroz cijeli app. */
.kolege-pill { height: 34px; border: 0.5px solid var(--kg-accent-border); border-radius: 999px;
  background: var(--kg-surface); color: var(--kg-body); font-size: .76rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .4rem; padding: 0 .85rem;
  box-shadow: 0 3px 10px -6px rgba(163, 64, 42, .24);
  transition: box-shadow .14s ease, background .14s ease, color .14s ease, border-color .14s ease; }
.kolege-pill:hover { box-shadow: 0 5px 14px -6px rgba(163, 64, 42, .4); }
.kolege-pill.active { background: var(--kg-pink); color: #fff; border-color: var(--kg-pink);
  box-shadow: 0 5px 14px -6px rgba(212, 83, 126, .5); }
/* glavna reakcija (Hvala/Dolazim) — rozi tekst da signalizira primarnu akciju */
.kolege-rx-main { color: var(--kg-pink); }
.kolege-rx-main.active { color: #fff; }
/* poziv "Odgovori prvi" — rozi tekst kao nježan nagovor */
.kolege-pill-replies.is-invite { color: var(--kg-pink); }
.kolege-pill-replies.active { background: var(--kg-pink); color: #fff; border-color: var(--kg-pink); }
/* spremljeno — puna roza kao i ostala aktivna stanja */
.kolege-pill-save.is-saved { background: var(--kg-pink); color: #fff; border-color: var(--kg-pink); }

/* ---- top-odgovor preview ---- */
.kolege-top-reply { background: #f6f4ef; border-left: 3px solid #eae7e0; border-radius: 12px; }
.kolege-top-reply:hover { background: #f1f3f8; }
.kolege-top-reply .ktr-name { color: var(--kg-text); }
.kolege-top-reply .ktr-text { color: var(--kg-muted); }
.kolege-top-reply .ktr-hearts { color: var(--kg-pink); }

/* ---- anketa ---- */
.kolege-poll-opt { border: 1.5px solid var(--kg-accent-border); color: var(--kg-pink); border-radius: 12px; background: #fff; }
.kolege-poll-opt:hover { background: var(--kg-pink-bg); border-color: var(--kg-pink); }
.kolege-poll-bar { border: 1px solid var(--kg-border); border-radius: 12px; background: #f6f4ef; }
.kolege-poll-bar .kpb-fill { background: #ffd6e8; }
.kolege-poll-bar.is-mine { border-color: var(--kg-pink); }
.kolege-poll-bar.is-mine .kpb-label { color: var(--kg-pink); }
.kolege-poll-bar .kpb-label { color: var(--kg-body); }

/* ---- thread ---- */
.kolege-thread { border-top: 1px solid var(--kg-border); background: #fbfbfd;
  border-radius: 0 0 20px 20px; }
.kolege-reply-input { border: 1px solid #eae7e0; border-radius: 12px; background: #f6f4ef; }
.kolege-reply-input:focus { background: #fff; border-color: #f2a9c7;
  box-shadow: 0 0 0 4px rgba(232, 31, 115, .06); }
.kolege-best-reply { background: #f6fef9; }
.kolege-best-badge { background: #dcfce7; color: #15803d; }
.kolege-op-badge { background: var(--kg-accent-bg); color: var(--kg-accent-deep); }
.kolege-mark-best { color: #15803d; }
.kolege-send { background: var(--kg-grad); border-radius: 11px; font-weight: 800;
  box-shadow: 0 10px 20px rgba(194, 30, 137, .18); }

/* ---- 🔬 Zanimljivost dana — kartica utkana u feed (ne izgleda kao objava) ---- */
.kolege-fact-card { background: linear-gradient(135deg, #faeeda, #fff 72%) !important;
  border: 1px solid #f2e2c8 !important; }
.kolege-fact-card .kolege-fact-head { font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--kg-warn); }
.kolege-fact-card .kolege-fact-quote { font-size: 1.02rem; line-height: 1.5; font-style: italic;
  color: var(--kg-text); margin: .5rem 0 .55rem; }
.kolege-fact-card .kolege-fact-src { font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--kg-muted); }
.kolege-page-card.kolege-fact-card { justify-content: center; }

/* 📰 Novost iz znanosti utkana u feed (klikabilna kartica) */
a.kolege-newscard { display: block; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff) !important; border: 1px solid #dbeafe !important; }
a.kolege-newscard:hover { box-shadow: var(--kg-shadow); transform: translateY(-1px);
  transition: transform .16s ease, box-shadow .16s ease; }
.kolege-newscard .kolege-fact-head { color: #1e40af; }
.kolege-newscard-title { font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--kg-text); margin: .5rem 0 .45rem; }
.kolege-newscard-src { font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #2563eb; }
/* Novosti-kartica u pageru je omotana u <a>; mora biti PUNE visine, inače ta
   "stranica" ne ispuni ekran i paging/indeks/fade se pomute (vide se dvije
   kartice odjednom). */
.kolege-page-newslink { text-decoration: none; display: block; height: 100%;
  scroll-snap-align: start; scroll-snap-stop: normal; }

/* streak chip poravnat s ikona-gumbima u akcijama */
.kolege-toolbar-actions .kolege-streak { height: 40px; display: inline-flex; align-items: center; }
.kolege-playbtn { color: var(--kg-pink); }

/* ---- railovi ---- */
.kolege-rail-card { background: var(--kg-surface); border: 1px solid var(--kg-border);
  border-radius: 18px; padding: 1rem; box-shadow: var(--kg-shadow-soft); }
.kolege-rail-card .krc-title { font-size: .8rem; font-weight: 800; color: var(--kg-text); }
.kolege-rail-card .krc-row { font-size: .76rem; }
.kolege-rail-card .krc-n { color: #8790a2; }
.kolege-rail-card .krc-name { color: var(--kg-body); font-weight: 600; }
.kolege-rail-card .krc-xp { color: #6d28d9; font-weight: 800; }
.kolege-rail-card .krc-body { color: var(--kg-muted); }
.kolege-nav-item { border-radius: 12px; color: #4f5a6c; font-weight: 600; }
.kolege-nav-item:hover { background: #f0f2f7; }
.kolege-nav-item.active { color: var(--kg-pink); background: var(--kg-pink-bg); font-weight: 800; }

/* aktivne rasprave */
.kolege-disc { display: grid; grid-template-columns: 32px 1fr 16px; gap: 10px; align-items: center;
  padding: 9px 0; border: 0; background: transparent; text-align: left; cursor: pointer; width: 100%; }
.kolege-disc .kd-ico { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: .85rem; }
.kolege-disc .kd-ico.c1 { color: #2563eb; background: #eaf1ff; }
.kolege-disc .kd-ico.c2 { color: #7c3aed; background: #f1eafe; }
.kolege-disc .kd-ico.c3 { color: #0f7ce0; background: #ecf5ff; }
.kolege-disc strong { display: block; font-size: .76rem; color: var(--kg-text); margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kolege-disc small { display: block; font-size: .66rem; color: var(--kg-muted); }
.kolege-disc .kd-arrow { color: #9aa3b5; font-size: .8rem; }

/* zanimljivost dana */
.kolege-fact { border: 1px solid #f2e2c8; background: linear-gradient(135deg, #faeeda, #fff 72%); }
.kolege-fact .krc-title { color: var(--kg-warn); }

/* novosti — naslov max 2 retka da kartica ostane niska */
.kolege-news-item .knt { color: var(--kg-text); font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kolege-news-item .kns { color: var(--kg-muted); }
.kolege-news-more { display: block; margin-top: .5rem; border: 0; background: transparent;
  color: var(--kg-pink); font-size: .72rem; font-weight: 800; cursor: pointer; padding: 0; }

/* 📰 "Sve novosti" panel — scrollabilna lista preko cijelog pool-a */
.kolege-news-sheet { max-width: 36rem; max-height: 82vh; display: flex; flex-direction: column; }
.knp-head { display: flex; align-items: center; justify-content: space-between;
  font-size: .95rem; font-weight: 800; color: var(--kg-text); padding: .2rem .2rem .6rem; }
.knp-list { overflow-y: auto; min-height: 0; display: flex; flex-direction: column;
  gap: .15rem; padding-right: .3rem; }
.knp-list .kolege-news-item { padding: .55rem .6rem; border-radius: 12px; }
.knp-list .kolege-news-item:hover { background: #f3f0ea; }
.knp-list .kolege-news-item .knt { -webkit-line-clamp: 3; }

/* spojena "Ovaj tjedan" kartica: separator + podnaslov sekcije */
.krc-sep { height: 1px; background: var(--kg-border); margin: .6rem 0 .5rem; }
.krc-subtitle { font-size: .64rem; font-weight: 800; color: var(--kg-muted);
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: .3rem; }

/* privatnost: sklopljene akcije iza malog togglea */
.kolege-priv-toggle { display: block; margin-top: .5rem; border: 0; background: transparent;
  color: var(--kg-pink); font-size: .72rem; font-weight: 800; cursor: pointer; padding: 0; }
#kolege-privacy-more.hidden { display: none; }

/* blokirani + purge u privatnost kartici */
.kolege-unblock { background: var(--kg-pink-bg); color: var(--kg-pink); border-radius: 9px; }
.kolege-purge { background: #fef2f2; color: #dc2626; border-radius: 10px; }

/* ---- FAB + nova-objava pilula ---- */
.kolege-fab, #kolege-desktop-fab { background: var(--kg-grad);
  box-shadow: 0 12px 26px -8px rgba(163, 64, 42, .5); }
.kolege-new-pill { background: var(--kg-grad); box-shadow: 0 12px 28px -6px rgba(163, 64, 42, .5); }

/* ---- compose sheet ---- */
.kolege-sheet { border-radius: 20px 20px 0 0; }
@media (min-width: 769px) { .kolege-sheet { border-radius: 20px; } }
.kolege-sheet textarea { border: 1px solid #eae7e0; border-radius: 14px; background: #f6f4ef; }
.kolege-sheet textarea:focus { background: #fff; border-color: #f2a9c7;
  box-shadow: 0 0 0 4px rgba(232, 31, 115, .06); }
.kolege-chip { border: 1px solid #e3e6ed; border-radius: 11px; background: #fff;
  color: #6b6259; font-weight: 700; }
.kolege-chip.active { background: var(--kg-pink-bg); color: var(--kg-accent-deep); border-color: var(--kg-accent-border); }
.kolege-poll-input { border: 1px solid #eae7e0; border-radius: 12px; background: #f6f4ef; }
.kolege-poll-input:focus { background: #fff; border-color: #f2a9c7; }
.kolege-poll-add { color: var(--kg-pink); }
.kolege-similar-item { background: #f6f4ef; border-color: var(--kg-border); border-radius: 12px; }
.kolege-similar-item:hover { background: #f1f3f8; }
.kolege-similar-title { color: var(--kg-violet); }
.kolege-similar-item .ksi-meta { color: var(--kg-pink); }

/* ---- review (kviz-echo) kartica u novoj paleti ---- */
.kolege-review { border-color: #e5d9f7 !important; background: linear-gradient(180deg, #f6efff, #fff 60%); }
.kolege-review-head { color: var(--kg-violet); }
.kolege-review-opt { border-radius: 12px; }

/* =====================================================================
   MOBILNI PAGER — immerzivni "Za tebe" (TikTok / IG Reels / Querencia).
   Prije: stara roza paleta iz style.css (#fff1f2 glow, #fecdd3 rub,
   #be123c akcent) + kartica lebdi u sredini s ~200px mrtvog prostora.
   Sada: coral paleta + kartica ispunjava ekran, akcije u zoni palca.
   Recolor vrijedi svugdje gdje se pager pojavi; layout je u @media ≤768px
   pa desktop/tablet (lista) ostaju netaknuti.
   ===================================================================== */

/* --- podloga stranice: mekan, topao neutral (ne "spržen" coral glow) — u
   duhu čistog Learn Now backgrounda, samo topliji --- */
.kolege-page {
  background: linear-gradient(180deg, #faf1ec 0%, var(--kg-bg) 42%);
}
.kolege-page-card { background: var(--kg-surface); border: 1px solid var(--kg-border);
  box-shadow: var(--kg-shadow); }
.kolege-page-text { color: var(--kg-body); }

/* --- prijelaz između kartica: lakši swipe + blagi fade --- */
/* lakše/manje ljepljivo: ne forsira zaustavljanje na SVAKOJ kartici */
.kolege-page { scroll-snap-stop: normal; }
/* fade: kartica izvan fokusa tiho utihne, ona u fokusu je puna (IO dodaje .kolege-page-in) */
.kolege-page-card { opacity: .3; transition: opacity .4s ease; }
.kolege-page-in .kolege-page-card { opacity: 1; }

/* --- HUD čipovi (brojač / izlaz / hint): coral staklo --- */
.kolege-pager-counter,
.kolege-pager-exit,
.kolege-swipe-hint {
  background: rgba(255, 255, 255, .9); border-color: var(--kg-accent-border);
  color: var(--kg-accent-deep); backdrop-filter: blur(8px);
}
.kolege-pager-hud .kolege-refresh { border-radius: 999px; }
.kolege-pager-hud .kolege-streak { border-radius: 999px; }
.kolege-published-overlay .kpo-title { color: var(--kg-pink); }

/* --- fiksni gornji sloj pagera: JEDAN čist red (sort lijevo, akcije desno) --- */
/* pointer-events:none pušta swipe kroz praznu sredinu; kontrole ih vraćaju */
.kolege-pager-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding: calc(env(safe-area-inset-top, 0px) + 1.5rem) .6rem 0; pointer-events: none; }
.kolege-pager-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kolege-pager-bar .kolege-pager-sort, .kolege-pager-bar .kolege-pager-hud { pointer-events: auto; }
.kolege-pager-topbar .kolege-pager-hud { position: static; top: auto; left: auto; right: auto;
  display: flex; align-items: center; gap: .4rem; }
.kolege-pager-sort .kolege-sort { box-shadow: var(--kg-shadow-soft); }

/* hub dugme (▦) — otvara "Zajednica" sheet */
.kolege-hub-btn { color: var(--kg-accent-deep); }
.kolege-hub-btn:hover { background: var(--kg-accent-bg); }

/* --- "Zajednica" bottom sheet: desktop rail spakiran --- */
/* Dok je sheet otvoren: zaključaj pozadinu da scroll ne curi u feed/pager. */
body.kolege-sheet-open { overflow: hidden; }
body.kolege-sheet-open .kolege-pager { overflow: hidden !important; touch-action: none; }
/* BEZ kolegeSheetUp animacije: u nekim okruženjima se zamrzne na from-kadru
   (translateY 30%) pa sheet ostane gurnut dolje i dno mu je off-screen. Instant
   pojava na točnoj (dnu prikvačenoj) poziciji je pouzdanija od entrance efekta. */
.kolege-hub-sheet { animation: none; transform: none;
  max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; }
.kolege-hub-sheet::-webkit-scrollbar { display: none; }
.kolege-hub-head { display: flex; align-items: center; justify-content: space-between;
  margin: .1rem 0 .3rem; }
.kolege-hub-title { display: inline-flex; align-items: center; gap: .45rem;
  font-size: 1.1rem; font-weight: 800; color: var(--kg-text); }
.kolege-hub-title .ti { color: var(--kg-accent); }
.kolege-hub-close { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--kg-border);
  background: var(--kg-surface); color: var(--kg-muted); display: grid; place-items: center; flex: none; }
.kolege-hub-close:hover { background: var(--kg-chip-bg); color: var(--kg-text); }
/* "Tvoj status" — dnevni niz kao kartica na vrhu izbornika */
.kolege-hub-streak { display: flex; align-items: center; gap: .7rem; }
.kolege-hub-streak .khs-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 14px; background: var(--kg-accent-bg); color: var(--kg-accent); font-size: 1.25rem; flex: none; }
.kolege-hub-streak.is-cold .khs-ico { background: var(--kg-chip-bg); color: var(--kg-muted); }
.kolege-hub-streak .khs-main { display: flex; align-items: baseline; gap: .35rem; }
.kolege-hub-streak .khs-days { font-size: 1.35rem; font-weight: 800; color: var(--kg-text); line-height: 1; }
.kolege-hub-streak .khs-sub { font-size: .72rem; color: var(--kg-muted); }
.kolege-hub-streak .khs-hint { margin-left: auto; font-size: .7rem; color: var(--kg-body);
  text-align: right; max-width: 46%; }
.kolege-hub-section { margin-bottom: .3rem; }
.kolege-hub-label { display: flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--kg-muted); margin: .2rem .1rem .5rem; }
/* rail unutar sheeta: skini desktop pozicioniranje, kartice u stupac */
.kolege-hub-body .kolege-rail { position: static; width: auto; max-width: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .7rem; }

/* --- skeletons --- */
.kolege-skel { background: #eef0f5; border-radius: 20px; }

/* --- zaostaci stare roze: @spomeni i maskota-glava (obje view-e) --- */
.kolege-mention { color: var(--kg-accent-deep); background: var(--kg-accent-bg); }
.kolege-mention-dd button:hover { background: var(--kg-accent-bg); color: var(--kg-accent-deep); }
.kolege-empty-head { background: linear-gradient(180deg, var(--kg-accent-bg) 0%, #fbe3da 100%);
  border-color: var(--kg-accent-border); }

/* =====================================================================
   MOBITEL (≤768px) — layout immerzivnog pagera
   ===================================================================== */
@media (max-width: 768px) {

  /* Kartica je VELIČINE SADRŽAJA i CENTRIRANA u slajdu (isti obrazac kao naš
     Learn Now `.learn-slide`/`.peek-feed-item`) — nema rastezanja na cijelu
     visinu koje je ostavljalo rupu u sredini. Vrh rezerviran za topbar. */
  /* Kartica VERTIKALNO CENTRIRANA — simetričan razmak gore/dolje da objava
     stvarno sjedne na sredinu ekrana. */
  .kolege-page {
    align-items: center;
    padding: 3.6rem .8rem 3.6rem;
  }

  /* Content-sized, mekano zaobljena, s mekom sjenom; duge objave skrolaju
     UNUTAR kartice (max-height ostavlja zrak dolje za FAB). */
  .kolege-page-card {
    height: auto;
    max-height: calc(100% - .5rem);
    border-radius: 20px;
    padding: 1.2rem 1.25rem;
    gap: .85rem;
    box-shadow: 0 14px 36px -18px rgba(60, 45, 35, .32),
                0 4px 12px -8px rgba(60, 45, 35, .12);
  }
  /* sadržaj teče prirodno; akcije idu ODMAH ispod (mt-auto push isključen) */
  .kolege-page-card .mt-auto { margin-top: 0; }

  /* Objava je zvijezda — veći, čitljiviji tekst za immerziju. */
  .kolege-page-text {
    font-size: 1.12rem;
    line-height: 1.62;
  }

  /* Veći avatar u immerzivnoj kartici. */
  .kolege-page-card .kolege-av-lg { width: 3rem; height: 3rem; font-size: .92rem; }

  /* Akcije idu odmah ispod sadržaja (bez prikvačivanja na dno = bez rupe);
     desni razmak čuva donji-desni kut za FAB kad je kartica visoka. */
  .kolege-page-card .kolege-actions {
    margin-top: .2rem;
    padding-top: .75rem;
    padding-right: 3.4rem;
    border-top: 1px solid var(--kg-border);
    gap: .45rem;
    flex-wrap: wrap;
  }

  /* Veće mete za palac, malo uže da tri stanu u red. */
  .kolege-page-card .kolege-pill {
    height: 40px;
    font-size: .8rem;
    padding-left: .7rem;
    padding-right: .7rem;
  }

  /* Spremi = samo ikona (IG stil) — oslobađa red da reakcija + odgovori
     stanu bez preloma. Text node se skuplja na font-size:0; ikona ostaje. */
  .kolege-page-card .kolege-pill-save { font-size: 0; padding-left: .65rem; padding-right: .65rem; }
  .kolege-page-card .kolege-pill-save .ti { font-size: 1.15rem; }

  /* HUD = kompaktan cluster desno u traci (streak · brojač · zvono · hub). */
  .kolege-pager-hud { gap: .35rem; }
  .kolege-pager-hud .kolege-refresh { width: 40px; height: 40px; }
  .kolege-pager-counter { font-size: .72rem; padding: .32rem .7rem; }

  /* Stories (predmeti) — slim traka pri vrhu, tek kad ih ima ≥2.
     Poništava veliku "karticu" iz desktop v2 stila. */
  .kolege-pager-hud .kolege-stories {
    order: -1; flex: 0 1 auto; min-width: 0;
    margin: 0 .4rem 0 0; padding: .28rem .4rem;
    background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px);
    border-radius: 999px; box-shadow: var(--kg-shadow-soft);
    gap: .4rem; overflow-x: auto; max-width: 40%;
  }
  .kolege-pager-hud .kolege-stories::-webkit-scrollbar { display: none; }
  .kolege-pager-hud .kolege-story .ks-ring { padding: 2px; }
  .kolege-pager-hud .kolege-story .ks-av { width: 30px; height: 30px; font-size: .62rem; }

  /* "+" FAB centriran na dnu (kao na desktopu). */
  .kolege-fab {
    width: 3.5rem; height: 3.5rem; font-size: 1.9rem; font-weight: 700; line-height: 1;
    bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    left: 50%; right: auto; transform: translateX(-50%);
  }
  .kolege-fab:hover { transform: translateX(-50%) translateY(-2px) scale(1.05); }

  /* Swipe hint IZNAD centriranog FAB-a da se ne preklapaju. */
  .kolege-swipe-hint { bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); }
}