/* ═══════════════════════════════════════════════════════════════════════════
   Jiyda.eco — boshqaruv paneli.

   Tuzilishi:
     1. Belgilar (tokens)      — rang, oraliq, shrift o'lchamlari
     2. Asos (reset, body)
     3. Ikonkalar
     4. Tuzilma (shell, nav, top, content)
     5. Kartalar va setka
     6. Statistika
     7. Jadval
     8. Nishonlar (badge)
     9. Tugma va forma
    10. Xabarlar
    11. Grafik
    12. Sahifalash
    13. Kirish sahifasi
    14. Maxsus bloklar (banner, rollar, reyting, bo'sh holat)
    15. Mobil

   Qoida: rangni to'g'ridan-to'g'ri yozmaymiz — faqat o'zgaruvchi orqali.
   Shu bilan butun panel rangini bitta joydan o'zgartirib bo'ladi.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Asosiy ko'k (Jiyda brendi) — chuqur navy */
    --g900: #08172F;
    --g800: #0E2450;
    --g700: #163C74;
    --g600: #1E4F9E;
    --g500: #2C6BC0;
    --g400: #4C8FE6;
    --g100: #E4EDFB;
    --g50:  #F1F6FE;

    /* Matn */
    --ink:  #14181A;
    --ink2: #4A5652;
    --ink3: #8C9A93;

    /* Yuza */
    --bg:    #F4F6F5;
    --card:  #FFFFFF;
    --line:  #E4E9E5;
    --line2: #D3DBD6;
    --hover: #F7FAF8;

    /* Holat ranglari */
    --red:    #C62828;
    --red-bg: #FDECEC;
    --amber:    #E06C00;
    --amber-bg: #FFF4E5;
    --blue:    #1461B8;
    --blue-bg: #E8F1FC;

    /* Oraliq */
    --s1: 4px;  --s2: 8px;  --s3: 12px;
    --s4: 16px; --s5: 22px; --s6: 30px;

    /* Burchak */
    --r:  12px;
    --r2: 9px;
    --r3: 7px;

    /* Soya */
    --sh1: 0 1px 2px rgba(16, 32, 22, .05);
    --sh2: 0 3px 10px rgba(16, 32, 22, .07);
    --sh3: 0 12px 34px rgba(16, 32, 22, .14);

    /* Yuza (mavzuga qarab o'zgaradi) */
    --input-bg: #FFFFFF;
    --top-bg:   rgba(255, 255, 255, .86);
    --scroll:   rgba(16, 32, 22, .20);

    --nav-w: 252px;
    color-scheme: light;
}

/* ── Tungi rejim (dark mode) ───────────────────────────────────
   Faqat tokenlar qayta ta'riflanadi — butun panel avtomat moslashadi. */
:root[data-theme="dark"] {
    --g100: #17294A;
    --g50:  #131E31;

    --ink:  #E9EDF4;
    --ink2: #A7B2C4;
    --ink3: #74829A;

    --bg:    #0C111C;
    --card:  #161D2A;
    --line:  #27303F;
    --line2: #354155;
    --hover: #1B2333;

    --red:    #FF7B7B; --red-bg:   #38201F;
    --amber:  #F3AA4E; --amber-bg: #372813;
    --blue:   #63ACFF; --blue-bg:  #16283B;

    --input-bg: #101725;
    --top-bg:   rgba(12, 17, 26, .82);
    --scroll:   rgba(255, 255, 255, .16);

    --sh1: 0 1px 2px rgba(0, 0, 0, .45);
    --sh2: 0 4px 14px rgba(0, 0, 0, .5);
    --sh3: 0 16px 40px rgba(0, 0, 0, .6);

    color-scheme: dark;
}

/* ── 2. Asos ─────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .3s ease, color .3s ease;
}

a { color: inherit; text-decoration: none; }

/* Klaviatura bilan yurgan odam qayerdaligini doim ko'rsin (qulaylik) */
:focus-visible {
    outline: 2px solid var(--g500);
    outline-offset: 2px;
    border-radius: var(--r3);
}

code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .92em;
    background: var(--g50);
    border: 1px solid var(--line);
    padding: 1px 6px;
    border-radius: 5px;
}

/* ── 3. Ikonkalar ────────────────────────────────────────── */
/* Rangi turgan joyidan meros bo'ladi (currentColor), shuning uchun
   alohida rang berish shart emas. */
.ic {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    vertical-align: -3px;
}
.ic-lg { width: 26px; height: 26px; vertical-align: middle; }
/* To'ldirilgan ikonka (baho yulduzlari uchun) */
.ic-fill { fill: currentColor; }

/* Baho yulduzlari */
.stars, .stars-off { display: inline-flex; gap: 1px; vertical-align: middle; }
.stars { color: #F2A600; }
.stars-off { color: var(--line2); }
.stars .ic, .stars-off .ic { width: 14px; height: 14px; vertical-align: 0; }

/* ── 4. Tuzilma ──────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

.side {
    width: var(--nav-w);
    flex: 0 0 var(--nav-w);
    background: var(--g900);
    color: #B9CCE8;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Ingichka o'tkir bo'lmagan aylantirish chizig'i */
.side::-webkit-scrollbar { width: 7px; }
.side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
.side::-webkit-scrollbar-track { background: transparent; }

.brand {
    display: flex;
    gap: var(--s3);
    align-items: center;
    padding: 18px var(--s4);
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: sticky;
    top: 0;
    background: var(--g900);
    z-index: 2;
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--g500), var(--g700));
    color: #fff;
}
.brand-mark .ic { width: 20px; height: 20px; vertical-align: 0; }
.brand-name { color: #fff; font-weight: 800; font-size: 16.5px; letter-spacing: -.3px; }
.brand-name span { color: var(--g400); }
.brand-sub { font-size: 10.5px; color: #7391BE; margin-top: 1px; letter-spacing: .2px; }

.nav { padding: var(--s2) var(--s2) var(--s6); }
.nav-g {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: #6182AD;
    padding: var(--s4) 10px var(--s1);
    font-weight: 700;
}
.nav-i {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--r2);
    font-size: 13.5px;
    color: #B9CCE8;
    transition: background .14s ease, color .14s ease;
    position: relative;
}
.nav-i .ic { width: 17px; height: 17px; opacity: .85; vertical-align: 0; }
.nav-i:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-i:hover .ic { opacity: 1; }
.nav-i.on {
    background: linear-gradient(100deg, var(--g600), var(--g700));
    color: #fff;
    font-weight: 600;
    box-shadow: var(--sh1);
}
.nav-i.on .ic { opacity: 1; }
/* Faol bo'limning chap tomonida yorqin chiziq */
.nav-i.on::before {
    content: "";
    position: absolute;
    left: -8px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--g400);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.top {
    height: 62px;
    background: var(--top-bg);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--s5);
    position: sticky;
    top: 0;
    z-index: 20;
    gap: var(--s3);
}
.top-title { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.top-user { display: flex; align-items: center; gap: var(--s3); }
.who { text-align: right; line-height: 1.3; }
.who-name { font-weight: 600; font-size: 13px; }
.who-role {
    font-size: 11px;
    color: var(--ink3);
    display: flex; align-items: center; gap: 4px;
    justify-content: flex-end;
}
.who-role .ic { width: 12px; height: 12px; vertical-align: 0; }

.content { padding: var(--s5); flex: 1; max-width: 1500px; width: 100%; }

/* ── 5. Kartalar va setka ────────────────────────────────── */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 18px;
    box-shadow: var(--sh1);
}
.card + .card { margin-top: var(--s4); }
.card-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s4);
    flex-wrap: wrap;
}
.card-t {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
    display: flex; align-items: center; gap: var(--s2);
}
.card-t .ic { color: var(--g600); }

/* Diqqatni tortadigan karta (masalan rol berish) */
.card-hi { border-color: var(--g400); box-shadow: 0 0 0 3px rgba(44,107,192,.09), var(--sh1); }

.grid { display: grid; gap: var(--s4); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── 6. Statistika ───────────────────────────────────────── */
.stat {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s4);
    box-shadow: var(--sh1);
    transition: box-shadow .16s ease, transform .16s ease;
}
.stat:hover { box-shadow: var(--sh2); transform: translateY(-1px); }
.stat-l {
    font-size: 12px;
    color: var(--ink2);
    display: flex; gap: 7px; align-items: center;
    font-weight: 600;
}
.stat-l .ic { width: 15px; height: 15px; color: var(--g600); vertical-align: 0; }
.stat-v {
    font-size: 27px;
    font-weight: 800;
    margin-top: 6px;
    letter-spacing: -.7px;
    font-variant-numeric: tabular-nums;
}
.stat-s { font-size: 11.5px; color: var(--ink3); margin-top: 2px; }
.stat.accent {
    background: linear-gradient(140deg, var(--g700), var(--g500));
    border-color: transparent;
}
.stat.accent .stat-l,
.stat.accent .stat-s { color: rgba(255,255,255,.88); }
.stat.accent .stat-l .ic { color: rgba(255,255,255,.9); }
.stat.accent .stat-v { color: #fff; }

/* ── 7. Jadval ───────────────────────────────────────────── */
.tbl-wrap {
    overflow-x: auto;
    border-radius: var(--r2);
    border: 1px solid var(--line);
}
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th,
table.tbl td {
    padding: 11px var(--s3);
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
table.tbl th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink2);
    background: var(--g50);
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 1;
}
table.tbl th a { display: inline-flex; gap: var(--s1); align-items: center; }
table.tbl th a:hover { color: var(--g600); }
table.tbl tbody tr { transition: background .12s ease; }
table.tbl tbody tr:hover { background: var(--hover); }
table.tbl tbody tr:last-child td { border-bottom: none; }
/* Sonlar ustma-ust tik tursin */
table.tbl td.num { font-variant-numeric: tabular-nums; text-align: right; }

.t-strong { font-weight: 600; }
.t-mut { color: var(--ink3); font-size: 12px; }

/* Qatordagi amal tugmalari */
.row-act { display: flex; gap: 6px; align-items: center; }

/* ── 8. Nishonlar ────────────────────────────────────────── */
.bdg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: var(--g100);
    color: var(--g700);
    line-height: 1.5;
    white-space: nowrap;
}
.bdg .ic { width: 12px; height: 12px; vertical-align: 0; }
.bdg + .bdg { margin-left: var(--s1); }
.bdg.gray  { background: #ECEFED;       color: var(--ink2); }
.bdg.red   { background: var(--red-bg);   color: var(--red); }
.bdg.amber { background: var(--amber-bg); color: var(--amber); }
.bdg.blue  { background: var(--blue-bg);  color: var(--blue); }

/* ── 9. Tugma va forma ───────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r2);
    border: 1px solid var(--line2);
    background: var(--card);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    white-space: nowrap;
    transition: background .14s ease, border-color .14s ease,
                color .14s ease, box-shadow .14s ease;
}
.btn:hover { border-color: var(--g500); color: var(--g700); background: var(--g50); }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 15px; height: 15px; vertical-align: 0; }

.btn-p { background: var(--g600); border-color: var(--g600); color: #fff; box-shadow: var(--sh1); }
.btn-p:hover { background: var(--g700); border-color: var(--g700); color: #fff; }
.btn-d { background: var(--red); border-color: var(--red); color: #fff; }
.btn-d:hover { background: #9B1B1B; border-color: #9B1B1B; color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--g50); border-color: var(--line); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--r3); }
.btn-sm .ic { width: 13px; height: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

input[type=text], input[type=email], input[type=password],
input[type=search], input[type=number], input[type=date],
input[type=datetime-local], select, textarea {
    padding: 9px var(--s3);
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    font-size: 13.5px;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--ink);
    width: 100%;
    transition: border-color .14s ease, box-shadow .14s ease, background-color .3s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--g500);
    box-shadow: 0 0 0 3px rgba(44,107,192,.13);
}
input::placeholder { color: var(--ink3); }
textarea { min-height: 90px; resize: vertical; }

/* Rang tanlash maydoni */
.in-color { height: 38px; padding: 3px; cursor: pointer; }

/* Fayl tanlash */
input[type=file] {
    width: 100%;
    font-size: 13px;
    font-family: inherit;
    color: var(--ink2);
}
input[type=file]::file-selector-button {
    padding: 7px 13px;
    margin-right: 10px;
    border-radius: var(--r3);
    border: 1px solid var(--line2);
    background: var(--card);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}
input[type=file]::file-selector-button:hover {
    border-color: var(--g500); color: var(--g700); background: var(--g50);
}

label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink2);
    display: block;
    margin-bottom: 5px;
}
.hint { font-size: 11.5px; color: var(--ink3); margin-top: 4px; font-weight: 400; }
.field { margin-bottom: var(--s4); }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin-bottom: 0; min-width: 150px; }
.filters .grow { flex: 1; min-width: 220px; }

.chk {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; margin-bottom: 7px; cursor: pointer;
    font-weight: 500; color: var(--ink);
}
.chk input { width: auto; }

.kv {
    display: flex; justify-content: space-between; gap: var(--s4);
    padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--ink2); }
.kv .v { font-weight: 600; text-align: right; display: flex; align-items: center; gap: 6px; }

/* ── 10. Xabarlar ────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    padding: 12px var(--s4);
    border-radius: var(--r2);
    margin-bottom: var(--s4);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
}
.alert .ic { margin-top: 2px; }
.alert.ok   { background: var(--g100);     color: var(--g800); border: 1px solid #A9C6EF; }
.alert.err  { background: var(--red-bg);   color: var(--red);  border: 1px solid #F0AEAE; }
.alert.info { background: var(--blue-bg);  color: var(--blue); border: 1px solid #A8CBF0; }
.alert.warn { background: var(--amber-bg); color: var(--amber);border: 1px solid #F3C48C; }

/* ── 11. Grafik ──────────────────────────────────────────── */
.chart { display: flex; align-items: flex-end; gap: 5px; height: 150px; padding-top: var(--s4); }
.chart-c { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.chart-b {
    width: 100%;
    background: linear-gradient(180deg, var(--g500), var(--g700));
    border-radius: 5px 5px 0 0;
    min-height: 3px;
    position: relative;
    transition: filter .14s ease;
}
.chart-c:hover .chart-b { filter: brightness(1.12); }
.chart-b span {
    position: absolute;
    top: -18px; left: 0; right: 0;
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink2);
    font-variant-numeric: tabular-nums;
}
.chart-x { font-size: 10px; color: var(--ink3); white-space: nowrap; }

/* ── 12. Sahifalash ──────────────────────────────────────── */
.pager {
    display: flex; gap: 6px; align-items: center;
    justify-content: center; margin-top: var(--s4); flex-wrap: wrap;
}
.pager a, .pager span {
    padding: 6px 11px;
    border-radius: var(--r3);
    border: 1px solid var(--line2);
    font-size: 13px;
    background: var(--card);
    font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--g500); color: var(--g700); background: var(--g50); }
.pager .cur { background: var(--g600); color: #fff; border-color: var(--g600); font-weight: 700; }
.pager .off { color: var(--ink3); border-color: transparent; background: transparent; }

/* ── 13. Kirish sahifasi ─────────────────────────────────── */
.login-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--g900) 0%, var(--g700) 55%, var(--g500) 100%);
    padding: 20px;
}
.login-box {
    background: #fff;
    border-radius: 24px;
    padding: 44px 42px;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--sh3);
}
.login-brand { text-align: center; margin-bottom: var(--s5); }
.login-brand .m {
    display: inline-grid; place-items: center;
    width: 88px; height: 88px;
    border-radius: 24px;
    background: linear-gradient(140deg, var(--g500), var(--g800));
    color: #fff;
    box-shadow: 0 14px 34px rgba(30,79,158,.4);
    overflow: hidden;
}
.login-brand .m .ic { width: 52px; height: 52px; vertical-align: 0; }
.login-brand .m-svg  { grid-area: 1 / 1; width: 62%; height: 62%; }
.login-brand .m-logo { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
/* Rasm yuklansa — orqadagi ko'k kvadrat olib tashlanadi (rasm o'zi kvadrat) */
.login-brand .m.has-img { background: none; box-shadow: none; }
.login-brand .n { font-size: 27px; font-weight: 800; margin-top: 14px; letter-spacing: -.4px; }
.login-brand .s { margin-top: 3px; }
.login-brand .n span { color: var(--g600); }
.login-brand .s { font-size: 12.5px; color: var(--ink3); }

/* ── 14. Maxsus bloklar ──────────────────────────────────── */

/* Bo'sh holat */
.empty { text-align: center; padding: 56px 20px; color: var(--ink3); }
.empty .e {
    display: inline-grid; place-items: center;
    width: 64px; height: 64px;
    border-radius: 18px;
    background: var(--g50);
    border: 1px solid var(--line);
    color: var(--ink3);
}
.empty .e .ic { width: 30px; height: 30px; vertical-align: 0; }
.empty .t { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: var(--s3); }
.empty .d { font-size: 13px; margin-top: 5px; }

/* Reklama banneri */
.banner {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card);
    box-shadow: var(--sh1);
    display: flex;
    flex-direction: column;
}
.banner-img { position: relative; aspect-ratio: 16 / 7; background: var(--g50); }
.banner-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Rasm ustidagi matn har qanday rasmda o'qilsin — pastdan qoraytiramiz */
.banner-txt {
    position: absolute; inset: auto 0 0 0;
    padding: 14px var(--s4);
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
    color: #fff;
}
.banner-solid {
    padding: 20px var(--s4);
    color: #fff;
    position: relative;
    min-height: 118px;
}
.banner-t { font-size: 16.5px; font-weight: 800; margin-top: 5px; letter-spacing: -.2px; }
.banner-s { font-size: 12.5px; opacity: .92; margin-top: 2px; }
.banner-off { position: absolute; top: 10px; right: 12px; }
.banner-foot {
    padding: var(--s3);
    display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap;
    border-top: 1px solid var(--line);
}
/* Fayl tanlash tugmasi ko'rinishida bo'lsin */
.up-form { display: inline-flex; }
.up-form label { margin: 0; cursor: pointer; }

/* Banner tahrirlash — yopiq turadi, bosilganda ochiladi */
.banner-edit { border-top: 1px solid var(--line); }
.banner-edit summary {
    padding: 10px var(--s3);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink2);
    display: flex; align-items: center; gap: 6px;
    list-style: none;
}
.banner-edit summary::-webkit-details-marker { display: none; }
.banner-edit summary:hover { background: var(--hover); color: var(--g700); }
.banner-edit summary .ic { width: 14px; height: 14px; vertical-align: 0; }
.banner-edit form { padding: 0 var(--s3) var(--s3); }

/* Sotuvchi rollarini tanlash */
.role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.role-opt { cursor: pointer; margin: 0; }
.role-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.role-box {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: var(--s4) var(--s3);
    border: 1.5px solid var(--line2);
    border-radius: var(--r2);
    background: var(--card);
    text-align: center;
    transition: border-color .14s ease, background .14s ease,
                box-shadow .14s ease, color .14s ease;
    color: var(--ink2);
}
.role-box .ic { color: var(--ink3); transition: color .14s ease; }
.role-name { font-size: 12.5px; font-weight: 600; }
.role-opt:hover .role-box { border-color: var(--g400); background: var(--g50); }
/* Tanlangan rol aniq ko'rinsin */
.role-opt input:checked + .role-box {
    border-color: var(--g600);
    background: var(--g100);
    color: var(--g800);
    box-shadow: 0 0 0 3px rgba(44,107,192,.12);
}
.role-opt input:checked + .role-box .ic { color: var(--g600); }
.role-opt input:focus-visible + .role-box { outline: 2px solid var(--g500); outline-offset: 2px; }

/* Davlat xizmatlari — turlar plitkasi */
.gov-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 9px;
}
.gov-cat {
    display: flex; align-items: center; gap: 9px;
    padding: 11px var(--s3);
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    background: var(--card);
    transition: border-color .14s ease, background .14s ease, color .14s ease;
    min-width: 0;
}
.gov-cat .ic { color: var(--ink3); transition: color .14s ease; }
.gov-cat-n {
    font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gov-cat-c {
    font-size: 11px; font-weight: 800;
    background: #ECEFED; color: var(--ink2);
    padding: 1px 7px; border-radius: 20px;
}
.gov-cat:hover { border-color: var(--g400); background: var(--g50); }
.gov-cat:hover .ic { color: var(--g600); }
.gov-cat.on {
    border-color: var(--g600); background: var(--g100); color: var(--g800);
    box-shadow: 0 0 0 3px rgba(44,107,192,.10);
}
.gov-cat.on .ic { color: var(--g600); }
.gov-cat.on .gov-cat-c { background: var(--g600); color: #fff; }

/* Reyting o'rni (1, 2, 3 — medal o'rniga) */
.rank {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-size: 11.5px; font-weight: 800;
    background: #ECEFED; color: var(--ink2);
}
.rank-1 { background: #FDF0C8; color: #8A6100; }
.rank-2 { background: #ECEFF1; color: #56646B; }
.rank-3 { background: #F7E3D2; color: #8A5326; }

/* ── 15. Mobil ───────────────────────────────────────────── */
.menu-btn { display: none; }
.overlay { display: none; }

@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 780px) {
    .g4, .g3, .g2 { grid-template-columns: 1fr; }

    .menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px; height: 38px;
        border-radius: var(--r2);
        border: 1px solid var(--line2);
        background: var(--card);
        cursor: pointer;
        color: var(--ink);
        flex: 0 0 auto;
    }
    .menu-btn .ic { width: 19px; height: 19px; vertical-align: 0; }

    .side {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 268px;
        transform: translateX(-100%);
        transition: transform .24s cubic-bezier(.4, 0, .2, 1);
        z-index: 60;
        box-shadow: var(--sh3);
    }
    .side.open { transform: translateX(0); }

    .overlay {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 55;
        opacity: 0;
        pointer-events: none;
        transition: opacity .24s ease;
    }
    .overlay.show { opacity: 1; pointer-events: auto; }

    .top { padding: 0 var(--s3); }
    .top-title { font-size: 15px; flex: 1; min-width: 0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .who { display: none; }
    .content { padding: var(--s3); }
    .card { padding: var(--s4); }
    .filters .field, .filters .grow { min-width: 100%; }
    .stat-v { font-size: 23px; }
}

/* Harakatni kamaytirishni so'raganlarga hurmat (qulaylik) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Suv navbati — jadval ichidagi kichik tanlov */
.water-sel {
    width: auto; min-width: 130px;
    padding: 4px 8px; font-size: 12px;
    border-radius: var(--r3);
}

/* ── Ferma kameralari ────────────────────────────────────── */
.cam-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--card);
    box-shadow: var(--sh1);
}
.cam-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #10201A;
    display: grid; place-items: center;
}
.cam-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-none { color: rgba(255,255,255,.35); }
.cam-badge { position: absolute; top: 8px; right: 8px; }
.cam-body { padding: var(--s3); }

.cam-player {
    width: 100%;
    max-height: 70vh;
    background: #000;
    border-radius: var(--r2);
    display: block;
}
.cam-snap {
    width: 100%;
    border-radius: var(--r2);
    display: block;
    margin-top: var(--s2);
}

/* ── Faoliyat: amallar reytingi ──────────────────────────── */
.act-row {
    display: flex; align-items: center; gap: var(--s3);
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
}
.act-row:last-child { border-bottom: none; }
.act-row:hover .act-name { color: var(--g700); }
.act-name {
    flex: 0 0 175px; font-size: 12.5px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.act-bar {
    flex: 1; height: 7px; border-radius: 4px;
    background: var(--g50); overflow: hidden; min-width: 40px;
}
.act-bar span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--g500), var(--g700));
    border-radius: 4px;
}
.act-num {
    flex: 0 0 62px; text-align: right;
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--ink2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRO UX — animatsiya, toast, skeleton, klaviatura, planshet
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mavzu (tungi rejim) tugmasi ─────────────────────────── */
.theme-btn {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--r2);
    border: 1px solid var(--line2);
    background: var(--card);
    color: var(--ink2);
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease, transform .18s ease;
    flex: 0 0 auto;
}
.theme-btn:hover { color: var(--g600); border-color: var(--g500); background: var(--g50); }
.theme-btn:active { transform: scale(.92) rotate(-8deg); }
.theme-btn .ic { width: 18px; height: 18px; vertical-align: 0; }
/* Quyosh yorug'da, oy qorong'ida */
.theme-btn .ic-sun { display: block; }
.theme-btn .ic-moon { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ic-moon { display: block; }

/* ── Klaviatura yorlig'i belgisi ─────────────────────────── */
kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px; font-weight: 700;
    line-height: 1.5;
    color: var(--ink2);
    background: var(--g50);
    border: 1px solid var(--line2);
    border-bottom-width: 2px;
    border-radius: 6px;
    min-width: 18px; text-align: center;
}

/* ── Kirish animatsiyalari ───────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .content > .card,
    .content > .grid > .card,
    .content > .grid > .stat {
        animation: rise .34s cubic-bezier(.2, .7, .3, 1) both;
    }
    /* Setka elementlari ketma-ket chiqsin */
    .content > .grid > *:nth-child(2) { animation-delay: .04s; }
    .content > .grid > *:nth-child(3) { animation-delay: .08s; }
    .content > .grid > *:nth-child(4) { animation-delay: .12s; }

    @keyframes rise {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .alert { animation: rise .28s ease both; }
    table.tbl tbody tr { transition: background .12s ease, transform .12s ease; }
    /* Bosilganda tugma bosilish hissi */
    .btn, .theme-btn, .nav-i { will-change: transform; }
}

/* Sirg'aluvchi tugma yaltirashi (primary) */
.btn-p { position: relative; overflow: hidden; }
.btn-p::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .5s ease;
}
.btn-p:hover::after { transform: translateX(120%); }

/* ── Toast bildirishnomalar ──────────────────────────────── */
#toast-host {
    position: fixed; bottom: 22px; right: 22px;
    z-index: 300;
    display: flex; flex-direction: column; gap: 10px;
    align-items: flex-end;
    pointer-events: none;
}
.toast-item {
    pointer-events: auto;
    display: flex; align-items: center; gap: 9px;
    padding: 12px 16px;
    border-radius: var(--r2);
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--sh3);
    font-size: 13.5px; font-weight: 600;
    color: var(--ink);
    max-width: 360px;
    animation: toast-in .3s cubic-bezier(.2, .8, .2, 1) both;
}
.toast-item.out { animation: toast-out .25s ease forwards; }
.toast-item .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.toast-item.ok  { border-left: 3px solid var(--g500); }
.toast-item.ok .ic  { color: var(--g600); }
.toast-item.err { border-left: 3px solid var(--red); }
.toast-item.err .ic { color: var(--red); }
.toast-item.info .ic { color: var(--blue); }
@keyframes toast-in  { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(40px) scale(.96); } }

/* ── Skeleton yuklanish ──────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--line) 25%, var(--hover) 37%, var(--line) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease infinite;
    border-radius: var(--r3);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Ingichka aylantirish chizig'i (kontent) ─────────────── */
.content::-webkit-scrollbar,
.tbl-wrap::-webkit-scrollbar,
.cart-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.content::-webkit-scrollbar-thumb,
.tbl-wrap::-webkit-scrollbar-thumb,
.cart-wrap::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 5px; }
* { scrollbar-color: var(--scroll) transparent; }

/* ── Yaxshilangan fokus (klaviatura foydalanuvchisi) ─────── */
.btn:focus-visible, .nav-i:focus-visible, .theme-btn:focus-visible {
    outline: 2px solid var(--g500); outline-offset: 2px;
}

/* ── Planshet (1100–781px) ───────────────────────────────── */
@media (max-width: 1100px) and (min-width: 781px) {
    .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :root { --nav-w: 220px; }
}

/* Tungi rejimda tanlangan matn */
:root[data-theme="dark"] ::selection { background: var(--g600); color: #fff; }
:root[data-theme="dark"] img:not([src*=".svg"]) { filter: brightness(.94); }

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM KIRISH SAHIFASI — animatsiyali fon
   ═══════════════════════════════════════════════════════════════════════════ */
.login-wrap {
    position: relative;
    overflow: hidden;
    /* Chuqur, jonli navy-ko'k fon */
    background: linear-gradient(135deg, #06122A 0%, #0E2450 40%, #163C74 75%, #2C6BC0 100%);
}
.login-wrap > .login-box { position: relative; z-index: 3; }

/* Fon qatlami */
.login-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* Aurora yorug'liklari — sekin suzadi */
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; mix-blend-mode: screen; }
.orb.o1 { width: 480px; height: 480px; top: -140px; left: -90px;
    background: radial-gradient(circle, #7FB4F5, transparent 70%); animation: drift1 17s ease-in-out infinite; }
.orb.o2 { width: 560px; height: 560px; bottom: -180px; right: -140px;
    background: radial-gradient(circle, #3A82E0, transparent 70%); animation: drift2 21s ease-in-out infinite; }
.orb.o3 { width: 380px; height: 380px; top: 38%; left: 52%;
    background: radial-gradient(circle, #8EC5F0, transparent 70%); animation: drift3 25s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px,50px) scale(1.18); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px,-40px) scale(1.12); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,60px) scale(.88); } }

/* Yumshoq nur nuqtalari (yulduzchalar) */
.login-bg::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.5px 1.5px at 70% 65%, rgba(255,255,255,.4), transparent),
        radial-gradient(2px 2px at 45% 80%, rgba(255,255,255,.35), transparent),
        radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,255,255,.45), transparent),
        radial-gradient(1.5px 1.5px at 30% 70%, rgba(255,255,255,.3), transparent);
    animation: twinkle 5s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: .5; } 50% { opacity: .9; } }

/* Suzuvchi barglar */
.leaf-f { position: absolute; bottom: -60px; color: rgba(255,255,255,.16); animation: floatUp linear infinite; }
.leaf-f svg { width: 100%; height: 100%; display: block; }
@keyframes floatUp {
    from { transform: translateY(0) rotate(0); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    to   { transform: translateY(-115vh) rotate(340deg); opacity: 0; }
}

/* Login box — oyna effekti + kirish animatsiyasi */
.login-box {
    background: rgba(255,255,255,.95);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border: 1px solid rgba(255,255,255,.6);
    animation: boxIn .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes boxIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }

.login-brand .m {
    animation: logoFloat 4s ease-in-out infinite;
    box-shadow: 0 12px 30px rgba(44,107,192,.45);
}
@keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* Logo atrofida yumshoq halqa */
.login-brand .m::after {
    content: ""; position: absolute; inset: -6px; border-radius: 20px;
    border: 2px solid rgba(255,255,255,.35); animation: ring 2.6s ease-out infinite;
}
.login-brand .m { position: relative; }
@keyframes ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .orb, .leaf-f, .login-box, .login-brand .m, .login-brand .m::after, .login-bg::after { animation: none !important; }
    .leaf-f { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QULAY O'LCHAMLAR — sensorli monoblok va sichqoncha uchun
   ═══════════════════════════════════════════════════════════════════════════ */
.btn { padding: 9px 16px; }
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=date], input[type=datetime-local], select, textarea {
    padding: 11px 13px; font-size: 14px;
}
.nav-i { padding: 11px 11px; font-size: 14px; }
.nav-i .ic { width: 18px; height: 18px; }
table.tbl th, table.tbl td { padding: 13px 14px; }
table.tbl { font-size: 13.5px; }
label { font-size: 13px; }

/* Sof sensorli qurilma (barmoq bilan) — yanada kattaroq tugmalar */
@media (pointer: coarse) {
    .btn { padding: 13px 20px; font-size: 14.5px; }
    .btn-sm { padding: 9px 13px; font-size: 13px; }
    input[type=text], input[type=email], input[type=password], input[type=search],
    input[type=number], input[type=date], input[type=datetime-local], select, textarea {
        padding: 14px 14px; font-size: 15.5px;
    }
    .nav-i { padding: 14px 12px; font-size: 15px; }
    .nav-i .ic { width: 20px; height: 20px; }
    table.tbl th, table.tbl td { padding: 16px 14px; font-size: 14.5px; }
    .chk { font-size: 15px; }
    .chk input { width: 20px; height: 20px; }
    .role-box { padding: 20px 14px; }
    .op-box, .pm-box { padding: 15px 6px; }
    .theme-btn, .menu-btn { width: 44px; height: 44px; }
}