/* KPI hisobotlar sahifasi (G, S58 «Aurora Vision»). Radius 18, soya yo'q; yashil topshirildi, sariq kechikdi, qizil yo'q, kulrang dam olish. */
.kp { display:flex; flex-direction:column; gap:16px; }
.kp-body { display:flex; flex-direction:column; gap:14px; }
.kp > .phead { margin-bottom:0; }
.kp .lead { margin:0; color:var(--gray); max-width:72ch; }
.kp .subh { margin:10px 0 0; font-size:18px; display:flex; align-items:center; gap:10px; }

/* 14 kunlik kalendar */
.kp-cal { display:flex; flex-direction:column; gap:14px; padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:var(--card-bg, var(--bg)); }
.kp-calh { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.kp-calh h2 { margin:0; }
.kp-days { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(14, minmax(0, 1fr)); gap:6px; }
.kp-day { min-width:0; }
.kp-dbtn { width:100%; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0; border:1px solid transparent; border-radius:14px; background:transparent; color:var(--ink); cursor:pointer; }
.kp-dbtn:disabled { cursor:default; }
.kp-dbtn:not(:disabled):hover { border-color:var(--soft); background:var(--tint); }
.kp-day.on .kp-dbtn { border-color:var(--v); background:var(--tint); }
.kp-day.today .kp-dn { color:var(--v); font-weight:700; }
.kp-dow { font-size:11px; color:var(--gray); text-transform:uppercase; letter-spacing:.06em; }
.kp-dn { font-size:13px; }
.kp-dot { position:relative; display:block; width:14px; height:14px; border-radius:50%; background:var(--panel); border:2px solid transparent; }
.s-ok .kp-dot { background:var(--green); }
.s-late .kp-dot { background:var(--amber); }
.s-missing .kp-dot { background:var(--red); }
.s-off .kp-dot { width:8px; height:8px; margin:3px; background:var(--line); }
.s-none .kp-dot { background:transparent; border-color:var(--line); }
.s-wait .kp-dot { background:transparent; border:2px dashed var(--v); }
.kp-bad { position:absolute; right:-5px; top:-5px; width:8px; height:8px; border-radius:50%; background:var(--red); border:2px solid var(--card-bg, var(--bg)); }
.kp-legend { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--gray); }
.kp-legend li { display:flex; align-items:center; gap:6px; }
.kp-legend .kp-dot { width:10px; height:10px; }
.kp-legend .s-off .kp-dot { width:8px; height:8px; margin:1px; }

/* sanoq plitkalari */
.kp-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.kp-stats .box { padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:var(--card-bg, var(--bg)); }

/* hisobotlar jadvali */
.kp table.t tr.s-missing td:first-child { border-left:3px solid var(--red); }
.kp table.t tr.s-late td:first-child { border-left:3px solid var(--amber); }
.kp table.t tr.kp-hl td { background:var(--tint); }
.kp table.t td small { display:block; color:var(--gray); font-size:12px; margin-top:2px; }
.kp table.t td.wrap { white-space:normal; min-width:140px; max-width:240px; }
.kp .cok { color:var(--green-tx, #0f6b31); font-weight:600; }
.kp .cbad { color:var(--red-tx, #a11a30); font-weight:600; }
.kp .muted { color:var(--gray); }

/* Q4 topshiriqlar */
.kp-tasks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.kp-task { display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--line); border-radius:18px; background:var(--card-bg, var(--bg)); }
.kp-task.late { border-color:color-mix(in srgb, var(--red) 40%, var(--line)); }
.kp-task.soon { border-color:color-mix(in srgb, var(--amber) 45%, var(--line)); }
/* S64: holat belgisi (bosilmaydi): yumaloq «checkbox» emas, rangli ikon-nishon; topshiriq KPI botda belgilanadi */
.kp-task { cursor:default; }
.kp-tick { flex:none; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--panel); color:var(--gray); pointer-events:none; }
.kp-task.s-done .kp-tick { background:var(--green-t); color:var(--green); }
.kp-task.s-missed .kp-tick { background:var(--red-t); color:var(--red); }
.kp-task.s-planned .kp-tick { background:var(--v-t); color:var(--v); }
.kp-tick svg.ic { width:16px; height:16px; stroke-width:2.2; }
.kp-tnote { display:flex; align-items:center; gap:6px; margin:-4px 0 10px; color:var(--gray); font-size:13px; }
.kp-tnote svg.ic { width:16px; height:16px; }
.kp-tb { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.kp-tt { overflow-wrap:anywhere; }
.kp-task.s-done .kp-tt { color:var(--gray); }
.kp-tb small { color:var(--gray); font-size:12px; }
.kp-tm { flex:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; font-size:13px; }

/* zaxira (H.ui.pageHead yo'q bo'lsa) */
.kp-top .phrow { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.kp-help { padding:12px 16px; border-radius:18px; background:var(--tint); }
.kp-help p { margin:0; }
.kp-empty .kp-blob { display:none; }
.kp-eh { display:flex; flex-direction:column; gap:4px; margin:6px 0 0; }
.kp-skel { display:grid; gap:12px; }
.kp-sk { height:72px; border-radius:18px; }

/* harakat: hover ko'tarilish, 180 ms; nuqtalar ketma-ket paydo bo'ladi */
@media (prefers-reduced-motion:no-preference) {
  html:not([data-motion="off"]) .kp-cal, html:not([data-motion="off"]) .kp-stats .box { transition:transform .18s var(--ease-out, ease), border-color .18s; }
  html:not([data-motion="off"]) .kp-stats .box:hover { transform:translateY(-2px); border-color:var(--soft); }
  html:not([data-motion="off"]) .kp-dbtn { transition:background-color .18s, border-color .18s, transform .18s var(--ease-out, ease); }
  html:not([data-motion="off"]) .kp-dbtn:not(:disabled):hover { transform:translateY(-2px); }
  html:not([data-motion="off"]) .kp-days .kp-dot { animation:kpdot .42s var(--ease-out, ease) backwards; }
  html:not([data-motion="off"]) .kp-day:nth-child(2) .kp-dot { animation-delay:.02s; }
  html:not([data-motion="off"]) .kp-day:nth-child(3) .kp-dot { animation-delay:.04s; }
  html:not([data-motion="off"]) .kp-day:nth-child(4) .kp-dot { animation-delay:.06s; }
  html:not([data-motion="off"]) .kp-day:nth-child(5) .kp-dot { animation-delay:.08s; }
  html:not([data-motion="off"]) .kp-day:nth-child(6) .kp-dot { animation-delay:.10s; }
  html:not([data-motion="off"]) .kp-day:nth-child(7) .kp-dot { animation-delay:.12s; }
  html:not([data-motion="off"]) .kp-day:nth-child(n+8) .kp-dot { animation-delay:.14s; }
}
@keyframes kpdot { from { transform:scale(0); opacity:0; } to { transform:scale(1); opacity:1; } }

@media (max-width:720px) {
  .kp-days { grid-template-columns:repeat(7, minmax(0, 1fr)); row-gap:8px; }
  .kp-stats { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  .kp-stats .box { padding:12px; }
  .kp-task { flex-wrap:wrap; }
  .kp-tb { flex:1 1 calc(100% - 40px); }
  .kp-tm { width:100%; justify-content:flex-start; padding-left:36px; }
  /* telefonda hisobot qatori karta bo'ladi: ustun nomi data-label dan */
  .kp .tw:not(.keep) { border:0; background:transparent; overflow:visible; }
  .kp .tw:not(.keep) table.t, .kp .tw:not(.keep) table.t tbody { display:block; width:100%; }
  .kp .tw:not(.keep) table.t thead { display:none; }
  .kp .tw:not(.keep) table.t tbody { display:flex; flex-direction:column; gap:8px; }
  .kp .tw:not(.keep) table.t tr { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; padding:12px 14px; border:1px solid var(--line); border-radius:18px; background:var(--card-bg, var(--bg)); }
  .kp .tw:not(.keep) table.t tr.s-missing { border-left:3px solid var(--red); }
  .kp .tw:not(.keep) table.t tr.s-late { border-left:3px solid var(--amber); }
  .kp .tw:not(.keep) table.t td { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:0; border:0; text-align:left; min-width:0; max-width:none; }
  .kp .tw:not(.keep) table.t td::before { content:attr(data-label); max-width:none; color:var(--gray); font:400 12px/1.3 var(--font, inherit); letter-spacing:0; text-transform:none; }
  .kp .tw:not(.keep) table.t td:first-child, .kp .tw:not(.keep) table.t tr.s-missing td:first-child, .kp .tw:not(.keep) table.t tr.s-late td:first-child { border-left:0; }
  .kp .tw:not(.keep) table.t td.main, .kp .tw:not(.keep) table.t td[data-col="st"] { grid-column:span 1; }
  .kp .tw:not(.keep) table.t td.main { display:block; padding:0; font-weight:700; }
  .kp .tw:not(.keep) table.t td.main::before, .kp .tw:not(.keep) table.t td[data-col="st"]::before { content:none; }
  .kp .tw:not(.keep) table.t td.wrap, .kp .tw:not(.keep) table.t td[data-col="check"] { grid-column:1 / -1; }
  .kp .tw:not(.keep) table.t td:empty { display:none; }
  .kp .tw:not(.keep) table.t tr.s-missing td:not(.main):not([data-col="st"]) { display:none; }
}

/* R-REVIEW #11: tor telefonda (≤420px) plitkalar 1 ustun, yorliq chapda, raqam o'ngda: «TOPSHIRILMAGAN» kesilmaydi */
@media (max-width:420px) {
  .kp-stats { grid-template-columns:1fr; gap:6px; }
  .kp-stats .box { padding:10px 14px; }
  .kp-stats .kv { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:10px; }
  .kp-stats .kv .caps { white-space:normal; overflow-wrap:anywhere; letter-spacing:.08em; }
  .kp-stats .kv b { margin:0; }
}