/* Kerangka aplikasi: sidebar (desktop), area isi, bar bawah mengapung (HP),
   lembar menu dari bawah (HP). Hanya tata letak; rupa komponen di components.css. */

body.app {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(208, 157, 87, 0.06), transparent 60%),
    var(--color-background);
  background-attachment: fixed;
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---------------- Sidebar ---------------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1030;
  width: var(--sidebar-width);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #160F0B 0%, #110B08 100%);
  border-right: 1px solid var(--color-border);
  transition: width var(--transition-normal);
}
.sidebar-brand {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--topbar-height); padding: 0 var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text-primary); text-decoration: none;
}
.brand-mark {
  flex: none; width: 38px; height: 38px; border-radius: var(--radius-md);
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(145deg, var(--color-primary), #9C6B2E);
  color: var(--color-on-primary); font-weight: 800; font-size: 1.05rem;
  box-shadow: var(--shadow-gold);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
/* Logo toko utuh, proporsional: tinggi tetap, lebar mengikuti gambar, tidak melewati ruang
   di samping tombol ciutkan. Latar terang karena logo bisa berwarna gelap. */
.brand-logo { display: flex; align-items: center; min-width: 0; max-width: 100%; height: 44px;
  padding: 5px 10px; border-radius: var(--radius-md); background: #FBF8F2; box-shadow: var(--shadow-gold); }
.brand-logo img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.brand-text { min-width: 0; line-height: 1.15; }
.brand-text strong { display: block; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text small { display: block; font-size: var(--fs-xs); color: var(--color-primary);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-3);
  scrollbar-width: thin; scrollbar-color: rgba(208, 157, 87, 0.2) transparent; }
.nav-group { margin-bottom: var(--space-5); }
.nav-group-title { padding: 0 var(--space-3) var(--space-2); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.nav-link-app {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  height: 42px; padding: 0 var(--space-3); margin-bottom: 2px;
  border-radius: var(--radius-md); color: var(--color-text-secondary);
  text-decoration: none; font-weight: 500; transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-link-app i { font-size: 1.1rem; width: 22px; text-align: center; flex: none; }
.nav-link-app span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-link-app:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.nav-link-app.active { background: var(--color-primary-soft); color: var(--color-primary); }
.nav-link-app.active::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--color-primary);
}
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--color-danger); color: #1A0505; font-size: 0.7rem; font-weight: 700;
  display: inline-grid; place-items: center; }

/* Tiga ikon sebaris: ubin ikon di atas, label di bawah (maks. dua baris, ubin ~75px). */
.nav-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nav-grid .nav-link-app {
  flex-direction: column; justify-content: center; gap: 6px;
  height: auto; min-height: 72px; padding: var(--space-2) 4px; margin: 0;
  text-align: center; font-size: var(--fs-xs); line-height: 1.15;
  border: 1px solid var(--color-divider);
}
.nav-grid .nav-link-app i { font-size: 1.35rem; width: auto; }
.nav-grid .nav-link-app span { max-width: 100%; white-space: normal; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nav-grid .nav-link-app.active { border-color: var(--color-primary); }
.nav-grid .nav-link-app.active::before { display: none; }
.nav-grid .nav-badge { position: absolute; top: 4px; right: 4px; margin: 0; min-width: 18px; height: 18px; padding: 0 5px; }

.sidebar-footer { padding: var(--space-3); border-top: 1px solid var(--color-divider); }
.user-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2);
  border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-brown); color: var(--color-primary-hover); font-weight: 700; }
.user-card .meta { min-width: 0; flex: 1; line-height: 1.2; }
.user-card .meta strong { display: block; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card .meta small { color: var(--color-text-muted); font-size: var(--fs-xs); text-transform: capitalize; }

/* Sidebar diciutkan (ikon saja), diingat per browser. */
body.sb-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
body.sb-collapsed .sidebar .brand-text,
body.sb-collapsed .sidebar .nav-group-title,
body.sb-collapsed .sidebar .nav-link-app span,
body.sb-collapsed .sidebar .nav-badge,
body.sb-collapsed .sidebar .user-card .meta,
body.sb-collapsed .sidebar .user-card .btn-icon { display: none; }
body.sb-collapsed .sidebar-brand { justify-content: center; padding: 0; }
body.sb-collapsed .nav-link-app { justify-content: center; padding: 0; }
body.sb-collapsed .nav-grid { grid-template-columns: 1fr; gap: 2px; }
body.sb-collapsed .nav-grid .nav-link-app { min-height: 42px; border-color: transparent; }
body.sb-collapsed .nav-grid .nav-link-app.active { border-color: transparent; }
body.sb-collapsed .nav-grid .nav-link-app.active::before { display: block; }
body.sb-collapsed .user-card { justify-content: center; background: transparent; border-color: transparent; }

/* Logo + nama toko menuju Beranda; tombol sembunyikan menu di kanan, sejajar "Back Office". */
.sidebar-home { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1;
  color: inherit; text-decoration: none; }
.sidebar-toggle { flex: none; margin-left: auto; }
/* Saat diciutkan, logo disembunyikan supaya tombol tetap muat di lebar ikon. */
body.sb-collapsed .sidebar .sidebar-home { display: none; }

/* Masa Cloud Hosting: hanya tampil menjelang berakhir, jadi selalu berwarna peringatan. */
.hosting-chip { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--fs-xs);
  color: var(--color-text-secondary); background: var(--color-surface-elevated); border: 1px solid var(--color-border); }
.hosting-chip i { color: var(--color-primary); }
.hosting-chip.is-dekat { color: var(--color-warning); background: var(--color-warning-soft); }
.hosting-chip.is-dekat i, .hosting-chip.is-warning i { color: inherit; }
.hosting-chip i { font-size: 1.1rem; width: 22px; text-align: center; flex: none; }
.hosting-chip span { min-width: 0; line-height: 1.3; }
.hosting-chip b { display: block; font-size: var(--fs-sm); }
.hosting-chip.is-warning { color: var(--color-danger); background: var(--color-danger-soft); }
.sheet .hosting-chip { margin: var(--space-3) 0; }
body.sb-collapsed .sidebar .hosting-chip { justify-content: center; padding: var(--space-2) 0; }
body.sb-collapsed .sidebar .hosting-chip span { display: none; }

/* ---------------- Area utama ---------------- */
.app-main { min-height: 100vh; display: flex; flex-direction: column; transition: margin-left var(--transition-normal); }
.content { flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-10); }

@media (min-width: 992px) {
  .app-main { margin-left: var(--sidebar-width); }
  body.sb-collapsed .app-main { margin-left: var(--sidebar-width-collapsed); }
}

/* ---------------- Bar bawah mengapung (HP) ---------------- */
.bottom-nav {
  position: fixed; z-index: 1040; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  height: var(--bottomnav-height); padding: 6px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  background: rgba(26, 18, 14, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.bottom-nav a, .bottom-nav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: transparent; border-radius: var(--radius-lg);
  color: var(--color-text-muted); text-decoration: none; font-size: 0.68rem; font-weight: 600;
  min-width: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.bottom-nav i { font-size: 1.25rem; line-height: 1; }
.bottom-nav span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bottom-nav .active { color: var(--color-on-primary); background: var(--color-primary); box-shadow: var(--shadow-gold); }

/* Lembar menu dari bawah (offcanvas-bottom Bootstrap). */
.sheet.offcanvas-bottom {
  height: auto; max-height: 82vh; border: 1px solid var(--color-border); border-bottom: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--color-surface);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sheet .sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: var(--color-border-strong); margin: 10px auto 0; }
.sheet .offcanvas-header { padding: var(--space-3) var(--space-5); }
.sheet .offcanvas-body { padding: 0 var(--space-5) var(--space-6); }
.sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-5); }
.sheet-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-3) var(--space-1);
  border-radius: var(--radius-md); background: var(--color-surface-elevated); border: 1px solid var(--color-divider);
  color: var(--color-text-secondary); text-decoration: none; font-size: var(--fs-xs); font-weight: 600; text-align: center;
}
.sheet-grid a i { font-size: 1.35rem; color: var(--color-primary); }
.sheet-grid a.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }