/* ============================================================
   Layout / App Shell — sidebar, top bar, area konten.
   Di aplikasi: dipakai oleh _LayoutAdmin.cshtml.
   ============================================================ */
.shell {
  display: flex; min-height: 100vh;
  background: var(--sidebar-bg); /* terlihat hanya di lengkung pojok .main */
}

/* ---------- Sidebar ----------
   Desktop (≥ lg): kolom sticky biasa.
   Mobile (< lg): jadi offcanvas Bootstrap (class .offcanvas-lg pada elemen
   yang sama) — dibuka lewat tombol hamburger di top bar. */
.sidebar {
  /* !important: lawan .offcanvas-lg Bootstrap yang memaksa
     background-color transparan di >=992px */
  background: var(--sidebar-bg) !important; /* gradient — pakai background, bukan -color */
  border-right: none;
  padding: 20px 12px;
  display: flex; flex-direction: column;
}
/* Scroll hanya di area menu — brand & kartu user tetap diam.
   Margin negatif = scrollbar menempel tepi aside (tanpa gap padding). */
.sidebar-nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin: 0 -12px; padding: 0 12px;
}
@media (min-width: 992px) {
  .sidebar {
    width: 232px; flex-shrink: 0;
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    transition: width .15s ease;
  }

  /* ----- Collapsed: rail ikon (toggle di top bar, desktop saja) ----- */
  .shell.sidebar-mini .sidebar { width: 76px; padding-left: 10px; padding-right: 10px; }
  .shell.sidebar-mini .brand {
    justify-content: center; padding-left: 0; padding-right: 0;
    margin-left: -10px; margin-right: -10px; /* padding sidebar mini = 10px */
  }
  .shell.sidebar-mini .brand > div:not(.brand-logo) { display: none; }
  .shell.sidebar-mini .nav-label { visibility: hidden; height: 10px; padding: 0; }
  .shell.sidebar-mini .sidebar-nav { margin: 0 -10px; padding: 0 10px; }
  .shell.sidebar-mini .sidebar-user { padding: 6px; justify-content: center; }
  .shell.sidebar-mini .sidebar-user > div:not(.avatar) { display: none; }
  .shell.sidebar-mini .sidebar .nav-item {
    justify-content: center; gap: 0;
    font-size: 0;            /* sembunyikan teks label, ikon tetap */
    padding: 10px;
  }
  .shell.sidebar-mini .sidebar .nav-item svg { width: 18px; height: 18px; }
}

.brand {
  display: flex; align-items: center; gap: 10px;
  /* full-bleed melewati padding sidebar (12px kiri-kanan, 20px atas);
     tinggi disamakan --topbar-h supaya garisnya sejajar border topbar */
  margin: -20px -12px 14px; padding: 0 20px;
  height: var(--topbar-h);
  flex-shrink: 0;  /* jangan ikut menyusut saat menu butuh ruang scroll */
}
/* Referensi (sampel ulang): brand DI ATAS BIRU — chip logo putih berikon
   biru, teks putih, tanpa garis pemisah */
.sidebar .brand-logo { background: #fff; color: var(--sidebar-avatar-fg); }
.sidebar .brand-name { color: #fff; }
.sidebar .brand-sub  { color: var(--sidebar-muted); }
.brand-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--primary); color: #fff;   /* logo produk: kotak biru + ikon putih */
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
}
.brand-logo:has(img) { background: transparent; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; padding: 3px; }
.brand-name { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.brand-sub  { font-size: 11px; color: var(--muted); margin-top: -2px; }

/* Kartu user di sidebar (referensi beranda keuangan) */
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .13);
  border-radius: var(--radius-sm);
  padding: 10px 12px; margin: 0 2px 6px;
  flex-shrink: 0;  /* idem: kartu user tetap utuh */
}
.sidebar-user .avatar { background: rgba(255, 255, 255, .92); color: var(--sidebar-avatar-fg); }
.sidebar-user .name { color: #fff; font-weight: 700; font-size: 13px; line-height: 1.2; }
.sidebar-user .status {
  font-size: 11px; color: var(--sidebar-muted);
  display: flex; align-items: center; gap: 5px;
}
.sidebar-user .status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #3ECD90; /* online */
}

.nav-group { margin-top: 14px; }
.nav-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  padding: 6px 10px;
}
.sidebar .nav-label { color: var(--sidebar-muted); }
/* Scope ke .sidebar: kelas .nav-item juga dipakai Bootstrap pada <li> tabs */
.sidebar .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--sidebar-text); font-weight: 600; font-size: 13.5px;
  text-decoration: none;
}
.sidebar .nav-item:hover  { background: var(--sidebar-hover); text-decoration: none; color: #fff; }
.sidebar .nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); }
.sidebar .nav-item svg    { width: 17px; height: 17px; flex-shrink: 0; }
/* ---------- Submenu collapsible (pola referensi: item induk + chevron) ---------- */
.nav-parent {
  width: 100%; border: none; background: none; cursor: pointer;
  font-family: inherit; text-align: left;
}
.nav-parent .chev {
  margin-left: auto; width: 13px; height: 13px; flex-shrink: 0;
  transition: transform .15s ease;
}
.nav-parent[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-sub .nav-item {
  padding-left: 37px;               /* sejajar teks induk (ikon 17 + gap 10) */
  font-size: 13px;
}
.shell.sidebar-mini .nav-sub { display: none; } /* rail: submenu disembunyikan */

/* Tombol tutup offcanvas (mobile) putih di atas sidebar biru */
.sidebar .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---------- Main & top bar ---------- */
.main {
  flex: 1; min-width: 0;
  background: var(--page-bg);
  border-top-left-radius: 18px; /* panel konten membulat di atas biru (referensi) */
}

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  height: var(--topbar-h); padding: 0 28px;
  background: var(--card-bg);   /* top bar putih (referensi) */
  border-bottom: 1px solid var(--border);
  border-top-left-radius: 18px;
}
/* Patch pojok: saat top bar sticky ikut scroll, lengkungan tetap
   memperlihatkan biru sidebar (bukan konten yang lewat di baliknya) */
.topbar::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 18px; height: 18px; pointer-events: none;
  background: radial-gradient(circle at 100% 100%,
    transparent 0 17.5px, var(--sidebar-bg-solid) 18px);
}
.topbar .spacer { flex: 1; }

/* Pencarian global di top bar (referensi) — fungsi awal: cari siswa */
.topbar-search { width: min(320px, 34vw); }
.topbar-search .input {
  background: var(--page-bg);
  border-color: transparent;
  border-radius: 10px;
}
.topbar-search .input:focus { background: var(--card-bg); border-color: var(--primary); }

.school-select .mini-tile {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: var(--primary-tint); color: var(--primary);
}
.school-select .mini-tile img { width: 100%; height: 100%; object-fit: cover; }
.school-select {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 12px; font-weight: 600; font-size: 13px;
  background: var(--card-bg); color: var(--text); cursor: pointer;
  font-family: inherit;
}

.bell {
  position: relative; border: none; background: none; cursor: pointer;
  padding: 6px; border-radius: 8px; color: var(--text-2);
}
.bell:hover { background: var(--hover); }
.bell .dot {
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: #DE4A4A; color: #fff; font-size: 9.5px; font-weight: 700;
  border-radius: 99px; display: grid; place-items: center;
}

.user-chip {
  display: flex; align-items: center; gap: 10px;
  border: none; background: none; cursor: pointer;
  font-family: inherit; text-align: left;
  padding: 4px 8px; border-radius: var(--radius-sm);
  color: var(--text);
}
.user-chip:hover { background: var(--hover); }
.user-chip > svg { color: var(--muted); }
.user-chip .name { font-weight: 700; font-size: 13px; line-height: 1.2; }
.user-chip .role { font-size: 11.5px; color: var(--muted); }

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--tile-purple-bg); color: var(--tile-purple-fg);
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}

.content { padding: 28px; max-width: 1200px; }

@media (max-width: 991.98px) {
  /* Tanpa sidebar permanen: tidak ada lengkung pojok */
  .main, .topbar { border-top-left-radius: 0; }
  .topbar::before { display: none; }
  .content { padding: 18px; }
  .topbar { padding: 0 12px; gap: 8px; }
  .user-chip .name, .user-chip .role { display: none; } /* cukup avatar di HP */
  .school-select { font-size: 12px; padding: 9px 10px; }
  .bell { padding: 11px; } /* target sentuh ±42px */
}