:root{
  --kertas:#fff; --latar:#F3F5FA; --panel:#EEF1F8; --garis:#DCE1EE; --garis2:#EDF0F6;
  --tinta:#1B3FA0; --tinta-tua:#0F1E4A; --teks:#26304A; --redup:#5B6583;
  --stempel:#D7263D; --pink:#F5CCD5; --kuning:#F8E7A3; --hijau:#137A47;
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --badan:'Plus Jakarta Sans', system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--latar); color:var(--teks); font:400 14.5px/1.5 var(--badan)}
h1,h2,h3{font-family:var(--display); color:var(--tinta-tua); margin:0; letter-spacing:-.01em; line-height:1.2}
h2{font-size:17px}
h3{font:700 13px/1.3 var(--badan); color:var(--redup); margin:20px 0 8px}
a{color:var(--tinta)}
button,input,select,textarea{font:inherit; color:inherit}
svg{display:block}
:focus-visible{outline:3px solid var(--tinta); outline-offset:2px}
[hidden]{display:none!important}
noscript{display:block; padding:40px 20px; text-align:center}

/* demo ribbon */
.pita{background:var(--kuning); color:var(--tinta-tua); font-size:13px}
.pita-isi{display:flex; align-items:center; gap:6px 14px; padding:6px 16px; flex-wrap:wrap; min-height:40px}
.pita a,.pita button{color:var(--tinta-tua); font-weight:700}
.pita-df{display:inline-flex; align-items:center; gap:3px; text-decoration:none}
.pita-df svg{width:16px; height:16px}
.pita button{background:none; border:0; padding:0; text-decoration:underline; cursor:pointer; font-size:13px}
.pita .sp{flex:1}
.pita-bahasa{text-decoration:none; border:1.5px solid rgba(15,30,74,.3); border-radius:99px; padding:2px 10px}
.pita-wa{background:var(--tinta-tua); color:#fff!important; text-decoration:none; border-radius:99px; padding:5px 12px}
@media (max-width:760px){ .pita-teks{display:none} }

/* frame */
.kerangka{display:grid; grid-template-columns:240px minmax(0,1fr); min-height:calc(100vh - 40px)}
.samping{background:var(--tinta-tua); color:#D5DCF0; display:flex; flex-direction:column; padding:16px 12px; position:sticky; top:0; height:100vh; overflow:auto}
.usaha{display:flex; align-items:center; gap:10px; padding:4px 6px 16px; border-bottom:1px solid rgba(255,255,255,.1)}
.usaha b{display:block; color:#fff; font:800 15px/1.2 var(--display)}
.usaha small{font-size:11.5px; color:#9FACD0}
.logo{display:inline-flex; width:34px; height:34px; flex:none}
.logo svg{width:100%; height:100%}
.pengguna{display:flex; align-items:center; gap:10px; margin:14px 0; padding:10px; background:rgba(255,255,255,.06); border-radius:12px}
.pengguna b{display:block; color:#fff; font-size:13.5px; line-height:1.25}
.pengguna small{font-size:12px; color:#9FACD0}
.avatar{display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--panel); color:var(--tinta); font-weight:800; font-size:13px}
.samping .avatar{background:var(--kuning); color:var(--tinta-tua)}
.samping nav{display:grid; gap:2px}
.samping nav a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:#D5DCF0; text-decoration:none; font-weight:600; font-size:14px}
.samping nav a:hover{background:rgba(255,255,255,.07); color:#fff}
.samping nav a.aktif{background:#fff; color:var(--tinta-tua)}
.samping nav svg{width:19px; height:19px; flex:none}
.samping nav a span{flex:1}
.samping nav a span.lencana{flex:none}
.lencana{min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--stempel); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
.samping-bawah{margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.1)}
.samping-bawah button{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:10px; background:none; color:#D5DCF0; font-weight:600; cursor:pointer; text-align:left}
.samping-bawah button:hover{background:rgba(255,255,255,.07)}
.samping-bawah svg{width:19px; height:19px}
.utama{min-width:0; display:flex; flex-direction:column}
.atas{display:flex; align-items:center; gap:12px; padding:14px 24px; background:var(--kertas); border-bottom:1px solid var(--garis); position:sticky; top:0; z-index:20}
.atas h1{font-size:20px}
.atas .sp{flex:1}
.jam-atas{color:var(--redup); font-size:13px; white-space:nowrap}
.menu-btn{display:none; border:0; background:none; padding:6px; margin:-6px 0 -6px -6px; cursor:pointer; color:var(--tinta-tua)}
.menu-btn svg{width:24px; height:24px}
.isi{padding:20px 24px 40px; display:grid; gap:16px; align-content:start}
.tirai{display:none}
@media (max-width:900px){
  .kerangka{grid-template-columns:1fr}
  .samping{position:fixed; inset:0 auto 0 0; width:272px; z-index:50; transform:translateX(-102%); transition:transform .22s ease}
  .menu-buka .samping{transform:none}
  .menu-buka .tirai{display:block; position:fixed; inset:0; background:rgba(15,30,74,.45); z-index:40}
  .menu-btn{display:inline-flex}
  .atas{padding:10px 16px}
  .atas h1{font-size:17px}
  .isi{padding:14px 12px 32px; gap:12px}
  .jam-atas{display:none}
}

/* building blocks */
.kartu{background:var(--kertas); border:1px solid var(--garis); border-radius:14px; padding:16px; min-width:0}
.kartu-kepala{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.kartu-kepala small,.blok{display:block; color:var(--redup); font-size:12.5px; font-weight:500}
.dua-kolom{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start}
.dua-kolom.lebar-kiri{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.tiga-kolom{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start}
@media (max-width:1100px){ .tiga-kolom{grid-template-columns:1fr 1fr} }
@media (max-width:820px){ .dua-kolom,.dua-kolom.lebar-kiri,.tiga-kolom{grid-template-columns:1fr} }
.jarak{margin-top:18px}
.jarak-atas{margin-top:10px}
.ket{color:var(--redup); font-size:13px; font-weight:500; margin:0}
.kosong{color:var(--redup); font-size:14px; text-align:center; padding:18px 8px; margin:0; list-style:none}
.kosong-besar{text-align:center; padding:36px 18px; color:var(--redup)}
.kosong-besar svg{width:40px; height:40px; margin:0 auto 10px; color:var(--tinta)}
.kosong-besar p{max-width:44ch; margin:6px auto 0}
.link{display:inline-block; margin-top:10px; font-weight:700; font-size:13.5px}
.lbl{display:block; font-size:12px; font-weight:700; color:var(--redup)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:0 15px; border-radius:10px; border:1.5px solid var(--tinta); background:var(--tinta); color:#fff; font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; white-space:nowrap}
.btn:hover{background:var(--tinta-tua); border-color:var(--tinta-tua)}
.btn svg{width:17px; height:17px; flex:none}
.btn.alt{background:#fff; color:var(--tinta)}
.btn.alt:hover{background:var(--panel)}
.btn.kecil{min-height:32px; padding:0 11px; font-size:13px; border-radius:8px}
.btn.penuh{width:100%}
.btn.besar{min-height:48px; font-size:15px}
.btn:disabled{opacity:.4; cursor:not-allowed}
.ikon-btn{display:inline-flex; align-items:center; justify-content:center; width:36px; height:40px; border:1.5px solid var(--garis); border-radius:10px; background:#fff; color:var(--redup); cursor:pointer; flex:none}
.ikon-btn:hover{border-color:var(--stempel); color:var(--stempel)}
.ikon-btn svg{width:16px; height:16px}

.field{display:grid; gap:5px; margin-bottom:12px}
.field label,.field .label,legend{font-size:13px; font-weight:700; color:var(--tinta-tua)}
input,select,textarea{border:1.5px solid var(--garis); border-radius:10px; padding:8px 11px; background:#fff; min-height:40px; width:100%}
textarea{resize:vertical; min-height:62px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--tinta)}
input[type=checkbox],input[type=radio]{width:auto; min-height:0; accent-color:var(--tinta); margin:0}
.dua{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:480px){ .dua{grid-template-columns:1fr} }
.cari{display:flex; align-items:center; gap:8px; border:1.5px solid var(--garis); border-radius:10px; padding:0 11px; background:#fff; margin-bottom:10px}
.cari:focus-within{border-color:var(--tinta)}
.cari svg{width:18px; height:18px; color:var(--redup); flex:none}
.cari input{border:0; padding:8px 0; min-height:40px}
.cari input:focus{outline:none}
.cari.kecil{margin:4px 0 8px}

.chip{display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:700; background:var(--panel); color:var(--tinta); white-space:nowrap}
.chip.kuning{background:#FCF0C4; color:#6F5200}
.chip.pink{background:#FBE1E5; color:#A3172B}
.chip.hijau{background:#DDF2E6; color:var(--hijau)}
.chip.abu{background:#ECEEF3; color:#4F5874}
.chip.merah{background:var(--stempel); color:#fff}
.chip.tinta{background:var(--tinta); color:#fff}
.chip.biru{background:#E3EAFB; color:var(--tinta)}
.chip.ungu{background:#EDE6FA; color:#5B3A9E}
.chip button{display:inline-flex; border:0; background:none; color:inherit; padding:0; margin-right:-3px; cursor:pointer}
.chip button svg{width:13px; height:13px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px}

.daftar{list-style:none; margin:0; padding:0}
.daftar > li{border-bottom:1px solid var(--garis2)}
.daftar > li:last-child{border-bottom:0}
.baris{display:flex; align-items:center; gap:12px; padding:10px 4px; text-decoration:none; color:inherit}
a.baris{border-radius:10px}
a.baris:hover{background:var(--latar)}
a.baris.aktif{background:#EEF2FC}
.baris-isi{flex:1; min-width:0}
.baris-isi b{display:block; color:var(--tinta-tua); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.baris-isi small{display:block; color:var(--redup); font-size:12.5px}
.no{font:800 15px/1 var(--display); color:var(--tinta-tua); font-variant-numeric:tabular-nums; min-width:52px}
.tunggu{font-size:12.5px; color:var(--redup); white-space:nowrap}
@media (max-width:600px){
  .antrian .baris{flex-wrap:wrap; row-gap:6px}
  .antrian .baris-isi{flex-basis:calc(100% - 64px)}
  .antrian .tunggu{margin-left:64px}
}

.gulir-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabel{width:100%; border-collapse:collapse; font-size:13.5px}
.tabel th{text-align:left; font-size:12px; color:var(--redup); font-weight:700; padding:8px 10px; border-bottom:1.5px solid var(--garis); white-space:nowrap}
.tabel td{padding:9px 10px; border-bottom:1px solid var(--garis2); vertical-align:middle}
.tabel tr:last-child td{border-bottom:0}
.tabel tr.klik{cursor:pointer}
.tabel tr.klik:hover td{background:var(--latar)}
.tabel td a{text-decoration:none}
.tabel.ringkas td{padding:7px 4px}
.kanan{text-align:right!important}
.angka{font-variant-numeric:tabular-nums}
.tabel td.angka{white-space:nowrap}

.kpi-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.kpi-grid.dua{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){ .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .kpi-grid.dua{grid-template-columns:1fr} }
.kpi{background:var(--kertas); border:1px solid var(--garis); border-radius:14px; padding:14px 16px; min-width:0}
.kpi span{display:block; font-size:12.5px; color:var(--redup); font-weight:600}
.kpi b{display:block; font:800 clamp(17px,1.9vw,23px)/1.25 var(--display); color:var(--tinta-tua); margin-top:4px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi small{display:block; font-size:12px; color:var(--redup); margin-top:2px}
.kpi.awas b{color:var(--stempel)}

.alat{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.tabs{display:inline-flex; flex-wrap:wrap; background:#fff; border:1px solid var(--garis); border-radius:12px; padding:4px; gap:4px; justify-self:start}
.tabs button{border:0; background:none; padding:7px 12px; border-radius:9px; font-weight:600; font-size:13.5px; color:var(--redup); cursor:pointer}
.tabs button:hover{color:var(--tinta-tua)}
.tabs button[aria-pressed=true]{background:var(--tinta-tua); color:#fff}
.angka-kecil{opacity:.7; font-weight:700; margin-left:6px}

.poli-baris{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--garis2)}
.poli-baris:last-of-type{border-bottom:0}
.poli-baris b{color:var(--tinta-tua)}
.poli-baris small{display:block; color:var(--redup); font-size:12.5px}
.poli-angka{display:flex; gap:16px; text-align:right}
.poli-angka small{display:block; font-size:11.5px; color:var(--redup)}
.poli-angka b{font:800 18px/1.1 var(--display); font-variant-numeric:tabular-nums}


/* shared pieces */
.statistik{display:flex; gap:8px; margin:0 0 12px}
.statistik div{flex:1; background:var(--latar); border-radius:10px; padding:8px 10px; min-width:0}
.statistik b{display:block; font:800 20px/1.1 var(--display); color:var(--tinta-tua)}
.statistik span{font-size:12px; color:var(--redup)}
.statistik.lebar{margin:0}
.statistik.lebar div{background:var(--kertas); border:1px solid var(--garis); border-radius:14px; padding:12px 14px}
@media (max-width:700px){ .statistik.lebar{flex-wrap:wrap} .statistik.lebar div{flex-basis:calc(50% - 4px)} }
.cek{display:flex; gap:8px; align-items:center; font-size:13.5px; margin:6px 0 10px; cursor:pointer}
.no-besar{font:800 30px/1 var(--display); color:var(--tinta); letter-spacing:-.02em}
details.kartu summary{cursor:pointer; font-weight:700; color:var(--tinta-tua)}
.merah{color:#A3172B}
.btn.merah{background:var(--stempel); border-color:var(--stempel)}
.btn.merah:hover{background:#B01D31; border-color:#B01D31}
.info{display:flex; align-items:flex-start; gap:8px; background:#FCF0C4; color:#5C4300; border-radius:10px; padding:8px 12px; margin:10px 0 0; font-size:13.5px; text-align:left}
.info svg{width:17px; height:17px; flex:none; margin-top:1px}
.catatan-kecil{color:#7A5A00!important}
.samping-bawah a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:#D5DCF0; text-decoration:none; font-weight:600}
.samping-bawah a:hover{background:rgba(255,255,255,.07)}
.samping-bawah a svg{width:19px; height:19px}

/* room rack */
.grid-rack{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start}
@media (max-width:1100px){ .grid-rack{grid-template-columns:1fr} }
.panel-kamar{position:sticky; top:76px}
@media (max-width:1100px){ .panel-kamar{position:static; scroll-margin-top:70px} }
.lantai{font-size:15px}
.lantai .ket{display:inline; margin-left:6px}
.rack{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; margin:10px 0 18px}
@media (min-width:1101px) and (max-width:1320px){ .rack{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:640px){ .rack{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:360px){ .rack{grid-template-columns:repeat(3,minmax(0,1fr))} }
.km{position:relative; border:1.5px solid var(--garis); background:#fff; border-radius:12px; padding:10px 5px 9px; text-align:center; cursor:pointer; min-height:68px; color:var(--tinta-tua); min-width:0}
.km b{display:block; font:800 19px/1.1 var(--display)}
.km small{display:block; font-size:11.5px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.km-terisi{background:var(--tinta); border-color:var(--tinta); color:#fff}
.km-pulang{background:var(--pink); border-color:#E7A9B7; color:#6E1022}
.km-datang{background:#E3EAFB; border-color:#7F97DA; border-style:dashed}
.km-kotor{background:var(--kuning); border-color:#E6CF72}
.km-rusak{background:repeating-linear-gradient(135deg,#ECEEF3 0 6px,#F7F8FB 6px 12px); color:#5B6583}
.km[aria-pressed=true]{outline:3px solid var(--stempel); outline-offset:2px}
.km.redup{opacity:.22}
.titik{position:absolute; top:6px; right:6px; width:10px; height:10px; border-radius:50%; background:#E8B400; border:2px solid #fff}
.legenda{display:flex; gap:6px 16px; flex-wrap:wrap; font-size:12.5px; color:var(--redup)}
.legenda i{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:6px; border:1.5px solid var(--garis); background:#fff}
.legenda i.km-terisi{background:var(--tinta); border-color:var(--tinta)}
.legenda i.km-pulang{background:var(--pink); border-color:#E7A9B7}
.legenda i.km-datang{background:#E3EAFB; border-color:#7F97DA; border-style:dashed}
.legenda i.km-kotor{background:var(--kuning); border-color:#E6CF72}
.legenda i.km-rusak{background:repeating-linear-gradient(135deg,#C9CFDD 0 2px,#F7F8FB 2px 4px)}
.legenda i.titik-leg{border-radius:50%; background:#E8B400; border-color:#E8B400}
.panel-kepala{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.panel-kepala small{color:var(--redup); font-size:12.5px}
.aksi-panel{display:grid; gap:8px; margin-top:14px}
.dua-btn{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.dua-btn .btn{padding:0 8px; white-space:normal; line-height:1.2; font-size:13px}
@media (max-width:360px){ .dua-btn{grid-template-columns:1fr} }

/* reservation calendar */
.kal-wadah{border:1px solid var(--garis2); border-radius:12px}
.kal{display:grid; grid-template-columns:62px repeat(var(--n),minmax(50px,1fr)); grid-template-rows:50px; grid-auto-rows:36px; min-width:780px}
.kal-pojok{position:sticky; left:0; z-index:3; background:#fff; display:flex; align-items:flex-end; padding:0 0 7px 8px; font-size:12px; font-weight:700; color:var(--redup); border-bottom:1.5px solid var(--garis); border-right:1px solid var(--garis2)}
.kal-tgl{display:flex; flex-direction:column; align-items:center; justify-content:center; border-bottom:1.5px solid var(--garis); font-size:11.5px; color:var(--redup); line-height:1.2}
.kal-tgl b{font:800 16px/1.1 var(--display); color:var(--tinta-tua)}
.kal-tgl.akhir-pekan{background:#F7F8FC}
.kal-tgl.hari-ini{background:var(--tinta-tua); color:#C9D3EE}
.kal-tgl.hari-ini b{color:#fff}
.kal-grup{display:flex; align-items:center; gap:10px; background:var(--latar); border-bottom:1px solid var(--garis2); font-size:12.5px}
.kal-grup b{position:sticky; left:8px; color:var(--tinta-tua)}
.kal-grup span{position:sticky; left:90px; color:var(--redup); font-weight:500}
.kal-kamar{grid-column:1; position:sticky; left:0; z-index:2; background:#fff; display:flex; align-items:center; gap:6px; padding-left:8px; font:800 14px/1 var(--display); color:var(--tinta-tua); border-bottom:1px solid var(--garis2); border-right:1px solid var(--garis2)}
.titik-abu{display:inline-block; width:8px; height:8px; border-radius:50%; background:#8D95AD}
.kal-sel{border:0; border-bottom:1px solid var(--garis2); border-right:1px solid var(--garis2); background:none; padding:0; min-width:0; border-radius:0}
.kal-sel.akhir-pekan{background:#F7F8FC}
.kal-sel.hari-ini{background:#F1F4FC}
button.kal-sel{cursor:pointer}
button.kal-sel:hover{background:#E3EAFB}
.kal-bar{z-index:1; margin:5px 2px; border-radius:8px; border:1.5px solid var(--tinta); background:#E3EAFB; color:var(--tinta-tua); font:700 12px/1 var(--badan); text-align:left; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; min-width:0}
.kal-bar:hover{filter:brightness(.96)}
.kal-bar.checkin{background:var(--tinta); color:#fff}
.kal-bar.checkout{background:#ECEEF3; border-color:#C7CCDA; color:#4F5874}
.kal-bar.potong{border-top-left-radius:0; border-bottom-left-radius:0; margin-left:0; border-left-width:0}
.legenda i.leg-pasti{background:#E3EAFB; border-color:var(--tinta)}
.legenda i.leg-checkin{background:var(--tinta); border-color:var(--tinta)}
.legenda i.leg-checkout{background:#ECEEF3; border-color:#C7CCDA}
.ringkas{margin:0 0 12px; background:var(--latar); border-radius:10px; padding:9px 12px; font-size:13.5px}
.ringkas:empty{display:none}

/* guest bills */
.grid-folio{display:grid; grid-template-columns:330px minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:1000px){ .grid-folio{grid-template-columns:1fr} }
.aksi-folio{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.struk.lebar{max-width:440px; margin-left:auto; margin-right:auto}
.ttd{margin-top:34px; border-top:1px solid var(--tinta-tua); padding-top:4px; width:60%; font-size:12px; color:var(--redup)}

/* housekeeping */
.hk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.hk-kartu{border:1.5px solid var(--garis); border-radius:12px; padding:12px; display:grid; gap:7px; align-content:start; background:#fff}
.hk-kartu.hk-kotor{background:#FFFBEA; border-color:#EBD58A}
.hk-kartu.hk-dibersihkan{background:#F3F6FD; border-color:#BCCBEE}
.hk-kartu.hk-rusak{background:#F6F7FA}
.hk-kartu.prioritas{border-color:var(--stempel); box-shadow:0 0 0 2px rgba(215,38,61,.14)}
.hk-kartu .chip{justify-self:start}
.hk-atas{display:flex; justify-content:space-between; align-items:center; gap:8px}
.hk-atas b{font:800 22px/1 var(--display); color:var(--tinta-tua)}
.hk-kartu > small{color:var(--redup); font-size:12.5px}
.link-btn{background:none; border:0; padding:0; color:var(--tinta); font-weight:700; font-size:12.5px; cursor:pointer; text-align:left; justify-self:start; text-decoration:underline}

/* repairs */
.fix-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; align-items:start}
.kartu.fix{display:grid; gap:6px}
.kartu.fix .kartu-kepala{margin-bottom:0; align-items:flex-start}
.kartu.fix .btn{justify-self:start; margin-top:4px}
.fix-kepala{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.fix-masalah{margin:2px 0 0; font-weight:700; color:var(--tinta-tua)}

/* restaurant */
.grid-pos{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start}
@media (max-width:1000px){ .grid-pos{grid-template-columns:1fr} }
.keranjang{position:sticky; top:76px}
@media (max-width:1000px){ .keranjang{position:static} }
.menu-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-top:12px}
.menu-item{position:relative; text-align:left; background:#fff; border:1.5px solid var(--garis); border-radius:12px; padding:12px; min-height:84px; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; gap:6px}
.menu-item:hover{border-color:var(--tinta)}
.menu-item b{color:var(--tinta-tua); font-size:14px; line-height:1.3}
.menu-item span{color:var(--redup); font-size:13px; font-variant-numeric:tabular-nums}
.menu-qty{position:absolute; top:-7px; right:-7px; min-width:24px; height:24px; padding:0 6px; border-radius:99px; background:var(--stempel); color:#fff; font:800 12px/24px var(--badan); text-align:center; font-style:normal}
.baris-pos{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--garis2); font-size:13.5px}
.qty{display:inline-flex; align-items:center; gap:6px}
.qty button{width:30px; height:30px; border-radius:8px; border:1.5px solid var(--garis); background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--tinta); padding:0}
.qty button:hover{border-color:var(--tinta)}
.qty button svg{width:14px; height:14px}
.qty b{min-width:18px; text-align:center}
.papan{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start}
@media (max-width:1000px){ .papan{grid-template-columns:1fr} }
.kolom{display:grid; gap:10px; background:var(--panel); border-radius:14px; padding:14px; align-content:start}
.kolom .kosong{padding:10px}
.pesanan{background:#fff; border:1px solid var(--garis); border-radius:12px; padding:12px; display:grid; gap:8px}
.pesanan .chip{justify-self:start}
.pesanan-kepala{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.pesanan-kepala b{font:800 16px/1.2 var(--display); color:var(--tinta-tua)}
.pesanan ul{margin:0; padding:0; list-style:none; font-size:13.5px; display:grid; gap:2px}
.pesanan-bawah{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.pesanan .aksi{display:flex; gap:6px; flex-wrap:wrap}

/* sign in */
.masuk{max-width:1080px; margin:0 auto; padding:40px 20px 56px}
.masuk-kepala{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.masuk-kepala .logo{width:52px; height:52px}
.masuk-kepala h1{font-size:clamp(28px,4vw,42px); letter-spacing:-.025em}
.masuk-kepala p{flex-basis:100%; margin:6px 0 0; color:var(--redup); max-width:62ch; font-size:15.5px}
.masuk-ajak{margin:28px 0 12px; font-weight:700; color:var(--tinta-tua)}
.peran-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; align-items:stretch}
@media (max-width:1040px){ .peran-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .peran-grid{grid-template-columns:1fr} }
.peran{display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; background:#fff; border:1.5px solid var(--garis); border-radius:16px; padding:16px; cursor:pointer; color:inherit; font:inherit}
div.peran{cursor:default}
button.peran:hover{border-color:var(--tinta)}
.peran-ikon{display:inline-flex; width:42px; height:42px; border-radius:12px; background:var(--panel); color:var(--tinta); align-items:center; justify-content:center}
.peran-ikon svg{width:22px; height:22px}
.peran b{font:800 17px/1.2 var(--display); color:var(--tinta-tua)}
.peran small{color:var(--redup); font-size:13px; flex:1}
.peran-masuk{font-weight:700; color:var(--tinta); font-size:13.5px}
.masuk-lain{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
@media (max-width:640px){ .masuk-lain{grid-template-columns:1fr} }
.kartu-lain{display:flex; gap:14px; align-items:center; background:var(--tinta-tua); color:#D5DCF0; border-radius:16px; padding:16px 18px; text-decoration:none}
.kartu-lain:hover{background:#17295e}
.kartu-lain svg{width:28px; height:28px; color:var(--kuning); flex:none}
.kartu-lain b{display:block; color:#fff; font:800 16px/1.2 var(--display)}
.kartu-lain small{font-size:13px}
.masuk-catatan{margin:18px 0 0; color:var(--redup); font-size:13.5px}

/* dialogs, toast, slips */
dialog{border:0; border-radius:16px; padding:22px; width:min(480px, calc(100% - 24px)); max-height:calc(100% - 24px); box-shadow:0 30px 80px -20px rgba(15,30,74,.5); color:var(--teks)}
dialog::backdrop{background:rgba(15,30,74,.45)}
dialog h2{font-size:20px; margin-bottom:14px}
.dialog-aksi{display:flex; justify-content:flex-end; gap:8px; margin-top:8px; flex-wrap:wrap}
.tamu-mini{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--latar); border-radius:12px; padding:10px 12px; margin-bottom:14px}
.tamu-mini > div{flex:1; min-width:0}
.tamu-mini b{display:block; color:var(--tinta-tua)}
.tamu-mini small{color:var(--redup); font-size:12.5px}
.toast{position:fixed; left:50%; bottom:22px; transform:translate(-50%,16px); background:var(--tinta-tua); color:#fff; padding:12px 18px; border-radius:12px; font-weight:600; font-size:14px; box-shadow:0 14px 30px -12px rgba(15,30,74,.55); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:100; width:max-content; max-width:calc(100% - 32px); text-align:center}
.toast.on{opacity:1; transform:translate(-50%,0)}
.slip{display:grid; gap:4px; justify-items:center; text-align:center; border:1.5px dashed var(--garis); border-radius:12px; padding:18px; margin-bottom:6px}
.slip-label{font-size:13px; color:var(--redup)}
.slip-no{font:800 56px/1 var(--display); color:var(--tinta-tua); letter-spacing:-.02em}
.slip-nama{font-weight:700; color:var(--tinta-tua)}
.struk{font-size:13px; display:grid; gap:4px; border:1.5px dashed var(--garis); border-radius:12px; padding:16px; margin-bottom:6px}
.struk > b{text-align:center; font:800 16px/1.2 var(--display); color:var(--tinta-tua)}
.struk > small{text-align:center; color:var(--redup)}
.struk hr{border:0; border-top:1px dashed var(--garis); margin:6px 0; width:100%}
.struk-baris{display:flex; justify-content:space-between; gap:10px}
.struk-baris.besar{font-size:15px; font-weight:800; color:var(--tinta-tua)}
.struk-item{display:grid; grid-template-columns:1fr auto auto; gap:4px 10px}
.struk-item span:nth-child(2){color:var(--redup)}
#areaCetak{display:none}
@media print{
  body > :not(#areaCetak){display:none!important}
  #areaCetak{display:block}
  #areaCetak .slip,#areaCetak .struk{border:0; max-width:80mm; margin:0 auto}
}

/* guests */
.grid-tamu{display:grid; grid-template-columns:320px minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:900px){ .grid-tamu{grid-template-columns:1fr} }
.identitas{text-align:center}
.avatar.besar{width:64px; height:64px; font-size:22px; margin:0 auto 10px}
.dl{display:grid; gap:8px; margin:14px 0 0; text-align:left}
.dl div{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--garis2); padding-bottom:8px; font-size:13.5px}
.dl dt{color:var(--redup)}
.dl dd{margin:0; font-weight:600; text-align:right}
.kembali-link{display:inline-flex; align-items:center; gap:4px; font-weight:700; text-decoration:none; font-size:14px; width:max-content}
.kembali-link svg{width:18px; height:18px}
.linimasa{list-style:none; margin:12px 0 0; padding:0 0 0 18px; border-left:2px solid var(--garis)}
.linimasa li{position:relative; padding:0 0 16px 12px}
.linimasa li::before{content:""; position:absolute; left:-26px; top:4px; width:12px; height:12px; border-radius:50%; background:#fff; border:2.5px solid var(--tinta)}
.li-kepala{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; margin-bottom:4px}
.li-kepala b{color:var(--tinta-tua)}
.li-kepala span{color:var(--redup); font-size:13px}
.linimasa p{margin:4px 0; font-size:13.5px}

/* cashier */
.total{margin:12px 0; display:grid; gap:6px}
.total div{display:flex; justify-content:space-between; font-size:14px}
.total dt{color:var(--redup)}
.total dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums}
.total .besar{font-size:18px; padding-top:8px; border-top:1.5px solid var(--garis)}
.total .besar dt,.total .besar dd{color:var(--tinta-tua); font-family:var(--display); font-weight:800}
.metode{border:0; padding:0; margin:0 0 12px; display:flex; flex-wrap:wrap; gap:8px}
.metode legend{margin-bottom:6px; padding:0}
.opsi-metode{display:flex; align-items:center; gap:6px; border:1.5px solid var(--garis); border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:600; font-size:13.5px}
.opsi-metode:has(input:checked){border-color:var(--tinta); background:#F3F6FD; color:var(--tinta-tua)}
.kembalian{font:800 22px/40px var(--display); color:var(--hijau)}
#tagihan form .ket{margin-bottom:12px}

/* charts */
.grafik{margin:12px 0 0}
.batang{display:flex; align-items:flex-end; gap:4px; height:150px; border-bottom:1px solid var(--garis)}
.batang .k{flex:1; height:100%; display:flex; align-items:flex-end}
.batang i{display:block; width:100%; height:var(--h); min-height:2px; background:#C9D3EE; border-radius:4px 4px 0 0}
.batang .k:hover i{background:#9FB2E2}
.batang .k.sorot i{background:var(--tinta)}
.label-batang{display:flex; gap:4px; margin-top:5px}
.label-batang span{flex:1; text-align:center; font-size:11px; color:var(--redup); font-variant-numeric:tabular-nums}
.grafik figcaption{margin-top:8px; font-size:13px; color:var(--redup)}
.grafik figcaption b{color:var(--tinta-tua)}
.peringkat{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px}
.peringkat li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; font-size:13.5px}
.peringkat b{font-variant-numeric:tabular-nums; color:var(--tinta-tua)}
.peringkat i{grid-column:1 / -1; height:6px; border-radius:99px; background:var(--panel); position:relative; overflow:hidden}
.peringkat i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--tinta); border-radius:99px}

/* settings */
.tarif-baris{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--garis2); font-size:14px}
.input-rp{display:flex; align-items:center; gap:6px; border:1.5px solid var(--garis); border-radius:10px; padding-left:10px; background:#fff; width:160px; flex:none}
.input-rp:focus-within{border-color:var(--tinta)}
.input-rp small{color:var(--redup)}
.input-rp input{border:0; text-align:right}
.input-rp input:focus{outline:none}
.akses th,.akses td{text-align:center}
.akses th:first-child,.akses td:first-child{text-align:left}
.akses svg{width:18px; height:18px; color:var(--hijau); margin:0 auto}

/* highlight card */
.kartu.sorot{background:var(--tinta-tua); color:#D5DCF0; border-color:var(--tinta-tua)}
.kartu.sorot h2{color:#fff; margin:10px 0 6px}
.kartu.sorot p{margin:0 0 14px}
.kartu.sorot .btn{background:#fff; color:var(--tinta-tua); border-color:#fff}
.sorot-ikon svg{width:30px; height:30px; color:var(--kuning)}

/* patient app */
.hp-halaman{max-width:1000px; margin:0 auto; padding:32px 20px 56px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; align-items:center}
@media (max-width:820px){ .hp-halaman{grid-template-columns:1fr; gap:24px} }
.hp-teks h1{font-size:clamp(28px,4vw,40px); margin:14px 0 10px; letter-spacing:-.02em}
.hp-teks p{color:var(--redup); font-size:15.5px; max-width:48ch}
.hp-langkah{padding-left:20px; display:grid; gap:8px; margin:0 0 18px}
.hp{width:300px; margin:0 auto; background:var(--tinta-tua); border-radius:42px; padding:11px; box-shadow:0 30px 60px -30px rgba(15,30,74,.6)}
@media (max-width:360px){ .hp{width:100%} }
.hp-layar{background:#F4F6FB; border-radius:32px; overflow:hidden; min-height:560px}
.hp-atas{background:var(--tinta); color:#fff; padding:26px 18px 18px}
.hp-atas small{opacity:.8; font-size:12px}
.hp-atas b{display:block; font:800 21px/1.2 var(--display)}
.hp-isi{padding:14px; display:grid; gap:10px; align-content:start}
.hp-isi .field{margin-bottom:0}
.hp-btn{width:100%; min-height:50px; border:0; border-radius:99px; background:var(--tinta); color:#fff; font-weight:800; font-size:15px; cursor:pointer}
.hp-btn:hover{background:var(--tinta-tua)}
.hp-kartu{background:#fff; border:1px solid var(--garis); border-radius:14px; padding:12px; font-size:13.5px}
.hp-kartu > b{display:block; color:var(--tinta-tua); margin-bottom:6px}
.hp-baris{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--garis2)}
.hp-pilih{width:100%; text-align:left; background:#fff; border:1.5px solid var(--garis); border-radius:14px; padding:12px; cursor:pointer; display:grid; gap:2px}
.hp-pilih:hover{border-color:var(--tinta)}
.hp-pilih b{color:var(--tinta-tua)}
.hp-pilih small{color:var(--redup); font-size:12.5px}
.hp-kode{font:800 30px/1.1 var(--display); color:var(--tinta); text-align:center; margin:4px 0}
.hp-kembali{display:inline-flex; align-items:center; gap:2px; background:none; border:0; color:var(--tinta); font-weight:700; padding:0; cursor:pointer; justify-self:start; font-size:13.5px}
.hp-kembali svg{width:16px; height:16px}
.hp-sukses{display:flex; align-items:center; gap:6px; margin:0; background:#DDF2E6; color:var(--hijau); border-radius:12px; padding:10px 12px; font-weight:800}
.hp-sukses svg{width:18px; height:18px}
.hp-layar{max-height:620px; overflow-y:auto}
.hp-label{font-size:12.5px; font-weight:800; color:var(--tinta-tua); margin-top:4px}
.hp-pilihan{display:flex; flex-wrap:wrap; gap:6px}
.hp-pilihan label{cursor:pointer; position:relative}
.hp-pilihan input{position:absolute; opacity:0; pointer-events:none}
.hp-pilihan span{display:inline-block; padding:8px 12px; border-radius:99px; border:1.5px solid var(--garis); background:#fff; font-size:13px; font-weight:600}
.hp-pilihan input:checked + span{background:var(--tinta); border-color:var(--tinta); color:#fff}
.hp-pilihan input:focus-visible + span{outline:3px solid var(--tinta); outline-offset:2px}
.hp-pilih:disabled{opacity:.5; cursor:not-allowed}
.hp-harga{font:800 16px/1.3 var(--display); color:var(--tinta-tua)}
.hp-harga small{font:500 12px var(--badan); color:var(--redup)}
.hp-pilih small.merah{color:#A3172B; font-weight:700}
.hp-layanan{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.hp-layanan button{display:grid; justify-items:start; gap:8px; background:#fff; border:1.5px solid var(--garis); border-radius:14px; padding:12px; cursor:pointer; text-align:left; font-weight:700; color:var(--tinta-tua); font-size:13px; line-height:1.25}
.hp-layanan button:hover{border-color:var(--tinta)}
.hp-layanan svg{width:22px; height:22px; color:var(--tinta)}
.hp-menu{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--garis2); font-size:13px}
.hp-menu b{display:block; color:var(--tinta-tua)}
.hp-menu small{color:var(--redup)}
.hp-total{display:flex; justify-content:space-between; align-items:center; font-weight:700}
.hp-total b{margin:0!important; font:800 18px/1 var(--display)}
.hp-status{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--garis2); font-size:12.5px}
.hp-status b{white-space:nowrap; color:var(--tinta)}
.hp-status b.hijau{color:var(--hijau)}
.hp-baris.besar{font-weight:800; color:var(--tinta-tua)}
.hp-btn:disabled{opacity:.45; cursor:not-allowed}
.hp-demo{border:1.5px dashed var(--tinta); background:#EEF2FC; color:var(--tinta); border-radius:14px; padding:12px; font-weight:700; font-size:13px; cursor:pointer; text-align:left}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important} }