/*
  Uygulama iskeleti (shell): topbar + sidebar, 3 mod.
  Breakpoint'ler mobil app'in lib/core/navigation/nav_breakpoints.dart dosyasındaki
  tabletMin/desktopMin mantığıyla aynı aile: <768 telefon, 768–1023 tablet, ≥1024 masaüstü.
  shell.js bu sınıfları JS ile render eder; burada sadece stiller var.
*/

.app-shell { display: flex; min-height: 100vh; }

.shell-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--shell-topbar-h);
  background: #fff; border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; z-index: 100;
}
.shell-topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--c-dark); }
.shell-topbar .brand img { width: 28px; height: 28px; border-radius: 8px; }
.shell-menu-btn { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--c-dark); }

.shell-sidebar {
  position: fixed; top: var(--shell-topbar-h); bottom: 0; left: 0;
  width: var(--shell-sidebar-w); background: #fff; border-right: 1px solid var(--c-border);
  overflow-y: auto; padding: 16px 12px; z-index: 90;
  transition: transform .2s ease;
}
.shell-nav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-radius: var(--radius-md); color: var(--c-text-muted); font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; margin-bottom: 2px;
}
.shell-nav-item:hover { background: var(--c-surface); }
.shell-nav-item.active { background: var(--c-surface); color: var(--c-primary-dark); }
.shell-nav-item .icon { font-size: 18px; width: 22px; text-align: center; }
.shell-nav-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--c-text-faint); padding: 16px 14px 6px; }

.shell-main {
  margin-left: var(--shell-sidebar-w); margin-top: var(--shell-topbar-h);
  padding: 28px; width: 100%; max-width: 1400px;
}

.shell-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 80; }

/* ── Tablet: 768–1023px — daraltılmış (ikon rayı) sidebar ── */
@media (max-width: 1023px) {
  :root { --shell-sidebar-w: var(--shell-rail-w); }
  .shell-nav-item span.label { display: none; }
  .shell-nav-section { display: none; }
  .shell-nav-item { justify-content: center; padding: 12px 0; }
}

/* ── Telefon: <768px — sidebar gizli, hamburger ile açılan drawer ── */
@media (max-width: 767px) {
  .shell-menu-btn { display: block; }
  .shell-sidebar {
    width: 260px; transform: translateX(-100%); box-shadow: var(--shadow-lg);
  }
  .shell-sidebar.open { transform: translateX(0); }
  .shell-sidebar.open ~ .shell-backdrop,
  .shell-backdrop.open { display: block; }
  .shell-nav-item span.label { display: inline; }
  .shell-nav-item { justify-content: flex-start; padding: 11px 14px; }
  .shell-nav-section { display: block; }
  .shell-main { margin-left: 0; padding: 16px; }
}

/* ── Genel grid yardımcıları — kart ızgaraları içerik genişliğine göre sarar ── */
.grid-cards {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (max-width: 767px) {
  .grid-cards { grid-template-columns: 1fr; }
}

/* Geniş kart ızgarası — 2-3 sütunluk özet kartları için (örn. duyuru/sınav
   listesi yan yana). .grid-cards ile aynı davranış, sadece min sütun genişliği
   daha büyük (320px) çünkü içerik liste satırları içeriyor. */
.grid-cards-wide {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (max-width: 767px) {
  .grid-cards-wide { grid-template-columns: 1fr; }
}