/* layout.css — shell, kolom utama (.main-*), sidebar (.sb-), topbar (.tb-), bottom nav (.bn-), menu sheet (.mn-) */
.shell{display:grid;grid-template-columns:var(--sb-w) minmax(0,1fr);gap:22px;max-width:1340px;margin:0 auto;padding:22px;min-height:100vh;min-height:100dvh}
.main-col{min-width:0;display:flex;flex-direction:column;gap:var(--s-5)}
.main-page{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.main-page:focus{outline:none}

/* ── SIDEBAR ── */
.sb-root{position:sticky;top:22px;height:calc(100vh - 44px);height:calc(100dvh - 44px);display:flex;flex-direction:column;padding:18px 14px 16px;border-radius:var(--r-lg);background:var(--glass);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--hair);box-shadow:var(--sh-1);overflow-y:auto}
.sb-brand{display:flex;align-items:center;gap:11px;padding:4px 8px 12px}
.sb-logo{width:38px;height:38px;border-radius:12px;background:var(--brand-grad);color:var(--on-brand);display:grid;place-items:center;font-weight:800;font-size:18px;box-shadow:0 8px 18px -6px color-mix(in srgb,var(--brand-2) var(--glow-soft),transparent);overflow:hidden;flex:none}
.sb-logo img{width:100%;height:100%;object-fit:contain;background:var(--logo-bg)}
.sb-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0;font-size:var(--fs-md);font-weight:800;line-height:1.2;overflow-wrap:anywhere} /* nama perusahaan, maks. 2 baris */
/* Tulisan ALVA ONE (tanpa logo) di bawah sidebar & di menu HP */
.sb-note b,.mn-foot b{color:var(--text-2);font-weight:800}
.mn-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--text-3);text-align:center}
.sb-nav{position:relative;flex:1;display:flex;flex-direction:column;gap:2px}
.sb-label{font-size:var(--fs-xs);font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;padding:12px 12px 4px}
.sb-item{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 12px;border-radius:13px;color:var(--text-2);font-weight:600;transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.sb-item:hover{color:var(--ink);background:var(--hover)}
.sb-item[aria-current="page"],.sb-item[aria-current="page"]:hover{color:var(--on-brand);background:transparent}
.sb-indicator{position:absolute;left:0;right:0;top:0;height:40px;border-radius:13px;background:var(--brand-grad);box-shadow:0 8px 18px -8px color-mix(in srgb,var(--brand-2) var(--glow),transparent);transform:translateY(var(--y,0));opacity:0;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast);pointer-events:none}
.sb-indicator.is-on{opacity:1}
.sb-spacer{flex:1;min-height:12px}
.sb-note{font-size:var(--fs-xs);color:var(--text-3);padding:10px 12px 0;line-height:1.45}

/* ── TOPBAR ── */
.tb-root{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.tb-titles{min-width:0}
.tb-title{font-size:var(--fs-2xl);font-weight:800}
.tb-title:focus{outline:none}
.tb-sub{font-size:var(--fs-sm);color:var(--text-3);margin-top:3px}
.tb-actions{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.tb-actions:empty{display:none}
.tb-save{align-self:center;flex:none;padding:5px 11px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-3);font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
.tb-save--saved{background:var(--b-paid-bg);color:var(--b-paid-fg)}
.tb-save--error,.tb-save--conflict{background:var(--b-overdue-bg);color:var(--b-overdue-fg)}
.tb-save--offline{background:var(--b-partial-bg);color:var(--b-partial-fg)}
.tb-banner{padding:10px 14px;border-radius:var(--r-md);background:var(--b-partial-bg);color:var(--b-partial-fg);font-size:var(--fs-sm);font-weight:600}

/* ── BOTTOM NAV & MENU SHEET (hanya < 1024px) ── */
.bn-root,.mn-root{display:none}
.bn-list{position:relative;display:flex;width:100%;max-width:560px;margin:0 auto}
.bn-item{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;border-radius:12px;color:var(--text-3);font-size:var(--fs-xs);font-weight:700;transition:color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);-webkit-tap-highlight-color:transparent}
.bn-item svg.ic{width:22px;height:22px}
.bn-item[aria-current="page"],.bn-item[aria-expanded="true"]{color:var(--brand-text)}
.bn-item:active{transform:scale(.95)}
.bn-indicator{position:absolute;top:0;bottom:0;left:0;width:var(--w,20%);border-radius:12px;background:var(--brand-soft);transform:translateX(var(--x,0));opacity:0;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast);pointer-events:none}
.bn-indicator.is-on{opacity:1}

.mn-root{position:fixed;inset:0;z-index:var(--z-modal);visibility:hidden;pointer-events:none;transition:visibility 0s linear var(--dur-slow)}
.mn-root.is-open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.mn-backdrop{position:absolute;inset:0;background:var(--backdrop);opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.mn-root.is-open .mn-backdrop{opacity:1}
.mn-panel{position:absolute;left:0;right:0;bottom:0;max-height:86vh;max-height:86dvh;overflow:auto;background:var(--surface);border-radius:22px 22px 0 0;padding:12px 16px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--sh-3);transform:translateY(100%);transition:transform var(--dur-slow) var(--ease-out)}
.mn-root.is-open .mn-panel{transform:none}
.mn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.mn-title{font-size:var(--fs-lg);font-weight:800}
.mn-label{font-size:var(--fs-xs);font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;padding:12px 2px 6px}
.mn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mn-item{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-weight:600;color:var(--ink);transition:background-color var(--dur-fast),transform var(--dur-fast)}
.mn-item:active{transform:scale(.97)}
.mn-item[aria-current="page"]{background:var(--brand-soft);color:var(--brand-text)}

@media (max-width:1023px){
  .shell{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 16px calc(var(--bn-h) + 28px + env(safe-area-inset-bottom))}
  /* Tombol tambah utama mengambang di kanan bawah, di atas menu bawah (pas jempol, tetap terlihat saat scroll) */
  .tb-actions .btn--fab{position:fixed;right:16px;bottom:calc(var(--bn-h) + 16px + env(safe-area-inset-bottom));z-index:var(--z-bottom);min-height:52px;padding:0 20px;border-radius:var(--r-pill);box-shadow:var(--sh-2),0 10px 22px -10px color-mix(in srgb,var(--brand-2) var(--glow),transparent)}
  .tb-actions:has(> .btn--fab:only-child){display:contents} /* tanpa sisa jarak di kepala halaman */
  body:has(.btn--fab){--fab-space:64px} /* ruang tombol mengambang — dipakai toast supaya muncul di atasnya */
  body:has(.btn--fab) .shell{padding-bottom:calc(var(--bn-h) + 96px + env(safe-area-inset-bottom))} /* konten terbawah tidak tertutup tombol */
  .sb-root{display:none}
  .bn-root{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bottom);display:flex;align-items:stretch;height:calc(var(--bn-h) + env(safe-area-inset-bottom));padding:8px 10px env(safe-area-inset-bottom);background:var(--glass-strong);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-top:1px solid var(--line)}
  .mn-root{display:block}
  .tb-title{font-size:var(--fs-xl)}
}
@media (max-width:767px){
  .tb-actions{width:100%}
}
/* Bilah Simpan yang menempel di bawah → toast naik di atasnya (Pengaturan & editor < 1024px; editor juga 1024–1199px) */
@media (max-width:1199px){
  body:has(.float-bar--xl){--fab-space:80px}
}
@media (max-width:1023px){
  body:has(.float-bar){--fab-space:80px}
  .tb-actions .tb-wide{display:none} /* hanya berguna saat daftar & detail berdampingan (mis. Tambah klien di detail klien) */
}
@media (min-width:1024px){
  .tb-actions .tb-narrow{display:none} /* hanya untuk HP/tablet (mis. Semua klien di detail klien) */
}
/* Laptop pendek (mis. 1280×800, 1366×768): menu samping dirapatkan supaya muat tanpa scroll & catatan bawah tetap terlihat */
@media (min-width:1024px) and (max-height:860px){
  .sb-root{padding:14px 12px 12px}
  .sb-brand{padding-bottom:8px}
  .sb-label{padding:8px 12px 2px}
  .sb-item{min-height:36px;padding:6px 12px}
  .sb-note{padding-top:6px}
}