/*
  Boshqaruv paneli uchun qo'shimcha uslublar.

  ⚠️ Nega o'z faylimiz kerak: Unfold TAYYOR yig'ilgan Tailwind CSS bilan
  keladi — unda faqat o'zi ishlatadigan sinflar bor. Shablonga `lg:w-80`
  yoki `lg:col-span-2` kabi sinf yozsak, u CSS'da umuman bo'lmasligi mumkin
  va qoida JIMGINA ishlamaydi (aynan shunday bo'ldi: ustunlar kengligi
  e'tiborsiz qoldirilib, panel qiyshayib ketdi).

  Shuning uchun o'z tartibimiz `hs-` prefiksi bilan shu yerda yoziladi.

  ⚠️ Ranglar `var(--color-primary-600)` ko'rinishida, `rgb(var(...))` EMAS.
  Unfold o'zgaruvchilarda TO'LIQ rang saqlaydi (`rgb(124, 58, 237)`), eski
  Tailwind'dagidek "124 58 237" triplet emas. `rgb()` ichiga o'ralsa
  `rgb(rgb(...))` bo'lib yaroqsiz chiqadi va brauzer qoidani jimgina
  tashlab ketadi — tugma oq fonda oq matn bo'lib ko'rinmay qolgan edi.
*/

/* Ko'rsatkich kartochkalari — ekran kengligiga qarab o'zi joylashadi.
   Media so'rovlarsiz: minmax() bir xil natijani kamroq kod bilan beradi. */
.hs-kpis {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.hs-kpi {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.hs-kpi__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hs-kpi__value {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 0.25rem;
}

.hs-kpi__hint {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.hs-kpi__icon {
  align-items: center;
  background: var(--color-primary-50);
  border-radius: 10px;
  color: var(--color-primary-600);
  display: flex;
  flex-shrink: 0;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

/* Asosiy ikki ustun: jadval keng, yon panel tor va qat'iy kenglikda. */
.hs-split {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .hs-split {
    /* `minmax(0, 1fr)` — `1fr` emas: aks holda ichidagi keng jadval
       ustunni cho'zib yuborardi va yon panel siqilib qolardi. */
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

/* Statistika jadvali */
.hs-table {
  border-collapse: collapse;
  font-size: 0.875rem;
  width: 100%;
}

.hs-table th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding-bottom: 0.5rem;
  text-align: left;
  text-transform: uppercase;
}

.hs-table td {
  padding: 0.625rem 0;
  vertical-align: middle;
}

.hs-table th:not(:first-child),
.hs-table td:not(:first-child) {
  text-align: right;
}

/* Raqamlar ustunda tik tursin — har xil kenglikdagi raqamlar sakramaydi. */
.hs-num {
  font-variant-numeric: tabular-nums;
}

.hs-table tbody tr {
  border-bottom: 1px solid var(--color-base-200);
}

.hs-table tbody tr:last-child {
  border-bottom: 0;
}

.hs-thumb {
  border-radius: 8px;
  height: 2.25rem;
  object-fit: cover;
  width: 2.25rem;
}

.hs-product-link {
  align-items: center;
  display: flex;
  font-weight: 500;
  gap: 0.625rem;
}

.hs-product-link:hover {
  text-decoration: underline;
}

.hs-rate {
  background: var(--color-primary-50);
  border-radius: 999px;
  color: var(--color-primary-700);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
}

/* Ogohlantirishlar ro'yxati */
.hs-alerts {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  gap: 0.625rem;
}

.hs-alerts li {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hs-alerts .material-symbols-outlined {
  font-size: 18px;
}

/* Tez amallar tugmalari */
.hs-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hs-action {
  align-items: center;
  border-radius: 10px;
  display: flex;
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  transition: background-color 0.15s ease;
}

.hs-action .material-symbols-outlined {
  font-size: 18px;
}

.hs-action--primary {
  background: var(--color-primary-600);
  color: #fff;
  font-weight: 600;
}

.hs-action--primary:hover {
  background: var(--color-primary-700);
}

.hs-action--ghost {
  border: 1px solid var(--color-base-200);
}

.hs-action--ghost:hover {
  background: var(--color-base-50);
}

.hs-empty {
  font-size: 0.875rem;
  padding: 2rem 0;
  text-align: center;
}

/* Qorong'i rejim — Unfold o'zgaruvchilari bilan ishlaydi, lekin ba'zi
   fonlarni qo'lda moslash kerak. */
.dark .hs-kpi__icon {
  background: color-mix(in oklab, var(--color-primary-500) 12%, transparent);
  color: var(--color-primary-400);
}

.dark .hs-rate {
  background: color-mix(in oklab, var(--color-primary-500) 12%, transparent);
  color: var(--color-primary-300);
}

.dark .hs-table tbody tr {
  border-color: var(--color-base-800);
}

.dark .hs-action--ghost {
  border-color: var(--color-base-800);
}

.dark .hs-action--ghost:hover {
  background: var(--color-base-800);
}