/* page-compare.css — Taqqoslash + Kampaniyalar (docs/DESIGN-shadcn-ui.md §7: P3 egasi).
 *
 * shadcn dashboard-01 ruhida: karta (header/title/description/action) ichida sayt tanlagich (Command uslubi),
 * section-cards KPI (components.css), data-table (table-wrap + table-footer), issiqlik jadvali, dialog ichidagi forma.
 * Klass prefikslari:  cmp-* taqqoslash   cl-* kampaniyalar ro'yxati   cd-* kampaniya dashboardi   cf-* kampaniya formasi (dialog)
 * Ranglar faqat tokenlardan (light + dark). Bo'shliq: gap-4 md:gap-6 (konteyner so'rovi #page = `main`).
 */

/* ============================== Umumiy sahifa skeleti ============================== */
.cmp-page, .cl-page, .cd-page, .cd-body, .cmp-results {
  display: flex; flex-direction: column; gap: 1rem; min-width: 0;
}
@container main (min-width: 48rem) {
  .cmp-page, .cl-page, .cd-page, .cd-body, .cmp-results { gap: 1.5rem; }
}
.cmp-results:empty { display: none; }

/* ============================== Taqqoslash: sayt tanlagich ============================== */
.cmp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.5rem; align-items: start; }
@container main (max-width: 44rem) { .cmp-grid { grid-template-columns: minmax(0, 1fr); } }

.cmp-selcount { font-variant-numeric: tabular-nums; }
.cmp-selcount:empty { display: none; }

/* Command uslubi: tepada ikonkali qidiruv qatori, ostida ro'yxat */
.cmp-picker {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
}
.cmp-picker-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0; border-bottom: 1px solid var(--border); }
.cmp-search-wrap { flex: 1; display: flex; align-items: center; gap: 0.5rem; min-width: 0; height: 2.25rem; padding: 0 0.75rem; }
.cmp-search-wrap .icon { color: var(--muted-foreground); }
.cmp-search-wrap input {
  -webkit-appearance: none; appearance: none;
  flex: 1; width: 100%; height: 2rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--foreground);
}
.cmp-search-wrap input:hover, .cmp-search-wrap input:focus, .cmp-search-wrap input:focus-visible { border: 0; box-shadow: none; outline: none; }
.cmp-search-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.cmp-picker-head:focus-within { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.cmp-picker-head:has(input:focus-visible) { outline: 2px solid var(--focus-border); outline-offset: -2px; }

.cmp-list { max-height: 21rem; min-height: 6rem; overflow-y: auto; padding: 0.25rem; }
.cmp-row {
  display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md); font-weight: 400; cursor: pointer;
  transition: background-color var(--duration-fast);
}
.cmp-row:hover, .cmp-row:has(input:checked) { background: var(--accent); }
.cmp-row:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--focus-border); }
.cmp-row input { flex-shrink: 0; }
.cmp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.cmp-row-name { color: var(--foreground); font-size: 0.875rem; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-row-sub { color: var(--muted-foreground); font-size: 0.75rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-row-ots { flex-shrink: 0; color: var(--muted-foreground); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-row:has(input:checked) .cmp-row-ots { color: var(--foreground); }

.cmp-empty, .cmp-nomatch {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem 1rem;
  color: var(--muted-foreground); font-size: 0.875rem; text-align: center;
}
.cmp-empty a { font-weight: 500; }
.cmp-nomatch[hidden] { display: none; }

.cmp-skel { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem; }
.cmp-skel .skeleton:first-child { width: 1rem; height: 1rem; flex-shrink: 0; border-radius: 4px; }
.cmp-skel .skeleton:last-child { flex: 1; height: 0.875rem; }

/* O'ng ustun: davr + tugma */
.cmp-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.cmp-side .filter-item { gap: 0.5rem; }
.cmp-side .btn { width: 100%; }

/* ============================== Taqqoslash: natijalar ============================== */
.cmp-results .chart { height: 280px; }
/* KPI kartada uzun sayt nomi 2 qatordan oshmasin (shadcn: line-clamp-1) */
.cmp-results .kpi-foot strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* Jadval + pastki qator (dashboard-01 data-table) */
.cmp-tablebox { display: flex; flex-direction: column; gap: 0.75rem; }
.cmp-tablebox .table-footer { padding: 0 0.25rem; }
.cmp-table td { white-space: nowrap; }
.cmp-table th { height: auto; min-height: 2.5rem; padding-block: 0.375rem; white-space: normal; line-height: 1.25; }
.cmp-table th.num .cmp-th { justify-content: flex-end; text-align: right; }
.cmp-site { max-width: 17rem; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.cmp-table th.sortable:focus-visible { outline: 2px solid var(--focus-border); outline-offset: -2px; }
.cmp-th { display: inline-flex; align-items: center; gap: 0.375rem; }
.cmp-sort-icon { width: 0.875rem; height: 0.875rem; color: var(--muted-foreground); opacity: 0.5; transition: opacity var(--duration-fast); }
th.sortable:hover .cmp-sort-icon, th.sorted .cmp-sort-icon { opacity: 1; }
th.sorted .cmp-sort-icon { color: var(--foreground); }
/* "Eng yaxshi" katagi: yumshoq success badge (belgi) + qalin qiymat */
.cmp-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.cmp-best .cmp-val { font-weight: 600; color: var(--foreground); }
.cmp-best-badge { padding: 0.125rem 0.375rem; }
.cmp-legend { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; color: var(--muted-foreground); font-size: 0.8125rem; }

/* ============================== Kampaniyalar: ro'yxat ============================== */
.cl-link { color: var(--foreground); font-weight: 500; text-decoration: none; }
.cl-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.cl-name { width: 38%; min-width: 14rem; }
.cl-period { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-period .icon { width: 0.875rem; height: 0.875rem; }
.cl-notes { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); }
.cl-actions { width: 1%; text-align: right; white-space: nowrap; }
.cl-skel { display: flex; flex-direction: column; gap: 0.5rem; }
.cl-skel .skeleton { height: 2.5rem; }
.cl-skel .skeleton:first-child { height: 2.5rem; }

/* Bo'sh holat (empty state) */
.cl-empty { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 3rem 1.5rem; }
.cl-empty-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;
  border-radius: var(--radius-lg); background: var(--muted); color: var(--muted-foreground-strong);
}
.cl-empty-title { color: var(--foreground); font-size: 0.9375rem; font-weight: 500; }
.cl-empty-text { max-width: 28rem; color: var(--muted-foreground); font-size: 0.875rem; }
.cl-empty .empty-cta { margin-top: 1rem; }

/* ============================== Kampaniya dashboardi ============================== */
.cd-head { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }
.cd-back { flex-shrink: 0; margin-top: 0.125rem; }
.cd-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.cd-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; min-width: 0; max-width: 100%; margin: 0; overflow: hidden;
  font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: anywhere;
}
.cd-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cd-radius-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0.875rem 0 1rem; }
.cd-radius-row > .rs-host { flex: 1 1 36rem; min-width: 0; max-width: 54rem; }
.cd-radius-lab { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; font-size: 0.75rem; color: var(--muted-foreground-strong); }
.cd-radius-info { font-size: 0.8125rem; line-height: 2rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.cd-body { transition: opacity var(--duration) ease-out; }
.cd-page.is-loading .cd-body { opacity: 0.5; pointer-events: none; }
#cd-period:empty, #cd-country:empty { display: none; }

.cd-skel-kpi { height: 10rem; border-radius: var(--radius-xl); }
.cd-skel-chart { height: 21rem; border-radius: var(--radius-xl); }
.cd-chart { height: 300px; }
.cd-site { max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

/* --- Qoplanish (overlap) issiqlik jadvali --- */
.overlap-table td, .overlap-table th { text-align: center; font-variant-numeric: tabular-nums; }
.overlap-table thead th { height: 2.5rem; font-size: 0.8125rem; }
.overlap-table td { min-width: 4.5rem; height: 2.75rem; border-left: 1px solid var(--border); }
.overlap-table tbody tr:hover { background: transparent; }
/* Ustun sarlavhasi 2 qatorgacha (to'liq nom title'da), qator sarlavhasi bir qator */
.cd-mx-th { display: inline-block; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.overlap-table thead th { white-space: normal; line-height: 1.25; padding-block: 0.375rem; }
.overlap-table thead .cd-mx-th {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-width: 6.5rem;
  white-space: normal; overflow-wrap: anywhere; margin-inline: auto;
}
/* Qator sarlavhasi chapda qotib turadi (ko'p sayt bo'lsa jadval gorizontal aylanadi) */
.overlap-table tbody th.cd-mx-row {
  position: sticky; left: 0; z-index: 1; height: auto; padding: 0.5rem 0.75rem; text-align: left;
  background: var(--muted); box-shadow: inset -1px 0 0 var(--border), inset 0 -1px 0 var(--border);
}
.overlap-table thead th:first-child { position: sticky; left: 0; z-index: 2; }
/* Katak foni: --chart-2 ning intensivlikka (--k: 0..1) mutanosib ulushi. Eng to'q joyda ham (60%) matn
   (--foreground) ikkala temada AA kontrastda qoladi. */
.overlap-table td.heat {
  background-color: color-mix(in oklab, var(--chart-2) calc(var(--k, 0) * 60%), transparent);
  color: var(--foreground); font-weight: 500;
}
.overlap-table td.heat.zero { color: var(--muted-foreground); font-weight: 400; }
.overlap-table td.diag {
  color: var(--muted-foreground-strong); background-color: color-mix(in oklab, var(--muted) 70%, transparent);
}
/* Rang shkalasi (legenda) */
.cd-legend { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; color: var(--muted-foreground); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.cd-legend-bar {
  flex: 0 0 8rem; height: 0.5rem; border-radius: 999px; border: 1px solid var(--border);
  background: linear-gradient(to right, color-mix(in oklab, var(--chart-2) 0%, transparent), color-mix(in oklab, var(--chart-2) 60%, transparent));
}
.cd-legend-cap { margin-left: 0.25rem; }

/* ============================== Kampaniya formasi (dialog) ============================== */
.cf-desc { margin: -0.25rem 0 1rem; }
.cf-sitesnote { font-weight: 400; font-size: 0.8125rem; line-height: 1.2; }
.cf-selcount { margin-left: auto; font-variant-numeric: tabular-nums; }
.cf-selcount:empty { display: none; }
.cf-sites-box { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.cf-sites-head {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0.75rem; border-bottom: 1px solid var(--border);
}
.cf-sites-head:focus-within { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.cf-sites-head:has(input:focus-visible) { outline: 2px solid var(--focus-border); outline-offset: -2px; }
.cf-sites-head .icon { color: var(--muted-foreground); }
.cf-sites-head input {
  -webkit-appearance: none; appearance: none;
  flex: 1; width: 100%; height: 2rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.cf-sites-head input:hover, .cf-sites-head input:focus, .cf-sites-head input:focus-visible { border: 0; box-shadow: none; outline: none; }
.cf-sites-head input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.cf-list { max-height: clamp(7rem, 20vh, 14rem); padding: 0.25rem; }
.cf-list label { min-width: 0; }
.cf-list label:has(input:checked) { background: var(--accent); }
.cf-site-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-site-sub { flex-shrink: 0; color: var(--muted-foreground); font-size: 0.75rem; }
.cf-note { padding: 1rem; text-align: center; }
.cf-nomatch[hidden] { display: none; }
.modal-body .modal-description + .modal-actions { margin-top: 1.5rem; }