/* «Bugun» sahifasi (agent B). Tokenlar theme.css / base.css dan. Radius 18, soya yo'q, rang faqat ma'no.
   Sarlavha va «Birinchi qiling»: A ning H.ui.pageHead (.phead). Hamma sinflar .pg-home ichida. */

.pg-home { max-width:1180px; }

/* ---- sarlavha (H.ui.pageHead) ---- */
.pg-home .phead, .pg-home .phead .first, .pg-home .phead .first ol, .pg-home .phead .first li { min-width:0; max-width:100%; }
.pg-home .phead .first ol { grid-template-columns:minmax(0,1fr); }
@media (min-width:760px) { .pg-home .phead .first ol { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); } }
.pg-home .phead .fitem { min-width:0; }
.pg-home .phead .fitem > span:nth-child(2) { min-width:0; overflow-wrap:anywhere; }
.pg-home .phsub { color:var(--v); font-weight:600; }
.pg-home .msg.note { margin:0 0 12px; }

/* ---- hech narsa shoshilinch emas ---- */
.pg-home .hm-calm { margin:0 0 18px; }
.hm-calm { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r, 18px); background:var(--card-bg, #fff); }
.hm-calm-art { position:relative; flex:none; width:52px; height:52px; }
.hm-calm-art span { position:absolute; border-radius:50%; }
.hm-calm-art .c1 { inset:0; background:var(--green-t); }
.hm-calm-art .c2 { width:14px; height:14px; right:-4px; top:-2px; background:var(--tint); }
.hm-calm-art .ic { position:absolute; left:14px; top:14px; width:24px; height:24px; color:var(--green); stroke-width:2.2; }
.hm-calm-tx { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:3px; }
.hm-calm-tx b { font-size:15.5px; font-weight:600; }
.hm-calm-tx .caps { color:var(--v); margin-top:2px; }
.hm-calm .btn .ic { width:17px; height:17px; }

/* ---- vidjet panjarasi (joylashuv motion.css .wgrid / .wg / .w-*) ---- */
.hm-grid { margin-top:4px; }
.hm-w { display:flex; flex-direction:column; gap:12px; width:100%; min-height:132px; padding:16px; text-align:left; border-radius:var(--r, 18px); background:var(--card-bg, #fff); color:var(--ink); }
button.hm-w { transition:transform .18s cubic-bezier(.16,1,.3,1), border-color .18s; }
button.hm-w:hover { transform:translateY(-2px); border-color:var(--soft); }
.hm-wh { display:flex; align-items:center; gap:8px; }
.hm-wh .caps { flex:1; min-width:0; }
.hm-wh > .ic { width:18px; height:18px; color:var(--gray3); transition:transform .18s, color .18s; }
button.hm-w:hover .hm-wh > .ic { transform:translateX(3px); color:var(--v); }
.hm-w.t-r { border-color:color-mix(in srgb, var(--red) 28%, var(--line)); }
.hm-quiet { margin:auto 0 0; color:var(--gray); font-size:14px; }
.hm-hero { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hm-col { display:flex; flex-direction:column; gap:6px; min-width:0; }
.hm-small { color:var(--gray); font-size:13px; }
.hm-bar { margin-top:auto; }
.hm-bar svg.bar { display:block; width:100%; height:8px; }
.hm-bar .bg { fill:var(--panel); } .hm-bar .fg { fill:var(--v); } .hm-bar .fg.g { fill:var(--green); }
.hm-w .kv b { font-size:26px; }
.hm-w .up { color:var(--green); font-weight:600; } .hm-w .down { color:var(--red); font-weight:600; } .hm-w .flat { color:var(--gray); }

/* sanoq plitkalari */
.hm-w-nums { min-height:0; padding:12px; }
.hm-tiles { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin:0; }
@media (min-width:640px) { .hm-tiles { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1024px) { .hm-tiles { grid-template-columns:repeat(6, minmax(0,1fr)); } }
.hm-tile { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:84px; padding:12px 14px; text-align:left; border:1px solid var(--line); border-radius:var(--r2, 14px); background:var(--card-bg, #fff); color:var(--ink);
  transition:transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, background .18s; }
.hm-tile:hover { transform:translateY(-2px); border-color:var(--soft); }
.hm-tile b { font-size:28px; line-height:1.05; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hm-tile .tl { color:var(--gray); font-size:13px; line-height:1.3; }
.hm-tile.zero b { color:var(--gray3); }
.hm-tile.r { background:var(--red-t); border-color:transparent; } .hm-tile.r b { color:var(--red-tx, #a11a30); }
.hm-tile.v { background:var(--tint); border-color:transparent; } .hm-tile.v b { color:var(--v); }
.hm-tile.y { background:var(--amber-t); border-color:transparent; } .hm-tile.y b { color:var(--amber-tx, #8a4b05); }
.hm-tile.r:hover, .hm-tile.v:hover, .hm-tile.y:hover { border-color:var(--soft); }
.hm-sub { display:flex; align-items:center; gap:8px; margin:10px 4px 2px; color:var(--gray); font-size:13.5px; }
.hm-sub b { color:var(--ink); }

/* e'tibor ro'yxati */
.pg-home .hm-att { display:flex; flex-direction:column; gap:8px; }
.pg-home .hm-att .att { display:flex; align-items:center; gap:12px; min-height:56px; }
.pg-home .hm-att .att .dot { flex:none; width:10px; height:10px; margin:0; }
.pg-home .hm-att .att .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pg-home .hm-att .att .tx b { font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.pg-home .hm-att .att .tx .why { color:var(--gray); font-size:13.5px; }
.pg-home .hm-att .att > .ic { flex:none; width:18px; height:18px; color:var(--gray3); transition:transform .18s, color .18s; }
.pg-home .hm-att .att:hover > .ic { transform:translateX(3px); color:var(--v); }
.hm-att .att { padding:12px 14px; border-radius:var(--r2, 14px); transition:transform .18s cubic-bezier(.16,1,.3,1), border-color .18s; }
.hm-att .att:hover { transform:translateY(-2px); border-color:var(--soft); }
.hm-att .dot.red { background:var(--red); } .hm-att .dot.yellow { background:var(--amber); }
.hm-ok { display:flex; align-items:center; gap:10px; margin-top:auto; padding:12px 14px; border-radius:var(--r2, 14px); background:var(--green-t); color:var(--green-tx, #0f6b31); font-size:14px; font-weight:500; }
.hm-ok .ic { width:18px; height:18px; flex:none; }

/* kichik ro'yxatlar (tasklar, sovuq, expansion) */
.hm-mini { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.hm-mini li + li { border-top:1px solid var(--line); }
.hm-mini button { position:relative; display:flex; align-items:center; gap:10px; width:100%; padding:9px 6px 9px 12px; border:0; background:transparent; color:var(--ink); text-align:left; border-radius:var(--ri, 12px); transition:background .18s; }
.hm-mini button::before { content:''; position:absolute; left:0; top:20%; bottom:20%; width:3px; border-radius:3px; background:var(--v); transform:scaleY(0); transition:transform .18s cubic-bezier(.16,1,.3,1); }
.hm-mini button:hover { background:var(--surf); }
.hm-mini button:hover::before { transform:scaleY(1); }
.hm-mini-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.hm-mini-tx b { font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hm-mini-tx small { color:var(--gray); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hm-time { color:var(--v); font-weight:600; font-size:13.5px; }
.hm-more { display:inline-flex; align-items:center; gap:4px; align-self:flex-start; margin-top:auto; padding:4px 0; border:0; background:none; color:var(--v); font-weight:600; font-size:13.5px; }
.hm-more .ic { width:16px; height:16px; transition:transform .18s; }
.hm-more:hover .ic { transform:translateX(3px); }

/* KPI nuqtalari */
.hm-dots { display:grid; grid-template-columns:repeat(14, minmax(0,1fr)); gap:5px; }
.hm-dot { aspect-ratio:1; border-radius:50%; background:var(--panel); }
.hm-dot.ok { background:var(--green); } .hm-dot.late { background:var(--amber); } .hm-dot.missing { background:var(--red); }
.hm-legend { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--gray); font-size:12.5px; margin-top:auto; }
.hm-legend span { display:inline-flex; align-items:center; gap:6px; }
.hm-legend i { width:8px; height:8px; border-radius:50%; background:var(--panel); }
.hm-legend .ok i { background:var(--green); } .hm-legend .late i { background:var(--amber); } .hm-legend .missing i { background:var(--red); }

/* skelet, bo'sh, vaqt */
.hm-skel { display:flex; flex-direction:column; gap:10px; }
.hm-skel .skel { height:56px; border-radius:var(--r2, 14px); }
.hm-skel .skel.tall { height:96px; border-radius:var(--r, 18px); }
.pg-home .empty-state { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:30px 18px; border:1px dashed var(--line); border-radius:var(--r, 18px); }
.pg-home .es-title { margin:0; font-size:16px; font-weight:600; }
.hm-asof { margin:16px 2px 0; color:var(--gray); font-size:12.5px; }

@keyframes hmIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---- animatsiya darajasi ---- */
html[data-motion="off"] .pg-home.pg-home.pg-home *, html[data-motion="off"] .pg-home.pg-home.pg-home *::before, html[data-motion="off"] .pg-home.pg-home.pg-home *::after { animation:none; transition:none; }
html[data-motion="off"] .pg-home.pg-home.pg-home :is(button.hm-w, .hm-tile, .att):hover { transform:none; }
@media (prefers-reduced-motion: reduce) {
  .pg-home.pg-home.pg-home.pg-home *, .pg-home.pg-home.pg-home.pg-home *::before, .pg-home.pg-home.pg-home.pg-home *::after { animation:none; transition:none; }
  .pg-home.pg-home.pg-home.pg-home :is(button.hm-w, .hm-tile, .att):hover { transform:none; }
}
@media (max-width:420px) {
  .hm-tile b { font-size:24px; }
}

/* ---- brauzer standart tugma uslubini bekor qilish (chegara, kulrang fon, shrift) ---- */
.pg-home :is(button.hm-w, .hm-att .att, .hm-tile, .hm-mini button, .hm-more, .hm-deal) { -webkit-appearance:none; appearance:none; font:inherit; color:inherit; text-align:left; margin:0; }
.pg-home button.hm-w { width:100%; border:1px solid var(--line); background:var(--card-bg, #fff); cursor:pointer; }
.pg-home .hm-att .att { display:flex; width:100%; border:1px solid var(--line); background:var(--card-bg, #fff); cursor:pointer; }
.pg-home .hm-tile { border:1px solid var(--line); background:var(--card-bg, #fff); cursor:pointer; }
.pg-home .hm-tile.r { background:var(--red-t); border-color:transparent; }
.pg-home .hm-tile.v { background:var(--tint); border-color:transparent; }
.pg-home .hm-tile.y { background:var(--amber-t); border-color:transparent; }
.pg-home :is(.hm-tile, button.hm-w, .hm-att .att):hover { border-color:var(--soft); }
.pg-home .hm-mini button { width:100%; border:0; background:transparent; cursor:pointer; }
.pg-home .hm-more { border:0; background:none; color:var(--v); cursor:pointer; }
.pg-home .hm-w-nums, .pg-home section.hm-w { border:1px solid var(--line); background:var(--card-bg, #fff); }
.pg-home .qbar { margin:0 0 12px; }
.hm-mini li.has-deal { display:flex; flex-direction:column; }
.pg-home .hm-deal { align-self:flex-start; margin:-4px 0 8px 12px; padding:2px 10px; border:1px solid var(--soft); border-radius:999px; background:var(--tint); color:var(--v); font-size:12.5px; font-weight:600; cursor:pointer; transition:border-color .18s; }
.pg-home .hm-deal:hover { border-color:var(--v); }