/* kendaraan.css — layar Kendaraan & servis berkala (public/kotak/kendaraan.js). Warna dan tombol dasar dari dasbor.css. */
/* Menu yang bisa dimatikan baru tampil setelah pengaturan menu klien tiba, supaya tidak berkedip. */
body:not([data-menu-siap]) .rel-item[data-layar="kendaraan"]{visibility:hidden}

.knd-kpi{border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}

/* Permintaan booking dari tombol pengingat. */
.knd-booking{margin-top:14px}
.knd-booking h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:15px}
.knd-booking h3 svg.i{width:18px;height:18px;color:var(--aksen-tua)}
.knd-hitung{font-size:12px;font-weight:600;padding:0 7px;border-radius:9px;background:var(--kepala);color:var(--tx2)}
.knd-bk{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--garis);flex-wrap:wrap}
.knd-bk>div:first-child{min-width:0;overflow-wrap:anywhere}
.knd-bk small{display:block;font-size:12px;color:var(--tx3)}
.knd-bk-aksi{display:flex;gap:6px;flex-wrap:wrap}
.knd-bk-aksi svg.i{width:15px;height:15px;margin-right:4px;vertical-align:-3px}

.knd-alat{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0 10px}
.knd-alat input{flex:1;min-width:160px;padding:8px 16px;border:1px solid transparent;border-radius:20px;background:var(--panel);box-shadow:0 1px 2px rgba(11,20,26,.06)}
.knd-alat input:focus{outline:none;border-color:color-mix(in srgb,var(--aksen) 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--aksen) 14%,transparent)}
/* Saring jatuh tempo = chip pil tipis, seperti chip daftar chat. */
.knd-tab{display:flex;gap:6px;flex-wrap:wrap}
.knd-tab button{font:inherit;font-size:13px;line-height:18px;font-weight:500;padding:3px 10px;border-radius:16px;border:1px solid var(--garis2);background:transparent;color:var(--tx2);cursor:pointer}
.knd-tab button:hover{background:var(--hover)}
.knd-tab button.pilih{background:#d9fdd3;border-color:#b8e6b2;color:#0b5a38}
.knd-jumlah{font-size:12.5px;color:var(--tx3);margin:0 0 8px}

.knd-daftar{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.knd-kosong{padding:20px 4px}
/* Kartu kendaraan: bulat, bayangan lembut, tanpa garis tepi; jatuh tempo dibaca dari pil .knd-pil. */
.knd-kartu{background:var(--panel);border-radius:18px;padding:14px 16px;box-shadow:0 1px 2px rgba(11,20,26,.05),0 6px 20px rgba(11,20,26,.06);display:flex;flex-direction:column;gap:8px;min-width:0}
.knd-buka{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;text-align:left;cursor:pointer;color:var(--tx);min-width:0;font:inherit}
/* Nopol bergaya pelat: mudah dicari mata di bengkel. */
.knd-nopol{flex:none;font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:14px;letter-spacing:.04em;padding:4px 8px;border-radius:5px;
  background:#1c1f22;color:#f4f4f4;border:2px solid #1c1f22;box-shadow:inset 0 0 0 1px #f4f4f4;white-space:nowrap}
.knd-info{display:flex;flex-direction:column;min-width:0}
.knd-info b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.knd-info small{font-size:12.5px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.knd-jadwal{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;font-size:13px;color:var(--tx2)}
.knd-pil{flex:none;font-size:11px;font-weight:650;padding:2px 8px;border-radius:10px}
.knd-pil.j-terlewat{background:color-mix(in srgb,var(--merah) 13%,transparent);color:var(--merah)}
.knd-pil.j-minggu{background:color-mix(in srgb,var(--kuning) 22%,transparent);color:#8a5a00}
.knd-pil.j-bulan{background:color-mix(in srgb,var(--aksen) 15%,transparent);color:var(--aksen-tua)}
@media (prefers-color-scheme:dark){.knd-pil.j-minggu{color:#f1d38a}}
.knd-ingat{margin:0;font-size:12px;color:var(--tx3);overflow-wrap:anywhere}
.knd-ingat.booking{color:var(--aksen-tua);font-weight:600}
.knd-aksi{display:flex;align-items:center;gap:12px;margin-top:auto}
.knd-aksi svg.i{width:15px;height:15px;margin-right:4px;vertical-align:-3px}

/* Dialog */
.knd-dialog .dialog-isi header>div{min-width:0}
.knd-dialog .dialog-isi header h2{font-family:ui-monospace,Menlo,monospace;letter-spacing:.03em}
.knd-dua{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.knd-tiga{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.knd-dua>div,.knd-tiga>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.knd-nopol-isian{text-transform:uppercase;font-family:ui-monospace,Menlo,monospace}
.knd-rinci{border:1px solid var(--garis);border-radius:14px;padding:10px 14px;margin-top:6px}
.knd-rinci summary{cursor:pointer;font-size:13.5px;color:var(--tx2);font-weight:600}
.knd-rinci[open]{display:flex;flex-direction:column;gap:6px}
.knd-berikut-isian{border:1px solid var(--garis);border-radius:14px;padding:8px 14px 12px;margin:6px 0 0;display:flex;flex-direction:column;gap:4px;min-width:0}
.knd-berikut-isian legend{font-size:13.5px;font-weight:600;color:var(--tx2);padding:0 4px}
.dialog-isi label.knd-radio{display:flex;align-items:center;gap:8px;color:var(--tx);margin:2px 0}
.knd-radio input{accent-color:var(--aksen);width:17px;height:17px}
.knd-sendiri{padding:2px 0 6px 25px}
.knd-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:0}
.knd-dl div{min-width:0}
.knd-dl dt{font-size:12px;color:var(--tx3)}
.knd-dl dd{margin:2px 0 0;font-weight:600;overflow-wrap:anywhere}
.knd-dl dd small{display:block;font-weight:400;font-size:12px;color:var(--tx3)}
.knd-berikut{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--kepala)}
.knd-berikut small{flex-basis:100%;font-size:12px;color:var(--tx3)}
.knd-catatan{margin:10px 0 0;font-size:13px;color:var(--tx2);white-space:pre-line;overflow-wrap:anywhere}
.knd-sub{font-size:14px;margin:16px 0 4px}
.knd-riwayat{display:flex;flex-direction:column}
.knd-rw{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:10px;padding:8px 0;border-top:1px solid var(--garis);align-items:start;font-size:13.5px}
.knd-rw-kiri b{display:block;font-weight:600;font-size:13px}
.knd-rw small{display:block;font-size:12px;color:var(--tx3)}
.knd-rw-isi span{overflow-wrap:anywhere;white-space:pre-line}
.knd-rw-hapus{width:30px;height:30px}
.knd-rw-hapus svg.i{width:15px;height:15px}
.knd-kaki{flex-wrap:wrap}
.knd-kaki .knd-renggang{flex:1}
.knd-kaki svg.i{width:16px;height:16px;margin-right:4px;vertical-align:-3px}
.knd-atur-baris{padding:8px 0;border-top:1px solid var(--garis)}
.knd-atur-baris b{display:block;margin-bottom:4px}

/* Panel info pelanggan di chat */
.knd-ipr{align-items:center}
.knd-ip-buka{border:0;background:none;padding:0;text-align:left;cursor:pointer;color:var(--tx);font:inherit;font-size:13px;min-width:0;overflow-wrap:anywhere}
.knd-ip-buka b{font-family:ui-monospace,Menlo,monospace}
.knd-ip-tambah{display:flex;align-items:center;gap:4px;margin-top:6px;font-size:13px}

/* Satu bahasa dengan halaman chat baru (Putra 27 Sep 2026): kartu bulat berbayang lembut, dialog bersudut bulat. */
#layar-kendaraan .kartu{border-radius:18px;padding:18px;box-shadow:0 1px 2px rgba(11,20,26,.05),0 6px 20px rgba(11,20,26,.06)}
#layar-kendaraan .knd-kpi.pilih{box-shadow:inset 0 0 0 2px var(--aksen),0 6px 20px rgba(11,20,26,.06)}
.knd-dialog{border-radius:18px}
@media (prefers-color-scheme:dark){
  #layar-kendaraan .kartu,.knd-kartu{box-shadow:0 1px 2px rgba(0,0,0,.35)}
  #layar-kendaraan .knd-kpi.pilih{box-shadow:inset 0 0 0 2px var(--aksen)}
  .knd-alat input{background:var(--kepala);box-shadow:none}
  .knd-tab button.pilih{background:#103529;border-color:#1c5a43;color:#25d366}
}
@media (max-width:480px){
  .knd-daftar{grid-template-columns:minmax(0,1fr)}
  .knd-tiga{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .knd-tiga>div:last-child{grid-column:1/-1}
  .knd-rw{grid-template-columns:78px minmax(0,1fr) auto;gap:8px}
  .knd-kaki .knd-renggang{display:none}
  .knd-kaki .tbl{flex:1 1 40%}
  .knd-bk-aksi{width:100%}
}
@media (max-width:380px){
  .knd-dua{grid-template-columns:minmax(0,1fr)}
  .knd-dl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){#layar-kendaraan .kartu{padding:16px;border-radius:16px}}