/* ---------- Қолдау қызметі: тақта (C1), заявка (C2), заключение (C3), бастық (C4) ---------- */
.col-tabs { display: flex; gap: 8px; padding: 12px 14px; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 60px; z-index: 10; scrollbar-width: none; }
.col-tabs::-webkit-scrollbar { display: none; }
.col-tab { height: 42px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; white-space: nowrap; flex: none; background: var(--card); color: var(--text-2); }
.col-tab .dot { width: 8px; height: 8px; border-radius: 50%; }
.col-tab.on { background: var(--primary); color: #fff; }
.board { display: none; }
.board-mobile { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.kcard { background: #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; border: 2px solid transparent; color: inherit; }
.kcard:hover { border-color: var(--border); color: inherit; }
.kcard.late { border-color: #E02D2D !important; }
.kcard .plate-sm { white-space: nowrap; }
.kcard .row.between { flex-wrap: wrap; gap: 2px 8px; }
.kcard .who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text-2); }
.kcard .who.none { color: var(--st-late-fg); }
.av { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--primary-50); color: var(--primary); flex: none; }
.av.none { background: var(--st-late-bg); color: var(--st-late-fg); }
.t-ok { color: #157A3E; } .t-warn { color: #B7791F; } .t-late { color: #C01F1F; }
.board-filters { display: flex; gap: 8px; padding: 10px 14px 0; align-items: center; }
.board-filters .chip { white-space: nowrap; }
@media (min-width: 1024px) {
  .col-tabs, .board-mobile { display: none; }
  .board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 20px; align-items: start; }
  .kcol { background: var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 160px; }
  .kcol .kh { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px; font-size: 14px; font-weight: 800; }
  .kcol .kh .n { font-size: 13px; background: #fff; border-radius: 999px; padding: 1px 8px; }
  .kcol .kcard { border-radius: 12px; padding: 10px 12px; gap: 7px; }
  .kcol .kcard .plate-sm { font-size: 16px; }
  .kcol .kcard .who { font-size: 13px; }
  .kcol .av { width: 24px; height: 24px; font-size: 10px; }
  .board-filters { padding: 16px 20px 0; }
}

/* Заявка (C2) */
.work-head { background: #fff; border-bottom: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.work-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.mech-note { background: #fff; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.mech-note .txt { font-size: 18px; line-height: 1.55; font-weight: 600; }
.chipbox { font-size: 15px; font-weight: 700; background: var(--card); border-radius: 8px; padding: 6px 10px; }
.binfo { background: #fff; border-radius: 18px; padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.binfo .k { font-size: 13px; color: var(--muted); font-weight: 700; } .binfo .v { font-size: 15px; font-weight: 700; }
.tl { display: grid; grid-template-columns: 14px 1fr; gap: 12px; }
.tl .line { display: flex; flex-direction: column; align-items: center; }
.tl .line .d { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; }
.tl .line .l { width: 2px; flex: 1; background: var(--line); }
.tl .what { font-size: 15px; font-weight: 700; } .tl .meta { font-size: 13px; color: var(--muted); font-weight: 600; padding-bottom: 14px; }
.call { background: var(--card); border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.conc-box { background: #fff; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--st-appr-dot); }
.toggle2 { display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border-radius: 14px; padding: 4px; gap: 4px; }
.toggle2 label { position: relative; min-height: 52px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; cursor: pointer; color: var(--text-2); }
.toggle2 input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle2 label.ok:has(input:checked) { background: #157A3E; color: #fff; }
.toggle2 label.rep:has(input:checked) { background: #B8470B; color: #fff; }
.part-row { display: grid; grid-template-columns: 1fr 72px 44px; gap: 8px; }
.part-row .x { height: 52px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 22px; }
.dash-btn { min-height: 52px; border-radius: 12px; border: 2px dashed #B9C7E2; color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; width: 100%; background: #fff; }
.photo-pick { width: 84px; height: 84px; border-radius: 12px; border: 2px dashed #B9C7E2; color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 28px; cursor: pointer; overflow: hidden; background: #fff; }
.photo-pick img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .work-head { padding: 18px 24px; flex-direction: row; align-items: center; gap: 16px; }
  .work-body { padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: start; gap: 20px; }
  .work-body .left, .work-body .right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .binfo { grid-template-columns: repeat(3, 1fr); }
  .media2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
}
.work-body .left, .work-body .right { display: flex; flex-direction: column; gap: 16px; }

/* Оқу материалдары (D1, D2) */
.lesson-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .lesson-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lesson-grid { grid-template-columns: repeat(3, 1fr); } }
.lesson-card { background: #fff; border-radius: 16px; overflow: hidden; color: inherit; border: 1px solid var(--line); display: flex; flex-direction: column; }
.lesson-card:hover { border-color: var(--border); color: inherit; }
.thumb-wide { position: relative; height: 150px; background: var(--dark); color: #fff; display: flex; align-items: center; justify-content: center; }
.thumb-wide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.thumb-wide .play-ico { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.thumb-wide .dur { position: absolute; right: 10px; bottom: 10px; font: 700 12px var(--mono); background: rgba(0,0,0,.6); padding: 2px 6px; border-radius: 4px; z-index: 1; }

/* Бастық панелі (C4) */
.kpi { background: #fff; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.kpi .t { font-size: 15px; font-weight: 700; color: var(--muted); }
.kpi .n { font-size: 44px; font-weight: 800; line-height: 1; }
.kpi .s { font-size: 13px; color: var(--muted); font-weight: 600; }
.kpi.red { background: #C01F1F; color: #fff; } .kpi.red .t, .kpi.red .s { color: #FDE4E4; } .kpi.red .t { font-weight: 800; }
.kpi .n.green { color: #157A3E; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wait-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: inset 4px 0 0 #8B5CF6; background: #fff; }
.wait-card .txt { font-size: 16px; line-height: 1.5; color: var(--text-2); background: var(--card); border-radius: 12px; padding: 12px 14px; }
.late-box { background: #fff; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; border: 2px solid #F2B8B8; }
.late-item { background: #FDF2F2; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; color: inherit; }
.load-row { display: grid; grid-template-columns: 120px 1fr 28px; gap: 10px; align-items: center; }
.load-row .segs { display: flex; gap: 3px; height: 14px; } .load-row .segs span { width: 28px; border-radius: 3px; }
.seg-late { background: #E02D2D; } .seg-in_progress { background: #F2A900; } .seg-done { background: #F26B1D; } .seg-conclusion { background: #8B5CF6; } .seg-accepted { background: #0F3D91; } .seg-reviewed { background: #2F6FED; }
.head-grid { display: flex; flex-direction: column; gap: 16px; }
.sla-bar { height: 5px; border-radius: 3px; background: var(--line); display: flex; } .sla-bar span { border-radius: 3px; }
.sla-ok { background: #157A3E; } .sla-warn { background: #B7791F; } .sla-late { background: #C01F1F; }
.tr.late-row { background: #FDF2F2; border-radius: 10px; }
@media (min-width: 1024px) {
  .kpis { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .head-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; gap: 20px; }
  .head-grid .side { display: flex; flex-direction: column; gap: 20px; }
}