/* =========================================================================
   Derslik — settings surfaces (slice 9)

   User settings (v5:971-1025) and derslik settings (v5:810-922).

   Loaded last (tokens → styles.css → dk/base.css → dk/shell-extra.css →
   dk/classroom.css → this), so it may override the legacy `.gs-*`,
   `.settings-*`, `.admin-*`, `.perm-*`, `.role-chip` and `.emoji-*` rules that
   `styles.css` still carries. The overlay chrome itself (`.ov*`) lives in
   dk/classroom.css — both settings pages reuse it verbatim.

   Only `dk-*` names already declared in tokens/base/shell-extra are emitted by
   the views (see the note at the top of dk/classroom.css); everything new here
   is `st-` (user settings) or `gs-` (derslik settings).
   ========================================================================= */

/* -------------------------------------------------------------------------
   User settings — v5:971-1025
   ------------------------------------------------------------------------- */

.st .settings-content { max-width: none; }
.st-wrap { max-width: 580px; display: flex; flex-direction: column; gap: var(--sp-8); }

.settings-card.st-card {
  border: 0;
  background: var(--panel2);
  border-radius: var(--r-xl);
  padding: var(--sp-9);
  margin: 0;
}
.st-card .dk-subhead { margin: 0 0 var(--sp-6); }
.st-card > p.muted { margin: 0 0 var(--sp-6); font-size: var(--fs-sm); line-height: var(--lh-body); }
/* Two classes, so it outranks `.st-card .dk-subhead` above. */
.st-card .st-subhead { margin: var(--sp-10) 0 var(--sp-5); }
.st-hint { margin: var(--sp-5) 0 0; font-size: var(--fs-xs); }

/* Account card (v5:973-979). */
.st-account { display: flex; align-items: center; gap: var(--sp-7); }
.settings-avatar.dk-avatar { flex: none; font-size: var(--fs-2xl); }
.st-account__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-account__meta strong { font: 800 var(--fs-xl) / 1.25 var(--font); }
.st-account__meta .muted { font-size: var(--fs-sm); }
.st-email { overflow-wrap: anywhere; }

/* Görünüm: the eight-swatch grid plus the four-step UI scale (v5:980-988). */
.st-card .dk-swatchgrid { margin-bottom: var(--sp-7); }
/* Block-level so the "Arayüz büyüklüğü" heading below it gets real space
   instead of sharing the button's line box. */
.st-theme-open { display: flex; width: fit-content; margin: 0 0 var(--sp-4); }
.st-scale .dk-seg__opt { flex: 1; text-align: center; }

/* Davranış: three real switches (decision D16). */
.st-rows { display: flex; flex-direction: column; }
.st-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
}
.st-row:first-child { border-top: 0; padding-top: 0; }
.st-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-row__text strong { font: 700 var(--fs-md) / 1.25 var(--font); }
.st-row__text .muted { font-size: var(--fs-2xs); line-height: 1.35; }
.st-row .dk-switch { flex: none; }
.st-row .dk-switch[disabled] { opacity: 0.45; cursor: not-allowed; }
.st-status { margin: var(--sp-5) 0 0; font-size: var(--fs-2xs); }

.st-actions { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; }
.st-actions form { margin: 0; }
.settings-foot { margin: var(--sp-4) 0 0; }
/* Same treatment as the login footer (dk/auth.css:190-192) — see the comment
   next to the markup in src/views/settings.js. */
[data-theme="koyu"] .st-bry,
[data-theme="tahta"] .st-bry,
[data-theme="gece"] .st-bry { filter: invert(1); }

/* -------------------------------------------------------------------------
   Derslik settings — the rail (v5:812-817)
   ------------------------------------------------------------------------- */

.gs-tabs.dk-settings__rail {
  flex: none;
  width: 190px;
  padding: var(--sp-8) var(--sp-5);
  gap: 3px;
  border-right: 1px solid var(--line);
  background: transparent;
}
.gs-tab.dk-vtab {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-sm);
  font: 800 var(--fs-sm) / 1.2 var(--font);
  color: var(--mut);
  text-decoration: none;
}
.gs-tab.dk-vtab .i { flex: none; opacity: 0.9; }
.gs-tab.dk-vtab:hover { background: var(--panel2); color: var(--ink); text-decoration: none; }
.gs-tab.dk-vtab.is-active { background: var(--accSoft); color: var(--accInkSoft); }
.gs-tab.dk-vtab:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* Yoklama is a tool overlay reached from here, not a settings tab. */
.gs-rail-sep { display: block; height: 1px; margin: var(--sp-5) var(--sp-4); background: var(--line); }

.dk-settings .gs-content {
  max-width: none;
  padding: var(--sp-9) var(--sp-11);
}
.dk-settings .gs-content.ov-wrap { max-width: 720px; }
.gs-danger .ov-sec__title { color: var(--bad); }
.gs-transfer-confirm { margin-top: var(--sp-6); padding: var(--sp-6); border: 1px solid var(--bad); }
.gs-transfer-actions { display: flex; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; }

/* Same reveal problem as the overlays (see dk/classroom.css): `.channel-del`
   is opacity:0 until its row is hovered, which hides every destructive control
   on these tabs from the keyboard entirely. */
.dk-settings .channel-del {
  opacity: 1;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--mut);
}
.dk-settings .channel-del:hover { color: var(--bad); border-color: var(--bad); background: var(--badSoft); }
.dk-settings .channel-del:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Shared form polish, mirroring the overlay rules in dk/classroom.css. */
.dk-settings .form .btn,
.dk-settings .form .dk-btn { width: auto; }
.dk-settings .form { margin-top: 0; }
.dk-settings .field { margin-bottom: var(--sp-6); }
.dk-settings .field > span { font: 700 var(--fs-xs) / 1.2 var(--font); color: var(--mut); }
.gs-form { display: flex; flex-direction: column; align-items: flex-start; }
.gs-form .inline-fields { width: 100%; }
/* The channel detail alternates form → heading → form; without this the
   heading crowds the submit button above it. */
.dk-settings h4.dk-subhead,
.ov h4.dk-subhead { margin: var(--sp-10) 0 var(--sp-5); }
/* `.ov .dk-card .dk-subhead` (three classes) still wins inside a card, so this
   only lifts the standalone section heads. */
.ov h3.dk-subhead { margin-top: var(--sp-10); }

.invite-box.gs-invite {
  margin-top: var(--sp-6);
  border: 0;
  background: var(--panel2);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
}
.gs-invite .dk-subhead { margin: 0 0 var(--sp-4); }
.gs-invite .invite-code { display: inline-block; margin: 0; }
.gs-invite .field-hint { margin: var(--sp-5) 0 0; }

/* -------------------------------------------------------------------------
   Roller — v5:838-857
   ------------------------------------------------------------------------- */

.gs-card.dk-card--role {
  border: 0;
  border-left: 4px solid var(--role-colour, var(--line));
  background: var(--panel2);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  margin-bottom: var(--sp-4);
}
.gs-card-head { gap: var(--sp-5); font-size: var(--fs-md); }
.gs-role-dot {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: var(--r-full);
  background: var(--role-colour, var(--mut));
}
.gs-role-count { margin-left: auto; font: 700 var(--fs-2xs) / 1 var(--font); }
.gs-card-del { margin-left: 0; }
.gs-card-body { border-top-color: var(--line); }

.gs-role-head { align-items: flex-end; gap: var(--sp-5); }
.gs-colour { flex: 0 1 200px; max-width: 200px; }
.gs-colour .gs-colour__row { display: flex; gap: var(--sp-3); align-items: center; }
/* `.inline-fields input { flex:1; min-width:9rem }` in styles.css would blow
   both of these up, so both rules carry the wrapper class to outrank it. */
.gs-colour .gs-colour__text { flex: 1 1 auto; min-width: 0; }
.gs-colour .gs-colour__pick {
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  height: 32px;
  padding: 2px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel2);
  cursor: pointer;
}
.gs-colour__pick:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* The 26-permission list, grouped (permissions.js permCheckboxGroups). */
.perm-group {
  margin: 0 0 var(--sp-6);
  padding: 0;
  border: 0;
  width: 100%;
}
.perm-group__title { margin: 0 0 var(--sp-4); padding: 0; }
.perm-grid.perm-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-3) var(--sp-7);
  margin: 0;
}
.perm-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  font: 600 var(--fs-sm) / 1.35 var(--font);
  cursor: pointer;
  padding: 2px 0;
}
.perm-check input { margin-top: 2px; flex: none; }
.perm-check:focus-within { color: var(--acc); }
.perm-check__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.perm-check__hint { font: 400 var(--fs-3xs) / 1.35 var(--font); }
.perm-twocol { gap: var(--sp-8); }
.perm-twocol .perm-grid { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; }
.perm-col-head { font: 800 var(--fs-2xs) / 1.2 var(--font); text-transform: uppercase; letter-spacing: var(--ls-label); }
.perm-summary { font-size: var(--fs-xs); }
.perm-hint { font-size: var(--fs-xs); line-height: var(--lh-body); }

/* -------------------------------------------------------------------------
   Üyeler — v5:862-877
   ------------------------------------------------------------------------- */

.admin-row.gs-member {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding: var(--sp-6) var(--sp-7);
  border: 0;
  border-radius: var(--r-md);
  background: var(--panel2);
}
.gs-member .dk-avatar { position: relative; flex: none; }
.gs-member__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gs-member__name { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.gs-member__name strong { font: 800 var(--fs-md) / 1.2 var(--font); }
.gs-member__roles { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.gs-member__actions {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-left: auto;
}
.gs-member__actions .inline-form { margin: 0; }
/* The role picker must stay on one line with its button — `.inline-form`
   wraps and `.admin-row select` stretches, so both are pinned here. */
.gs-assign { gap: var(--sp-3); flex-wrap: nowrap; align-items: center; }
.gs-assign select { flex: 0 1 auto; width: auto; min-width: 7rem; max-width: 11rem; }
.gs-assign .dk-btn { flex: none; }

.role-chip.dk-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--accSoft);
  color: var(--accInkSoft);
}
.role-chip .inline-chip button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: var(--fs-xs);
  padding: 0 2px;
}
.role-chip .inline-chip button:hover { color: var(--bad); }

/* Ban carries an optional reason (mapping §1.13) — folded away until used. */
.gs-ban { position: relative; }
.gs-ban__open { list-style: none; cursor: pointer; display: inline-flex; }
.gs-ban__open::-webkit-details-marker { display: none; }
.gs-ban__open:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.gs-ban[open] .gs-ban__open { background: var(--bad); color: var(--badInk); }
.gs-ban__form {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--badSoft);
}
.gs-ban__form input { min-width: 11rem; }

/* -------------------------------------------------------------------------
   Kanallar — v5:881-891 plus the override editor the design has no home for
   ------------------------------------------------------------------------- */

.gs-channels-layout { display: flex; gap: var(--sp-8); align-items: flex-start; flex-wrap: wrap; }
.gs-channel-picker {
  flex: none;
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gs-channel-pick.dk-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.gs-channel-pick.dk-row:hover { text-decoration: none; }
.gs-channel-pick-name { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.gs-channel-pick-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-channel-pick-count { margin-left: auto; flex: none; }
.gs-channel-detail { flex: 1; min-width: 300px; }
.gs-detail-title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-7);
  font: 800 var(--fs-xl) / 1.25 var(--font);
}

.gs-access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); margin-bottom: var(--sp-8); }
/* A literal pill radius: `--r-full` is 50%, which on a wide box is an ellipse. */
.gs-access-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 var(--sp-3) var(--sp-3) 0;
  padding: 3px var(--sp-6) 3px 3px;
  border-radius: 999px;
  background: var(--panel2);
  font: 700 var(--fs-xs) / 1.2 var(--font);
}
.gs-access-pill.cannot { opacity: 0.6; }
.gs-access-pill .dk-avatar { flex: none; border-radius: var(--r-full); }

.admin-row.gs-override {
  border: 0;
  border-radius: var(--r-md);
  background: var(--panel2);
  padding: var(--sp-6) var(--sp-7);
}
.gs-override-editor { width: 100%; }

/* -------------------------------------------------------------------------
   Emojiler ve çıkartmalar (no v5 design — spec §4.8 / D12)
   ------------------------------------------------------------------------- */

.emoji-grid,
.sticker-grid { gap: var(--sp-4); margin: 0 0 var(--sp-7); }
/* Both lists are flex rows filled by guild-settings.js; its empty-state
   paragraph must not inherit the centred `.dk-empty` block treatment. */
.emoji-grid > p,
.sticker-grid > p {
  width: 100%;
  margin: 0;
  padding: var(--sp-5) 0;
  /* `.dk-empty` is a centred flex box; inside these lists it is one line. */
  display: block;
  text-align: left;
  font-size: var(--fs-sm);
  border: 0;
}
/* One section holds two headings ("Özel emojiler" then "Çıkartmalar"). */
[data-emoji-manager] > .ov-sec__title:not(:first-child) { margin-top: var(--sp-12); }
.emoji-cell {
  border-radius: var(--r-md);
  background: var(--panel2);
  border: var(--bw) solid transparent;
}
.emoji-cell:hover { border-color: var(--acc); }
.emoji-cell-name { font-size: var(--fs-3xs); color: var(--mut); }

/* -------------------------------------------------------------------------
   Denetim — v5:894-918
   ------------------------------------------------------------------------- */

.admin-row.gs-report,
.admin-row.gs-ban-row,
.admin-row.gs-log {
  border: 0;
  border-radius: var(--r-md);
  background: var(--panel2);
  padding: var(--sp-6) var(--sp-7);
  gap: var(--sp-5);
}
.admin-row.gs-report { background: var(--warnSoft); border: var(--bw) solid var(--warn); }
.gs-report .admin-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: var(--fs-sm); }
.gs-report .report-snapshot {
  flex-basis: 100%;
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--line);
  font-size: var(--fs-xs);
}
.gs-log { font-size: var(--fs-sm); }
.gs-log .admin-main { display: flex; gap: 5px; flex-wrap: wrap; align-items: baseline; }
.gs-log .admin-main > strong:first-child { color: var(--acc); }
/* `styles.css` stacks the action column; two short buttons read better in a row. */
.dk-settings .admin-actions { flex-direction: row; align-items: center; gap: var(--sp-4); }

@media (max-width: 860px) {
  .gs-access-grid { grid-template-columns: 1fr; }
  .gs-channels-layout { flex-direction: column; }
  .gs-channel-picker { width: 100%; }
}

/* QUEDU_IDP=birey account card (views/settings.js bireyAccountCard): the
   official name is brylogin's and read-only; the nickname is Derslik's. */
.st-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-7) 0 0;
  font-size: var(--fs-sm);
}
.st-identity dt { font-weight: 700; }
.st-identity dd { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.st-identity dd .st-hint { margin: 0; }
.st-nickname {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  margin: var(--sp-7) 0 0;
}
.st-card > .dk-notice { margin: var(--sp-6) 0 0; }