/* ====== Reset kecil & helpers ====== */
* { -webkit-tap-highlight-color: transparent }
:root { --ring: 2px; }
.safe-b { padding-bottom: max(env(safe-area-inset-bottom), 0px); }

/* === Skeleton / Shimmer === */
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton{position:relative;overflow:hidden;background:#e5e7eb}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  background-size:200% 100%;animation:shimmer 1.1s infinite;opacity:.7
}
.skel-rounded{border-radius:.75rem}.skel-pill{border-radius:9999px}
.skel-line{height:12px}.skel-md{height:16px}.skel-lg{height:24px}
@media (prefers-reduced-motion: reduce){ .skeleton::after{animation:none} }

/* === Top progress bar === */
@keyframes loading-bar { 0%{transform:translateX(-60%)} 100%{transform:translateX(120%)} }
#plbar::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,#3b82f6 0%,#60a5fa 40%,#93c5fd 70%,transparent 100%);
  transform:translateX(-60%);animation:loading-bar .9s ease-in-out infinite;
}

/* === Hide scroll saat loading === */
.no-scroll { overflow: hidden; }

/* === Fade out helper === */
.fade-out { opacity:0; pointer-events:none; transition:opacity .28s ease; }

/* ====== Bottom sheet helpers (mobile) ====== */
.sheet { transform: translateY(100%); }
.sheet-open { transform: translateY(0); }
.sheet, .sheet-open { transition: transform .3s ease; will-change: transform; }
@media (min-width: 768px){ .sheet, .sheet-open { transform: none !important; } }

/* ====== Mobile-only calendar styling (lebih kecil) ====== */
@media (max-width: 767.98px){
  /* var agar gampang ubah ukuran nanti */
  :root{
    --day-size-mobile: 2.25rem;      /* 36px: tetap nyaman untuk tap */
    --day-font-mobile: .9rem;        /* angka tanggal sedikit lebih kecil */
    --day-gap-mobile: .25rem;        /* jarak antar tanggal dipadatkan */
  }

  #datePanel .monthbar-mobile{
    position: sticky; top: 0; z-index: 10;
    background:#fff; padding:.5rem .75rem; margin-bottom:.75rem;
    border-bottom:1px solid rgb(226 232 240);
  }
  #datePanel .monthbar-mobile .title{ font-size:.95rem; font-weight:600; }

  #datePanel .dow-mobile{ font-size:.68rem; letter-spacing:.02em; }
  #datePanel .days-mobile{ gap: var(--day-gap-mobile); }

  /* >>> Lingkaran tanggal diperkecil <<< */
  #datePanel .day{
    height: var(--day-size-mobile);
    width:  var(--day-size-mobile);
    border-radius:9999px;
    display:flex; align-items:center; justify-content:center;
    margin-inline:auto;
    font-size: var(--day-font-mobile);
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }

  #datePanel .day--disabled{ color:rgb(203 213 225); cursor:not-allowed; }
  #datePanel .day--today{ background:rgb(239 246 255); color:rgb(59 130 246); font-weight:600; }
  #datePanel .day--selected{ background:rgb(59 130 246); color:#fff; font-weight:600; }
  #datePanel .day--range{ background:rgba(59,130,246,.10); color:rgb(29 78 216); }

  /* Nav tombol bulan: ringkas & konsisten */
  #datePanel .navbtn{
    height:2.25rem; width:2.25rem;
    border-radius:9999px; display:flex; align-items:center; justify-content:center;
    background:rgba(59,130,246,.10);
  }
  #datePanel .navbtn:active{ transform:scale(.97); }
}

/* Opsi ekstra untuk layar sangat sempit (<360px) */
@media (max-width: 360px){
  :root{
    --day-size-mobile: 2.1rem;  /* ~33.6px */
    --day-font-mobile: .85rem;
    --day-gap-mobile: .22rem;
  }
}

/* ====== Blue Gradient System (Primary) ====== */
:root{
  --blue-from: #2563eb;   /* blue-600 */
  --blue-via:  #3b82f6;   /* blue-500 */
  --blue-to:   #38bdf8;   /* sky-400 */
  --blue-ring: rgba(59,130,246,.45);
}

/* Komponen tombol utama */
.btn-primary{
  --tw-shadow: 0 6px 20px -6px rgba(59,130,246,.35);
  background-image: linear-gradient(90deg,var(--blue-from),var(--blue-via),var(--blue-to));
  color:#fff; font-weight:600; border-radius:0.75rem; /* rounded-xl */
  transition: transform .12s ease, opacity .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: var(--tw-shadow);
  position: relative; /* agar di atas bnav saat dekat tepi bawah */
  z-index: 1;
}
.btn-primary:hover{ filter: saturate(1.06) brightness(1.02); }
.btn-primary:active{ transform: scale(.985); }
.btn-primary:focus-visible{ outline: none; box-shadow: 0 0 0 var(--ring,2px) var(--blue-ring), var(--tw-shadow); }

/* Tombol bulat (icon) */
.btn-circle-primary{
  background-image: linear-gradient(90deg,var(--blue-from),var(--blue-via),var(--blue-to));
  color:#fff; border-radius:9999px;
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 20px -6px rgba(59,130,246,.35);
}
.btn-circle-primary:hover{ filter: saturate(1.06) }
.btn-circle-primary:active{ transform: scale(.96) }
.btn-circle-primary:focus-visible{ outline: none; box-shadow: 0 0 0 var(--ring,2px) var(--blue-ring), 0 6px 20px -6px rgba(59,130,246,.35); }

/* Ghost (background halus) */
.btn-ghost-blue{
  background: linear-gradient(0deg, rgba(59,130,246,.10), rgba(59,130,246,.10));
  color:#1d4ed8; /* blue-700 */
  border-radius:9999px;
  transition: background .15s ease, transform .12s ease, box-shadow .2s ease;
}
.btn-ghost-blue:hover{ background: linear-gradient(0deg, rgba(59,130,246,.18), rgba(59,130,246,.18)); }
.btn-ghost-blue:active{ transform: scale(.97) }
.btn-ghost-blue:focus-visible{ outline:none; box-shadow: 0 0 0 var(--ring,2px) var(--blue-ring); }

/* Input focus ring senada */
.input-focus-blue:focus{ outline: none }
.input-focus-blue:focus-visible, .input-focus-blue:focus{
  box-shadow: 0 0 0 var(--ring,2px) var(--blue-ring);
}

/* Peer radio “Sekali jalan / Pulang-pergi” gradasi saat checked */
label > input[type="radio"].peer + span{
  background: rgb(243 244 246); color: rgb(75 85 99); /* default */
}
label > input[type="radio"].peer:checked + span{
  background-image: linear-gradient(90deg,var(--blue-from),var(--blue-via),var(--blue-to));
  color:#fff;
  box-shadow: 0 4px 14px -6px rgba(59,130,246,.45);
}

/* Progress bar pakai palet gradasi (override) */
#plbar::before{
  background: linear-gradient(90deg,var(--blue-from) 0%, var(--blue-via) 40%, var(--blue-to) 70%, transparent 100%) !important;
}

/* ==== Grabber (garis pendek di header sheet mobile) ==== */
.sheet-grabber{
  width: 40px; height: 5px; border-radius: 9999px;
  background: rgb(203 213 225); /* slate-300 */
  margin: .25rem auto 0;
}
@media (min-width:768px){ .sheet-grabber{ display:none } }
/* Saat drag kurangi shadow biar terasa ringan */
.sheet.dragging{ box-shadow: 0 10px 24px -10px rgba(0,0,0,.12) !important; }

/* ====== Bottom Nav (Mobile App) ====== */
:root { --bnav-h: 64px; }

@media (max-width: 767.98px){
  /* beri ruang agar konten tak ketutup nav */
  body.with-bnav {
    padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px));
  }
  .pb-bnav {
    padding-bottom: calc(12px + var(--bnav-h) + env(safe-area-inset-bottom, 0px)) !important;
  }
  nav.bnav {
    height: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Nav: bersih tanpa garis & shadow */
.bnav {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,.95);
  border-top: none !important;     /* HAPUS garis bawah */
  box-shadow:0 -16px 40px -24px rgba(2,6,23,.25);
}

/* Icon style */
.bnav .material-symbols-rounded{
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 22px;                 /* pas untuk tinggi kotak 36px */
  transition: transform .12s ease, color .18s ease;
}

/* Kotak icon: pill + lebih panjang sudut */
.bnav a .icon-box {
  display:flex; align-items:center; justify-content:center;
  width: 56px; height: 30px;       /* proporsional: “persegi panjang” */
  border-radius: 9999px;           /* super rounded (pill) */
  transition: background .18s ease, transform .12s ease, color .18s ease;
  background: transparent;         /* default transparan */
}

/* ===== Efek aktivasi: HANYA pada kotak (ikon tidak dianimasikan) ===== */
.bnav a.active .icon-box{
  background: rgba(37, 99, 235, 0.15);
  color: rgb(37, 99, 235);
  animation: box-activate .28s ease;
}
@keyframes box-activate{
  0%   { transform: scale(.85); opacity: 0 }
  60%  { transform: scale(1.07); opacity: 1 }
  100% { transform: scale(1);    opacity: 1 }
}
.bnav a.active .material-symbols-rounded{
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
  color: rgb(37, 99, 235);
}
.bnav a.active .label { color: rgb(37, 99, 235); }
@media (prefers-reduced-motion: reduce){
  .bnav a.active .icon-box{ animation: none }
}

/* Bottom nav lock: nonaktifkan klik saat kalender terbuka */
.bnav.locked {
  pointer-events: none !important;   /* cegah klik */
  opacity: .96;                      /* opsional: sedikit redup */
}

/* Label: tambah jarak bawah biar tidak mepet */
.bnav a .label {
  margin-top: 0.25rem;    /* mt-1 */
  margin-bottom: 0.35rem; /* extra bottom space */
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

/* Hapus outline klik; fokus via keyboard tetap ada */
.bnav a:focus { outline: none !important; box-shadow: none !important; }
.bnav a:focus-visible .icon-box {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.28);
}

/* Tekan (opsional, rasa responsif) */
.bnav a:active .icon-box { transform: scale(.96); }

/* ====== Scrollable content di dalam sheet (PERBAIKAN UTAMA) ====== */
[data-sheet-scroll]{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y; /* izinkan scroll vertikal, jangan dianggap drag panel */
}