/* =========================================================================
   Derslik — home slice (slice 3): the dashboard, the join/create dialog and
   the Kişiler (friends) page.

   Structure lives in `src/views/home.js` and `src/views/friends.js`.
   Loaded after `dk/base.css` and after `styles.css`, which still carries the
   pre-redesign `.friend-row` / `.dm-item` / `.home-*` rules — the legacy
   selectors are reused on purpose (client scripts key off some of them), so
   several blocks below deliberately re-declare a legacy property to win the
   cascade rather than leaving the old value to leak through.

   Design refs: `Derslik v5.dc.html:139-255` (dashboard), `:1056-1074`
   (join/create), `Derslik v2.dc.html:167-201` (Kişiler), spec §4.2.
   ========================================================================= */

/* =========================================================================
   1. Dashboard shell — v5:140-151
   ========================================================================= */
.home-dash { overflow: hidden; }
.home-dash__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  padding: var(--sp-8) var(--sp-9) var(--sp-11);
}

/* v5:150 — main column + a fixed 330px rail. `minmax(0,1fr)` keeps long
   derslik names from pushing the grid wider than its track. */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--sp-7);
  align-items: stretch;
}
.home-col { display: flex; flex-direction: column; gap: var(--sp-7); min-width: 0; }

/* --- hero (v5:142-149) --------------------------------------------------- */
.home-hero__mark { flex: none; display: block; height: 34px; width: auto; }
.home-hero__text { flex: 1; min-width: 0; }
/* `.dk-hero__title`/`__sub` are authored for block elements; here they sit on
   spans so the hero stays one flex row with a single text cell. */
.home-hero .dk-hero__title,
.home-hero .dk-hero__sub { display: block; }
.home-hero .dk-hero__sub { margin-top: 2px; font-size: var(--fs-sm); }
.home-hero__cta { flex: none; }

/* =========================================================================
   2. DERSLİKLERİM tiles — v5:153-165
   ========================================================================= */
.home-block { display: flex; flex-direction: column; gap: var(--sp-4); }
/* `.dk-subhead` is padded for sidebar rows; on the dashboard the eyebrow must
   line up with the tile grid's left edge (v5:153). */
.home-block > .dk-subhead { padding-left: 0; padding-right: 0; }
.home-block__empty {
  display: block;
  flex: none;
  padding: var(--sp-10);
  border: var(--bw) dashed var(--line);
  border-radius: var(--r-lg);
  font-size: var(--fs-md);
}

/* candidate for base.css — the two text cells of a `.dk-tile`. */
.dk-tile__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dk-tile__name {
  font: 800 var(--fs-lg) / 1.25 var(--font);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dk-tile__sub {
  font: 400 var(--fs-xs) / 1.3 var(--font);
  color: var(--mut);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-tile__live { flex: none; }
.home-tile__live[hidden] { display: none; }

/* =========================================================================
   3. Cards — publishers, Duyurular, Bugünkü derslerim, Mesajlar
   v5:167-250
   ========================================================================= */
.home-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
}
/* v5:203, :219, :234 — the plain section cards sit on --panel2 with no border. */
.home-card--panel {
  background: var(--panel2);
  border: 0;
  border-radius: var(--r-xl);
  padding: var(--sp-8);
}
.home-card--grow { flex: 1; }
.home-card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-3);
  font: 800 var(--fs-xl) / 1.25 var(--font);
  color: var(--ink);
}
.home-card__title .i { color: var(--acc); flex: none; }
.home-card__title--accent { color: var(--acc); margin-bottom: 0; font-size: var(--fs-lg); }
.home-card__row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
/* `.dk-select` is `width:100%` by default, which would break the row onto two
   lines; here it must shrink to its longest derslik name (v5:180). */
.home-card__select { flex: none; width: auto; max-width: 100%; }
.home-card__input { flex: 1; min-width: 180px; }
.home-card__hint { margin: 0; font: 400 var(--fs-xs) / 1.4 var(--font); color: var(--mut); }
.home-card__notice { margin: 0; font-size: var(--fs-xs); }
.home-card__empty {
  flex: none;
  display: block;
  padding: var(--sp-9) var(--sp-5);
  font-size: var(--fs-md);
}

/* --- Duyurular feed (v5:205-213) ----------------------------------------- */
.home-feed { display: flex; flex-direction: column; gap: var(--sp-5); }
.home-feed__item {
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-row);
}
.home-feed__head { display: flex; align-items: center; gap: var(--sp-4); }
.home-feed__title { font: 800 var(--fs-sm) / 1.3 var(--font); color: var(--ink); }
.home-feed__date { margin-left: auto; font: 400 var(--fs-2xs) / 1.3 var(--font); color: var(--mut); }
.home-feed__text {
  margin: var(--sp-2) 0 0;
  font: 400 var(--fs-sm) / var(--lh-body) var(--font);
  color: var(--mut);
  text-wrap: pretty;
}

/* --- Bugünkü derslerim (v5:222-229) -------------------------------------- */
.home-lessons { display: flex; flex-direction: column; gap: var(--sp-3); }
.home-lesson { background: var(--panel); padding: var(--sp-5) var(--sp-6); }
.home-lesson:hover { background: var(--panel); box-shadow: var(--golge); }
.home-lesson.is-now { background: var(--okSoft); }
.home-lesson.is-now:hover { background: var(--okSoft); }
.home-lesson__time {
  flex: none;
  width: 46px;
  font: 800 var(--fs-sm) / 1.3 var(--font);
  color: var(--mut);
}
.home-lesson.is-now .home-lesson__time { color: var(--ok); }
.home-lesson__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-lesson__subject {
  font: 700 var(--fs-md) / 1.3 var(--font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-lesson__guild { font: 400 var(--fs-2xs) / 1.3 var(--font); color: var(--mut); }

/* --- Mesajlar (v5:236-249) -----------------------------------------------
   `.dm-item` keeps its legacy class because `notify.js:62` selects on it; the
   old `styles.css` block (padding, hover tint, `float:right` badge) is
   overridden here rather than deleted there.
   ------------------------------------------------------------------------- */
.home-dms { display: flex; flex-direction: column; gap: var(--sp-3); }
.home-dm.dm-item {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--panel);
}
.home-dm.dm-item:hover { background: var(--panel); box-shadow: var(--golge); }
.home-dm__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-dm__name {
  font: 800 var(--fs-sm) / 1.3 var(--font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-dm__preview {
  font: 400 var(--fs-2xs) / 1.35 var(--font);
  color: var(--mut);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The slot must read as an inline chip, not the floated block
   `styles.css:3111` sets — and it must vanish while empty, because
   `notify.js:51` only ever writes the badge's text (it would not clear a
   `hidden` attribute, so the row carries no `hidden` for it to miss). */
.home-dm .unread-badge { float: none; margin-left: 0; flex: none; }
.home-dm .unread-badge:empty { display: none; }
.home-dm-new { margin-top: var(--sp-5); background: var(--panel); }
.home-dm-new .dk-row__name { font-size: var(--fs-sm); font-weight: 700; }

/* =========================================================================
   4. Join / create dialog — v5:1056-1074
   ========================================================================= */
.home-modal {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-10);
}
.home-modal__card { margin: auto; gap: var(--sp-6); }
/* No `display` here on purpose: `shell-extra.css` hides one of the two
   colourways with `display:none`, and re-declaring it would render the
   invisible twin as a 42px hole above the title. */
.home-modal__mark { align-self: center; height: 42px; width: auto; }
.home-modal__form { display: flex; flex-direction: column; gap: var(--sp-6); margin: 0; }
.home-modal__form .dk-field { display: flex; flex-direction: column; gap: var(--sp-3); }
.home-modal__code { margin: 0; text-align: center; }
/* The dialog carries two forms — join by class code, then open a new class.
   The rule separates them; the hint says who the second one is for. */
.home-modal__sep {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin: 0;
  font-size: var(--fs-sm);
  text-transform: lowercase;
}
.home-modal__sep::before,
.home-modal__sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.home-modal__hint { margin: calc(-1 * var(--sp-3)) 0 0; text-align: center; font-size: var(--fs-sm); }
.home-modal .optional { font-weight: 400; color: var(--mut); }

/* =========================================================================
   5. Kişiler — Derslik v2.dc.html:167-201
   ========================================================================= */
.fr-head { gap: var(--sp-5); padding: var(--sp-7) var(--sp-9); }
.fr-head__title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 1;
  min-width: 0;
  font: 800 var(--fs-2xl) / 1.25 var(--font);
}
.fr-head__back { flex: none; }
.fr-body { padding: var(--sp-9) var(--sp-10) var(--sp-12); }
.fr-inner { max-width: 680px; display: flex; flex-direction: column; gap: var(--sp-10); }

.fr-add { margin: 0; }
.fr-add .dk-field { display: flex; flex-direction: column; gap: var(--sp-4); }
.fr-add__row { display: flex; gap: var(--sp-4); }
/* Both of these out-specify a legacy rule rather than repeat a default:
   `styles.css:544` gives `.inline-add-row input` `flex:1` (which would eat the
   fixed 220px of v2:177) and `styles.css:588` gives `.form .btn` `width:100%`
   (v2:178 stretches the button, but a 460px primary button dominates the
   page, so it keeps its intrinsic width here). */
.fr-add__row .fr-add__input { width: 220px; flex: none; }
.fr-add__row .dk-btn { flex: none; width: auto; margin-top: 0; }

.fr-section { display: flex; flex-direction: column; gap: var(--sp-4); }
.fr-section__head { padding: 0; }
.fr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
/* `.dk-empty` is a full-height centred pane state; inside a section list it is
   a single muted line under the eyebrow. */
.fr-empty {
  display: block;
  flex: none;
  padding: 0;
  text-align: left;
  font-size: var(--fs-md);
}

/* `.dk-row--card` is authored for clickable rows; these are containers whose
   children are the controls, so the pointer affordance is removed. */
.fr-row {
  cursor: default;
  margin: 0;
  background: var(--panel);
  border: var(--bw-thin) solid var(--line);
  padding: var(--sp-5) var(--sp-6);
}
.fr-row:hover { background: var(--panel); }
.fr-row.is-blocked { opacity: 0.75; }
.fr-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fr-name { font: 700 var(--fs-md) / 1.3 var(--font); color: var(--ink); }
.fr-handle { font-size: var(--fs-2xs); }

/* v2 reveals the quick actions on hover; keep that, but never hide them from
   the keyboard (`:focus-within`) — they are real buttons. */
.fr-actions { display: flex; gap: var(--sp-2); flex: none; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.fr-row:hover .fr-actions,
.fr-row:focus-within .fr-actions { opacity: 1; }
.fr-manage { display: flex; align-items: center; gap: var(--sp-3); flex: none; margin-left: var(--sp-3); }
.fr-form { margin: 0; }

@media (hover: none) {
  .fr-actions { opacity: 1; }
}

/* =========================================================================
   6. Friends drawer rows — the markup is shell-owned (`friendsDrawer()`) and
   `public/friends-drawer.js` builds the contents; only the dressing is here.
   ========================================================================= */
.friends-drawer-head .social-tab { font: 800 var(--fs-md) / 1 var(--font); }
.fd-section {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-8) 0 var(--sp-4);
  font: 800 var(--fs-2xs) / 1.3 var(--font);
  color: var(--mut);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.fd-section:first-child { margin-top: 0; }
.fd-count {
  padding: 1px var(--sp-4);
  border-radius: var(--r-2xs);
  background: var(--panel2);
  color: var(--mut);
  font-size: var(--fs-4xs);
}
.fd-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  transition: background var(--dur-1) var(--ease);
}
.fd-row:hover { background: var(--panel2); }
.fd-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--avatar-bg, var(--acc));
  color: #fff;
  font: 800 var(--fs-xs) / 1 var(--font);
  object-fit: cover;
}
.fd-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fd-name {
  font: 700 var(--fs-md) / 1.3 var(--font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-handle { font: 400 var(--fs-2xs) / 1.3 var(--font); color: var(--mut); }
.fd-owner {
  margin-left: var(--sp-3);
  padding: 1px var(--sp-3);
  border-radius: var(--r-2xs);
  background: var(--accSoft);
  color: var(--accInkSoft);
  font-size: var(--fs-4xs);
  text-transform: uppercase;
}
.fd-actions { display: flex; gap: var(--sp-3); align-items: center; flex: none; }
.fd-actions form { margin: 0; }
/* `styles.css:392` gives every legacy `.btn` a 1.25rem top margin for the old
   stacked card forms; inside a row it drops the second button a line. */
.fd-actions .btn,
.fd-quick-actions .fq-btn,
.fr-manage .btn { margin-top: 0; }
.fd-status { padding: var(--sp-6) var(--sp-5); font-size: var(--fs-sm); }

/* =========================================================================
   7. Narrow viewports — decision D10 keeps responsive out of v1, but the two
   dashboard columns cannot both hold their minimum under ~1040px.
   ========================================================================= */
@media (max-width: 1040px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Kişiler — "Grup sohbeti başlat" (views/friends.js:groupDmForm). The picker
   is a <details> so it does not push the friend list down until it is wanted;
   the summary borrows `.dk-btn--dashed`, the same "add a thing" affordance the
   channel panel uses. Note the border token on this sheet is `--line`. */
.fr-group { margin: 0; }
.fr-group__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-md);
  cursor: pointer;
  font: 700 var(--fs-sm) / 1.2 var(--font);
  list-style: none;
}
.fr-group__summary::-webkit-details-marker { display: none; }
.fr-group__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin: var(--sp-5) 0 0;
  padding: var(--sp-6);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}
.fr-group__form .dk-field { display: flex; flex-direction: column; gap: var(--sp-4); }
.fr-group__picks { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.fr-group__picks > .dk-label { padding: 0 0 var(--sp-2); }
.fr-group__hint { font-size: var(--fs-sm); }
.fr-group__form .dk-btn { width: auto; align-self: flex-start; margin-top: 0; }

/* OD-05: "Diğer kurumunda N yeni bildirim" + Kurum değiştir (a count only) */
.home-other-unread {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line, currentColor);
  border-radius: var(--r-md, 10px);
  background: var(--surface2, transparent);
  font-size: var(--fs-sm, 0.875rem);
}
.home-other-unread__text { font-weight: 600; }