/* Kerangka aplikasi: rel samping di layar lebar, tab bawah di layar sempit. */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* --------------------------------------------------------------------- */
/* Rel samping                                                            */
/* --------------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3);
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-2) var(--sp-5);
}
.brand__mark { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-body);
  font-family: var(--font-display);
  font-weight: 550;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__item:hover { background: var(--surface-2); color: var(--text); }
.nav__item[aria-current='page'] {
  background: var(--primary-soft);
  color: var(--primary);
}
.nav__item svg { flex: none; }

.sidebar__footer { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }

/* --------------------------------------------------------------------- */
/* Batang atas                                                            */
/* --------------------------------------------------------------------- */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--topbar-h);
  padding: var(--sp-3) var(--sp-6);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar__title { font-size: var(--fs-h1); margin-right: auto; }
.topbar__title:focus { outline: none; }
.topbar__slot { display: flex; align-items: center; gap: var(--sp-2); }

.page {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.page--sempit { max-width: 620px; }

.grid { display: grid; gap: var(--sp-4); }
.grid--kpi   { grid-template-columns: repeat(4, 1fr); }
.grid--dua   { grid-template-columns: repeat(2, 1fr); }
.grid--2-1   { grid-template-columns: 1.6fr 1fr; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row   { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row--rapat { gap: var(--sp-2); }
.spacer { margin-left: auto; }

/* --------------------------------------------------------------------- */
/* Tab bawah (HP)                                                         */
/* --------------------------------------------------------------------- */
.bottomnav { display: none; }

.fab {
  display: none;
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--bottomnav-h) + var(--sp-4) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: 56px; height: 56px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--text-invert);
  box-shadow: var(--shadow-pop);
}

/* --------------------------------------------------------------------- */
/* Titik henti                                                            */
/* --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .shell { grid-template-columns: var(--sidebar-w-rail); }
  .sidebar { align-items: center; padding: var(--sp-5) var(--sp-2); }
  .brand__name, .nav__item span { display: none; }
  .nav__item { justify-content: center; padding: var(--sp-3); }
  .grid--kpi { grid-template-columns: repeat(2, 1fr); }
  .grid--2-1 { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }

  .topbar { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
  .topbar__title { font-size: var(--fs-h2); }

  .page {
    padding: var(--sp-4);
    padding-bottom: calc(var(--bottomnav-h) + var(--sp-14) + env(safe-area-inset-bottom, 0px));
    gap: var(--sp-4);
  }
  .grid--dua { grid-template-columns: 1fr; }

  .bottomnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--border);
    /* Menjaga tab tetap di atas indikator home iPhone. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--bottomnav-h);
    border: none;
    background: none;
    color: var(--text-faint);
    font-size: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration: none;
  }
  .bottomnav__item[aria-current='page'] { color: var(--primary); }

  .fab { display: grid; place-items: center; }
}