/* Stickify admin panel — Unfold ustidan qo'shimcha dizayn.
   Ranglar Unfold o'zgaruvchilaridan olinadi (--color-primary-*, --color-base-*),
   shuning uchun yorug' va qorong'i rejimda ham mos ishlaydi. */

:root {
    --stk-radius: 14px;
    --stk-card-bg: #fff;
    --stk-card-border: var(--color-base-200);
    --stk-muted: var(--color-base-500);
    --stk-strong: var(--color-base-900);
    --stk-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 4px 16px rgb(16 24 40 / .05);
    --stk-shadow-hover: 0 2px 4px rgb(16 24 40 / .06), 0 12px 28px rgb(16 24 40 / .09);
}

.dark {
    --stk-card-bg: var(--color-base-900);
    --stk-card-border: var(--color-base-800);
    --stk-muted: var(--color-base-400);
    --stk-strong: var(--color-base-100);
    --stk-shadow: none;
    --stk-shadow-hover: 0 8px 24px rgb(0 0 0 / .35);
}

/* ---------- Umumiy: yumshoq fon, yumaloq kartochkalar ---------- */

html:not(.dark) body {
    background: linear-gradient(180deg, var(--color-primary-50) 0, var(--color-base-50) 320px);
    background-attachment: fixed;
}

#content .rounded-default,
#changelist-form .rounded-default {
    border-radius: var(--stk-radius);
}

/* Yon menyu: faol band — brend rangida yumshoq fon */
#nav-sidebar-inner a.active,
#nav-sidebar a.bg-base-100 {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    font-weight: 600;
}

.dark #nav-sidebar-inner a.active,
.dark #nav-sidebar a.bg-base-100 {
    background: color-mix(in oklch, var(--color-primary-500) 18%, transparent);
    color: var(--color-primary-300);
}

/* ---------- Kartochka ---------- */

.stk-card {
    background: var(--stk-card-bg);
    border: 1px solid var(--stk-card-border);
    border-radius: var(--stk-radius);
    box-shadow: var(--stk-shadow);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stk-card__head {
    align-items: center;
    border-bottom: 1px solid var(--stk-card-border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 16px 20px;
}

.stk-card__title {
    color: var(--stk-strong);
    font-size: 15px;
    font-weight: 600;
}

.stk-card__desc {
    color: var(--stk-muted);
    font-size: 12.5px;
    margin-top: 2px;
}

.stk-card__body {
    flex: 1;
    padding: 16px 20px;
    position: relative;
}

.stk-grid {
    display: grid;
    gap: 20px;
}

.stk-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.stk-grid--charts { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

@media (max-width: 1024px) {
    .stk-grid--charts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Xush kelibsiz banneri ---------- */

.stk-hero {
    background:
        radial-gradient(circle at 92% -20%, rgb(255 255 255 / .22), transparent 45%),
        radial-gradient(circle at 10% 130%, rgb(255 255 255 / .12), transparent 40%),
        linear-gradient(120deg, var(--color-primary-600), var(--color-primary-800));
    border-radius: calc(var(--stk-radius) + 4px);
    box-shadow: 0 10px 30px -12px color-mix(in oklch, var(--color-primary-700) 70%, transparent);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    padding: 28px 32px;
    position: relative;
}

.stk-hero__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    opacity: .8;
    text-transform: uppercase;
}

.stk-hero__title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin: 6px 0 6px;
}

.stk-hero__text {
    font-size: 14px;
    max-width: 560px;
    opacity: .88;
}

.stk-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------- Tugmalar ---------- */

.stk-btn {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    font-size: 13.5px;
    font-weight: 600;
    gap: 8px;
    line-height: 1;
    padding: 11px 16px;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}

.stk-btn:hover { transform: translateY(-1px); }
.stk-btn .material-symbols-outlined { font-size: 18px; }

.stk-btn--light { background: #fff; color: var(--color-primary-700); box-shadow: 0 2px 8px rgb(0 0 0 / .12); }
.stk-btn--glass { background: rgb(255 255 255 / .16); color: #fff; border: 1px solid rgb(255 255 255 / .28); }
.stk-btn--glass:hover { background: rgb(255 255 255 / .24); }
.stk-btn--primary { background: var(--color-primary-600); color: #fff; }
.stk-btn--primary:hover { background: var(--color-primary-700); }
.stk-btn--ghost { background: transparent; border: 1px solid var(--stk-card-border); color: var(--stk-strong); }
.stk-btn--ghost:hover { background: var(--color-base-100); }
.dark .stk-btn--ghost:hover { background: var(--color-base-800); }
.stk-btn--danger { background: #dc2626; color: #fff; }
.stk-btn--danger:hover { background: #b91c1c; }

/* ---------- KPI kartochkalar ---------- */

.stk-kpi {
    background: var(--stk-card-bg);
    border: 1px solid var(--stk-card-border);
    border-radius: var(--stk-radius);
    box-shadow: var(--stk-shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    position: relative;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

a.stk-kpi:hover {
    border-color: color-mix(in oklch, var(--stk-accent) 45%, var(--stk-card-border));
    box-shadow: var(--stk-shadow-hover);
    transform: translateY(-2px);
}

.stk-kpi__top { align-items: center; display: flex; justify-content: space-between; }

.stk-kpi__icon {
    align-items: center;
    background: color-mix(in oklch, var(--stk-accent) 14%, transparent);
    border-radius: 12px;
    color: var(--stk-accent);
    display: flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.stk-kpi__icon .material-symbols-outlined { font-size: 24px; }

.stk-kpi__arrow {
    color: var(--stk-muted);
    font-size: 18px !important;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}

a.stk-kpi:hover .stk-kpi__arrow { opacity: 1; transform: translateX(2px); }

.stk-kpi__label { color: var(--stk-muted); font-size: 13px; font-weight: 500; }

.stk-kpi__value {
    color: var(--stk-strong);
    font-size: 28px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-top: 4px;
}

.stk-kpi__footer { color: var(--stk-muted); font-size: 12.5px; }

.stk-accent-teal   { --stk-accent: var(--color-primary-600); }
.stk-accent-indigo { --stk-accent: #6366f1; }
.stk-accent-amber  { --stk-accent: #d97706; }
.stk-accent-rose   { --stk-accent: #e11d48; }
.stk-accent-sky    { --stk-accent: #0284c7; }
.dark .stk-accent-teal { --stk-accent: var(--color-primary-400); }

.stk-trend {
    border-radius: 999px;
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    margin-right: 6px;
    padding: 2px 8px;
}

.stk-trend--up { background: #dcfce7; color: #15803d; }
.stk-trend--down { background: #ffe4e6; color: #be123c; }
.dark .stk-trend--up { background: rgb(34 197 94 / .15); color: #4ade80; }
.dark .stk-trend--down { background: rgb(244 63 94 / .15); color: #fb7185; }

/* ---------- Ro'yxatlar (dashboard jadvallari) ---------- */

.stk-list { display: flex; flex-direction: column; }

.stk-row {
    align-items: center;
    border-bottom: 1px solid var(--stk-card-border);
    display: flex;
    gap: 12px;
    padding: 10px 0;
}

.stk-row:last-child { border-bottom: 0; }
.stk-row__main { flex: 1; min-width: 0; }

.stk-row__title {
    color: var(--stk-strong);
    display: block;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.stk-row__title:hover { color: var(--color-primary-600); }
.stk-row__sub { color: var(--stk-muted); font-size: 12px; margin-top: 2px; }

.stk-avatar {
    align-items: center;
    background: color-mix(in oklch, var(--stk-accent, var(--color-primary-600)) 14%, transparent);
    border-radius: 999px;
    color: var(--stk-accent, var(--color-primary-700));
    display: flex;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    text-transform: uppercase;
    width: 34px;
}

.stk-pill {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    white-space: nowrap;
}

.stk-pill--ok { background: #dcfce7; color: #15803d; }
.stk-pill--warn { background: #fef3c7; color: #b45309; }
.stk-pill--bad { background: #ffe4e6; color: #be123c; }
.dark .stk-pill--ok { background: rgb(34 197 94 / .15); color: #4ade80; }
.dark .stk-pill--warn { background: rgb(245 158 11 / .15); color: #fbbf24; }
.dark .stk-pill--bad { background: rgb(244 63 94 / .15); color: #fb7185; }

/* ---------- Bo'sh holat ---------- */

.stk-empty {
    align-items: center;
    color: var(--stk-muted);
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    padding: 28px 12px;
    text-align: center;
}

.stk-empty .material-symbols-outlined {
    background: var(--color-base-100);
    border-radius: 999px;
    color: var(--color-base-400);
    font-size: 26px;
    padding: 12px;
}

.dark .stk-empty .material-symbols-outlined { background: var(--color-base-800); }
.stk-empty__title { color: var(--stk-strong); font-weight: 600; }
.stk-empty--overlay { inset: 0; position: absolute; background: color-mix(in oklch, var(--stk-card-bg) 70%, transparent); }

/* ---------- API kalit va ulanish ma'lumotlari ---------- */

.stk-key {
    align-items: stretch;
    display: flex;
    gap: 10px;
}

.stk-key input,
.stk-code {
    background: var(--color-base-50);
    border: 1px solid var(--stk-card-border);
    border-radius: 10px;
    color: var(--stk-strong);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
}

.dark .stk-key input,
.dark .stk-code { background: var(--color-base-950, #0b1120); }

.stk-key input { flex: 1; min-width: 0; padding: 12px 14px; }

.stk-code {
    line-height: 1.6;
    margin: 0;
    overflow-x: auto;
    padding: 14px 16px;
    white-space: pre;
}

.stk-alert {
    border-radius: 12px;
    display: flex;
    gap: 12px;
    padding: 14px 16px;
}

.stk-alert--warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.stk-alert--ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.dark .stk-alert--warn { background: rgb(245 158 11 / .1); border-color: rgb(245 158 11 / .3); color: #fcd34d; }
.dark .stk-alert--ok { background: rgb(34 197 94 / .1); border-color: rgb(34 197 94 / .3); color: #86efac; }

.stk-endpoints { border-collapse: collapse; width: 100%; }
.stk-endpoints td { border-bottom: 1px solid var(--stk-card-border); padding: 10px 8px 10px 0; vertical-align: middle; }
.stk-endpoints tr:last-child td { border-bottom: 0; }
.stk-endpoints code { color: var(--stk-strong); font-size: 13px; }

.stk-method {
    border-radius: 6px;
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    min-width: 46px;
    padding: 3px 6px;
    text-align: center;
}

.stk-method--post { background: #dcfce7; color: #15803d; }
.stk-method--get { background: #e0f2fe; color: #0369a1; }
.dark .stk-method--post { background: rgb(34 197 94 / .15); color: #4ade80; }
.dark .stk-method--get { background: rgb(14 165 233 / .15); color: #7dd3fc; }

.stk-label { color: var(--stk-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 6px; text-transform: uppercase; }
.stk-muted { color: var(--stk-muted); }
.stk-stack { display: flex; flex-direction: column; gap: 20px; }