/* page-admin.css — Ma'lumotlar (ingest) / Viloyatlar / Foydalanuvchilar (docs/DESIGN-shadcn-ui.md §7: P4 egasi).
 * shadcn/ui dashboard-01 ruhida: sahifa sarlavhasi + Alert/callout, section-cards KPI, card (header/title/description),
 * data-table (sticky sarlavha, pager pastki qatori), Progress, kod bloki (log), avatar + rol/holat badge'lari.
 * Umumiy komponentlar (.card, .kpi-*, .badge, .btn, .table-wrap, .table-footer, .pager, .progress, .spinner, .modal*, .dropdown*,
 * .country-tag, .sample-tag) components.css'da; bu yerda faqat admin sahifalarga xos klasslar (adm-*, rg-*, usr-*).
 * Ranglar faqat tokenlardan — light/dark ikkalasida ishlaydi. DIQQAT: var(--muted) — FON, matn uchun --muted-foreground.
 */

/* ============================== 1. Sahifa skeleti ============================== */
/* dashboard-01: bloklar orasida gap-4, md:gap-6. Konteyner so'rovi #page (container: main) ga nisbatan. */
.adm-page { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@container main (min-width: 48rem) { .adm-page { gap: 1.5rem; } }

/* Sahifa sarlavhasi: chapda nom + belgilar + izoh, o'ngda amallar */
.adm-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.adm-head-text { flex: 1 1 20rem; min-width: 0; }
.adm-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.adm-title h2 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.adm-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.4; }
.adm-sub svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.adm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; }
.adm-actions .chk-inline { color: var(--muted-foreground-strong); }

/* ============================== 2. Alert va callout ============================== */
/* shadcn Alert: rounded-lg border px-4 py-3 text-sm; ikonka + sarlavha (font-medium) + tavsif (muted). Ohang — modifikator. */
.adm-alert {
  display: grid; grid-template-columns: 1rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.125rem; align-items: start;
  padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background-color: var(--card); color: var(--card-foreground); font-size: 0.875rem; line-height: 1.45;
}
.adm-alert > svg { grid-row: 1; width: 1rem; height: 1rem; margin-top: 0.125rem; color: currentColor; }
.adm-alert-title { grid-column: 2; min-height: 1rem; font-weight: 500; letter-spacing: -0.006em; }
.adm-alert-desc { grid-column: 2; color: var(--muted-foreground-strong); }
.adm-alert-desc b { color: var(--foreground); font-weight: 600; }
.adm-alert-warning { border-color: color-mix(in oklab, var(--warning) 35%, var(--border)); background-image: linear-gradient(var(--warning-muted), var(--warning-muted)); }
.adm-alert-warning > svg { color: var(--warning); }
.adm-alert-destructive { border-color: color-mix(in oklab, var(--destructive) 35%, var(--border)); background-image: linear-gradient(var(--destructive-muted), var(--destructive-muted)); }
.adm-alert-destructive > svg, .adm-alert-destructive .adm-alert-title { color: var(--destructive-text); }

/* Callout: muted fonli, chegarasiz izoh bloki (ikonka + matn) — masalan viloyat aholisi taxminiy ekani haqida */
.adm-callout {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-lg);
  background: var(--muted); color: var(--muted-foreground-strong); font-size: 0.875rem; line-height: 1.5;
}
.adm-callout > svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.1875rem; }
.adm-callout > div { min-width: 0; }
.adm-callout b { color: var(--foreground); font-weight: 600; }
.adm-callout-warning > svg { color: var(--warning); }

/* ============================== 3. KPI va grafik kartalar (Ma'lumotlar) ============================== */
/* section-cards: Ma'lumotlar'da 3 ta karta — keng konteynerda 3 ustun (4-ustunli standart to'rtinchisini bo'sh qoldirardi) */
@container main (min-width: 48rem) { .kpi-grid.adm-kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.adm-page .kpi-grid .kpi-value { min-width: 0; overflow-wrap: anywhere; }
/* Sana oralig'i (2026-05-02–2026-05-31) qator ichida bo'linmasin: Viloyatlar'da 4-karta, Ma'lumotlar'da 1-karta */
#rg-kpis .kpi-card:nth-child(4) .kpi-foot strong, #dt-chips .kpi-card:first-child .kpi-foot strong { white-space: nowrap; }

/* Kunlik grafik kengroq, manbalar donut'i torroq (3fr : 2fr) */
.adm-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
@container main (min-width: 56rem) { .adm-charts { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.adm-charts > .card { flex-shrink: 1; }
.adm-charts .chart { height: 20rem; }
.adm-charts .empty-note { display: flex; align-items: center; justify-content: center; height: 100%; }

/* ============================== 4. Ingest kartasi ============================== */
.adm-ingest { display: flex; flex-direction: column; gap: 1.25rem; }
.adm-ingest-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
.adm-ingest-form input[type="date"] { width: 10.5rem; }
.adm-status { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.adm-idle { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; }
.adm-idle svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Jonli holat: sarlavha qatori + Progress + meta + log */
.adm-run { display: flex; flex-direction: column; gap: 0.75rem; }
.adm-run-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.status-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
.status-line svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.status-line.is-done svg { color: var(--success); }
.status-line .adm-time { font-weight: 400; }
.adm-run .progress { margin: 0; }
.progress.is-error { background: color-mix(in oklab, var(--destructive) 20%, transparent); }
.progress.is-error .progress-fill { background: var(--destructive); }
.adm-run-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 0.75rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.adm-run-meta b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Log — kod bloki kartasi (sarlavha qatori + monospace matn) */
.adm-log { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.adm-log-head {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
  background: var(--muted); color: var(--muted-foreground-strong); font-size: 0.75rem; font-weight: 500;
}
.adm-log-head svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.log-tail {
  margin: 0; padding: 0.75rem; max-height: 16rem; overflow: auto; border: 0; border-radius: 0; background: transparent;
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.55; color: var(--foreground);
  white-space: pre-wrap; word-break: break-all;
}

/* ============================== 5. Jadval kartalari (data-table) ============================== */
/* Jadval satr qoidalari (sticky sarlavha, hover, num) — components.css'da. Bu yerda faqat pastki qator va sahifalash boshqaruvi. */
/* Uzun jadval sahifa bilan birga aylanadi (ichki skroll yo'q); overflow: clip skroll-konteyner yaratmaydi, shuning uchun sticky sarlavha #page'ga yopishadi */
.adm-page .table-wrap.adm-scroll { overflow: clip; }
/* #page (shell.css) 24px padding beradi: sticky ofsetiga shu qo'shiladi — sarlavha #page chetiga tekis yopishishi uchun -24px */
.adm-page .table-wrap.adm-scroll thead th { top: -1.5rem; }
.adm-foot { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1.5rem; }
.adm-rpp { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.adm-rpp select { width: auto; height: 2rem; padding-block: 0.125rem; }
.adm-page .table-footer .pager { flex-wrap: nowrap; }
td.adm-muted, .adm-muted { color: var(--muted-foreground); }
td.adm-nowrap, th.adm-nowrap { white-space: nowrap; }

/* ============================== 6. Viloyatlar ============================== */
.rg-name { font-weight: 500; }
.rg-name-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
/* dashboard-01 jadvalidagi tahrirlanadigan input: fon/chegara yo'q, hover'da input/30, fokusda chegara va fon */
.adm-page .rg-pop {
  width: 7.5rem; height: 2rem; padding: 0 0.5rem; text-align: right; font-variant-numeric: tabular-nums;
  border-color: transparent; background-color: transparent; box-shadow: none;
}
.adm-page .rg-pop:hover { border-color: transparent; background-color: color-mix(in oklab, var(--input) 30%, transparent); }
.adm-page .rg-pop:focus-visible { border-color: var(--focus-border); background-color: var(--background); box-shadow: var(--ring-glow); }
.dark .adm-page .rg-pop:focus-visible { background-color: color-mix(in oklab, var(--input) 30%, transparent); }
.adm-page .rg-pop.is-saved { border-color: color-mix(in oklab, var(--success) 60%, transparent); background-color: var(--success-muted); }
.adm-page .rg-pop::placeholder { color: var(--muted-foreground); }
.rg-pop::-webkit-outer-spin-button, .rg-pop::-webkit-inner-spin-button { margin: 0; }

.adm-sinks { display: flex; flex-direction: column; gap: 0.75rem; }
.adm-sinks .table-wrap { max-width: 32rem; }
.adm-sinks-top { margin-top: 0; }
/* Spinner birlamchi tugma ustida: primary-foreground ranglari (asosiy .spinner foreground bilan chizadi — primary fonda ko'rinmas) */
.adm-page .btn-primary .spinner {
  border-color: color-mix(in oklab, var(--primary-foreground) 30%, transparent); border-top-color: var(--primary-foreground);
}
.adm-more { margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; }

/* ============================== 7. Foydalanuvchilar ============================== */
.usr-user { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.usr-avatar {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--muted); color: var(--muted-foreground-strong); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
}
.usr-owner .usr-avatar { background: var(--info-muted); color: var(--info); }
.usr-text { display: flex; flex-direction: column; min-width: 0; }
.usr-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-weight: 500; line-height: 1.3; }
.usr-email { color: var(--muted-foreground); font-size: 0.8125rem; line-height: 1.3; overflow-wrap: anywhere; }
.usr-status svg.ok { color: var(--success); }
.usr-status svg.off { color: var(--destructive-text); }
.usr-status.badge { color: var(--muted-foreground-strong); }
tr.usr-inactive .usr-user { opacity: 0.65; }
td.usr-actions, th.usr-actions { width: 3rem; text-align: right; }
.usr-actions .btn { color: var(--muted-foreground); }
.usr-actions .btn:hover, .usr-actions .btn[aria-expanded="true"] { color: var(--foreground); background-color: var(--accent); }

/* Dialog ichidagi formalar: Dialog tavsifi + maydonlar + pastki qator */
.usr-form { display: flex; flex-direction: column; }
.usr-form .modal-actions { margin-top: 0; }
.usr-check + .modal-actions { margin-top: 1.25rem; }
.usr-form .modal-description { margin-bottom: 1rem; }
.usr-check { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.usr-check input { margin-top: 0.125rem; }
.usr-check-text { display: flex; flex-direction: column; gap: 0.125rem; }
.usr-check-title { font-size: 0.875rem; font-weight: 500; line-height: 1.25; color: var(--foreground); }
.usr-form .modal-actions .btn, .usr-confirm .modal-actions .btn { min-width: 5.5rem; }