/* Wrapper: scroll horizontal di layar kecil */
.kanban-wrapper{
  width:100%;
  overflow-x:auto;
  padding-bottom:.25rem;
}

/* Grid 7 kolom fix: muat penuh desktop */
.kanban-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(160px, 1fr));
  gap:10px;
  min-width: 1180px; /* agar 7 kolom tetap satu baris; mobile bisa scroll */
}

/* Kolom */
.kanban-col{
  background:#fafafa;
  border:1px solid #e9ecef;
  border-radius:.5rem;
  display:flex;
  flex-direction:column;
  min-height: 200px;
}
.kanban-col-title{
  position:sticky; top:0; z-index:1;
  background:#f1f3f5;
  border-bottom:1px solid #e9ecef;
  padding:.35rem .5rem;
  font-weight:700;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  border-top-left-radius:.5rem;
  border-top-right-radius:.5rem;
}
.kanban-col-body{
  padding:.4rem;
  overflow-y:auto;
  max-height: calc(100vh - 220px);
}

/* Card ultra-compact */
.kanban-card{
  border:1px solid #e5e7eb;
  border-radius:.4rem;
  padding:.28rem .4rem;
  background:#fff;
  margin-bottom:.35rem;
  font-size:.72rem;
  line-height:1.1;
}
.kb-head{ display:flex; align-items:center; gap:.25rem; }
.kb-no{ font-weight:700; font-size:.78rem; }

/* === FULL LANDSCAPE MEDIA (16:9) === */
.kb-media{
  position:relative;
  width:100%;
  aspect-ratio:16/9;           /* landscape fix */
  border-radius:.35rem;
  overflow:hidden;
  background:#f5f6f8;
  border:1px solid #e5e7eb;
}
.kb-media > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;            /* isi penuh (cover) */
}
.kb-media--empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9aa0a6;
  font-size:.7rem;
}

/* Util */
.text-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Tombol XS */
.btn-xs{
  padding:.1rem .3rem;
  font-size:.68rem;
  line-height:1;
  border-radius:.25rem;
}

/* Tabel (bila dipakai bareng) */
.table td, .table th{ vertical-align: middle; }