:root {
  --bg: #eef2f6;
  --card: #ffffff;
  --text: #152033;
  --muted: #64748b;
  --accent: #1d4ed8;
  --accent-soft: #dbeafe;
  --mark: #e8b84a;
  --on-accent: #ffffff;
  --border: #e2e8f0;
  --control-border: #7d8ba5; /* form alanı kenarı: beyaz, #f8fafc ve --bg üstünde ≥3:1 */
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --ok: #15803d;
  --ok-soft: #dcfce7;
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-dialog: 0 24px 60px rgba(15, 23, 42, 0.2);
  /* Kabuk: üst şerit tam genişlik (yalnız --gutter boşluğu), her sayfada aynı. --shell-max standart içerik;
     geniş/dar kip yalnız <main>i değiştirir, şeride hiç dokunmaz. */
  --shell-max: 1280px;
  --gutter: 24px;
  --narrow-max: 45rem;
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  /* Üst şerit, içerik, alt bilgi: kısa sayfada alt bilgi ekranın altında durur. */
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; width: 100%; }
/* Oturumlu sayfalar: kaydırma çubuğu yeri hep ayrılır; uzun ve kısa sayfa arasında (ve pencere açılınca)
   şeridin sağ ucu (kullanıcı menüsü) ve ortalanmış içerik yana kaymaz. */
html:has(body[data-auth]) { scrollbar-gutter: stable; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Uygulama üst şeridi: sayfa zeminiyle aynı, tam genişlik. Sekmeler ortada beyaz ovalin içinde;
   yazıların yeri değişmez. Logo sol, hesap menüsü sağ kenarda. */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 0 1.25rem;
  background: var(--bg);
  border-bottom: none;
}
.navbar-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 2rem;
  min-height: 3.5rem;
  padding: 0.5rem var(--gutter);
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  max-width: 100%;
  grid-column: 1;
  grid-row: 1;
}
.navbar .brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none !important;
  white-space: nowrap;
}
.brand-lockup {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  gap: 0.08rem;
}
.brand-kicker {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.brand-text { font-size: 1.02rem; }
.brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  overflow: hidden;
  display: inline-flex;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.28);
}
.brand-mark img { width: 100%; height: 100%; display: block; }

/* Uzun okul adı: kutu en fazla 17.5rem, sekmelerin üstüne taşmaz, kalan yere daralır; ad "…" ile kısalır,
   tam adı title ipucunda. Sekmeler ve kullanıcı menüsü küçülmez. Şerit her sayfada aynı olduğundan kutu da aynı. */
.nav-school-menu { position: relative; min-width: 0; flex: 1 1 auto; max-width: 17.5rem; }
.nav-school-menu > .nav-school-chip { display: flex; width: 100%; min-width: 0; box-sizing: border-box; }
.nav-left > .nav-school-chip { display: flex; flex: 1 1 auto; min-width: 0; max-width: 17.5rem; box-sizing: border-box; }
.nav-school-menu > summary { list-style: none; }
.nav-school-menu > summary::-webkit-details-marker { display: none; }
.nav-school-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  cursor: default;
  border: 1px solid #93c5fd;
  background: var(--accent-soft);
  color: #1e3a8a;
  border-radius: 14px;
  padding: 0.28rem 0.7rem 0.28rem 0.45rem;
  user-select: none;
}
.nav-school-menu .nav-school-chip { cursor: pointer; }
.nav-school-menu[open] .nav-school-chip,
.nav-school-chip:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.16);
}
.nav-school-chip .nav-ico { color: var(--accent); width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.nav-school-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.nav-school-kicker {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1d4ed8;
  opacity: 0.85;
}
.nav-school-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: #1e3a8a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-school-chip .nav-caret { color: var(--accent); width: 0.9rem; height: 0.9rem; flex-shrink: 0; }
.nav-school-menu[open] .nav-caret { transform: rotate(180deg); }
.nav-school-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 0.45rem);
  min-width: 260px;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  padding: 0.4rem;
  z-index: 70;
  animation: navDropIn 0.14s ease;
}
.nav-school-drop-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0.45rem 0.65rem 0.35rem;
}
.nav-school-dropdown form { margin: 0; }
.nav-school-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.65rem 0.7rem;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.nav-school-option strong { display: block; font-size: 0.9rem; }
.nav-school-option small { display: block; color: var(--muted); margin-top: 0.15rem; font-size: 0.75rem; }
.nav-school-option:hover:not(:disabled) { background: var(--accent-soft); }
.nav-school-option.is-current {
  background: #dbeafe;
  cursor: default;
}
.nav-school-check { color: var(--accent); font-weight: 800; }

.nav-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: nowrap;
  justify-self: center;
}
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.84rem;
  padding: 0.48rem 0.85rem;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.nav-btn:hover {
  background: #f1f5f9;
  color: var(--text);
}
/* Üst menüde beş sekme: yan boşluk biraz dar, okul adına yer kalsın. */
.nav-actions .nav-btn { padding-left: 0.65rem; padding-right: 0.65rem; }
.nav-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px #93c5fd;
}
.nav-btn-warn {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fdba74;
}
.nav-btn-warn:hover {
  background: #ffedd5;
  color: #7c2d12;
}
.nav-alert-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #ea580c;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.nav-security-alert {
  position: relative;
}
.nav-security-alert > summary {
  list-style: none;
}
.nav-security-alert > summary::-webkit-details-marker { display: none; }
.nav-security-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  width: min(320px, 92vw);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  padding: 0.75rem;
  z-index: 40;
}
.nav-security-drop-title {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 0.25rem;
}
.nav-security-drop-hint {
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.nav-security-list {
  list-style: none;
  margin: 0 0 0.55rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.nav-security-list li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.55rem;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--muted);
}
.nav-security-list code {
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 600;
}
.log-ip code {
  font-size: 0.82rem;
  white-space: nowrap;
}
.nav-ico {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Hesap menüsü şeridin sağ ucunda; sekmelerden boşlukla ayrılır (ayraç çizgisi gerekmez). */
.nav-user-menu {
  position: relative;
  justify-self: end;
}
.nav-user-menu > summary {
  list-style: none;
}
.nav-user-menu > summary::-webkit-details-marker { display: none; }
.nav-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 0.22rem 0.55rem 0.22rem 0.22rem;
  user-select: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nav-user-menu[open] .nav-user-trigger,
.nav-user-trigger:hover {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.nav-avatar {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #1e293b, #334155);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.nav-user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.nav-caret {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.nav-user-menu[open] .nav-caret { transform: rotate(180deg); }

.nav-user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  padding: 0.4rem;
  z-index: 60;
  animation: navDropIn 0.14s ease;
}
@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.nav-user-meta {
  padding: 0.65rem 0.75rem 0.55rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.35rem;
}
.nav-user-meta-name {
  font-weight: 700;
  font-size: 0.88rem;
}
.nav-user-meta-email {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 0.15rem;
  word-break: break-all;
}
.nav-drop-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none !important;
  text-align: left;
}
.nav-drop-item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--muted);
}
.nav-drop-item:hover { background: #f8fafc; }
.nav-drop-danger { color: var(--danger); }
.nav-drop-danger svg { color: var(--danger); }
.nav-drop-danger:hover { background: var(--danger-soft); }
.nav-user-dropdown form { margin: 0; }

/* Masaüstü sekmeleri .nav-desktop içindedir (<details> yok). 900px altında o nav gizlenir, Menü açıklaması açılır. */
.nav-menu { justify-self: end; min-width: 0; grid-column: 2; grid-row: 1; }
.nav-desktop { grid-column: 2; grid-row: 1; }
@media (min-width: 901px) {
  .nav-actions.nav-desktop {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.15rem;
  }
}
.nav-user-menu { grid-column: 3; grid-row: 1; }
.nav-menu-trigger {
  display: none;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  list-style: none;
}
.nav-menu-trigger::-webkit-details-marker { display: none; }
.nav-menu-trigger:hover { border-color: #93c5fd; background: #f8fafc; }
.nav-menu-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-menu[open] > .nav-menu-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.16); }
@media (min-width: 901px) {
  .nav-menu { display: none; }
}

/* Şerit tek satır kalsın, okul kutusu okunur genişlikte ve sekmelerden ayrık kalsın diye: 1365px ve altında sekme
   simgeleri, 1279px ve altında kullanıcı adı gizlenir (ad avatarın title'ında ve açılır listede; sekmenin adı
   kalır), tek satırlı 901–1319px aralığında logonun yazısı görsel olarak gizlenir (ekran okuyucu bağlantı adını
   okumaya devam eder). 900px ve altında sekmeler Menü açıklamasına iner; şerit tek satır kalır. */
@media (max-width: 1365px) {
  .nav-actions .nav-btn .nav-ico { display: none; }
}
@media (max-width: 1279px) {
  .nav-user-name { display: none; }
}
@media (max-width: 1319px) and (min-width: 901px) {
  .navbar .brand-lockup {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 900px) {
  .navbar-inner {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 0.5rem;
  }
  .nav-desktop { display: none; }
  .nav-menu { position: relative; justify-self: end; display: block; }
  .nav-menu-trigger { display: inline-flex; }
  .navbar .brand-lockup {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .nav-menu:not([open]) > .nav-actions { display: none !important; }
  .nav-menu[open] > .nav-actions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    width: min(18rem, calc(100vw - 2 * var(--gutter)));
    max-height: min(70vh, 28rem);
    overflow: auto;
    padding: 0.35rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    z-index: 70;
  }
  .nav-menu[open] .nav-btn { justify-content: flex-start; width: 100%; min-height: 2.75rem; }
  .nav-menu[open] .nav-security-dropdown { position: static; width: auto; box-shadow: none; margin-top: 0.25rem; }
  /* Okul listesi şeridin altına, kenar boşluklarına hizalı açılır. */
  .nav-school-menu { position: static; }
  .nav-school-dropdown { left: var(--gutter); right: var(--gutter); min-width: 0; max-width: none; }
}
@media (max-width: 720px) {
  /* Telefonda şerit yapışkan değil: ekranın üstünü kalıcı kaplamaz. */
  .navbar { position: static; margin-bottom: 1rem; }
  .nav-btn { min-height: 2.5rem; }
}

/* Kabuk kipleri: sayfa seçer ({% block container_class %}).
   standart: container (1280px, ortalı) · geniş: container container-wide (721px+ üst sınır yok)
   · dar: container container-narrow (45rem, sayfada ortalı) */
.container {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 2.5rem;
}
main.container.container-narrow {
  max-width: calc(var(--narrow-max) + 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
}

.school-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 0.65rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.school-tabs .nav-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .school-tabs { gap: 0.15rem; }
  .school-tabs .nav-btn { padding: 0.45rem 0.55rem; }
}

.page-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.page-head > :first-child { flex: 1 1 16rem; min-width: 0; }
.page-head > :last-child:not(:first-child) { margin-left: auto; flex: 0 0 auto; }
.page-head > .btn:only-child,
.page-head > .row:only-child { margin-left: auto; flex: 0 0 auto; }
.page-head-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
}
.page-head h1 { margin: 0.2rem 0 0.35rem; font-size: 1.55rem; letter-spacing: -0.02em; }

/* Dar formlar / sihirbaz: başlık, adımlar ve kart aynı ortalanmış sütunda */
.page-flow {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.page-flow--sm { max-width: 36rem; }
.page-flow--md { max-width: 42rem; }
.page-flow > .page-head { margin-bottom: 0.85rem; }
.page-flow > .card { margin-bottom: 1rem; }
.page-flow > .card:last-child { margin-bottom: 0; }
.page-flow > .notice { margin-top: 0.75rem; }

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.editor-toolbar form {
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.toolbar-group {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.toolbar-select {
  max-width: 7.5rem;
  width: auto;
  padding: 0.4rem 0.55rem;
  margin: 0;
  border-radius: 8px;
}
.btn-icon {
  min-width: 2.25rem;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}

.card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 1.2rem 1.25rem;
  margin-bottom: 1rem;
}
.card.subtle { background: rgba(255,255,255,0.7); }
.card h1, .card h2 { margin-top: 0; }
.card h2 { font-size: 1.05rem; }

/* Yeni çizelge kartı: "Yeni çizelge" butonu #yeni-cizelge'yi hedefler, kart :target ile açılır (JS yok).
   Hiç çizelge yokken .is-collapsible verilmez, kart açık kalır. */
.new-week.is-collapsible { display: none; }
.new-week.is-collapsible:target { display: block; }
.new-week-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.new-week-head h2 { margin: 0; }

.muted { color: var(--muted); }
/* Eski blok flash (akışta) — toast'a taşınır; stil .toast üzerinden */
.flash:not(.toast) {
  background: var(--ok-soft);
  border: 1px solid #86efac;
  color: #14532d;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.error:not(.toast) {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}

/* Bildirimler (partials/page_alerts.html). JS kapalı: sayfa başında şerit, sayfa değişince gider.
   JS açık (html.js): toasts.js sağ alt köşeye taşır; başarı/bilgi kendiliğinden kapanır, hata ✕ bekler.
   Kritik olan .alert-modal'dır (aşağıda), köşeye gitmez. */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.65rem 0.7rem 0.65rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* Renk tek başına anlam taşımasın (WCAG 1.4.1): her seviyenin işareti var, ekran okuyucu okumaz. */
.toast::before {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}
.toast-ok, .toast.flash { background: var(--ok-soft); border-color: #86efac; color: #14532d; }
.toast-ok::before, .toast.flash::before { content: "✓"; content: "✓" / ""; background: var(--ok); }
.toast-info { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.toast-info::before { content: "i"; content: "i" / ""; background: #c2410c; font-family: Georgia, serif; font-style: italic; }
.toast-err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.toast-err::before { content: "!"; content: "!" / ""; background: var(--danger); }
.toast-x {
  flex: 0 0 auto;
  margin: -0.2rem -0.2rem -0.2rem auto;
  padding: 0.1rem 0.4rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0.65;
  cursor: pointer;
}
.toast-x:hover, .toast-x:focus-visible { opacity: 1; background: rgba(15, 23, 42, 0.08); }

#app-toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
/* JS taşıyana kadar da akışta yer kaplamasın: sayfa zıplamaz. */
.js [data-toast] {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 12001;
  width: min(24rem, calc(100vw - 2rem));
  margin: 0;
}
#app-toasts [data-toast] {
  position: static;
  width: auto;
  pointer-events: auto;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  animation: toast-in 0.2s ease-out;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-leaving {
  opacity: 0;
  transform: translateY(0.4rem);
}
/* Sayfa altındaki yapışkan düğme çubuğunu (PDF aktar, kaydet) örtmesin. */
body:has(.import-footer, .form-footer) #app-toasts { bottom: 5.5rem; }
@media (max-width: 720px) {
  #app-toasts,
  .js [data-toast] { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #app-toasts [data-toast] { animation: none; transition: none; }
}

/* Kritik bildirim: ortada, Tamam'a kadar durur. JS kapalıyken pencere açık gelir (arka plan karartmasız). */
.alert-modal { max-width: min(30rem, calc(100vw - 2rem)); }
.js .alert-modal:not(:modal) { display: none; }
.alert-modal .modal-panel { border-top: 4px solid #d97706; }
.alert-modal-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 1.15rem;
}
.alert-modal-title::before {
  content: "!";
  content: "!" / "";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #d97706;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
}
.alert-modal-text { margin: 0; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
/* Yenilikler (partials/whats_new.html): uyarı değil bilgi; turuncu yerine marka mavisi. */
.whats-new-modal { max-width: min(34rem, calc(100vw - 2rem)); }
.whats-new-modal .modal-panel { border-top-color: var(--accent); max-height: calc(100vh - 3rem); overflow: auto; }
.whats-new-modal .alert-modal-title::before { content: "★"; content: "★" / ""; background: var(--accent); font-size: 0.85rem; }
.whats-new-modal h3 { margin: 0.35rem 0 0; font-size: 1rem; }
.whats-new-modal ul { margin: 0.25rem 0 0; padding-left: 1.2rem; line-height: 1.5; }
/* data-confirm onayı (app-boot.js askConfirm): soru başlıkta, sonuç altında; silme kırmızı. */
.confirm-modal .alert-modal-title { font-size: 1.08rem; line-height: 1.35; }
.confirm-modal .alert-modal-text { font-size: 0.95rem; color: var(--muted); }
.confirm-modal.is-danger .modal-panel { border-top-color: var(--danger); }
.confirm-modal.is-danger .alert-modal-title::before { background: var(--danger); }

/* Mazeret: seçilmeyen ders saatleri (onay sormadan, Ekle'nin altında) */
.absence-empty-note {
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid #fdba74;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.85rem;
}
.notice-holiday {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
}
.notice-holiday-label {
  font-weight: 700;
  flex: 0 0 auto;
}
.notice-holiday-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}
.export-holidays { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.75rem 0 0; font-size: 0.82rem; }
.export-holidays-label { font-weight: 700; color: #9a3412; margin-right: 0.15rem; }
.export-holidays .notice-holiday-chip { color: #9a3412; }
.notice-holiday-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #ffedd5;
  border: 1px solid #fdba74;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

.form-row { margin-bottom: 0.85rem; }
.form-row.is-invalid input,
.form-row.is-invalid select,
.form-row.is-invalid textarea {
  border-color: var(--danger);
}
.field-hint {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
}
.field-hint-err { color: var(--danger); font-weight: 600; }
.field-hint-ok { color: var(--ok); font-weight: 600; }
.login-card .field-hint { margin-top: 0.45rem; }
.password-field {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.password-field input {
  flex: 1 1 auto;
  min-width: 0;
}
label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.85rem; }
/* Kurul evrakları (duty/kurul_*.html): standart kabukta gruplu form; "PDF indir" formun altında sağda, yanında onay.
   Yalnız kısa kutular (dört sütun); anlatı kutusu yok. Dizi pusulası satır satır (evrak · Var/Yok). */
.kurul-privacy { margin: 0 0 1rem; font-size: 0.85rem; }
.kurul-section { margin-bottom: 1rem; }
.kurul-section h2 { margin: 0 0 0.85rem; }
.kurul-section-note { margin: -0.35rem 0 0.85rem; font-size: 0.85rem; }
.kurul-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1rem; }
.kurul-grid .form-row { min-width: 0; }
.kurul-field input:not([type="radio"]) { max-width: none; }
/* Boş zorunlu alana ya da hata bağlantısına gidince alan üstteki yapışık şeridin altında kalmasın. */
.kurul-form :is(input, fieldset), .kurul-error { scroll-margin-top: 6rem; }
.kurul-hint { margin-top: 0.3rem; color: var(--muted); font-size: 0.8rem; }
.kurul-req { color: var(--danger); font-weight: 700; }
/* Sayfa içi ön izleme: PDF ile aynı çizim, SVG sayfalar (indirilebilir dosya değil). Yazı tipi PDF'tekiyle aynı
   (Liberation Serif, Times New Roman ile metrik uyumlu); sözcük yerleri sunucuda ölçülür, tarayıcı aralık eklemez. */
@font-face {
  font-family: "KurulSerif"; font-style: normal; font-weight: 400; font-display: block;
  src: url("/static/fonts/kurul/LiberationSerif-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "KurulSerif"; font-style: normal; font-weight: 700; font-display: block;
  src: url("/static/fonts/kurul/LiberationSerif-Bold.ttf") format("truetype");
}
.modal.kurul-preview { max-width: min(1040px, calc(100vw - 2rem)); }
.kurul-preview-panel { width: 100%; height: calc(100vh - 3rem); }
.kurul-preview-body {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1rem;
  border: 1px solid var(--border); border-radius: 8px; background: #e2e8f0;
}
.kurul-sheets { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.kurul-sheet {
  display: block; width: 100%; max-width: 820px; height: auto;
  font-family: "KurulSerif", "Times New Roman", serif; font-kerning: none; text-rendering: geometricPrecision;
  background: #fff; border: 1px solid #cbd5e1; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.kurul-preview-page { background: #e2e8f0; }
.kurul-choice, .kurul-dizi-choice, .kurul-inline-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.kurul-choice legend { margin-bottom: 0.35rem; padding: 0; font-size: 0.85rem; font-weight: 600; }
.kurul-form .choice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; min-height: 2.5rem; }
.kurul-error { display: flex; flex-direction: column; gap: 0.2rem; margin: 0 0 1rem; }
.kurul-error a { color: inherit; font-weight: 600; text-decoration: underline; }
.kurul-dizi { margin: 0; padding: 0; list-style: none; }
.kurul-dizi-row {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.5rem 0.85rem; align-items: center; padding: 0.65rem 0; border-top: 1px solid var(--border);
}
.kurul-dizi-row:first-child { padding-top: 0; border-top: 0; }
.kurul-dizi-no {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.kurul-dizi-choice legend { margin-bottom: 0.4rem; padding: 0; font-size: 0.9rem; font-weight: 500; line-height: 1.35; }
.kurul-handwritten ul { margin: 0; padding-left: 1.25rem; columns: 2; column-gap: 2rem; font-size: 0.9rem; }
.kurul-handwritten li { break-inside: avoid; margin-bottom: 0.2rem; }
.kurul-seg .seg-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.1rem; margin: 0; padding: 0.25rem 0.75rem; font-weight: 600; cursor: pointer; }
.kurul-seg .seg-btn:focus-within { outline: 2px solid var(--accent); outline-offset: -3px; }
.kurul-seg .seg-btn:has(input:checked) { background: var(--accent-soft); color: var(--accent); }
.kurul-parents tbody th[scope="row"] {
  width: 8rem; font-size: 0.85rem; font-weight: 600; letter-spacing: normal;
  text-transform: none; color: var(--text); background: none;
}
.kurul-parents input { max-width: 12rem; }
.kurul-inline-choice { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.kurul-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1rem; margin: 0.25rem 0 1rem; }
.kurul-status { order: 1; margin: 0; color: var(--ok); font-size: 0.85rem; font-weight: 600; }
.kurul-actions [data-pdf-preview] { order: 2; }
.kurul-actions [data-pdf-submit] { order: 3; }
.kurul-status:empty { display: none; }
/* Evrak listesi: başlıksız, kartlar sayfanın ortasında (üstte yapışık değil, altta boşluk kalmaz). */
.kurul-hub-page {
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  min-height: calc(100vh - 13rem); padding: 1rem 0;
}
.kurul-hub-page > .notice { margin: 0; }
.kurul-hub {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  margin: 0; padding: 0; list-style: none;
}
.catalog-card.kurul-card { flex-direction: row; align-items: flex-start; gap: 1rem; height: 100%; min-height: 8.5rem; padding: 1.35rem 1.4rem; }
.catalog-card.kurul-card strong { font-size: 1.12rem; }
.catalog-card .kurul-card-no {
  display: grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.catalog-card .kurul-card-copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.2rem; min-width: 0; }
.catalog-card .kurul-card-copy strong { color: var(--text); }
.catalog-card .kurul-card-copy small { color: var(--muted); font-size: 0.75rem; }
.catalog-card.kurul-card:hover strong { color: var(--accent); }
@media (max-width: 1100px) {
  .kurul-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kurul-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .kurul-grid, .kurul-hub { grid-template-columns: 1fr; }
  .kurul-handwritten ul { columns: 1; }
  .kurul-hub-page { min-height: 0; }
  .kurul-actions .btn { width: 100%; }
  .kurul-seg .seg-btn { min-height: 2.5rem; }
}
input, select {
  width: 100%;
  max-width: 420px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
input[type="checkbox"],
input[type="radio"] { width: auto; max-width: none; padding: 0; }
.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
}
.grid-form .form-row { margin-bottom: 0; }
.grid-form .btn,
.grid-form noscript,
.grid-form .stack { align-self: end; justify-self: start; }
.grid-form input:not([type="checkbox"]):not([type="radio"]),
.grid-form select,
.grid-form .btn:not(.btn-sm) {
  min-height: 2.5rem;
  box-sizing: border-box;
}
.grid-form .btn:not(.btn-sm) { border-radius: 8px; }

/* Düğme sırası (UI-STANDARDS §4):
   birincil  .btn-primary  dolu mavi, ekranda bir tane
   ikincil   .btn-ghost    beyaz, görünür kenar (--control-border)
   üçüncül   .btn-text     yalnız yazı
   yıkıcı    .btn-danger / .btn-text-danger  başlatırken sakin (kırmızı yazı); dolu kırmızı yalnız onay penceresinde.
   Hepsinde 1px kenar var: yan yana düğmeler aynı yükseklikte. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.55rem 1rem;
  font-weight: 600;
  cursor: pointer;
  font: inherit;
  text-decoration: none !important;
}
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; border-radius: 8px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(0.95); }
.btn-ghost {
  background: #fff;
  border-color: var(--control-border);
  color: var(--text);
}
.btn-ghost:hover { background: #f1f5f9; }
.btn-text { background: transparent; color: var(--accent); }
.btn-text:hover { background: var(--accent-soft); }
.btn-danger { background: #fff; border-color: #fca5a5; color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: #f87171; }
.btn-text-danger { color: var(--danger); }
.btn-text-danger:hover, .btn-text-danger:focus-visible { background: var(--danger-soft); }
/* Onay penceresi (<dialog class="modal">): son adım dolu kırmızı. */
.modal .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.modal .btn-danger:hover { background: #991b1b; border-color: #991b1b; }

.switch-form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  min-height: 2.5rem;
}
.switch {
  display: inline-block;
  position: relative;
  width: 2.5rem;
  height: 1.45rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  font: inherit;
}
.switch[aria-pressed="true"],
.switch-input:checked ~ .switch { background: var(--accent); }
a.switch { color: inherit; text-decoration: none !important; }
.switch::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}
.switch[aria-pressed="true"]::after,
.switch-input:checked ~ .switch::after {
  left: auto;
  right: 0.15rem;
}
.switch:focus-visible,
.switch-input:focus-visible ~ .switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.switch-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  min-height: 2.5rem;
  flex-shrink: 0;
}
.switch-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.table-hint {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.assign-panel.teacher-add-panel .assign-panel-dialog,
.assign-panel.teacher-edit-panel .assign-panel-dialog,
.assign-panel.teacher-info-panel .assign-panel-dialog {
  width: min(26rem, calc(100vw - 2rem));
}
.export-missing-msg {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--danger);
}
.teacher-add-panel .modal-close,
.teacher-edit-panel .modal-close,
.location-add-panel .modal-close,
.school-form-panel .modal-close,
.week-add-panel .modal-close,
.absence-add-panel .modal-close { text-decoration: none !important; color: var(--muted); }
.week-add-panel .assign-panel-dialog { width: min(32rem, calc(100vw - 2rem)); }
.week-add-panel .copy-roster select { width: 100%; }
.week-add-panel .sg-week-nav {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  padding: 0;
}
.week-add-panel .sg-week-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.82rem;
  white-space: nowrap;
}
.week-add-panel .sg-week-nav .btn {
  flex: 0 0 auto;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  white-space: nowrap;
}
.week-add-panel .range-month { display: none; }
.week-add-panel:has(#planning_mode option[value="monthly"]:checked) .range-week { display: none; }
.week-add-panel:has(#planning_mode option[value="monthly"]:checked) a.range-month { display: inline-flex; }
.week-add-panel:has(#planning_mode option[value="monthly"]:checked) span.range-month { display: block; }
.teacher-add-panel .overlay-backdrop,
.teacher-edit-panel .overlay-backdrop,
.location-add-panel .overlay-backdrop,
.school-form-panel .overlay-backdrop,
.week-add-panel .overlay-backdrop,
.absence-add-panel .overlay-backdrop { text-decoration: none !important; }
/* Görevlendirme kaydı: dış kabuk köşeyi keser; yatay kaydırma olmaz. */
.absence-add-panel .assign-panel-dialog.assign-panel-dialog-wide {
  width: min(36rem, 100%);
  max-width: 100%;
  min-width: 0;
  max-height: min(94vh, 56rem);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--card);
  isolation: isolate;
}
.absence-add-panel .assign-panel-dialog > .modal-head {
  flex: 0 0 auto;
  margin: 0;
  padding: 1rem 1.1rem 0.75rem;
}
.absence-add-panel .assign-panel-dialog > .absence-form,
.absence-add-panel .assign-panel-dialog > .notice {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 1.1rem 1rem;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.absence-add-panel .absence-step,
.absence-add-panel .form-pair,
.absence-add-panel .form-row,
.absence-add-panel .absence-cover-row,
.absence-add-panel #absence-step-cover {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.absence-add-panel .form-pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.absence-add-panel select,
.absence-add-panel input[type="date"],
.absence-add-panel input[type="text"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.teacher-name-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
}
.teacher-name {
  font-weight: 650;
  color: var(--text);
  text-decoration: none !important;
  cursor: pointer;
  min-width: 0;
}
.teacher-name:hover { color: var(--accent); }
.teacher-info {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 1.5px solid var(--muted);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  text-decoration: none !important;
  text-transform: none;
}
.teacher-info:hover,
.teacher-info:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}
.teacher-info-panel .assign-panel-dialog p { margin: 0 0 0.55rem; font-size: 0.9rem; line-height: 1.35; }
.teacher-info-panel .assign-panel-dialog p:last-child { margin: 0; }
.teacher-info-panel .assign-panel-dialog .muted {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 0.1rem;
}
.teacher-info-panel .modal-close { text-decoration: none !important; color: var(--muted); }
.teacher-info-panel .overlay-backdrop { text-decoration: none !important; }
.teacher-muaf-panel .flag-reason { margin: 0 0 0.85rem; }
.teacher-muaf-panel .modal-close { text-decoration: none !important; color: var(--muted); }
.teacher-muaf-panel .overlay-backdrop { text-decoration: none !important; }
.flag-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1rem;
  align-items: start;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}
.flag-title { display: block; font-weight: 700; }
.flag-copy .muted { margin: 0.25rem 0 0; font-size: 0.8rem; }
.switch-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.flag-reason {
  grid-column: 1 / -1;
  border: 0;
  margin: 0.35rem 0 0;
  padding: 0;
}
.flag-reason legend { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.35rem; padding: 0; }
.flag-card:has(input[name="duty_on"].switch-input:checked) .flag-reason { display: none; }
.reveal-target.is-collapsible { display: none; }
.reveal-target.is-collapsible:target { display: block; }
table.data td.flag { width: 1%; white-space: nowrap; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.data th, table.data td {
  text-align: left;
  padding: 0.7rem 0.65rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #f8fafc;
}
table.data.zebra tbody tr:nth-child(even) {
  background: #f8fafc;
}
table.data.zebra tbody tr:nth-child(odd) {
  background: #fff;
}
table.data.zebra tbody tr:hover {
  background: #eef4ff;
}
.table-surface {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  margin-bottom: 2rem;
}
.table-surface .data {
  width: 100%;
  margin: 0;
}
.table-surface .data th:first-child,
.table-surface .data td:first-child {
  padding-left: 1rem;
}
.table-surface .data th:last-child,
.table-surface .data td:last-child {
  padding-right: 1rem;
}
.user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.user-identity {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
}
.user-identity--invitee { padding-left: 0.15rem; }
.user-identity-text { min-width: 0; }
.user-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0.05rem 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
  flex: 0 0 auto;
}
.user-tree-toggle:hover,
.user-tree-toggle:focus-visible {
  background: var(--accent-soft);
  border-color: #93c5fd;
  outline: none;
}
.user-caret {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 0.15s ease;
}
.user-tree-toggle[aria-expanded="true"] .user-caret { transform: rotate(180deg); }
.user-tree-spacer {
  display: inline-block;
  width: 1.55rem;
  flex: 0 0 auto;
}
.user-invitee-tag {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 650;
}
.user-invitee-row td { background: #f8fafc; }
.quota-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.quota-form select {
  width: auto;
  min-width: 8.5rem;
  margin: 0;
  padding: 0.35rem 0.45rem;
  font-size: 0.82rem;
}
.quota-form input[type="number"] {
  width: 5.2rem;
  margin: 0;
  padding: 0.35rem 0.45rem;
  font-size: 0.82rem;
}
.notice-pass-form {
  flex-wrap: wrap;
}
.notice-pass-form input[type="password"] {
  width: 8.5rem;
  margin: 0;
  padding: 0.35rem 0.45rem;
  font-size: 0.82rem;
}
.notice-pass-form .error {
  flex: 1 0 100%;
  margin: 0;
}
.user-email {
  font-weight: 600;
}
.user-meta {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.1rem;
}
.log-time {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.84rem;
}
.log-action {
  font-size: 0.78rem;
  background: #f1f5f9;
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
}
.log-action-label {
  font-weight: 600;
  font-size: 0.9rem;
}
.log-detail {
  font-size: 0.84rem;
  word-break: break-word;
  color: var(--text);
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--accent-soft);
  color: #1e3a8a;
}
.badge-ok { background: var(--ok-soft); color: #14532d; }
.badge-danger { background: var(--danger-soft); color: #991b1b; }

.stack { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.stat-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem 1.25rem;
  margin: 0 0 1.5rem;
  padding: 0.25rem 0 1rem;
  border-bottom: 1px solid var(--border);
}
.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.admin-stat strong {
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.admin-stat span {
  font-size: 0.88rem;
  color: var(--muted, #64748b);
}
.admin-stat small {
  font-size: 0.75rem;
}

:root {
  --chart-1: #2563eb;
  --chart-2: #0d9488;
  --chart-3: #ea580c;
  --chart-4: #0369a1;
  --chart-5: #b45309;
}

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0 0 1.75rem;
}
@media (max-width: 900px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dash-kpi {
  padding: 1rem 1.05rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  border-top: 3px solid var(--accent);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}
.dash-kpi.accent-1 { border-top-color: var(--chart-1); }
.dash-kpi.accent-2 { border-top-color: var(--chart-2); }
.dash-kpi.accent-3 { border-top-color: var(--chart-3); }
.dash-kpi.accent-4 { border-top-color: var(--chart-4); }
.dash-kpi-label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.dash-kpi-value {
  font-size: 1.85rem;
  letter-spacing: -0.04em;
  font-weight: 800;
  line-height: 1;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
}
.dash-panel {
  min-width: 0;
  padding: 1.1rem 1.15rem 1.2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}
.dash-panel-wide { grid-column: 1 / -1; }
.dash-panel-head {
  margin-bottom: 1rem;
}
.dash-panel-head h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.dash-panel-head .muted { margin: 0.2rem 0 0; font-size: 0.85rem; }

.dash-bars { display: flex; flex-direction: column; gap: 0.85rem; }
.dash-bar-row { display: flex; flex-direction: column; gap: 0.35rem; }
.dash-bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.88rem;
}
.dash-bar-track {
  height: 12px;
  background: #e8eef5;
  border-radius: 999px;
  overflow: hidden;
}
.dash-bar-fill {
  height: 100%;
  border-radius: 999px;
  min-width: 0;
  background: var(--chart-1);
}
.tone-c1, .dash-bar-fill.tone-c1 { background: var(--chart-1); }
.tone-c2, .dash-bar-fill.tone-c2 { background: var(--chart-2); }
.tone-c3, .dash-bar-fill.tone-c3 { background: var(--chart-3); }
.tone-c4, .dash-bar-fill.tone-c4 { background: var(--chart-4); }
.tone-c5, .dash-bar-fill.tone-c5 { background: var(--chart-5); }
.tone-ok { background: var(--ok); }
.tone-muted { background: #94a3b8; }

.dash-split { display: flex; flex-direction: column; gap: 1rem; }
.dash-split-track {
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: #e8eef5;
}
.dash-split-track > span {
  display: block;
  height: 100%;
  min-width: 0;
}

.dash-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.dash-legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.dash-legend i,
.dash-legend .tone-c1,
.dash-legend .tone-c2,
.dash-legend .tone-c3,
.dash-legend .tone-c5,
.dash-legend .tone-ok,
.dash-legend .tone-muted {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}
.dash-legend strong { margin-left: auto; }
.dash-legend em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.8rem;
  min-width: 2.5rem;
  text-align: right;
}

.dash-pair {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.dash-pair-item {
  padding: 0.75rem 0.65rem;
  background: #f8fafc;
  border-radius: 12px;
  text-align: center;
}
.dash-pair-item strong {
  display: block;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.dash-pair-item span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.dash-pair-item small {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.dash-vbars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 0.75rem;
  align-items: end;
  min-height: 210px;
}
.dash-vbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.dash-vbar-col {
  width: 100%;
  max-width: 52px;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  background: #f1f5f9;
  border-radius: 10px 10px 4px 4px;
  padding: 0.35rem 0 0;
}
.dash-vbar-fill {
  width: 70%;
  min-height: 6px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #60a5fa, var(--chart-1));
}
.dash-vbar-val {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
}
.dash-vbar-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(440px, calc(100vw - 2rem));
  width: 100%;
  margin: auto;
}
.modal[open] {
  display: flex;
  position: fixed;
  inset: 0;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  align-items: center;
  justify-content: center;
  z-index: 80;
}
.modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
}
.modal-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-dialog);
  padding: 1.15rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Pencere düzeni (<dialog> ve :target/htmx pencereleri ortak):
   başlık + 36px kapat · içerik · alt çubuk [sakin silme…] ······ [Vazgeç] [birincil] */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.modal-head h2, .modal-head h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  margin: -0.35rem -0.5rem -0.35rem 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none !important;
}
.modal-close:hover { background: #f1f5f9; color: var(--text); }
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.modal-actions[hidden] { display: none; }
.modal-panel .modal-actions { margin-top: 0.35rem; }
/* Yıkıcı eylem alt çubuğun solunda, yazı düğmesi; onayı data-confirm penceresi sorar. */
.modal-actions-danger { margin-right: auto; margin-left: -1rem; }

.login-wrap {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}
.login-shell {
  max-width: none;
  margin: 0;
  padding: 0;
}
body:has(.login-split) {
  background: var(--bg);
}
.login-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 2.5rem;
  background:
    radial-gradient(800px 420px at 12% 8%, rgba(255, 255, 255, 0.16), transparent 55%),
    var(--accent);
  color: var(--on-accent);
}
.login-panel-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}
.login-panel-brand .brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 8px 24px rgba(15, 23, 42, 0.2);
}
.login-panel-name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.login-panel-lead {
  margin: 0;
  max-width: 22rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.login-preview {
  max-width: 26rem;
  background: rgba(15, 23, 42, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 0.75rem;
}
.login-preview table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.28rem;
  font-size: 0.75rem;
}
.login-preview th {
  font-weight: 700;
  color: var(--accent-soft);
  text-align: center;
  padding: 0.25rem 0.15rem;
}
.login-preview tbody th {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  padding-right: 0.5rem;
}
.login-preview td {
  text-align: center;
  min-width: 2.25rem;
  height: 2rem;
  border-radius: 8px;
  padding: 0.4rem 0.15rem;
  background: rgba(255, 255, 255, 0.16);
  color: transparent;
  font-weight: 700;
}
.login-preview td.is-on {
  background: var(--on-accent);
  color: var(--accent);
}
.login-preview td.is-mark {
  background: var(--mark);
  color: var(--text);
}
.login-pitch {
  margin: 0;
  padding: 0;
  max-width: 26rem;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  color: var(--accent-soft);
  font-size: 0.95rem;
  line-height: 1.4;
}
.login-pitch li {
  padding-left: 1rem;
  position: relative;
}
.login-pitch li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--mark);
}
.login-form-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}
.login-card { width: 100%; max-width: 400px; }
.login-form-col .login-card { margin-bottom: 0; }
.login-brand {
  text-align: center;
  margin: 0 0 1.25rem;
}
.login-brand .brand-mark {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 12px;
  margin: 0 auto 0.75rem;
}
.login-brand-mobile { display: none; }
.login-brand h1 { margin: 0; font-size: 1.55rem; letter-spacing: -0.03em; }
.login-tagline { margin: 0.35rem 0 0; }
.login-card .btn-primary { width: 100%; justify-content: center; }
.login-card .form-note { margin: 0.85rem 0 0; text-align: center; }
@media (max-width: 900px) {
  .login-preview { display: none; }
  .login-panel-lead { font-size: 1.55rem; }
}
@media (max-width: 720px) {
  .login-split { grid-template-columns: 1fr; }
  .login-panel { display: none; }
  .login-brand-mobile { display: block; }
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.85rem;
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
}
.legal-page { padding: 1.5rem 0 2rem; }
.legal-card { max-width: 42rem; margin: 0 auto 1.5rem; }
.legal-brand { margin-bottom: 0.75rem; }
.legal-brand .brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  margin: 0 auto 0;
}
.legal-updated { margin: 0.35rem 0 0; font-size: 0.75rem; }
.legal-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.legal-crumb a { color: inherit; }
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.legal-nav a {
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none !important;
}
.legal-nav a:hover { border-color: var(--accent); }
.legal-nav a[aria-current="page"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: #1e3a8a;
  font-weight: 700;
}
.legal-body { margin-top: 1rem; }
.legal-body h2 { margin: 1.5rem 0 0.5rem; }
.legal-body p, .legal-body li { line-height: 1.5; }
.legal-body ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.legal-body .table-scroll { margin: 1rem 0; }
.legal-card .form-note { margin: 1.25rem 0 0; text-align: center; }
/* Alt bilgi: menü şeridiyle aynı kutu; body flex sütunu sayesinde kısa sayfada en altta. */
.site-mark {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0.25rem var(--gutter) 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}
.error-card .login-brand { margin-bottom: 0.75rem; }
.error-card .login-brand .brand-mark { width: 2.5rem; height: 2.5rem; margin-bottom: 0; }

.roster-card { padding: 0.75rem; }
.roster-scroll { overflow-x: auto; }
table.roster {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 640px;
  font-size: 0.85rem;
}
table.roster th, table.roster td {
  border: 1px solid #cbd5e1;
  padding: 0.35rem;
  background: #fff;
  vertical-align: middle;
  min-width: 110px;
}
.cell-assign-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
  min-height: 2rem; padding: 0.25rem 0.55rem; border-radius: 8px;
  border: 1px dashed #93c5fd; background: #f8fafc; color: var(--accent);
  font-weight: 600; font-size: 0.82rem; text-decoration: none !important;
}
.cell-assign-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.overlay-backdrop {
  position: absolute; inset: 0; margin: 0; padding: 0; border: 0;
  display: block; background: rgba(15, 23, 42, 0.45); cursor: default; appearance: none;
}
.assign-panel, .cell-panel {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  overscroll-behavior: contain;
}
/* Modal açıkken arka plan kaydırılmaz. Boş #hucre-paneli htmx hedefi olarak
   her zaman DOM'da durur (display:none); :has(.cell-panel) onu da kilitlerdi. */
html:has(.assign-panel:not([id])),
html:has(.assign-panel[id]:target),
html:has(.cell-panel:not(:empty)) {
  overflow: hidden;
}
body:has(.assign-panel:not([id])),
body:has(.assign-panel[id]:target),
body:has(.cell-panel:not(:empty)) {
  overflow: hidden;
}
/* id'li paneller hash (:target) ile açılır — aksi halde HTML yeni, CSS eski kalınca
   öğretmen «Adı düzelt» modalları sayfa açılınca üst üste görünürdü. id'siz (htmx) paneller
   DOM'dayken görünür kalır. */
.assign-panel[id] { display: none; }
.assign-panel[id]:target { display: flex; }
.assign-panel-dialog, .cell-panel-dialog { position: relative; z-index: 1; }
.assign-panel-dialog.assign-panel-dialog-wide { width: min(34rem, 100%); max-width: 100%; }
.assign-panel-dialog .loc-setup-item { display: flex; align-items: flex-start; }
.assign-panel-dialog .loc-setup-item span { min-width: 0; line-height: 1.35; }
.loc-setup-list {
  list-style: none; margin: 0 0 0.75rem; padding: 0;
  max-height: min(50vh, 22rem); overflow: auto;
  border: 1px solid var(--border); border-radius: 10px; background: #f8fafc;
}
.loc-setup-item {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border); cursor: pointer; font-weight: 600;
}
.loc-setup-list li:last-child .loc-setup-item { border-bottom: 0; }
.loc-setup-list > li:has(> a) {
  display: flex; align-items: center; gap: 0.35rem;
}
.loc-setup-list > li:has(> a) .loc-setup-item { flex: 1; min-width: 0; }
.loc-setup-item input { width: 1rem; height: 1rem; margin: 0; flex: 0 0 auto; }
.loc-setup-form .error { margin-bottom: 0.65rem; }
.assign-panel-dialog {
  width: min(22rem, 100%);
  max-width: 100%;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-dialog);
  padding: 1.15rem 1.25rem 1.25rem;
  max-height: min(90vh, 40rem);
  overflow-x: hidden;
  overflow-y: auto;
}
.assign-panel-dialog > .modal-head { margin-bottom: 0.75rem; }
.assign-panel-dialog > h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.assign-panel-dialog .muted { margin: 0 0 0.75rem; font-size: 0.85rem; }
.assign-panel-dialog select { width: 100%; max-width: none; margin-bottom: 0.65rem; }
.assign-panel-dialog select[size] {
  max-height: 12.5rem;
  overflow-y: auto;
  padding: 0.25rem;
  border-radius: 8px;
}
.assign-panel-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
table.roster thead th {
  background: #f8fafc;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}
table.roster .sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #f8fafc;
  font-weight: 700;
  min-width: 10.5rem;
  width: 11.5rem;
  max-width: 14rem;
  text-align: left;
  padding: 0.35rem 0.4rem 0.35rem 0.55rem;
}
.cell-name {
  display: inline-block;
  padding: 0.25rem 0.35rem;
  border-radius: 8px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none !important;
  border: 1px solid transparent;
}
.cell-excused { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 0; }
.cell-excused-note { font-size: 0.72rem; font-weight: 650; line-height: 1.2; color: #9a3412; }
.cover-choices { margin: 0.75rem 0 0; }
.cover-choices p { margin: 0 0 0.55rem; }
/* Öğretmen ata: kapsam seçiminde üç düğme (Vazgeç · Tüm haftalarda · Sadece bugün) tek satıra sığsın. */
.assign-panel[aria-labelledby="assign-title"] .assign-panel-dialog { width: min(26rem, 100%); }
form[data-roster-assign] .modal-actions { margin-top: 0.75rem; }
.cover-choices .modal-actions { margin-top: 0.5rem; }
.cell-duty-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 auto;
}
.cell-duty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.cell-duty .cell-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-lock {
  margin: 0;
  margin-left: auto;
  flex: 0 0 auto;
}
.cell-duty > .cell-lock-btn {
  margin-left: auto;
  flex: 0 0 auto;
}
.cell-lock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  line-height: 0;
}
.cell-lock-btn:hover,
.cell-lock-btn:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: #93c5fd;
}
@media (max-width: 720px) {
  .cell-lock-btn { width: 2.5rem; height: 2.5rem; }
}
.cell-lock-btn.is-locked {
  color: #334155;
  background: #e2e8f0;
  border-color: #94a3b8;
}
.cell-lock-btn.is-locked:hover,
.cell-lock-btn.is-locked:focus-visible {
  color: #0f172a;
  background: #cbd5e1;
  border-color: #64748b;
}
.cell-lock-btn.is-elsewhere {
  color: #b45309;
  background: #fff7ed;
  border-color: #fdba74;
}
.cell-lock-btn.is-static {
  cursor: default;
  pointer-events: none;
}
.holiday-seed-banner {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid #86efac;
  background: #ecfdf5;
  color: #14532d;
  font-size: 0.9rem;
}
.holiday-seed-banner.is-known {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1e3a5f;
}
.holiday-seed-banner strong { font-weight: 650; }
.holiday-seed-status {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--ink);
}
.holidays-panel {
  margin-top: 0.85rem;
  padding: 0;
  overflow: hidden;
}
.holidays-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
  cursor: pointer;
  padding: 0.8rem 1rem;
  user-select: none;
}
.holidays-summary::-webkit-details-marker { display: none; }
.holidays-summary::marker { content: ""; }
.holidays-summary-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  min-width: 0;
}
.holidays-summary-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.holidays-summary-meta {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}
.holidays-caret {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  color: #0f172a;
  transition: transform 0.15s ease;
}
.holidays-panel[open] .holidays-caret { transform: rotate(180deg); }
.holidays-panel[open] .holidays-summary {
  border-bottom: 1px solid var(--border);
}
.holidays-body {
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.holiday-block + .holiday-block {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.holiday-block h3 { margin: 0 0 0.3rem; font-size: 0.98rem; }
.holiday-year-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.holiday-year-label {
  min-width: 3.2rem;
  text-align: center;
  font-size: 1.05rem;
}
.holidays-seed-form { margin: 0; }
.holidays-add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.65rem;
  margin: 0;
}
.holiday-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
}
.holidays-add-form input[type="date"] {
  width: 9.5rem;
  flex: 0 0 auto;
  min-height: 2.15rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  font-size: 0.88rem;
  background: #fff;
  box-sizing: border-box;
}
.holidays-add-form input[name="name"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.15rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  font-size: 0.88rem;
  background: #fff;
  box-sizing: border-box;
}
.holidays-empty { margin: 0; }
.holiday-list-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
  max-height: 14rem;
  background: #fff;
}
.holiday-list-wrap.is-just-seeded {
  animation: holiday-list-pulse 1.4s ease-out 1;
  border-color: #86efac;
}
.holiday-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.holiday-list th,
.holiday-list td {
  padding: 0.5rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.holiday-list thead th {
  background: #f8fafc;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.01em;
  position: sticky;
  top: 0;
  z-index: 1;
}
.holiday-list tbody tr:last-child td { border-bottom: 0; }
.holiday-list-date {
  width: 7.25rem;
  white-space: nowrap;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.holiday-list-name { min-width: 0; }
.holiday-list-status {
  width: 6.5rem;
  white-space: nowrap;
}
.holiday-list-del {
  width: 3.5rem;
  text-align: right;
}
.holiday-list-del form { margin: 0; display: inline-flex; justify-content: flex-end; }
.holiday-list tr.is-out-week td { color: var(--muted); }
.holiday-list tr.is-in-week td { background: #f0fdf4; color: #14532d; }
.holiday-list tr.is-in-week .holiday-list-name { font-weight: 650; }
@keyframes holiday-list-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  100% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
}
.holiday-year-list {
  max-height: 16rem;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.holiday-year-list.is-just-seeded {
  animation: holiday-list-pulse 1.4s ease-out 1;
  border-color: #86efac;
}
.holiday-year-list table.data { margin: 0; }
.holiday-out-week td { color: var(--muted); }
.holiday-in-week td { background: #ecfdf5; }
.holiday-in-week .badge { margin-left: 0.35rem; vertical-align: middle; }

table.roster td.cell-locked {
  background: #f1f5f9;
}
table.roster td.cell-locked.col-focus {
  background: #e8ecf0 !important;
}
table.roster td.cell-locked .cell-name {
  color: #475569;
}
.cell-name:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: #93c5fd;
}
.cell-editing {
  background: #eff6ff !important;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.35);
  vertical-align: top !important;
}
.cell-edit-form {
  margin: 0;
  min-width: 140px;
}
.cell-edit-form select {
  width: 100%;
  max-width: none;
  font-size: 0.8rem;
  padding: 0.35rem;
}
.cell-edit-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}
.day-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.day-tab {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.7rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  text-decoration: none !important;
  color: var(--text);
  min-width: 4.5rem;
}
.day-tab strong { font-size: 0.82rem; }
.day-tab small { color: var(--muted); font-size: 0.72rem; }
.day-tab.is-active {
  border-color: #93c5fd;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px #93c5fd;
}
.day-tab.is-holiday {
  border-color: #fdba74;
  background: #fff7ed;
}
.day-hol {
  font-size: 0.65rem;
  font-weight: 800;
  color: #c2410c;
  text-transform: uppercase;
}
.col-holiday { background: #fff7ed !important; }
.col-focus { box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.25); }
.hol-tag {
  margin-top: 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: #c2410c;
  text-transform: none;
  letter-spacing: 0;
}
.editor-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 0.25rem;
}
.editor-panels .card { margin-bottom: 0; }
/* position: relative — kutu, içindeki konumlu öğelerin (ör. .sr-only "Ders yok") kapsayıcısı olur; yoksa kutunun
   dışına düşen hücredeki gizli metin sayfa gövdesini yatay kaydırıyordu (gün tablosu, 1024px ve altı). */
.table-scroll { overflow-x: auto; position: relative; }
.card-sub { font-size: 0.92rem; margin: 1.25rem 0 0.6rem; }
.card-foot { margin: 0.85rem 0 0; font-size: 0.88rem; }
.lock-panel { margin-top: 1rem; }
.lock-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lock-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.lock-list li:last-child { border-bottom: none; }
.lock-list form { margin: 0; flex-shrink: 0; }
.notice {
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  font-size: 0.88rem;
}
.page-head + .notice { margin: 0 0 1rem; }
.sched-cell { vertical-align: top !important; min-width: 130px; }
.sched-check {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.sched-check input { width: auto; max-width: none; }
.sched-sub {
  width: 100%;
  max-width: none;
  margin-top: 0.2rem;
  padding: 0.25rem 0.35rem;
  font-size: 0.75rem;
}

/* PDF içe aktarma önizlemesi (madde 5c) */
.row { display: flex; }
.inline-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 0; }
.inline-form input:not([type="hidden"]) { max-width: 22rem; }
.cell-deleted { background: var(--bg) !important; }
.cell-edited { box-shadow: inset 3px 0 0 var(--accent); }
.cell-absent { background: #fecdd3 !important; border-color: #fda4af !important; }
.cell-absent-legend { background: var(--danger-soft); color: var(--danger); padding: 0 0.3rem; border-radius: 4px; font-weight: 600; }

/* ---- Ders programı ızgarası (madde 11) — kayıtlı program ve PDF önizlemesi ortak ---- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.stat-card {
  display: flex; flex-direction: column; gap: 0.1rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 0.7rem 0.9rem; color: var(--text); box-shadow: var(--shadow);
}
.stat-card strong { font-size: 1.35rem; letter-spacing: -0.02em; }
.stat-card span { font-size: 0.8rem; color: var(--muted); }
a.stat-card:hover { border-color: var(--accent); text-decoration: none; }
.stat-card.is-warn strong { color: var(--danger); }

.sg-card { padding: 0.9rem; }
.sg-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 0.5rem; }
.sg-head h2 { margin: 0; }
.sg-search { display: flex; gap: 0.4rem; align-items: center; flex: 1 1 14rem; max-width: 22rem; }
.sg-search input[type=search] { flex: 1; min-width: 0; padding: 0.35rem 0.55rem; font-size: 0.85rem; }
.sg-legend { font-size: 0.8rem; margin: 0 0 0.5rem; }
.sg-bar { display: flex; flex-wrap: wrap; gap: 0.45rem 0.6rem; align-items: center; margin: 0 0 0.55rem; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #f8fafc; }
.seg-btn { padding: 0.28rem 0.6rem; font-size: 0.8rem; color: var(--text); border-left: 1px solid var(--border); white-space: nowrap; }
.seg-btn:first-child { border-left: 0; }
.seg-btn:hover { background: var(--accent-soft); text-decoration: none; }
.seg-btn.is-active, .seg-btn.is-active:hover { background: var(--accent); color: #fff; }
.sg-count { font-size: 0.8rem; margin-left: auto; }

.sg-frame {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card);
}
.sg-scroll {
  overflow: auto; max-height: min(76vh, 56rem);
}
.sg-scroll:focus-visible, .sg-label:focus-visible, .sg-corner:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.sg-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; min-width: 100%; font-size: 11px; }
.sg-table th, .sg-table td { padding: 0; border: 1px solid #cbd5e1; }
.sg-table thead th {
  position: sticky; top: 0; z-index: 2; background: #f8fafc; color: var(--muted);
  font-weight: 600; text-align: center; height: 1.6rem; white-space: nowrap;
}
.sg-table thead tr + tr th { top: 1.6rem; font-weight: 500; height: 1.35rem; }
.sg-table .sg-day { color: var(--text); font-size: 0.75rem; letter-spacing: 0.02em; }
.sg-table .ds { border-left: 2px solid #64748b; }
.sg-corner, .sg-label {
  position: sticky; left: 0; z-index: 3; background: var(--card);
  width: 13rem; min-width: 13rem; max-width: 13rem;
  box-shadow: 6px 0 8px -6px rgba(15, 23, 42, 0.28);
}
.sg-table thead .sg-corner { z-index: 5; text-align: left; padding: 0 0.7rem; }
.sg-label { text-align: left; font-weight: 500; min-height: 28px; height: auto; padding: 0.2rem 0.7rem; white-space: nowrap; }
.sg-label > a, .sg-label > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 11.5px; line-height: 1.15; }
.sg-label > a:hover { color: var(--accent); }
/* Ders saati toplamı adın altında; mazeret özeti üçüncü satır olabilir. */
.sg-label > small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; line-height: 1.15; }
.sg-label.is-absent > a, .sg-label.is-absent > span { color: #be123c; font-weight: 600; }
.sg-week-nav {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 0.45rem 0.6rem 0.2rem; flex-wrap: wrap;
}
.sg-week-label { font-size: 12px; font-weight: 600; color: var(--text); min-width: 9rem; text-align: center; }
.week-loc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.week-loc-meta { display: flex; align-items: baseline; gap: 0.45rem; }
.week-loc-count {
  font-size: 1.05rem; font-weight: 700; color: var(--accent); letter-spacing: -0.02em;
}
.week-loc-sep { color: var(--muted); font-weight: 500; margin: 0 0.05rem; }
.week-loc-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.week-loc-add {
  display: flex; align-items: center; gap: 0.45rem; margin: 0; flex: 1 1 14rem; justify-content: flex-end;
}
.week-loc-add select {
  flex: 1 1 12rem; min-width: 10rem; max-width: 26rem; margin: 0;
  padding: 0.42rem 0.55rem; border-radius: 8px; border: 1px solid var(--control-border);
  background: #fff; font-size: 0.88rem; min-height: 2.5rem; box-sizing: border-box;
}
.week-loc-add .btn { flex: 0 0 auto; white-space: nowrap; min-height: 2.5rem; border-radius: 8px; box-sizing: border-box; }
.week-loc-done { font-size: 0.85rem; }
.week-loc-new {
  display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: 0;
}
.week-loc-new-input {
  min-width: 9rem; max-width: 12rem; padding: 0.42rem 0.55rem; font-size: 0.85rem;
  border: 1px solid var(--control-border); border-radius: 8px; min-height: 2.5rem; box-sizing: border-box; background: #fff;
}
.loc-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.loc-link {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.2rem 0.35rem;
  border-radius: 8px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.loc-link:hover { background: var(--accent-soft); border-color: #bfdbfe; color: var(--accent); }
.loc-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loc-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-left: auto;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.loc-edit-btn:hover,
.loc-edit-btn:focus-visible {
  background: var(--accent-soft);
  border-color: #bfdbfe;
  color: var(--accent);
}
table.roster tr.row-loc-active .sticky-col { background: #eff6ff; box-shadow: inset 3px 0 0 var(--accent); }
#roster { scroll-margin-top: 5rem; }
.assign-panel-dialog label { display: block; font-size: 0.82rem; font-weight: 600; margin: 0 0 0.35rem; color: var(--text); }
.assign-panel-dialog .form-note { margin: 0 0 0.75rem; font-size: 0.85rem; }
.assign-panel-actions--split { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
/* Pencere formunda son satırın alt boşluğu zaten var; alt çubuk ona eklenir. */
.assign-panel-dialog .stack-form > .modal-actions,
.assign-panel-dialog .loc-setup-form > .modal-actions { margin-top: 0.5rem; }
.loc-edit-panel .assign-panel-dialog { width: min(27rem, calc(100vw - 2rem)); }
/* Yayın penceresi: hafta sayısı seçenekleri hesaplanan dönemle birlikte. */
.publish-panel .assign-panel-dialog { width: min(30rem, calc(100vw - 2rem)); }
.publish-weeks { border: 0; margin: 0 0 0.75rem; padding: 0; }
.publish-weeks legend { font-weight: 600; font-size: 0.85rem; margin: 0 0 0.4rem; padding: 0; }
.publish-weeks .loc-setup-list { margin: 0; max-height: none; }
.publish-range { font-weight: 400; margin-left: 0.35rem; }
.publish-form .notice { margin: 0 0 0.75rem; }
.loc-edit-panel .stack-form { margin: 0; }
.loc-edit-panel .stack-form .form-row { margin-bottom: 0.85rem; }
.loc-edit-panel .stack-form input {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  min-height: 2.4rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  font-size: 0.95rem;
}
.sg-table td { width: 3.5rem; min-width: 3.5rem; max-width: 3.5rem; height: 28px; background: #eff5ff; }
.sg-table.is-day td { width: 7rem; min-width: 7rem; max-width: 7rem; }
.sg-table td:empty, .sg-table td:has(> a:empty) { background: #f7f9fb; }
.sg-table td > a, .sg-table td > span {
  display: flex; flex-direction: column; justify-content: center; height: 28px;
  padding: 0 4px; line-height: 1.12; color: var(--text); overflow: hidden;
}
.sg-table td > a:hover { background: var(--accent-soft); text-decoration: none; }
.sg-table td > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sg-table td b, .sg-table td i { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-table td b { font-weight: 600; font-size: 11px; }
.sg-table td i { font-style: normal; font-size: 11px; color: var(--text); }
.sg-table td.cell-absent i { color: #9f1239; }
.sg-table td.cell-deleted b, .sg-table td.cell-deleted i { text-decoration: line-through; color: var(--muted); }
.sg-table .sg-empty { height: auto; padding: 1.5rem; text-align: center; color: var(--muted); background: var(--card); width: auto; max-width: none; }

.cell-panel:empty { display: none; }
.cell-panel-dialog {
  width: max-content;
  min-width: min(26rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  background: var(--card);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-dialog);
  padding: 0.8rem 0.95rem;
}
.cell-panel-dialog.has-absence {
  width: min(36rem, calc(100vw - 2rem));
}
.cell-absence-card {
  margin: 0 0 0.7rem;
  padding: 0.6rem 0.7rem 0.65rem;
  border: 1px solid #fecdd3;
  background: #fff1f2;
  border-radius: 10px;
  display: grid;
  gap: 0.28rem;
}
.cell-absence-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.cell-absence-head strong { font-size: 0.78rem; color: #9f1239; }
.cell-absence-head a { font-size: 0.8rem; }
.cell-absence-card p { margin: 0; font-size: 0.86rem; line-height: 1.35; }
.cell-absence-lines {
  margin: 0.1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 0.85rem;
  font-size: 0.8rem;
  line-height: 1.35;
}
.cell-absence-lines .is-current { font-weight: 700; color: #9f1239; }
.cell-panel-dialog.has-absence .cell-panel-form { grid-template-columns: 7.25rem minmax(0, 1fr); }
.cell-panel-dialog.has-absence .cell-panel-form input[name="subject"] {
  width: 100%;
  min-width: 0;
  max-width: none;
  field-sizing: fixed;
}
.cell-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.cell-panel-head .muted { display: block; font-size: 0.8rem; }
.cell-panel-form { display: grid; grid-template-columns: auto minmax(12rem, max-content); gap: 0.5rem; align-items: end; }
.cell-panel-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); }
.cell-panel-form .cell-span { grid-column: 1 / -1; }
.cell-panel-form input:not([type=hidden]), .cell-panel-form select { padding: 0.35rem 0.5rem; font-size: 0.9rem; }
.cell-panel-form input[name="class_name"] { width: 6.75rem; max-width: 8.5rem; }
.cell-panel-form input[name="subject"] {
  --subject-w: max(12rem, calc(var(--subject-ch, 12) * 0.68rem + 1.35rem));
  width: var(--subject-w);
  min-width: min(var(--subject-w), calc(100vw - 11rem));
  max-width: min(42rem, calc(100vw - 11rem));
  field-sizing: content;
}
.cell-panel-actions { grid-column: 1 / -1; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.cell-panel-actions .muted { margin-left: auto; font-size: 0.8rem; }
.sched-cell:target { box-shadow: inset 0 0 0 2px var(--accent); }

@media (min-width: 641px) {
  .sg.is-auto .seg-btn.wide-active { background: var(--accent); color: #fff; }
}
@media (max-width: 640px) {
  .sg.is-auto .seg-btn.narrow-active { background: var(--accent); color: #fff; }
  .sg.is-auto.auto-d0 .sg-table :is(.d1, .d2, .d3, .d4),
  .sg.is-auto.auto-d1 .sg-table :is(.d0, .d2, .d3, .d4),
  .sg.is-auto.auto-d2 .sg-table :is(.d0, .d1, .d3, .d4),
  .sg.is-auto.auto-d3 .sg-table :is(.d0, .d1, .d2, .d4),
  .sg.is-auto.auto-d4 .sg-table :is(.d0, .d1, .d2, .d3) { display: none; }
  .sg.is-auto .sg-table td { width: 4.6rem; min-width: 4.6rem; max-width: 4.6rem; }
  .sg-corner, .sg-label { width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; }
  .sg-count { margin-left: 0; }
  .cell-panel-form { grid-template-columns: 1fr; }
  .cell-panel-form input[name="class_name"],
  .cell-panel-form input[name="subject"] { width: 100%; min-width: 0; max-width: none; field-sizing: fixed; }
  .cell-absence-lines { grid-template-columns: 1fr; }
}

/* ---- PDF aktarımı: üç adım (madde 5 revizyonu) ---- */
.steps { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; justify-content: center; list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.88rem; color: var(--muted); }
.page-flow .steps { justify-content: flex-start; }
.steps li { display: flex; align-items: center; gap: 0.45rem; }
.steps li + li::before { content: ""; width: 1.5rem; height: 1px; background: var(--border); margin-right: 0.35rem; }
.step-no {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card); font-weight: 600; font-size: 0.8rem;
}
.steps .is-active { color: var(--text); font-weight: 600; }
.steps .is-active .step-no { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps .is-done .step-no { background: var(--ok-soft); border-color: #86efac; color: var(--ok); }

.import-upload { width: 100%; }
.import-empty { width: 100%; }
.upload-form { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; }
.upload-drop {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center;
  padding: 2rem 1rem; border: 2px dashed #b6c4d8; border-radius: 16px; background: #f8fafc; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.upload-drop:hover, .upload-drop.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
.upload-drop.has-file { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }
.upload-drop strong { font-size: 1.02rem; }
.upload-drop input[type=file] { margin-top: 0.5rem; max-width: 100%; font-size: 0.85rem; }
.upload-icon { width: 2.2rem; height: 2.2rem; color: var(--accent); }
.upload-name { font-weight: 600; color: var(--ok); min-height: 1.2em; }
.upload-hint { margin: 0; font-size: 0.85rem; }
.upload-submit { align-self: center; width: 100%; max-width: 16rem; }
.upload-form[aria-busy="true"] .upload-drop,
.upload-form[aria-busy="true"] .upload-submit { pointer-events: none; }
.upload-form[aria-busy="true"] .upload-drop { opacity: 0.72; }
.upload-progress:not([hidden]) {
  display: grid; gap: 0.55rem; padding: 0.85rem 0.95rem;
  border: 1px solid #bfdbfe; border-radius: 12px; background: #eff6ff;
}
.upload-progress-title { margin: 0; font-weight: 700; }
.upload-progress-bar {
  position: relative; height: 6px; border-radius: 999px; background: #dbeafe; overflow: hidden;
}
.upload-progress-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  border-radius: inherit; background: var(--accent);
  animation: upload-slide 1.15s ease-in-out infinite;
}
@keyframes upload-slide {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(290%); }
}
.upload-progress-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.88rem; }
.upload-progress-steps li { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }
.upload-progress-steps li::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  border: 2px solid #cbd5e1; flex: 0 0 auto; box-sizing: border-box;
}
.upload-progress-steps li.is-active { color: var(--text); font-weight: 700; }
.upload-progress-steps li.is-active::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.16); }
.upload-progress-steps li.is-done { color: var(--ok); }
.upload-progress-steps li.is-done::before { border-color: var(--ok); background: var(--ok); }
.upload-progress-note { margin: 0; font-size: 0.82rem; }
@media (prefers-reduced-motion: reduce) {
  .upload-progress-bar::after { animation: none; width: 100%; }
}
.import-note { font-size: 0.82rem; margin: 0.75rem 0 0; }
.import-empty .error { margin-bottom: 1rem; }

.import-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; margin: 0 0 0.75rem;
}
.import-strip > div { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem 0.75rem; }
.import-strip dt { font-size: 0.75rem; color: var(--muted); }
.import-strip dd { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.import-strip .is-warn dd { color: var(--danger); }
.import-warnings { margin: 0 0 0.75rem; font-size: 0.85rem; }
.import-warnings summary { cursor: pointer; color: var(--danger); font-weight: 600; }
.import-warnings ul { margin: 0.4rem 0 0; padding-left: 1.2rem; max-height: 12rem; overflow: auto; }


.tag { display: inline-block; padding: 0 0.3rem; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1.5; vertical-align: middle; }
.tag-ok { background: var(--ok-soft); color: #14532d; }
.tag-new { background: #fef3c7; color: #92400e; }
.tag-edit { background: var(--accent-soft); color: var(--accent); }
.tag-warn { background: var(--danger-soft); color: var(--danger); }

/* Düzeltme kartları (PDF önizleme, _import_parts.html edit_card): Ders saatleri, Sınıf adları, Ders adları ve Öğretmen
   adları tek bileşen. Kapalı: başlık, tek satır durum, özet çipleri, tek "Düzenle" düğmesi. Açık: çipler gizlenir, aynı
   bilgi satırlarda düzenlenir. Masaüstünde 2×2 ızgara (sütun sırasıyla: saat + ders solda, sınıf + öğretmen sağda):
   kapalıyken dört kart aynı boyda, yanında gri boşluk kalmaz. Bir kart açılınca iki satır kendi içeriğine göre uzar;
   aynı satırdaki iki kart yine aynı yükseklikte biter. 900px altında tek sütun, sıra aynı. İç düzen kartın kendi
   genişliğine bakar (container query): aynı kart yarım ya da tam genişlikte doğru çizilir. period-times-* sınıfları
   yalnız saat satırına özgü parçalar ve test kancasıdır. */
.import-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 0 0 0.75rem; }
@media (min-width: 900px) {
  .import-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; }
  .import-cards:has(.ic-edit[open]) { grid-template-rows: repeat(2, auto); }
}
.import-card { position: relative; margin: 0; padding: 0.75rem 1rem; container: ic / inline-size; }
.ic-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; }
.ic-head > h2 { flex: 0 0 100%; display: flex; align-items: center; min-height: 2.5rem; margin: 0; font-size: 1.05rem; }
.ic-summary { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.85rem; color: var(--muted); }
.ic-summary::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); }
.ic-summary.is-edited::before { background: var(--accent); }
.ic-summary.is-warn { color: #92400e; }
.ic-summary.is-warn::before { background: #f59e0b; }
.ic-summary.is-error { color: var(--danger); font-weight: 600; }
.ic-summary.is-error::before { background: var(--danger); }
.ic-summary.is-empty::before { content: none; }
.ic-pending {
  margin: 0; padding: 0 0.4rem; border-radius: 5px; background: #fef3c7; color: #92400e;
  font-size: 0.75rem; font-weight: 600; line-height: 1.6;
}
.ic-note { margin: 0.25rem 0 0; max-width: 46rem; font-size: 0.8rem; color: var(--muted); }

/* Özet çipleri: saat (etiket + saat), sınıf (hap), ders (kod + ad), öğretmen (ad). Kolon sayısı kart genişliğinden. */
.ic-chips {
  list-style: none; margin: 0.5rem 0 0; padding: 0;
  display: grid; gap: 0.375rem; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
}
.ic-chips--pairs { grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr)); }
.ic-chips--names { grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); }
.ic-chips--pills { display: flex; flex-wrap: wrap; }
.ic-chip {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.375rem; min-width: 0;
  padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc;
  font-size: 0.8rem; line-height: 1.35;
}
.ic-chips--pills .ic-chip { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-weight: 600; }
.ic-chips--pairs .ic-chip, .ic-chips--names .ic-chip { justify-content: flex-start; gap: 0.5rem; }
.ic-chip-label { color: var(--muted); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.ic-chip-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ic-chip-value.is-empty { color: var(--muted); font-weight: 400; }
.ic-chip-code {
  flex: none; max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.75rem; font-weight: 700; color: var(--muted);
}
.ic-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ic-chip.is-edited { background: var(--accent-soft); border-color: #93c5fd; color: var(--accent); }
.ic-chip.is-edited .ic-chip-label, .ic-chip.is-edited .ic-chip-value,
.ic-chip.is-edited .ic-chip-code, .ic-chip.is-edited .ic-chip-name { color: var(--accent); }
.ic-chip.is-missing { background: #fffbeb; border-color: #fcd34d; }
.ic-chip.is-missing .ic-chip-label { color: #92400e; }
.ic-chip.is-error { background: var(--danger-soft); border-color: #fca5a5; }
.ic-chip.is-error .ic-chip-label, .ic-chip.is-error .ic-chip-value { color: var(--danger); }
.ic-chip.is-removed { background: transparent; border-style: dashed; color: var(--muted); text-decoration: line-through; }
.ic-chip.is-removed .ic-chip-code, .ic-chip.is-removed .ic-chip-name { color: var(--muted); }
.ic-chip-more { justify-content: center; background: transparent; border-style: dashed; color: var(--muted); font-weight: 600; }
.import-card:has(> .ic-edit[open]) > .ic-chips { display: none; }

/* Tek düğme: kapalıyken "… Düzenle", açıkken "Düzenlemeyi Kapat". Geniş kartta başlık satırının sağında, dar kartta altta. */
.ic-edit { margin: 0; }
.ic-edit > summary.ic-toggle {
  position: absolute; top: 0.75rem; right: 1rem; margin: 0;
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  min-height: 2.5rem; padding: 0.3rem 0.75rem; border-radius: 8px;
  border: 1px solid var(--control-border); background: #fff; color: var(--accent);
  font-size: 0.85rem; font-weight: 600; white-space: nowrap;
}
.ic-edit > summary.ic-toggle::-webkit-details-marker { display: none; }
.ic-edit > summary.ic-toggle:hover { background: var(--accent-soft); border-color: var(--accent); }
.ic-toggle > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.ic-icon { flex: none; width: 1rem; height: 1rem; }
.ic-edit:not([open]) .ic-toggle-close,
.ic-edit[open] .ic-toggle-open { display: none; }
.ic-toggle-long { display: none; }

/* Düzenleyici gövdesi: ipucu, satırlar, uyarı, eylemler. */
.ic-body { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.ic-hint { margin: 0 0 0.5rem; max-width: 46rem; font-size: 0.8rem; color: var(--muted); }
.ic-hint + .ic-hint { margin-top: -0.25rem; }
.ic-rows {
  --ic-row: 15rem;
  list-style: none; margin: 0; padding: 0.125rem;
  display: grid; gap: 0.375rem 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(var(--ic-row), 100%), 1fr));
}
.ic-rows--times { --ic-row: 17.5rem; }
.ic-rows--classes { --ic-row: 11.5rem; }
.ic-rows--teachers { --ic-row: 17rem; }
.ic-rows--courses { --ic-row: 26rem; }
.ic-rows--scroll { max-height: 24rem; overflow-y: auto; overscroll-behavior: contain; }
.ic-rows input:focus-visible, .ic-rows button:focus-visible { outline-offset: -2px; }
.ic-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.5rem;
  padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.ic-row.is-edited { background: var(--accent-soft); border-color: #93c5fd; }
.ic-row.is-missing { background: #fffbeb; border-color: #fcd34d; }
.ic-row.is-error { background: var(--danger-soft); border-color: #fca5a5; }
.ic-row.is-removed, .ic-row:has(.ic-del input:checked) { background: #f8fafc; }
/* Silinecek (işaretli) satırın adı üstü çizili: kayıtlı silinmişte ve henüz uygulanmamış işarette aynı (JS'siz de). */
.ic-row:has(.ic-del input:checked) .ic-row-fields input:not([type="hidden"]) { text-decoration: line-through; color: var(--muted); }
.ic-row.is-dirty { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ic-row-fields { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.ic-row input:not([type="checkbox"]):not([type="hidden"]) {
  flex: 1 1 0; width: auto; min-width: 0; max-width: none; padding: 0.25rem 0.4rem; font-size: 0.85rem;
}
.ic-row input.ic-code { flex: 0 0 6.5rem; width: 6.5rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8rem; text-align: center; }
.ic-row-meta {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-width: 0;
  font-size: 0.78rem;
}
.ic-row-meta:empty { display: none; }
.ic-orig { font-size: 0.75rem; }
.ic-error { color: var(--danger); font-weight: 600; }
/* Satır silme işareti: onay kutusu düğme gibi çizilir (JS'siz de çalışır). İşaretli = bu satır silinecek; hiçbir şey
   «Değişiklikleri Ön İzlemeye Uygula»ya basılana kadar uygulanmaz. Kayıtlı silinmiş satırda yazılar "Silindi / Geri alınacak". */
.ic-del {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 4.75rem; min-height: 2rem;
  padding: 0 0.6rem; border: 1px solid #fecaca; border-radius: 8px; background: #fff; color: var(--danger);
  font-size: 0.8rem; font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none;
}
.ic-del input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ic-del:hover { background: var(--danger-soft); }
.ic-del:has(input:checked) { background: var(--danger); border-color: var(--danger); color: #fff; }
.ic-del:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic-del-on { display: none; }
.ic-del input:checked ~ .ic-del-on { display: inline; }
.ic-del input:checked ~ .ic-del-off { display: none; }

/* Saat satırı: numara + iki saat; durum ve "PDF’ye dön" altta. */
.ic-row.period-times-row { grid-template-columns: 3rem minmax(0, 1fr); }
.period-times-row-label { font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.period-times-fields { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
/* Saat kutusu serbest metin (SS:DD yazılır, tarayıcı saat seçicisi yok): dar, ortalı, sabit genişlikli rakamlar. */
.period-times-fields input[data-ic-time] {
  flex: 1 1 0; width: auto; min-width: 0; max-width: 5.25rem; text-align: center;
  padding: 0.25rem 0.4rem; font-size: 0.9rem; font-variant-numeric: tabular-nums;
}
.period-times-fields input[data-ic-time]::placeholder { color: var(--muted); opacity: 0.8; }
.ic-row input[aria-invalid="true"] { border-color: var(--danger); background: #fff; }
.ic-row.is-invalid { background: var(--danger-soft); border-color: #fca5a5; }
.period-times-sep { color: var(--muted); font-weight: 600; }
.period-times-row .ic-row-meta { grid-column: 2 / -1; }

/* Uygulanmamış giriş varken son kayıt denenince (schedule-import.js); yazılanlar durur. */
.ic-blocked {
  margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; border: 1px solid #fca5a5; border-radius: 8px;
  background: var(--danger-soft); color: var(--danger); font-size: 0.85rem; font-weight: 600;
}
.ic-blocked[hidden] { display: none; }
.ic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.75rem; }
.ic-actions .btn { flex: 1 1 100%; }
.ic-actions [hidden] { display: none; }
.ic-actions:not(:has(> :not([hidden]))) { display: none; }
/* Dar kart (telefon, 900px altı yarım sütun): ders çipi iki satır (kod üstte, ad altta) ve iki sütun; dikey yer kazanılır. */
@container ic (max-width: 29.99rem) {
  .ic-chips--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ic-chips--pairs .ic-chip { flex-direction: column; align-items: flex-start; gap: 0; }
  .ic-chips--pairs .ic-chip-code { max-width: 100%; font-size: 0.6875rem; }
  .ic-chips--pairs .ic-chip-name { max-width: 100%; }
}
@container ic (min-width: 30rem) {
  .ic-toggle-long { display: inline; }
  .ic-toggle-short, .ic-toggle-ctx { display: none; }
  .ic-edit > summary.ic-toggle { min-height: 2.25rem; }
  .ic-head > h2 { min-height: 2.25rem; }
  .ic-chip { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
  .ic-chips--pills .ic-chip { padding: 0.2rem 0.65rem; }
  .ic-actions .btn { flex: none; }
}

@media (max-width: 720px) {
  .ic-row input:not([type="checkbox"]):not([type="hidden"]), .ic-row .btn, .ic-del { min-height: 2.5rem; }
  .ic-rows--scroll { max-height: 22rem; }
}
.import-error-count { color: var(--danger); }
.sg-p-time { display: block; font-size: 0.65rem; font-weight: 500; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.linklike { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; }
.linklike:hover { text-decoration: underline; }
.sg.is-import .sg-corner, .sg.is-import .sg-label { width: 14.5rem; min-width: 14.5rem; max-width: 14.5rem; }
.sg-lab {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.4rem; row-gap: 0.05rem;
  align-items: center; min-height: 28px;
}
.sg-lab .sg-name {
  grid-column: 1; min-width: 0; max-width: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;
}
.sg-lab small { grid-column: 1; color: var(--muted); font-weight: 400; font-size: 11px; }
.sg-lab .sg-tags { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 0.2rem; align-items: center; justify-self: end; }
.sg-label.is-removed .sg-name { text-decoration: line-through; color: var(--muted); }
.sg-table td.cell-edited { box-shadow: inset 3px 0 0 var(--accent); }
.cell-panel-note { margin: 0 0 0.5rem; font-size: 0.8rem; }
.cell-panel-delete { margin-top: 0.5rem; }

.import-footer { position: sticky; bottom: 0.75rem; z-index: 40; margin-top: 1rem; }
.import-message:empty { display: none; }
.import-message > .flash, .import-message > .error { margin: 0 0 0.4rem; padding: 0.45rem 0.75rem; font-size: 0.85rem; }
.import-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between;
  background: rgba(255, 255, 255, 0.96); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14); padding: 0.6rem 0.8rem;
}
.import-changes { margin: 0; font-size: 0.85rem; color: var(--muted); }
.import-changes strong { color: var(--text); }
.import-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.import-actions form { margin: 0; }
.import-hint { margin: 0.75rem 0 1rem; color: var(--muted); font-size: 0.88rem; }
/* Aktarım onay penceresi (_import_parts.html confirm_dialog) */
.import-confirm-modal { max-width: min(36rem, calc(100vw - 2rem)); }
.import-impact { display: grid; gap: 0.6rem; }
.import-impact section { border-radius: 10px; padding: 0.6rem 0.8rem; font-size: 0.88rem; }
.import-impact h3 { margin: 0 0 0.3rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.import-impact ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.import-impact-drop { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.import-impact-keep { background: var(--ok-soft); border: 1px solid #86efac; color: #14532d; }
.import-impact-names { display: block; max-height: 6.5rem; overflow: auto; font-weight: 600; }
label.check.import-ack { align-items: flex-start; gap: 0.55rem; font-size: 0.88rem; line-height: 1.4; }
.import-ack input { margin-top: 0.2rem; flex: 0 0 auto; }
@media (max-width: 640px) {
  .sg.is-import .sg-corner, .sg.is-import .sg-label { width: 11rem; min-width: 11rem; max-width: 11rem; }
  .sg-lab small { display: none; }
  .import-footer { bottom: 0.4rem; }
}

/* ---- UI standardı (docs/UI-STANDARDS.md): kabuk hizası, tipografi alt sınırı, odak, dokunma hedefi, bileşenler ---- */
.nav-school-kicker { font-size: 0.6875rem; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.htmx-request { opacity: 0.6; }

/* Geri bağlantısı düğme gibi: gri yazı fark edilmiyor, kullanıcı tarayıcının geri tuşuna gidiyordu. */
.back-link {
  display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.6rem;
  padding: 0.38rem 0.85rem 0.38rem 0.7rem; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--text); font-size: 0.88rem; font-weight: 600; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); text-decoration: none !important;
}
.back-link:hover, .back-link:focus-visible { border-color: #93c5fd; background: var(--accent-soft); color: var(--accent); }

.btn-sm { min-height: 1.875rem; }
table.data td { font-variant-numeric: tabular-nums; }
table.data td.actions { text-align: right; white-space: nowrap; width: 1%; }
table.data td.actions .stack { justify-content: flex-end; flex-wrap: nowrap; }
table.data td.actions form { display: inline-flex; margin: 0; }
.card.danger-zone { margin-top: 1rem; border-color: #fecaca; }
.card.danger-zone h2 { color: var(--danger); }

.grid-form { grid-template-columns: repeat(auto-fit, minmax(14rem, 26rem)); }
.grid-form select { width: 100%; max-width: none; }
.empty-state { text-align: center; padding: 2rem 1rem; }
.empty-state h2 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.empty-state p { color: var(--muted); margin: 0 auto 1rem; max-width: 36rem; }
.empty-state .stack { justify-content: center; }

.error-card { width: 100%; max-width: 520px; }
.error-card h1 { margin: 0.15rem 0 0.5rem; font-size: 1.45rem; }
.error-code { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.error-detail { font-size: 0.85rem; }

@media (max-width: 720px) {
  .btn, .btn-sm { min-height: 2.5rem; }
  input:not([type=checkbox]):not([type=radio]), select { min-height: 2.5rem; }
  .back-link { min-height: 2.5rem; }
  .seg-btn { display: inline-flex; align-items: center; min-height: 2.5rem; }
  .grid-form { grid-template-columns: 1fr; }
  .grid-form .btn { justify-self: stretch; }
  .holidays-add-form {
    flex-wrap: wrap;
    flex: 1 1 100%;
  }
  .holidays-add-form input[type="date"] { width: 100%; }
  .holidays-add-form input[name="name"] { flex: 1 1 8rem; }
  .holiday-list-status { display: none; }
}

/* ---- Çizelge araç paneli: Döndür | İndir yan yana, boş sütun yok ---- */
.week-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0 0 1rem;
  align-items: stretch;
}
.week-toolbar--edit {
  grid-template-columns: minmax(14rem, 0.9fr) minmax(18rem, 1.4fr);
}
.tool-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  min-height: 100%;
}
.tool-panel-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.tool-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  justify-content: center;
}
.tool-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: #f8fafc;
}
.tool-row-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.tool-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.tool-sub { font-size: 0.78rem; color: var(--muted); margin: 0 0.25rem 0 0; }
.tool-hint { font-size: 0.76rem; color: var(--muted); margin: 0.15rem 0 0.4rem; line-height: 1.35; max-width: 28rem; }
.tool-note { font-size: 0.72rem; color: var(--muted); font-style: italic; margin: 0 0.25rem 0 0; white-space: nowrap; }
.export-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
}
.export-split--single { grid-template-columns: 1fr; }
.export-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  min-width: 0;
  background: #f8fafc;
}
.export-col + .export-col {
  border-left: 1px solid var(--border);
}
.export-col-title { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.export-col-desc { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.4; flex: 1; }
.week-toolbar form { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; }
.week-toolbar .toolbar-group { border: 0; padding: 0; background: none; display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.export-count { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.85rem; font-weight: 600; }
.export-count input[type="number"] { width: 4.2rem; max-width: none; padding: 0.35rem 0.45rem; }
.week-toolbar .toolbar-select { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
/* Geriye dönük: eski tool-group / tool-card sınıfları */
.tool-group { display: contents; }
.tool-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.65rem 0.85rem;
}
.tool-card-export { grid-column: 1 / -1; }
.export-blocks { display: flex; flex-direction: column; gap: 0.85rem; }
.export-block {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.55rem 0.65rem; border-radius: 8px; background: #f8fafc; border: 1px solid var(--border);
}
.export-block-title { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.export-block-desc { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.4; max-width: 36rem; }
.hint { font-size: 0.85rem; margin: 0 0 0.6rem; }
.nowrap { white-space: nowrap; }
.row-title { font-weight: 600; }
.label-hint { font-weight: 400; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.week-meta time { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .week-toolbar,
  .week-toolbar--edit { grid-template-columns: 1fr; }
  .export-split { grid-template-columns: 1fr; }
  .export-col + .export-col { border-left: 0; border-top: 1px solid var(--border); }
  .tool-card-export { grid-column: auto; }
}

/* ---- Okul yönetimi ekranları (UI-STANDARDS §2, §4): liste + yan form, okunur form kolonu ---- */
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 1rem; align-items: start; }
.split > .card, .split-side > .card { margin-bottom: 0; }
.split-side { display: grid; gap: 1rem; }
.split + .card, .split + .danger-zone { margin-top: 1rem; }
.stack-form .form-row { margin-bottom: 0.75rem; }
.stack-form input, .stack-form select { max-width: none; }
.card-mazeret { width: 100%; }
.absence-form { max-width: none; }
.absence-wizard .absence-step {
  margin: 0 0 1rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
.absence-step-title {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; font-size: 1rem;
}
.absence-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--text); color: #fff;
  font-size: 0.8rem; font-weight: 700;
}
.absence-cover-list { display: grid; gap: 0.75rem; }
.absence-cover-row {
  display: grid; gap: 0.35rem 1rem; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  align-items: start; padding-top: 0.5rem; border-top: 1px solid var(--border);
}
.absence-cover-row:first-child { border-top: 0; padding-top: 0; }
.absence-cover-meta { display: grid; gap: 0.15rem; }
.absence-cover-row .form-row { margin-bottom: 0; }
.absence-cover-row select { width: 100%; max-width: none; }
.repl-field { position: relative; }
.repl-custom { display: none; }
.js .repl-custom { display: block; }
.js .repl-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.repl-custom-btn,
.repl-opt {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  text-align: left;
  font: inherit;
}
.repl-custom-btn {
  position: relative;
  min-height: 2.5rem;
  padding: 0.45rem 1.8rem 0.45rem 0.7rem;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.repl-custom-btn::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
}
.repl-custom-pop {
  z-index: 30;
  max-height: min(18rem, 46vh);
  overflow: auto;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}
.repl-group {
  padding: 0.45rem 0.55rem 0.15rem;
  font-size: 0.82rem;
  font-weight: 700;
}
.repl-opt {
  border: 0;
  border-radius: 8px;
  padding: 0.38rem 0.55rem;
  background: transparent;
  cursor: pointer;
}
.repl-opt:hover,
.repl-opt.is-selected { background: var(--accent-soft); }
.repl-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.repl-note {
  flex: 0 0 9.5rem;
  color: var(--muted);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.repl-empty { margin: 0.2rem 0.55rem 0.45rem; color: var(--muted); font-size: 0.85rem; }
.absence-cover-row:not(:has(.eod-toggle:checked)) .eod-group { display: none; }
#absence-step-scope:has(input[name="scope"][value="day"]:checked) #absence-periods { display: none; }
.repl-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.repl-stack li { line-height: 1.35; white-space: normal; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.absence-replacement-field { margin: 0.25rem 0 0.85rem; }
.absence-replacement-field label { display: block; margin-bottom: 0.35rem; }
.absence-replacement-field select { width: 100%; max-width: none; }
.absence-periods { margin: 0.5rem 0 0; }
.period-checks { display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; }
.absence-form-actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end;
}
.absence-form-actions .form-row { flex: 1 1 14rem; margin-bottom: 0; }
.absence-form-actions .btn { flex: 0 0 auto; margin-bottom: 0.15rem; }
.is-dim { opacity: 0.45; }
.form-note { font-size: 0.8rem; margin: 0 0 0.75rem; }
.readonly-value {
  margin: 0; padding: 0.55rem 0.75rem; background: #f8fafc;
  border: 1px solid var(--border); border-radius: 10px; font-weight: 600;
}
.account-dl { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.55rem 0.75rem; margin: 0; }
.account-dl dt { margin: 0; color: var(--muted); font-weight: 600; }
.account-dl dd { margin: 0; overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.account-sub { margin: 0.85rem 0 0.55rem; font-weight: 700; }
.account-schools { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.account-schools-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 1rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--border); }
.account-schools-head h3 { margin: 0; font-size: 0.95rem; }
.account-school { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; }
.account-school .row-title { font-weight: 700; }
#sifre .stack-form input,
#cikti .stack-form input { max-width: 420px; }
@media (max-width: 520px) {
  .account-dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .account-dl dd { margin-bottom: 0.45rem; }
}
.teacher-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.checks { border: 0; padding: 0; margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.checks legend { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.35rem; padding: 0; width: 100%; }
label.check { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; font-size: 0.9rem; margin: 0; }
.cell-sub { font-size: 0.8rem; }
.cell-off-program {
  display: block;
  margin-top: 0.15rem;
  color: #9a3412;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.3;
}
.form-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; }
.form-footer {
  position: sticky; bottom: 0.75rem; z-index: 30; display: flex; gap: 0.5rem; align-items: center;
  background: rgba(255, 255, 255, 0.96); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); padding: 0.55rem 0.75rem; margin-top: 0.75rem; width: fit-content;
}
.sched-view { font-size: 0.85rem; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .switch { width: 2.75rem; height: 1.7rem; }
  .switch-wrap { width: 2.75rem; }
  .switch::after { width: 1.35rem; height: 1.35rem; }
  .form-pair { grid-template-columns: 1fr; }
  .form-footer { width: auto; bottom: 0.4rem; }
}

/* ---- Geniş sayfa düzeni: sayfa seçer ({% block container_class %}container container-wide{% endblock %}) ----
   Ders programları ve PDF önizlemesi. 721px+ : içerik ekranı boydan boya kullanır, iki yanda --gutter (24px).
   Üst sınır yok (1920 tavanı yanlarda boş şerit bırakıyordu). Yalnız <main> genişler; menü şeridi standart kutuda
   kalır (sayfa geçişinde zıplamaz). Kazanılan genişlik sütunlara gider.
   720px ve altında kural yok: dar ekran düzeni (ve bugünün günü varsayılanı) aynen kalır. */
@media (min-width: 721px) {
  main.container.container-wide { max-width: none; }
  .container-wide .stat-cards { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .container-wide .import-strip { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

  .container-wide .sg-corner, .container-wide .sg-label { width: 14rem; min-width: 14rem; max-width: 14rem; }
  .container-wide .sg.is-import .sg-corner, .container-wide .sg.is-import .sg-label { width: 15.5rem; min-width: 15.5rem; max-width: 15.5rem; }

  /* Tablo kartı doldurur; hücreler kalan genişliğe yayılır. Haftada alt sınır yok (sığdırmak için içerik gizlenmez,
     taşan metin ellipsis). Günde sütun daha geniş (5.5rem taban); kutudan taşarsa ızgara kayar. */
  .container-wide .sg-table {
    width: 100%;
    min-width: calc(14rem + var(--periods, 8) * var(--sg-col-min, 0px) * var(--sg-days, 5));
  }
  .container-wide .sg-table.is-day { --sg-days: 1; --sg-col-min: 5.5rem; }
  .container-wide .sg-table.is-week { --sg-days: 5; --sg-col-min: 0px; }
  .container-wide .sg.is-import .sg-table.is-week { --sg-col-min: 3.25rem; }
  .container-wide .sg.is-import .sg-table { min-width: calc(15.5rem + var(--periods, 8) * var(--sg-col-min, 0px) * var(--sg-days, 5)); }
  .container-wide .sg-table td { width: auto; min-width: var(--sg-col-min, 0px); max-width: none; }
}

table.roster td.cell-pending { background: #fff7ed; }
.roster-save-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem;
  margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px solid var(--border);
}
.roster-save-bar[hidden] { display: none !important; }
.roster-save-note { font-size: 0.85rem; color: var(--muted); max-width: 14rem; }
.leave-guard {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.45); padding: 1rem;
}
.leave-guard[hidden] { display: none !important; }
.leave-guard-dialog {
  width: min(28rem, 100%); background: #fff; border-radius: 14px; padding: 1.25rem 1.35rem;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
}
.leave-guard-dialog h2 { margin: 0 0 0.45rem; font-size: 1.15rem; }
.leave-guard-dialog p { margin: 0 0 1rem; }

input[type="date"] { cursor: pointer; }
.day-fold-list { margin-top: 0.35rem; }
.day-fold-wrap { position: relative; border-top: 1px solid var(--border); }
.day-fold-check {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0);
}
.day-fold-bar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.75rem 0.85rem;
}
.day-fold-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.55rem; min-width: 0; margin-right: auto; }
.day-fold-preview {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 1.85rem; padding: 0.28rem 0.7rem; border-radius: 8px;
  border: 1px solid #bfdbfe; background: var(--accent-soft); color: var(--accent);
  font-size: 0.84rem; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.day-fold-check-preview:checked ~ .day-fold-bar .day-fold-preview { background: #bfdbfe; }
.day-fold-body { display: none; }
.day-fold-check-preview:checked ~ .day-fold-body { display: block; }
.day-fold-people { list-style: none; margin: 0; padding: 0 0.85rem 0.35rem; display: block; }
.day-fold-who {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  font-weight: 600; padding: 0.45rem 0; border-top: 1px solid var(--border);
}
.day-fold-who > span:first-child { min-width: 0; }
.day-fold-actions { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
.day-fold-actions form { margin: 0; }
.day-fold-body { padding: 0 0.75rem 0.85rem; }
.absence-preview-block { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }
.absence-preview-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem;
}
.absence-preview-toolbar h2 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.absence-preview-toolbar .btn { flex: 0 0 auto; }
.absence-preview { margin-bottom: 1.25rem; padding: 0.85rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.absence-preview-head { text-align: center; margin-bottom: 0.85rem; }
.absence-preview-tc { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; }
.absence-preview-school { margin: 0.15rem 0 0; font-weight: 700; }
.absence-preview-head h2 { margin: 0.35rem 0 0.6rem; font-size: 1.05rem; letter-spacing: 0.02em; }
.absence-preview-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 0.65rem;
  font-size: 0.8rem; color: var(--muted);
}
.absence-preview-date {
  font-size: 1.02rem; font-weight: 700; color: var(--text); line-height: 1.2;
}
.absence-preview-lead { margin: 0 auto 0.4rem; max-width: 46rem; font-size: 0.82rem; line-height: 1.45; }
.absence-preview-scroll { overflow-x: auto; margin-bottom: 0.75rem; }
.absence-preview-table {
  width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 52rem; font-size: 0.78rem;
}
.absence-preview-assigned { margin-top: 0.75rem; }
.ap-col-name { width: 18%; }
.ap-col-last { width: 10%; }
.absence-preview-table th, .absence-preview-table td {
  border: 1px solid #94a3b8; padding: 0.35rem 0.3rem; text-align: center; vertical-align: middle;
  overflow-wrap: break-word;
}
.absence-preview-table thead th { background: #e2e8f0; font-size: 0.72rem; }
.ap-bell { display: block; margin-top: 0.1rem; font-weight: 500; font-size: 0.62rem; letter-spacing: 0; }
.absence-preview-table tbody th { text-align: left; font-weight: 700; }
.absence-preview-assigned thead th { background: #f3f4f6; }
.absence-preview-assigned tbody th { font-weight: 500; }
.ap-class { font-size: 0.82rem; font-weight: 600; line-height: 1.2; }
.ap-subj { font-size: 0.62rem; font-weight: 500; line-height: 1.15; }
.ap-reason { font-size: 0.75rem; }
.ap-empty { color: var(--muted); }
.absence-preview-sign { text-align: right; margin: 0.4rem 0 0; font-size: 0.85rem; }
.copy-roster {
  margin: 0;
  padding: 0.75rem 0.85rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.copy-roster legend { font-weight: 700; padding: 0 0.25rem; }
.copy-choice {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0;
  font-weight: 600;
}
.copy-source { margin: 0.15rem 0 0.45rem 1.45rem; }
.catalog-nav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; }
.catalog-nav a {
  display: inline-flex; align-items: center; padding: 0.4rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--text); font-weight: 600;
  font-size: 0.88rem; text-decoration: none;
}
.catalog-nav a:hover { border-color: #93c5fd; text-decoration: none; }
.catalog-nav a.is-active { background: var(--accent-soft); color: var(--accent); border-color: #93c5fd; }
.catalog-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.catalog-card {
  display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.05rem;
  border: 1px solid var(--border); border-radius: 12px; background: #fff; text-decoration: none; color: inherit;
}
.catalog-card:hover { border-color: #93c5fd; text-decoration: none; }
.catalog-card strong { font-size: 1.05rem; }
.catalog-card span { color: var(--muted); font-size: 0.85rem; }
.catalog-card .badge { align-self: flex-start; }
/* Seçim sayfaları (Tanımlar, Görevlendirme): kartlar yatayda ve dikeyde sayfanın ortasında; üstte yapışık durmaz. */
.view-choice-page {
  display: flex; flex-direction: column; justify-content: center;
  max-width: 52rem; min-height: calc(100vh - 13rem); margin: 0 auto; padding: 1rem 0;
}
.view-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-hub.view-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-count { margin-top: 0.15rem; font-size: 0.78rem; font-weight: 650; }
.view-choice-card { position: relative; gap: 0.45rem; padding: 1.15rem 1.2rem; }
.view-choice-card > span,
.view-choice-copy span { line-height: 1.45; }
.view-choice-ico { width: 1.75rem; height: 1.75rem; color: var(--accent); flex: 0 0 auto; }
.view-choice-card.is-last { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.view-choice-last {
  position: absolute; top: 0.8rem; right: 0.8rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-style: normal; font-weight: 700;
}
.view-choice-extra {
  flex-direction: row; align-items: flex-start; gap: 0.85rem; margin-top: 0.75rem;
}
.view-choice-copy { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.view-choice-copy strong { color: var(--text); }
@media (max-width: 720px) {
  .view-choice, .catalog-hub.view-choice { grid-template-columns: 1fr; }
  .view-choice-page { min-height: 0; padding-top: 1.5rem; }
}

/* Görevlendirme: Gün tablosu | Haftalık liste geçişi (.seg) ve ek ders özeti bağlantısı. */
.view-switch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.view-switch-row > h1 { flex: 1 0 100%; }
.view-switch .seg-btn { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.4rem 0.85rem; font-size: 0.85rem; font-weight: 600; }
/* .seg taşmayı kırpar: odak halkası içeride çizilir, mavi zeminde beyazdır. */
.view-switch .seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.view-switch .seg-btn.is-active:focus-visible { outline-color: #fff; }
.view-switch-more { font-size: 0.85rem; font-weight: 600; }

/* Görevlendirme tablosu (duty/_absence_table.html). Tek tablo, iki bölüm, ortak sütunlar (colgroup) → hizalı.
   Turuncu = yerine öğretmen bekleyen ders, yeşil = görevlendirildi, sarı = nöbetçinin boş dersi,
   gri = kendi dersi / derste. */
.at-card { padding: 0.9rem 1rem 1.1rem; }
.at-wrap { display: grid; gap: 0.75rem; }
.at-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.at-head h2 { margin: 0; font-size: 1.1rem; }
.at-daynav { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.at-dateform { display: flex; gap: 0.35rem; align-items: center; margin: 0; }
.at-dateform input { width: auto; padding: 0.3rem 0.5rem; font-size: 0.85rem; }
.js .at-dateform button { display: none; }
.at-progress { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 0 auto; font-size: 0.85rem; color: var(--muted); }
.at-progress progress { width: 8rem; height: 0.5rem; accent-color: var(--ok); }
.at-note { margin: 0; }

.at-scroll { border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.at-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; min-width: 100%; font-size: 0.82rem; }
.at-col-name { width: 13rem; }
.at-col-p { width: 6.5rem; }
.at-col-end { width: 8rem; }
.at-table th, .at-table td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.at-table tr > :last-child { border-right: 0; }
.at-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.at-table thead th, .at-section th {
  padding: 0.4rem 0.5rem; background: #f8fafc; color: var(--muted);
  font-size: 0.75rem; font-weight: 700; text-align: center; white-space: nowrap;
}
.at-section th { border-top: 3px solid var(--border); }
.at-time { display: block; font-weight: 500; font-size: 0.7rem; }
.at-table .at-corner, .at-table .at-who { position: sticky; left: 0; z-index: 2; text-align: left; background: #fff; }
.at-table .at-corner { background: #f8fafc; }
.at-who { padding: 0.45rem 0.6rem; vertical-align: top; font-weight: 400; overflow-wrap: anywhere; }
.at-name { display: block; font-weight: 700; color: var(--text); }
.at-meta { display: block; color: var(--muted); font-size: 0.75rem; line-height: 1.35; }
.at-staff .is-duty .at-meta { color: #854d0e; font-weight: 600; }

.at-cell { height: 3.1rem; padding: 0.3rem; text-align: center; vertical-align: middle; overflow-wrap: anywhere; }
.at-lesson { display: block; font-weight: 600; line-height: 1.25; }
.at-sub { display: block; font-size: 0.72rem; line-height: 1.25; }
.at-cell.is-none { color: #cbd5e1; background: #fcfcfd; }
.at-cell.is-present, .at-cell.is-own { color: var(--muted); background: #f8fafc; }
.at-cell.is-away { color: var(--muted); background: #f1f5f9; font-style: italic; }
.at-cell.is-open { padding: 0; background: #fff7ed; color: #9a3412; box-shadow: inset 0 0 0 1px #fdba74; }
.at-cell.is-open .at-sub { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.at-cell.is-open:hover { background: #ffedd5; }
.at-cell.is-done { background: var(--ok-soft); color: #14532d; }
.at-cell.is-done .at-sub { font-weight: 700; }
.at-cell:has(.at-pick) { padding: 0; }
.at-cell.is-done:has(.at-pick):hover { background: #bbf7d0; }
.at-cell.is-free { background: #fef9c3; color: #854d0e; box-shadow: inset 0 0 0 1px #fde047; font-weight: 700; }
.at-pick {
  display: flex; flex-direction: column; justify-content: center; gap: 0.1rem;
  width: 100%; height: 100%; min-height: 3.1rem; padding: 0.3rem 0.35rem;
  color: inherit; text-decoration: none !important;
}
.at-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 4px; }
.at-end { padding: 0.3rem 0.5rem; }
.at-reason { color: var(--muted); font-size: 0.78rem; text-align: left; overflow-wrap: anywhere; }
.at-total { text-align: center; color: var(--muted); background: #f8fafc; }
.at-total strong { color: var(--text); font-size: 0.95rem; }
.at-empty-row { padding: 1rem; text-align: center; color: var(--muted); }

.at-foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
.at-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; margin: 0; font-size: 0.78rem; color: var(--muted); }
.at-key { padding: 0.1rem 0.45rem; border-radius: 6px; font-weight: 700; }
.at-legend .at-key:not(:first-child) { margin-left: 0.5rem; }
.at-key.is-open { background: #fff7ed; color: #9a3412; box-shadow: inset 0 0 0 1px #fdba74; }
.at-key.is-done { background: var(--ok-soft); color: #14532d; }
.at-key.is-free { background: #fef9c3; color: #854d0e; box-shadow: inset 0 0 0 1px #fde047; }
.at-saved { font-size: 0.8rem; }

/* Hücre paneli: aday düğmeleri */
.at-panel { width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; }
.at-panel .at-note { margin-bottom: 0.5rem; }
.at-cand-form { display: grid; gap: 0.45rem; margin: 0; }
.at-current {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: space-between;
  margin: 0; padding: 0.45rem 0.6rem; border-radius: 10px; background: var(--ok-soft); color: #14532d; font-size: 0.85rem;
}
.at-cand-title { margin: 0.3rem 0 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.at-cands { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.at-cand {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; width: 100%;
  padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: 10px; background: #fff;
  color: var(--text); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer;
}
.at-cand:hover, .at-cand:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.at-cand.is-current { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.at-cand-name { font-weight: 650; }
.at-cand-note { color: var(--muted); font-size: 0.78rem; }
.at-cand.is-busy .at-cand-note { color: #9a3412; }
.at-cand-load { margin-left: auto; color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.at-cand-more summary { cursor: pointer; font-size: 0.82rem; color: var(--muted); padding: 0.2rem 0; }
.at-cand-more .at-cands { margin-top: 0.3rem; }

/* Ekle / düzenle formu: saat kutuları yalnız "Yalnız bazı dersler" seçiliyken */
.at-scope { margin-bottom: 0.25rem; }
.at-row-form:not(:has(input[name="scope"][value="periods"]:checked)) .at-periods { display: none; }
.at-periods { width: 100%; padding-top: 0.25rem; }

@media (max-width: 720px) {
  .at-card { padding: 0.75rem; }
  .at-progress { margin-left: 0; }
  .at-col-name { width: 9.5rem; }
  .at-col-p { width: 5.75rem; }
  .at-col-end { width: 6.5rem; }
}

/* ============================================================
   Sistem sahibi masasi (admin)
   Marka: lacivert + altin. Okul verisine girilmez; yalniz hesap ve denetim.
   ============================================================ */
@font-face {
  font-family: "Funnel Display";
  src: url("/static/fonts/FunnelDisplay-Variable.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Funnel Sans";
  src: url("/static/fonts/FunnelSans-Variable.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
}

body.is-admin-desk {
  --admin-ink: #0a1628;
  --admin-panel: #0e1d38;
  --admin-line: rgba(143, 176, 255, 0.16);
  --admin-gold: #e8b84a;
  --admin-paper: #f3f6fb;
  --admin-mist: #e7eef8;
  background:
    radial-gradient(900px 420px at 8% -8%, rgba(29, 78, 216, 0.12), transparent 60%),
    radial-gradient(700px 360px at 92% 0%, rgba(232, 184, 74, 0.14), transparent 55%),
    linear-gradient(180deg, #e9eef7 0%, var(--admin-paper) 38%, #eef2f6 100%);
}
body.is-admin-desk .navbar {
  background: rgba(243, 246, 251, 0.86);
  backdrop-filter: saturate(1.1) blur(10px);
}

.admin-desk {
  --admin-display: "Funnel Display", "Segoe UI", sans-serif;
  --admin-body: "Funnel Sans", "Segoe UI", sans-serif;
  padding-bottom: 2.5rem;
}
.admin-desk .admin-display,
.admin-desk .admin-kicker,
.admin-desk .admin-panel__title,
.admin-desk .admin-kpi__value {
  font-family: var(--admin-display);
}

.admin-mast {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 0 0 1.35rem;
  padding: 1.35rem 1.4rem 1.4rem;
  border-radius: 22px;
  color: #f4f7ff;
  background:
    linear-gradient(135deg, rgba(232, 184, 74, 0.16), transparent 42%),
    linear-gradient(160deg, #0a1628 0%, #132848 58%, #0e1d38 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(10, 22, 40, 0.18);
  position: relative;
  overflow: hidden;
}
.admin-mast::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 184, 74, 0.22), transparent 68%);
  pointer-events: none;
}
.admin-mast__copy { position: relative; z-index: 1; min-width: min(100%, 18rem); }
.admin-mast__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.admin-kicker {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--admin-gold);
}
.admin-display {
  margin: 0;
  font-size: clamp(1.7rem, 2.4vw, 2.25rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.admin-lede {
  margin: 0.55rem 0 0;
  max-width: 38rem;
  color: #a9b8d1;
  font-size: 0.95rem;
  line-height: 1.45;
  font-family: var(--admin-body);
}
.admin-mast .btn-primary {
  background: var(--admin-gold);
  border-color: var(--admin-gold);
  color: var(--admin-ink);
}
.admin-mast .btn-primary:hover { filter: brightness(1.05); text-decoration: none; }
.admin-mast .btn-ghost {
  color: #e8eefc;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
}
.admin-mast .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.45); text-decoration: none; }

.admin-link-banner {
  display: grid;
  gap: 0.85rem;
  margin: 0 0 1.15rem;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: 18px;
  border: 1px solid #f1d48a;
  background: linear-gradient(180deg, #fff8e8, #fff);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.admin-link-banner h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  font-family: var(--admin-display);
}
.admin-link-banner p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.admin-link-banner__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.admin-link-banner__input {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.82rem;
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.9rem;
}
.admin-filter {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: min(100%, 18rem);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
.admin-filter input {
  border: 0;
  outline: none;
  width: 100%;
  background: transparent;
  font: inherit;
  padding: 0.35rem 0;
}
.admin-filter svg { flex: 0 0 auto; color: var(--muted); }

.admin-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0 0 1.1rem;
}
.admin-kpi {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.15rem 1.15rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}
.admin-kpi::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--kpi-tone, var(--accent));
}
.admin-kpi__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-kpi__value {
  display: block;
  font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--admin-ink);
  animation: admin-rise 0.55s ease both;
}
.admin-kpi__hint {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
}
@keyframes admin-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-kpi__value { animation: none; }
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 0.5rem;
}
.admin-panel {
  min-width: 0;
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}
.admin-panel--wide { grid-column: 1 / -1; }
.admin-panel__title {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  color: var(--admin-ink);
}
.admin-panel__sub {
  margin: 0.25rem 0 1rem;
  color: var(--muted);
  font-size: 0.84rem;
}
.admin-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.1rem;
}
.admin-quick a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.admin-quick a:hover {
  border-color: #93b4ff;
  transform: translateY(-1px);
}
.admin-quick strong {
  font-family: var(--admin-display);
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.admin-quick span { color: var(--muted); font-size: 0.82rem; line-height: 1.35; }

.admin-bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.88rem;
  margin-bottom: 0.3rem;
}
.admin-bar-meta strong { font-weight: 650; }
.admin-bar-track {
  height: 11px;
  background: var(--admin-mist);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.7rem;
}
.admin-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: #2563eb;
}
.admin-bar-fill.t2 { background: #0d9488; }
.admin-bar-fill.t3 { background: #ea580c; }
.admin-bar-fill.t4 { background: #0369a1; }
.admin-bar-fill.t5 { background: #b45309; }

.admin-meter {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--admin-mist);
  margin-bottom: 1rem;
}
.admin-meter > i { display: block; height: 100%; }
.admin-meter .m1 { background: #2563eb; }
.admin-meter .m2 { background: #b45309; }
.admin-meter .m-ok { background: #15803d; }
.admin-meter .m-muted { background: #94a3b8; }

.admin-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.admin-legend li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
}
.admin-legend i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  flex: 0 0 auto;
}
.admin-legend strong { margin-left: auto; }
.admin-legend em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.8rem;
  min-width: 2.6rem;
  text-align: right;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}
.admin-stat {
  background: #f7f9fc;
  border-radius: 14px;
  padding: 0.85rem 0.6rem;
  text-align: center;
}
.admin-stat strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-family: var(--admin-display);
}
.admin-stat span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.admin-stat small {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.admin-vbars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 0.7rem;
  align-items: end;
  min-height: 210px;
}
.admin-vbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.admin-vbar-col {
  width: 100%;
  max-width: 54px;
  height: 150px;
  background: #eef3f9;
  border-radius: 12px 12px 6px 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  padding-top: 0.35rem;
}
.admin-vbar-fill {
  width: 68%;
  min-height: 8px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #7aa7ff, #1d4ed8);
}
.admin-vbar-val {
  font-size: 0.74rem;
  font-weight: 700;
}
.admin-vbar-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-desk .table-surface {
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}
.admin-desk .table-surface .data thead th {
  background: #f4f7fc;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b6b84;
}
.admin-desk .user-row td { vertical-align: top; padding-top: 0.95rem; padding-bottom: 0.95rem; }
.admin-desk .badge {
  border-radius: 999px;
  font-weight: 650;
}
.admin-role-admin {
  background: #fff4d6;
  color: #7a5410;
}
.admin-role-user {
  background: #eef2f7;
  color: #334155;
}

.admin-queue {
  margin: 0 0 1.35rem;
}
.admin-queue__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.65rem;
}
.admin-queue__head h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  font-family: var(--admin-display);
}
.admin-queue__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--admin-ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.admin-queue__count.is-zero { background: #94a3b8; }

.admin-empty {
  padding: 1.4rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

.admin-log-action {
  font-weight: 650;
  color: var(--admin-ink);
}
.admin-desk .log-detail { color: #475569; }

@media (max-width: 960px) {
  .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-quick { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .admin-mast { padding: 1.1rem 1rem 1.15rem; border-radius: 18px; }
  .admin-kpis { grid-template-columns: 1fr 1fr; gap: 0.65rem; }
  .admin-stats { grid-template-columns: 1fr; }
}