/* ---------- Cheklistlar ---------- */
.cl-table td { white-space: normal; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 2px; }
.cl-barwrap { display: inline-flex; align-items: center; gap: 8px; }
.cl-bar { display: inline-block; width: 90px; height: 8px; border-radius: 99px; background: var(--peach-soft); overflow: hidden; }
.cl-bar i { display: block; height: 100%; background: var(--caramel); }
.cl-bar.good i { background: var(--brown); }
.cl-bar.bad i { background: var(--red); }
.chip.cl-late { background: #FFF3D6; border-color: #E8B04B; color: #8A5A00; }
.cl-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 10px; max-height: 180px; overflow: auto; }
.cl-times { display: grid; gap: 6px; margin: 4px 0; }
.cl-time { display: flex; align-items: center; gap: 8px; }
.cl-time input { width: 130px; }
.cl-erow { display: grid; grid-template-columns: minmax(220px, 1fr) 130px 64px auto auto auto auto auto; gap: 6px; align-items: center; }
.cl-erow input[type=number] { width: 64px; }
.cl-grid td { vertical-align: top; white-space: normal; min-width: 92px; }
.cl-grid td:first-child { min-width: 220px; }
.cl-cell { display: flex; flex-direction: column; gap: 4px; }
.cl-slot { font: inherit; font-size: 12px; font-weight: 700; border-radius: 8px; padding: 4px 6px; border: 1.5px solid var(--line); background: var(--white); color: var(--brown); cursor: default; text-align: center; }
button.cl-slot.done { cursor: pointer; }
.cl-slot.done { background: var(--brown); border-color: var(--brown); color: var(--white); }
.cl-slot.late { background: #FFF3D6; border-color: #E8B04B; color: #8A5A00; }
.cl-slot.missed { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.cl-slot.pending { border-color: var(--caramel); }
.cl-slot.plan { border-style: dashed; opacity: .7; }
i.cl-slot { display: inline-block; width: 14px; height: 14px; padding: 0; vertical-align: middle; }
.cl-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.cl-today { background: var(--peach); border-radius: 6px; padding: 2px 6px; }
.cl-chart { display: flex; align-items: flex-end; gap: 4px; height: 180px; border-bottom: 1.5px solid var(--line); padding-top: 8px; margin-bottom: 8px; overflow-x: auto; }
.cl-col { flex: 1 0 18px; display: flex; flex-direction: column; align-items: center; height: 100%; gap: 4px; }
.cl-col span { font-size: 10px; font-weight: 600; white-space: nowrap; }
.cl-stack { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.cl-stack i { display: block; width: 100%; }
.cl-stack i.done { background: var(--brown); border-radius: 0 0 3px 3px; }
.cl-stack i.late { background: #E8B04B; }
.cl-stack i.missed { background: var(--red); border-radius: 3px 3px 0 0; }
#cl-dialog { width: min(560px, calc(100vw - 32px)); }
#cl-dialog.wide-dialog { width: min(1000px, 96vw); }
.cl-video { width: 240px; max-height: 320px; border-radius: 8px; background: #000; }
.cl-emps { flex-direction: column; flex-wrap: nowrap; max-height: 220px; }
.cl-emps label { white-space: normal; }