/* layout sidebar */
.app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  padding: 1rem .75rem; background: var(--pico-card-background-color); border-right: 1px solid var(--pico-muted-border-color);
}
.brand { font-weight: 700; font-size: 1.1rem; padding: .25rem .7rem 1rem; line-height: 1.2; }
.brand span { display: block; font-weight: 400; font-size: .85rem; color: var(--pico-muted-color); }
.side nav { flex: 1; }
.grup { margin: 1rem .7rem .3rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pico-muted-color); }
.side nav a { display: block; padding: .45rem .7rem; border-radius: .4rem; text-decoration: none; color: var(--pico-color); }
.side nav a:hover { background: var(--pico-muted-border-color); }
.side nav a[aria-current] { background: var(--pico-primary-background); color: var(--pico-primary-inverse); font-weight: 600; }
.me { padding: .8rem .7rem 0; border-top: 1px solid var(--pico-muted-border-color); display: flex; flex-direction: column; gap: .15rem; }
.me small { color: var(--pico-muted-color); }
.me form { margin: .5rem 0 0; }
.me button { margin: 0; padding: .3rem .7rem; width: 100%; }
.page { padding: 1.25rem 1.5rem 2rem; }
.topbar, .scrim, .nav-toggle { display: none; }

/* HP: sidebar jadi laci yang dibuka tombol ☰ */
@media (max-width: 900px) {
  .app { display: block; }
  .side { position: fixed; left: 0; top: 0; z-index: 30; width: 16rem; transform: translateX(-100%); transition: transform .2s; }
  .nav-toggle:checked + .app .side { transform: none; }
  .nav-toggle:checked + .app .scrim { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .4); }
  .topbar { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; position: sticky; top: 0; z-index: 10;
    background: var(--pico-background-color); border-bottom: 1px solid var(--pico-muted-border-color); }
  .burger { font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }
  .page { padding: 1rem; }
}

.notif { margin: 0 0 1rem; }
.crumb { font-size: .85rem; color: var(--pico-muted-color); margin-bottom: .25rem; }
.bagian { margin: 1.5rem 0 .6rem; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--pico-muted-color); }
.kartu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem; }
.kartu { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border-radius: .6rem; text-decoration: none;
  background: var(--pico-card-background-color); border: 1px solid var(--pico-muted-border-color); color: var(--pico-color); }
.kartu:hover { border-color: var(--pico-primary-border); }
.kartu small { color: var(--pico-muted-color); }
label.cek { align-self: end; }
.kel-box { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.kel-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .25rem .2rem .7rem; border-radius: 999px; background: var(--pico-muted-border-color); font-size: .9rem; }
.kel-chip small { color: var(--pico-muted-color); }
.kel-chip form { margin: 0; }
.kel-chip button { margin: 0; padding: 0 .45rem; width: auto; border: none; background: transparent; color: var(--pico-muted-color); }
.kel-chip.kurang { background: rgba(224, 176, 32, .25); padding-right: .7rem; }
.kel-tambah { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .25rem; }
.kel-tambah select { width: auto; min-width: 11rem; margin: 0; }
.kel-tambah button { width: auto; margin: 0; }
.pilih-jenis { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; }
.pilih-jenis label { min-width: 14rem; margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: 1rem; }
.tabs a[aria-current] { font-weight: 700; text-decoration: underline; }
td.aksi { white-space: nowrap; }
td.aksi form, td form { display: inline; margin: 0; }
td button, .aksi-baris button { margin: 0 .25rem 0 0; padding: .15rem .55rem; width: auto; font-size: .8rem; }
.aksi-baris { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.aksi-baris select { margin: 0; padding: .15rem 1.6rem .15rem .5rem; width: auto; font-size: .8rem; height: auto; }
tr.mati { opacity: .5; }
.palet { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.sw { width: 1.6rem; height: 1.6rem; padding: 0; margin: 0; border-radius: 50%; border: 2px solid var(--pico-muted-border-color); }
.st { display: inline-block; padding: .05em .5em; border-radius: .4em; font-size: .8em; background: var(--pico-muted-border-color); }
.st-terbuka { background: #2e9e5b; color: #fff; }
.st-terjadwal { background: #e0b020; color: #111; }
.st-batal { background: #d64545; color: #fff; }
.kal td { height: 5.2rem; vertical-align: top; width: 14%; padding: .25rem; }
.kal .tg { font-size: .8rem; color: var(--pico-muted-color); }
.kal .ev { font-size: .7rem; padding: .05rem .3rem; border-radius: .3rem; margin-top: .15rem; }
.bulan-nav { display: flex; gap: 1rem; align-items: center; margin: 1rem 0 .5rem; }
.rekap th, .rekap td { padding: .15rem .25rem; text-align: center; font-size: .75rem; white-space: nowrap; }
.rekap td.nm { text-align: left; }
.rekap th.hr { border-left: 1px solid var(--pico-muted-border-color); }
.rekap .chip { min-width: 1.5em; font-size: .75rem; }
.sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.layar { border-radius: 1rem; padding: 2rem 1.5rem; text-align: center; color: #fff; min-height: 14rem; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.layar #l1 { font-size: 1.8rem; font-weight: 700; }
.layar #l3 { font-size: 1.2rem; letter-spacing: .08em; }
.l-idle { background: #4b5563; }
.l-ok { background: #1f9d57; }
.l-warn { background: #d9a50b; color: #111; }
.l-bad { background: #c93a3a; }
@media (max-width: 700px) { .sim { grid-template-columns: 1fr; } }
.login { max-width: 24rem; margin: 3rem auto; }
.chip { display: inline-block; min-width: 1.7em; padding: .05em .45em; border-radius: .4em; color: #fff; text-align: center; font-weight: 700; font-size: .85em; }