/*
 * Monitoring tizimi — dizayn qatlami.
 *
 * "Premium Dark Blue Government Financial Monitoring" uslubi.
 * Nice Admin'ning style.css fayli o'zgartirilmagan; barcha qo'shimchalar
 * va mavzular shu yerda, uning ustiga qo'llanadi.
 *
 * Tuzilishi:
 *   1. Dizayn tokenlari (light / dark)
 *   2. Tipografika
 *   3. Nice Admin ranglarini tokenlarga bog'lash
 *   4. Layout va kartochka masofasi
 *   5. Komponentlar
 *   6. Responsive va chop etish
 */

/* ==========================================================================
   1. Dizayn tokenlari
   ========================================================================== */

:root {
    /* --- Yuzalar: sahifa → sidebar/header → kartochka → input --- */
    --mon-bg: #f4f7fc;
    --mon-sidebar: #ffffff;
    --mon-header: #ffffff;
    --mon-surface: #ffffff;
    --mon-surface-hover: #f7f9fd;
    --mon-surface-2: #f1f5fb;
    --mon-surface-3: #e9eff8;
    --mon-input: #ffffff;
    --mon-input-border: #d4dded;

    --mon-border: #e2e8f2;
    --mon-border-strong: #cdd8ea;

    /* --- Matn ierarxiyasi --- */
    --mon-text: #33415c;          /* asosiy tana matni */
    --mon-heading: #0f2352;       /* sarlavhalar, KPI raqamlari */
    --mon-secondary: #55688c;     /* ikkilamchi ma'lumot */
    --mon-muted: #5e6d88;         /* izohlar, sanalar (WCAG AA) */

    /* --- Semantik ranglar --- */
    --mon-primary: #2563eb;
    --mon-primary-hover: #1d4ed8;
    --mon-primary-soft: #e6edfd;
    --mon-primary-text: #1a4bc4;

    --mon-cyan: #0891b2;
    --mon-cyan-soft: #e0f5fa;
    --mon-cyan-text: #0e7490;

    --mon-success: #0f9d58;
    --mon-success-soft: #e3f6ec;
    --mon-success-text: #0b7a44;

    --mon-warning: #d97706;
    --mon-warning-soft: #fdf1de;
    --mon-warning-text: #a35a05;

    --mon-danger: #dc2626;
    --mon-danger-soft: #fdeaea;
    --mon-danger-text: #b31c1c;

    --mon-neutral-soft: #eaeff7;
    --mon-neutral-text: #46587a;

    /* Ikonka konteyneri */
    --mon-icon-bg: #e6edfd;

    /* Yon menyu holatlari */
    --mon-sidebar-item: transparent;
    --mon-sidebar-item-hover: #eef3fb;
    --mon-sidebar-item-active: #e6edfd;
    --mon-sidebar-text: #55688c;
    --mon-sidebar-text-active: #0f2352;
    --mon-sidebar-icon: #7c8db0;

    /*
     * Grafik seriya ranglari — mavzuga bog'liq.
     * Yorug' fonda to'qroq, to'q ko'k fonda yorqinroq tonlar ishlatiladi;
     * theme.js shu o'zgaruvchilarni o'qib ApexCharts'ga uzatadi.
     */
    --mon-chart-revenue: #2563eb;
    --mon-chart-transactions: #059669;
    --mon-chart-secondary: #0891b2;
    --mon-chart-orange: #ea580c;
    --mon-chart-warning: #d97706;
    --mon-chart-danger: #dc2626;
    --mon-chart-extra: #7c3aed;

    /* --- Soyalar --- */
    --mon-shadow-sm: 0 1px 2px rgba(15, 35, 82, .06);
    --mon-shadow: 0 4px 20px rgba(15, 35, 82, .08);
    --mon-shadow-lg: 0 12px 32px rgba(15, 35, 82, .12);
    --mon-shadow-focus: 0 0 0 3px rgba(37, 99, 235, .2);

    /* --- O'lchamlar --- */
    --mon-radius-sm: 6px;
    --mon-radius: 10px;
    --mon-radius-lg: 14px;
    --mon-card-gap: 24px;

    --mon-transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/*
 * Tungi rejim — "Deep Navy Enterprise".
 * Sof qora ishlatilmaydi; har bir qatlam o'z ko'k tonida.
 */
[data-theme="dark"] {
    /* Qatlamlar: sahifa eng to'q, kartochka eng yorug' */
    --mon-bg: #0f172a;            /* sahifa foni      */
    --mon-sidebar: #111c33;       /* yon panel        */
    --mon-header: #14203a;        /* yuqori panel     */
    --mon-surface: #18243d;       /* kartochka        */
    --mon-surface-hover: #1d2b48; /* kartochka hover  */
    --mon-surface-2: #1b2944;     /* jadval sarlavha  */
    --mon-surface-3: #203253;     /* ko'tarilgan yuza */
    --mon-input: #16233b;         /* input foni       */
    --mon-input-border: #314261;  /* input chegarasi  */

    --mon-border: #2a3a5c;
    --mon-border-strong: #35486e;

    /* Matn — yorqin, WCAG AA dan yuqori */
    --mon-text: #e8eef8;
    --mon-heading: #f8fafc;
    --mon-secondary: #cbd5e1;
    --mon-muted: #94a3b8;

    /* Semantik ranglar — to'q ko'k fonda o'qiladigan yorqin tonlar */
    --mon-primary: #60a5fa;
    --mon-primary-hover: #93c5fd;
    --mon-primary-soft: #1e3a5f;
    --mon-primary-text: #93c5fd;

    --mon-cyan: #22d3ee;
    --mon-cyan-soft: #123c4a;
    --mon-cyan-text: #67e8f9;

    --mon-success: #34d399;
    --mon-success-soft: #10352c;
    --mon-success-text: #6ee7b7;

    --mon-warning: #fbbf24;
    --mon-warning-soft: #3a2e10;
    --mon-warning-text: #fcd34d;

    --mon-danger: #f87171;
    --mon-danger-soft: #3d1d20;
    --mon-danger-text: #fca5a5;

    --mon-neutral-soft: #24334f;
    --mon-neutral-text: #b8c5d9;

    --mon-icon-bg: #203253;

    /*
     * Yon menyu — fon sidebar tonidan biroz yorug'roq, matn oq.
     * Uch daraja: nofaol (#16233b) → hover (#1a2e4a) → faol (#1e3a5f).
     */
    --mon-sidebar-item: #16233b;
    --mon-sidebar-item-hover: #1a2e4a;
    --mon-sidebar-item-active: #1e3a5f;
    --mon-sidebar-text: #e2e8f0;
    --mon-sidebar-text-active: #ffffff;
    --mon-sidebar-icon: #94a3b8;

    /* Grafik seriyalari — to'q ko'k fonda yorqin tonlar */
    --mon-chart-revenue: #60a5fa;
    --mon-chart-transactions: #34d399;
    --mon-chart-secondary: #22d3ee;
    --mon-chart-orange: #fb923c;
    --mon-chart-warning: #fbbf24;
    --mon-chart-danger: #f87171;
    --mon-chart-extra: #a78bfa;

    --mon-shadow-sm: 0 1px 2px rgba(0, 0, 0, .22);
    --mon-shadow: 0 4px 20px rgba(0, 0, 0, .18);
    --mon-shadow-lg: 0 10px 34px rgba(0, 0, 0, .28);
    --mon-shadow-focus: 0 0 0 3px rgba(96, 165, 250, .28);

    color-scheme: dark;
}

/* Rejim almashuvi silliq, lekin sahifa yuklanishida "sakramasin" */
html.theme-ready body,
html.theme-ready .card,
html.theme-ready .header,
html.theme-ready .sidebar,
html.theme-ready .form-control,
html.theme-ready .form-select,
html.theme-ready .table > :not(caption) > * > * {
    transition: background-color var(--mon-transition), color var(--mon-transition),
                border-color var(--mon-transition);
}

/* ==========================================================================
   2. Tipografika
   ========================================================================== */

body {
    font-family: Inter, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    background: var(--mon-bg);
    color: var(--mon-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.pagetitle h1 {
    font-family: Inter, "Poppins", sans-serif;
}

/* Raqamlar ustunlarda tekis tursin */
.kpi-value,
.amount-cell,
.table td {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. Nice Admin ranglarini tokenlarga bog'lash
   ========================================================================== */

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

.card {
    background-color: var(--mon-surface);
    border: 1px solid var(--mon-border);
    box-shadow: var(--mon-shadow);
    border-radius: var(--mon-radius);
}

/* Hozircha ishlatilmaydi, lekin kelajakda tungi rejimda oq bo'lib qolmasin */
.card-header,
.card-footer {
    background-color: var(--mon-surface);
    border-color: var(--mon-border);
    color: var(--mon-heading);
}

.card-title {
    color: var(--mon-heading);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.2px;
    padding: 20px 0 14px 0;
}

.card-title span {
    color: var(--mon-muted);
    font-weight: 400;
    font-size: 14px;
}

/* ------------------------------------------------------- Header va sidebar */

.header {
    background-color: var(--mon-header);
    box-shadow: var(--mon-shadow-sm);
    border-bottom: 1px solid var(--mon-border);
}

.sidebar {
    background-color: var(--mon-sidebar);
    border-right: 1px solid var(--mon-border);
    box-shadow: none;
    scrollbar-color: var(--mon-border-strong) transparent;
}

.logo span {
    color: var(--mon-heading);
    font-weight: 700;
}

.header .toggle-sidebar-btn {
    color: var(--mon-secondary);
}

.header .toggle-sidebar-btn:hover {
    color: var(--mon-primary);
}

/*
 * Yon menyu — uch holat aniq farqlanadi: nofaol → hover → faol.
 *
 * DIQQAT: Nice Admin'da `.sidebar-nav .nav-link.collapsed { background: #fff }`
 * qoidasi bor va uning spesifikligi (0,3,0). Nofaol menyular aynan shu klassni
 * oladi, shuning uchun quyidagi override ham `.collapsed` bilan yozilgan —
 * teng spesifiklikda keyinroq yuklangan monitoring.css ustun keladi.
 */
.sidebar-nav .nav-link,
.sidebar-nav .nav-link.collapsed {
    color: var(--mon-sidebar-text);
    background: var(--mon-sidebar-item);
    border-radius: var(--mon-radius-sm);
    font-weight: 500;
    font-size: 14.5px;
    padding: 10px 15px;
    margin-bottom: 2px;
    transition: background-color var(--mon-transition), color var(--mon-transition);
}

.sidebar-nav .nav-link i,
.sidebar-nav .nav-link.collapsed i {
    color: var(--mon-sidebar-icon);
    font-size: 17px;
    transition: color var(--mon-transition);
}

/* Hover */
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.collapsed:hover {
    color: var(--mon-sidebar-text-active);
    background: var(--mon-sidebar-item-hover);
}

.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-link.collapsed:hover i {
    color: var(--mon-primary);
}

/* Faol bo'lim — darhol ko'zga tashlanadi */
.sidebar-nav .nav-link:not(.collapsed) {
    color: var(--mon-sidebar-text-active);
    background: var(--mon-sidebar-item-active);
    font-weight: 600;
}

.sidebar-nav .nav-link:not(.collapsed) i {
    color: var(--mon-primary);
}

/* ------------------------------------------------- Ichki (ochiluvchi) menyu */

.sidebar-nav .nav-content a {
    color: var(--mon-sidebar-text);
    background: transparent;
    border-radius: var(--mon-radius-sm);
    font-size: 14px;
    transition: background-color var(--mon-transition), color var(--mon-transition);
}

.sidebar-nav .nav-content a i {
    background-color: var(--mon-sidebar-icon);
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
    color: var(--mon-sidebar-text-active);
    background: var(--mon-sidebar-item-hover);
}

.sidebar-nav .nav-content a:hover i,
.sidebar-nav .nav-content a.active i {
    background-color: var(--mon-primary);
}

.sidebar-nav .nav-content a:hover i,
.sidebar-nav .nav-content a.active i {
    background-color: var(--mon-primary);
}

.sidebar-nav .nav-heading {
    color: var(--mon-muted);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .8px;
    margin: 16px 0 6px 12px;
}

/* -------------------------------------------------------- Navbar elementlari */

.header-nav .nav-icon,
.header-nav .nav-profile {
    color: var(--mon-secondary);
}

.header-nav .nav-icon:hover,
.header-nav .nav-profile:hover {
    color: var(--mon-primary);
}

.header-nav .nav-profile span {
    color: var(--mon-heading);
    font-weight: 600;
}

.search-bar .search-form {
    background: var(--mon-input);
    border: 1px solid var(--mon-input-border);
    border-radius: 999px;
    padding: 4px 14px;
    box-shadow: none;
    transition: border-color var(--mon-transition), box-shadow var(--mon-transition);
}

.search-bar .search-form:focus-within {
    border-color: var(--mon-primary);
    box-shadow: var(--mon-shadow-focus);
}

.search-bar .search-form input {
    color: var(--mon-heading);
    background: transparent;
    font-size: 14px;
}

.search-bar .search-form input::placeholder {
    color: var(--mon-muted);
    opacity: 1;
}

.search-bar .search-form button i {
    color: var(--mon-primary);
}

/* ---------------------------------------------------------------- Dropdown */

.dropdown-menu {
    background: var(--mon-surface);
    border: 1px solid var(--mon-border);
    box-shadow: var(--mon-shadow-lg);
    border-radius: var(--mon-radius);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
    color: var(--mon-secondary);
}

.dropdown-menu .dropdown-item {
    color: var(--mon-text);
    border-radius: var(--mon-radius-sm);
}

.dropdown-menu .dropdown-item:hover {
    background: var(--mon-primary-soft);
    color: var(--mon-primary-text);
}

.dropdown-menu .dropdown-item i {
    color: var(--mon-muted);
}

.dropdown-divider {
    border-color: var(--mon-border);
}

.dropdown-menu .notification-item h4,
.dropdown-menu .profile .dropdown-header h6 {
    color: var(--mon-heading);
    font-weight: 600;
}

.dropdown-menu .notification-item p,
.dropdown-menu .profile .dropdown-header span {
    color: var(--mon-muted);
}

/*
 * Nice Admin bu holatlarga oq/och rang beradi va spesifikligi (0,4,0) —
 * shuning uchun override ham xuddi shu selektorlar bilan yozilgan.
 */
.header-nav .notifications .notification-item:hover,
.header-nav .messages .message-item:hover,
.header-nav .profile .dropdown-item:hover {
    background-color: var(--mon-surface-hover);
}

.dropdown-menu .notification-item:hover {
    background-color: var(--mon-surface-hover);
}

/* Dropdown "uchburchagi" — tungi rejimda oq bo'lib qolmasin */
.dropdown-menu-arrow::before {
    background: var(--mon-surface);
    border-top-color: var(--mon-border);
    border-left-color: var(--mon-border);
}

/* Yon panel skroll paneli */
.sidebar::-webkit-scrollbar {
    background-color: transparent;
    width: 8px;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--mon-border-strong);
    border-radius: 4px;
}

/* ---------------------------------------------------------------- Formalar */

.form-control,
.form-select {
    background-color: var(--mon-input);
    border-color: var(--mon-input-border);
    color: var(--mon-heading);
    border-radius: var(--mon-radius-sm);
    font-size: 14px;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--mon-input);
    border-color: var(--mon-primary);
    color: var(--mon-heading);
    box-shadow: var(--mon-shadow-focus);
}

.form-control::placeholder {
    color: var(--mon-muted);
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--mon-surface-2);
    color: var(--mon-muted);
}

/* Select va date ikonkalari tungi rejimda ko'rinsin */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(.75) brightness(1.4);
    cursor: pointer;
}

.form-label {
    color: var(--mon-secondary);
    font-weight: 500;
    font-size: 13.5px;
    margin-bottom: 5px;
}

.form-text {
    color: var(--mon-muted);
    font-size: 12.5px;
}

.input-group-text {
    background-color: var(--mon-surface-2);
    border-color: var(--mon-input-border);
    color: var(--mon-muted);
}

.form-check-input {
    background-color: var(--mon-input);
    border-color: var(--mon-input-border);
}

.form-check-input:checked {
    background-color: var(--mon-primary);
    border-color: var(--mon-primary);
}

.form-check-label {
    color: var(--mon-text);
}

.invalid-feedback {
    color: var(--mon-danger-text);
}

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

.btn {
    border-radius: var(--mon-radius-sm);
    font-weight: 500;
    font-size: 14px;
    transition: transform var(--mon-transition), background-color var(--mon-transition),
                border-color var(--mon-transition), color var(--mon-transition);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background-color: var(--mon-primary);
    border-color: var(--mon-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--mon-primary-hover);
    border-color: var(--mon-primary-hover);
    color: #fff;
}

/* To'q ko'k fonda yorqin ko'k tugma — matn to'q bo'lishi kerak */
[data-theme="dark"] .btn-primary {
    color: #0b1830;
    font-weight: 600;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus {
    color: #0b1830;
}

.btn-outline-primary {
    color: var(--mon-primary);
    border-color: var(--mon-primary);
}

.btn-outline-primary:hover {
    background-color: var(--mon-primary);
    border-color: var(--mon-primary);
    color: #fff;
}

[data-theme="dark"] .btn-outline-primary:hover {
    color: #0b1830;
}

.btn-secondary {
    background-color: var(--mon-neutral-soft);
    border-color: var(--mon-border-strong);
    color: var(--mon-text);
}

.btn-secondary:hover {
    background-color: var(--mon-surface-3);
    border-color: var(--mon-border-strong);
    color: var(--mon-heading);
}

.btn-outline-secondary {
    color: var(--mon-secondary);
    border-color: var(--mon-border-strong);
    background-color: transparent;
}

.btn-outline-secondary:hover {
    background-color: var(--mon-surface-3);
    border-color: var(--mon-border-strong);
    color: var(--mon-heading);
}

.btn-danger {
    background-color: var(--mon-danger);
    border-color: var(--mon-danger);
    color: #fff;
}

[data-theme="dark"] .btn-danger {
    color: #2a0d0f;
    font-weight: 600;
}

.btn-outline-danger {
    color: var(--mon-danger-text);
    border-color: var(--mon-danger);
}

.btn-outline-danger:hover {
    background-color: var(--mon-danger);
    border-color: var(--mon-danger);
    color: #fff;
}

.btn-outline-warning {
    color: var(--mon-warning-text);
    border-color: var(--mon-warning);
}

.btn-outline-warning:hover {
    background-color: var(--mon-warning);
    border-color: var(--mon-warning);
    color: #2b1e05;
}

.btn-outline-success {
    color: var(--mon-success-text);
    border-color: var(--mon-success);
}

.btn-outline-success:hover {
    background-color: var(--mon-success);
    border-color: var(--mon-success);
    color: #042315;
}

.btn-link,
a.small {
    color: var(--mon-primary);
}

/* ------------------------------------------------- Modal, alert, accordion */

.modal-content {
    background: var(--mon-surface);
    border: 1px solid var(--mon-border);
    border-radius: var(--mon-radius-lg);
    box-shadow: var(--mon-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--mon-border);
}

.modal-title {
    color: var(--mon-heading);
    font-weight: 600;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(2.2);
}

.accordion-item {
    background: var(--mon-surface);
    border-color: var(--mon-border);
}

.accordion-button {
    background: var(--mon-surface);
    color: var(--mon-heading);
}

.accordion-button:not(.collapsed) {
    background: var(--mon-primary-soft);
    color: var(--mon-primary-text);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: var(--mon-shadow-focus);
    border-color: var(--mon-primary);
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(1.8);
}

.list-group-item {
    background: var(--mon-surface);
    border-color: var(--mon-border);
    color: var(--mon-text);
}

.list-group-item-action:hover {
    background: var(--mon-surface-hover);
    color: var(--mon-heading);
}

.list-group-item h6 {
    color: var(--mon-heading);
}

/* Alert'lar — barcha rejimda o'qiladigan */
.alert {
    border: 1px solid transparent;
    border-radius: var(--mon-radius);
}

.alert-info {
    background-color: var(--mon-cyan-soft);
    border-color: var(--mon-border);
    color: var(--mon-cyan-text);
}

.alert-success {
    background-color: var(--mon-success-soft);
    border-color: var(--mon-border);
    color: var(--mon-success-text);
}

.alert-warning {
    background-color: var(--mon-warning-soft);
    border-color: var(--mon-border);
    color: var(--mon-warning-text);
}

.alert-danger {
    background-color: var(--mon-danger-soft);
    border-color: var(--mon-border);
    color: var(--mon-danger-text);
}

.alert .alert-heading {
    color: inherit;
    font-weight: 600;
}

/* Bootstrap yordamchi klasslari */
[data-theme="dark"] .bg-light {
    background-color: var(--mon-surface-2) !important;
}

.text-muted {
    color: var(--mon-muted) !important;
}

[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top {
    border-color: var(--mon-border) !important;
}

[data-theme="dark"] .text-success { color: var(--mon-success-text) !important; }
[data-theme="dark"] .text-danger  { color: var(--mon-danger-text) !important; }
[data-theme="dark"] .text-warning { color: var(--mon-warning-text) !important; }
[data-theme="dark"] .text-primary { color: var(--mon-primary-text) !important; }

/* ------------------------------------------------------------- Paginatsiya */

.pagination {
    margin-bottom: 0;
}

.page-link {
    background: var(--mon-surface);
    border-color: var(--mon-border);
    color: var(--mon-secondary);
    border-radius: var(--mon-radius-sm) !important;
    margin: 0 2px;
    font-size: 14px;
}

.page-link:hover {
    background: var(--mon-primary-soft);
    border-color: var(--mon-border);
    color: var(--mon-primary-text);
}

.page-item.active .page-link {
    background: var(--mon-primary);
    border-color: var(--mon-primary);
    color: #fff;
}

[data-theme="dark"] .page-item.active .page-link {
    color: #0b1830;
    font-weight: 600;
}

.page-item.disabled .page-link {
    background: var(--mon-surface);
    border-color: var(--mon-border);
    color: var(--mon-muted);
    opacity: .6;
}

/* ==========================================================================
   4. Layout va kartochka masofasi
   ========================================================================== */

#main {
    padding: 22px 26px 26px;
}

.card {
    margin-bottom: var(--mon-card-gap);
}

/*
 * `.h-100` Bootstrap'da `height: 100% !important`. Karta ustunning to'liq
 * balandligini egallagach, uning margin-bottom'i qator chegarasidan tashqariga
 * chiqadi va keyingi qator kartochkalari bilan tegib qoladi. Balandlikni o'z
 * marginini hisobga olib hisoblaymiz — `.card.h-100` spesifikligi yuqori
 * bo'lgani uchun Bootstrap qoidasidan ustun keladi.
 */
.card.h-100 {
    height: calc(100% - var(--mon-card-gap)) !important;
}

.card-body {
    padding: 0 22px 22px;
}

/* ==========================================================================
   5. Komponentlar
   ========================================================================== */

/* -------------------------------------------------------- Sahifa sarlavhasi */

.pagetitle {
    margin-bottom: 22px;
}

.pagetitle h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--mon-heading);
    margin-bottom: 4px;
    letter-spacing: -.5px;
    line-height: 1.25;
}

/* "Ortga" tugmasi — sarlavha yonida, ota-sahifaga qaytaradi */
.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid var(--mon-border);
    background: var(--mon-surface, #fff);
    color: var(--mon-secondary);
    font-size: 19px;
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-back:hover,
.btn-back:focus-visible {
    background: var(--mon-icon-bg);
    border-color: var(--mon-primary);
    color: var(--mon-primary);
}

.btn-back:active {
    transform: translateY(1px);
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

.breadcrumb a {
    color: var(--mon-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--mon-primary);
}

.breadcrumb .breadcrumb-item.active {
    color: var(--mon-secondary);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--mon-muted);
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-actions .btn {
    white-space: nowrap;
}

/* ------------------------------------------------------------ KPI kartochka */

.kpi-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mon-border);
    transition: transform var(--mon-transition), box-shadow var(--mon-transition),
                border-color var(--mon-transition), background-color var(--mon-transition);
}

/* Yuqoridagi ingichka rangli chiziq — kartochka turini bildiradi */
.kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--kpi-accent, var(--mon-primary));
}

.kpi-card:hover {
    transform: translateY(-2px);
    background-color: var(--mon-surface-hover);
    box-shadow: var(--mon-shadow-lg);
    border-color: var(--mon-border-strong);
}

.kpi-card .card-body {
    padding: 20px 22px 18px;
}

/* Kartochka sarlavhasi — kichik, uppercase, ikkilamchi rangda */
.kpi-card .card-title {
    padding: 0 0 14px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--mon-secondary);
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.4;
}

/*
 * Ikonka qutisi — o'lcham va markazlashtirish.
 *
 * Markazlashtirish `.kpi-card` ichiga bog'lanmasligi kerak: xuddi shu
 * `.kpi-icon` klassi profil sarlavhalarida `.entity-icon` bilan birga
 * oddiy `.card` ichida ham ishlatiladi. Aks holda ikonka qutining
 * yuqori chetiga yopishib qoladi.
 */
.kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.kpi-card .kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 22px;
}

/*
 * KPI raqami — eng muhim element.
 *
 * Nice Admin'da `.dashboard .info-card h6 { color: #012970; font-size: 28px }`
 * qoidasi bor (spesifiklik 0,2,1) va u to'q ko'k rang beradi. Quyidagi selektor
 * ham (0,2,1) — monitoring.css keyinroq yuklangani uchun ustun keladi va
 * raqam to'q ko'k fonda yorqin oq bo'lib qoladi.
 */
.kpi-card h6.kpi-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--mon-heading);
    line-height: 1.1;
    letter-spacing: -.8px;
    margin: 0;
    padding: 0;
    word-break: break-word;
}

.kpi-card .kpi-sub {
    font-size: 12.5px;
    color: var(--mon-muted);
}

/* Ikonka konteynerlari — biroz yorug'roq ko'k, ikonka yorqin */
.kpi-icon-primary { background: var(--mon-icon-bg);      color: var(--mon-primary); }
.kpi-icon-success { background: var(--mon-success-soft); color: var(--mon-success); }
.kpi-icon-warning { background: var(--mon-warning-soft); color: var(--mon-warning); }
.kpi-icon-danger  { background: var(--mon-danger-soft);  color: var(--mon-danger); }
.kpi-icon-info    { background: var(--mon-cyan-soft);    color: var(--mon-cyan); }
.kpi-icon-dark    { background: var(--mon-neutral-soft); color: var(--mon-secondary); }

.kpi-accent-primary { --kpi-accent: var(--mon-primary); }
.kpi-accent-success { --kpi-accent: var(--mon-success); }
.kpi-accent-warning { --kpi-accent: var(--mon-warning); }
.kpi-accent-danger  { --kpi-accent: var(--mon-danger); }
.kpi-accent-info    { --kpi-accent: var(--mon-cyan); }
.kpi-accent-dark    { --kpi-accent: var(--mon-border-strong); }

/* Bir qatorga 5 ta kartochka sig'ishi uchun (Bootstrap'da 1/5 ustun yo'q) */
@media (min-width: 1400px) {
    .col-xxl-2-4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* Real-time yangilanishda qiymatning miltillashi */
@keyframes kpi-flash {
    0%   { background-color: rgba(52, 211, 153, .26); }
    100% { background-color: transparent; }
}

.kpi-flash {
    animation: kpi-flash 1.4s ease-out;
    border-radius: 4px;
    padding: 0 3px;
    margin: 0 -3px;
}

/* --------------------------------------------------------------- Jadvallar */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mon-text);
    color: var(--mon-text);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: .7rem .75rem;
    background-color: transparent;
    color: var(--mon-text);
    border-bottom-color: var(--mon-border);
}

.table thead th {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--mon-secondary);
    white-space: nowrap;
    background-color: var(--mon-surface-2);
    border-bottom: 1px solid var(--mon-border-strong);
}

.table thead th:first-child {
    border-top-left-radius: var(--mon-radius-sm);
    border-bottom-left-radius: var(--mon-radius-sm);
}

.table thead th:last-child {
    border-top-right-radius: var(--mon-radius-sm);
    border-bottom-right-radius: var(--mon-radius-sm);
}

.table td {
    font-size: 14px;
    vertical-align: middle;
    border-top: 0;
}

/* Jadvaldagi asosiy qiymat yorqin bo'lsin */
.table td .fw-semibold,
.table td .fw-bold {
    color: var(--mon-heading);
}

.table a {
    color: var(--mon-primary);
    text-decoration: none;
    font-weight: 500;
}

.table a:hover {
    color: var(--mon-primary-hover);
    text-decoration: underline;
}

.table-monitoring tbody tr {
    transition: background-color var(--mon-transition);
}

.table-monitoring tbody tr:hover {
    background-color: var(--mon-surface-hover);
}

[data-theme="dark"] .table-monitoring tbody tr:hover {
    background-color: #1c2d49;
}

.table tfoot tr {
    border-top: 2px solid var(--mon-border-strong);
    color: var(--mon-heading);
}

.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--mon-border-strong) transparent;
}

.table-responsive::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--mon-border-strong);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

/* Pul summasi — yorqin va aniq */
.amount-cell {
    font-weight: 600;
    white-space: nowrap;
    color: var(--mon-heading);
}

.amount-cell.text-success {
    color: var(--mon-success-text) !important;
}

.amount-cell.text-muted {
    color: var(--mon-muted) !important;
    font-weight: 500;
}

.uid-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

/* Real-time: yangi kelgan qator — nozik siljish */
@keyframes row-in {
    from {
        background-color: var(--mon-primary-soft);
        transform: translateY(-4px);
        opacity: .35;
    }
    to {
        background-color: transparent;
        transform: translateY(0);
        opacity: 1;
    }
}

tr.row-new {
    animation: row-in 1.8s cubic-bezier(.2, .8, .2, 1);
}

/* ---------------------------------------------------------------- Badge'lar */

.badge-soft {
    display: inline-block;
    font-weight: 600;
    font-size: 11.5px;
    padding: .3em .65em;
    border-radius: var(--mon-radius-sm);
    line-height: 1.45;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge-soft-success   { background: var(--mon-success-soft); color: var(--mon-success-text); }
.badge-soft-danger    { background: var(--mon-danger-soft);  color: var(--mon-danger-text); }
.badge-soft-warning   { background: var(--mon-warning-soft); color: var(--mon-warning-text); }
.badge-soft-info      { background: var(--mon-cyan-soft);    color: var(--mon-cyan-text); }
.badge-soft-primary   { background: var(--mon-primary-soft); color: var(--mon-primary-text); }
.badge-soft-secondary { background: var(--mon-neutral-soft); color: var(--mon-neutral-text); }
.badge-soft-dark      { background: var(--mon-neutral-soft); color: var(--mon-heading); }

/* Qurilma holati nuqtasi */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.status-dot-online {
    background: var(--mon-success);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .22);
}

.status-dot-offline     { background: var(--mon-muted); }
.status-dot-maintenance { background: var(--mon-warning); }
.status-dot-blocked     { background: var(--mon-danger); }

/* ------------------------------------------- Real-time ulanish indikatori */

.rt-status {
    position: relative;
    cursor: default;
}

.rt-dot {
    position: absolute;
    right: 6px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background-color var(--mon-transition);
}

.rt-dot-live {
    background: var(--mon-success);
    animation: rt-pulse 2.4s ease-in-out infinite;
}

@keyframes rt-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
    50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}

.rt-dot-polling    { background: var(--mon-warning); }
.rt-dot-connecting { background: var(--mon-muted); }
.rt-dot-offline    { background: var(--mon-danger); }

/* ------------------------------------------------------- Tungi rejim tugmasi */

.theme-toggle {
    background: none;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--mon-secondary);
    line-height: 1;
    cursor: pointer;
    transition: color var(--mon-transition), transform var(--mon-transition);
}

.theme-toggle:hover {
    color: var(--mon-primary);
    transform: rotate(-12deg);
}

.theme-toggle .bi-moon-stars,
[data-theme="dark"] .theme-toggle .bi-sun {
    display: inline-block;
}

.theme-toggle .bi-sun,
[data-theme="dark"] .theme-toggle .bi-moon-stars {
    display: none;
}

/* ------------------------------------------------------------- Filtr paneli */

.filter-card {
    background: var(--mon-surface-2);
    border: 1px solid var(--mon-border-strong);
}

[data-theme="dark"] .filter-card {
    background: #17233b;
    border-color: #2d3e5d;
}

.filter-card .card-body {
    padding: 18px 20px;
}

.filter-card label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mon-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 5px;
}

[data-theme="dark"] .filter-card label {
    color: #bfd0e6;
}

[data-theme="dark"] .filter-card .form-control,
[data-theme="dark"] .filter-card .form-select {
    background-color: #142139;
    border-color: #314261;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mon-primary-soft);
    color: var(--mon-primary-text);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 500;
}

.filter-chip a {
    color: inherit;
    opacity: .65;
    line-height: 1;
    display: flex;
    transition: opacity var(--mon-transition);
}

.filter-chip a:hover {
    opacity: 1;
}

/* --------------------------------------------------------------- Avatar */

.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mon-primary), var(--mon-cyan));
    color: #08182f;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    letter-spacing: .3px;
}

.avatar-initials-lg {
    width: 78px;
    height: 78px;
    font-size: 27px;
}

/* ------------------------------------------------------- Obyekt sarlavhasi */

.entity-title {
    font-weight: 700;
    color: var(--mon-heading);
    font-size: 16px;
    letter-spacing: -.3px;
    margin-bottom: 3px;
}

.entity-title.uid-cell {
    font-size: 14.5px;
    letter-spacing: 0;
}

.entity-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
    border-radius: 14px;
}

/* ------------------------------------------------------ Ma'lumot ro'yxati */

.info-list dt {
    font-size: 11.5px;
    color: var(--mon-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}

.info-list dd {
    font-size: 14.5px;
    color: var(--mon-heading);
    margin-bottom: 14px;
    font-weight: 500;
}

.info-list dd a {
    color: var(--mon-primary);
    text-decoration: none;
}

.info-list dd a:hover {
    text-decoration: underline;
}

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

.empty-state {
    padding: 46px 20px;
    text-align: center;
    color: var(--mon-muted);
}

.empty-state i {
    font-size: 42px;
    opacity: .35;
    display: block;
    margin-bottom: 12px;
}

.empty-state .fw-semibold {
    color: var(--mon-secondary);
    font-size: 14.5px;
}

.empty-state .small {
    margin-top: 4px;
    max-width: 400px;
    margin-inline: auto;
}

/* ----------------------------------------------------------- Risk paneli */

.risk-item {
    display: flex;
    gap: 13px;
    padding: 14px 0;
    border-bottom: 1px solid var(--mon-border);
}

.risk-item:first-child {
    padding-top: 4px;
}

.risk-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.risk-item .risk-bar {
    width: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Risk sarlavhasi oq, qo'shimcha matn kulrang */
.risk-item a {
    color: var(--mon-heading);
    text-decoration: none;
    font-weight: 600;
}

.risk-item a:hover {
    color: var(--mon-primary);
}

.risk-item .text-muted {
    color: var(--mon-muted) !important;
}

.risk-bar-low      { background: var(--mon-success); }
.risk-bar-medium   { background: var(--mon-warning); }
.risk-bar-high     { background: #fb923c; }
.risk-bar-critical { background: var(--mon-danger); }

/* ------------------------------------------------------------------ Kod bloki */

.code-block {
    background: #0d1729;
    color: #dbe5f3;
    border: 1px solid var(--mon-border);
    border-radius: var(--mon-radius-sm);
    padding: 14px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.65;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

.credential-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    word-break: break-all;
    color: var(--mon-heading);
}

/* ---------------------------------------------------------------- Grafiklar */

/* ApexCharts matnlari — theme.js CSS o'zgaruvchilardan o'qiydi, bu zaxira */
[data-theme="dark"] .apexcharts-text,
[data-theme="dark"] .apexcharts-title-text,
[data-theme="dark"] .apexcharts-legend-text,
[data-theme="dark"] .apexcharts-yaxis-label,
[data-theme="dark"] .apexcharts-xaxis-label {
    fill: var(--mon-muted) !important;
    color: var(--mon-muted) !important;
}

[data-theme="dark"] .apexcharts-gridline,
[data-theme="dark"] .apexcharts-xaxis line,
[data-theme="dark"] .apexcharts-yaxis line {
    stroke: var(--mon-border);
}

[data-theme="dark"] .apexcharts-tooltip,
[data-theme="dark"] .apexcharts-tooltip-title {
    background: var(--mon-surface-3) !important;
    border-color: var(--mon-border) !important;
    color: var(--mon-heading) !important;
    box-shadow: var(--mon-shadow-lg);
}

[data-theme="dark"] .apexcharts-tooltip-text-y-value,
[data-theme="dark"] .apexcharts-tooltip-text-goals-value {
    color: var(--mon-heading) !important;
}

/* -------------------------------------------------------------------- Footer */

.footer {
    background: transparent;
    border-top: 1px solid var(--mon-border);
    color: var(--mon-muted);
    padding: 20px 0;
    box-shadow: none;
    font-size: 13.5px;
}

.footer .copyright strong span {
    color: var(--mon-secondary);
}

.back-to-top {
    background: var(--mon-primary);
    box-shadow: var(--mon-shadow);
}

[data-theme="dark"] .back-to-top i {
    color: #0b1830;
}

/* Nav pills */
.nav-pills .nav-link {
    color: var(--mon-secondary);
    border-radius: var(--mon-radius-sm);
    font-size: 14px;
    padding: 7px 15px;
    font-weight: 500;
}

.nav-pills .nav-link:hover {
    background: var(--mon-surface-3);
    color: var(--mon-heading);
}

.nav-pills .nav-link.active {
    background: var(--mon-primary);
    color: #fff;
}

[data-theme="dark"] .nav-pills .nav-link.active {
    color: #0b1830;
    font-weight: 600;
}

/* Toast */
.toast {
    border-radius: var(--mon-radius);
    box-shadow: var(--mon-shadow-lg);
}

/* ------------------------------------------------------------------- Xarita */

.map-wrap {
    width: 100%;
}

.map-picker {
    width: 100%;
    min-height: 200px;
    border-radius: var(--mon-radius);
    border: 1px solid var(--mon-border-strong);
    overflow: hidden;
    background: var(--mon-surface-2);
    z-index: 1; /* Leaflet panellari kartochka ustiga chiqib ketmasin */
}

.map-picker:not(.map-picker-readonly) {
    cursor: crosshair;
}

/*
 * Tungi rejimda OSM plitkalari juda yorqin — ularni biroz so'ndiramiz.
 * Faqat plitka qatlamiga qo'llanadi, marker va boshqaruvlarga tegmaydi.
 */
[data-theme="dark"] .map-picker .leaflet-tile-pane {
    filter: brightness(.72) contrast(1.06) saturate(.82) hue-rotate(178deg) invert(1);
}

/* Leaflet boshqaruvlari — mavzuga moslash */
.map-picker .leaflet-bar a,
.map-picker .leaflet-control-attribution {
    background: var(--mon-surface);
    color: var(--mon-text);
    border-color: var(--mon-border);
}

.map-picker .leaflet-bar a:hover {
    background: var(--mon-surface-hover);
    color: var(--mon-primary);
}

.map-picker .leaflet-control-attribution a {
    color: var(--mon-primary);
}

.map-picker .leaflet-popup-content-wrapper,
.map-picker .leaflet-popup-tip {
    background: var(--mon-surface);
    color: var(--mon-text);
    box-shadow: var(--mon-shadow-lg);
}

/* Qidiruv natijalari */
.map-search {
    z-index: 2;
}

.map-results {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--mon-surface);
    border: 1px solid var(--mon-border);
    border-radius: var(--mon-radius-sm);
    box-shadow: var(--mon-shadow-lg);
    max-height: 240px;
    overflow-y: auto;
}

.map-results.show {
    display: block;
}

.map-result {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--mon-border);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--mon-text);
    line-height: 1.45;
    cursor: pointer;
    transition: background-color var(--mon-transition);
}

.map-result:last-child {
    border-bottom: 0;
}

.map-result:hover {
    background: var(--mon-primary-soft);
    color: var(--mon-primary-text);
}

.map-result-empty {
    padding: 12px;
    font-size: 13px;
    color: var(--mon-muted);
    text-align: center;
}

/* Tanlangan koordinata ko'rsatkichi */
.map-coords {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--mon-secondary);
    background: var(--mon-surface-2);
    border: 1px solid var(--mon-border);
    border-radius: var(--mon-radius-sm);
    padding: 4px 10px;
}

.map-coords i {
    color: var(--mon-primary);
}

@media (max-width: 575.98px) {
    .map-picker {
        height: 260px !important;
    }
}

/* ------------------------------------------------- Ierarxik monitoring xaritasi */

.map-explorer {
    position: relative;
}

.map-explorer.is-loading {
    opacity: .6;
    pointer-events: none;
}

.map-explorer-canvas {
    width: 100%;
    height: 520px;
    border-radius: var(--mon-radius);
    border: 1px solid var(--mon-border-strong);
    overflow: hidden;
    background: var(--mon-surface-2);
    z-index: 1;
}

[data-theme="dark"] .map-explorer-canvas .leaflet-tile-pane {
    filter: brightness(.72) contrast(1.06) saturate(.82) hue-rotate(178deg) invert(1);
}

.map-explorer-canvas .leaflet-bar a,
.map-explorer-canvas .leaflet-control-attribution {
    background: var(--mon-surface);
    color: var(--mon-text);
    border-color: var(--mon-border);
}

.map-explorer-canvas .leaflet-bar a:hover {
    background: var(--mon-surface-hover);
    color: var(--mon-primary);
}

.map-explorer-canvas .leaflet-control-attribution a {
    color: var(--mon-primary);
}

/*
 * Chegara poligonlari — tungi rejimda plitka filtri ular rangini ham
 * buzmasligi uchun poligonlar alohida qatlamda qoladi (faqat tile-pane
 * filtrlanadi), shu sabab bu yerda qo'shimcha tuzatish kerak emas.
 * Kursor hudud ustida "bosish mumkin" ekanini bildiradi.
 */
.map-explorer-canvas .leaflet-interactive {
    cursor: pointer;
    transition: fill-opacity 140ms ease;
}

/* ------------------------------------------------------------ Nur (breadcrumb) */

.map-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
    min-height: 28px;
}

.map-crumb {
    display: inline-block;
    background: var(--mon-surface-2);
    border: 1px solid var(--mon-border);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mon-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--mon-transition), color var(--mon-transition),
                border-color var(--mon-transition);
}

.map-crumb:hover {
    background: var(--mon-primary-soft);
    color: var(--mon-primary-text);
    border-color: var(--mon-primary);
    text-decoration: none;
}

/* Joriy daraja — bosilgan holatda ekanini bildiradi */
.map-crumb-active {
    background: var(--mon-primary);
    border-color: var(--mon-primary);
    color: #fff;
    font-weight: 600;
}

[data-theme="dark"] .map-crumb-active {
    color: #0b1830;
}

.map-crumb-active:hover {
    background: var(--mon-primary-hover);
    border-color: var(--mon-primary-hover);
    color: #fff;
}

[data-theme="dark"] .map-crumb-active:hover {
    color: #0b1830;
}

.map-crumb-sep {
    color: var(--mon-muted);
    font-size: 12px;
}

/* -------------------------------------------------------------------- Marker */

.map-pin {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: transform 140ms ease;
    font-variant-numeric: tabular-nums;
}

.map-pin:hover {
    transform: scale(1.14);
    z-index: 500;
}

/* Oxirgi daraja (avtomoyka) — kvadratroq, farqlanadi */
.map-pin-leaf {
    border-radius: 10px;
    width: 34px;
    height: 34px;
}

.map-pin-high  { background: #16a34a; }
.map-pin-mid   { background: #2563eb; }
.map-pin-low   { background: #0891b2; }
.map-pin-zero  { background: #64748b; }
.map-pin-empty { background: #94a3b8; opacity: .55; }

[data-theme="dark"] .map-pin {
    border-color: rgba(15, 23, 42, .7);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

[data-theme="dark"] .map-pin-high  { background: #22c55e; color: #052e16; }
[data-theme="dark"] .map-pin-mid   { background: #60a5fa; color: #0b1830; }
[data-theme="dark"] .map-pin-low   { background: #22d3ee; color: #062c33; }
[data-theme="dark"] .map-pin-zero  { background: #64748b; color: #f8fafc; }
[data-theme="dark"] .map-pin-empty { background: #475569; color: #cbd5e1; opacity: .6; }

/* ------------------------------------------------------------------- Popup */

.map-pop-wrap .leaflet-popup-content-wrapper {
    background: var(--mon-surface);
    color: var(--mon-text);
    border-radius: var(--mon-radius);
    box-shadow: var(--mon-shadow-lg);
    border: 1px solid var(--mon-border);
}

.map-pop-wrap .leaflet-popup-tip {
    background: var(--mon-surface);
    border: 1px solid var(--mon-border);
}

.map-pop-wrap .leaflet-popup-content {
    margin: 12px 14px;
}

.map-pop-wrap .leaflet-popup-close-button {
    color: var(--mon-muted);
}

.map-pop-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mon-heading);
    line-height: 1.3;
}

.map-pop-sub {
    font-size: 12.5px;
    color: var(--mon-muted);
    margin-bottom: 8px;
}

.map-pop-body {
    border-top: 1px solid var(--mon-border);
    padding-top: 8px;
    margin-bottom: 10px;
}

.map-pop-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
    padding: 2px 0;
}

.map-pop-row span {
    color: var(--mon-muted);
}

.map-pop-row b {
    color: var(--mon-heading);
    font-variant-numeric: tabular-nums;
}

.map-pop-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--mon-primary);
    color: #fff;
    border: 0;
    border-radius: var(--mon-radius-sm);
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--mon-transition);
}

.map-pop-btn:hover {
    background: var(--mon-primary-hover);
    color: #fff;
}

[data-theme="dark"] .map-pop-btn {
    color: #0b1830;
}

[data-theme="dark"] .map-pop-btn:hover {
    color: #0b1830;
}

.map-pop-empty {
    text-align: center;
    font-size: 12.5px;
    color: var(--mon-muted);
    padding: 6px 0;
}

.map-pop-note {
    font-size: 11.5px;
    color: var(--mon-warning-text);
    background: var(--mon-warning-soft);
    border-radius: var(--mon-radius-sm);
    padding: 5px 8px;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* ------------------------------------------------------- Hudud nomi yorlig'i */

/*
 * Yorliq poligon markazida turadi. Fon shaffof-oq, matn to'q — plitka
 * ustida ham, to'ldirilgan poligon ustida ham o'qiladi.
 */
.map-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .88);
    color: #0f2352;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.1px;
    box-shadow: 0 1px 3px rgba(15, 35, 82, .25);
    pointer-events: none;
}

/* Obyektlar soni — nom yonidagi kichik nishon */
.map-label-count {
    display: inline-block;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #16a34a;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
    line-height: 16px;
}

/* Avtomoykasi yo'q hudud — xiraroq */
.map-label-empty {
    background: rgba(255, 255, 255, .7);
    color: #55688c;
    font-weight: 500;
}

/* Bazaga bog'lanmagan hudud */
.map-label-muted {
    background: rgba(255, 255, 255, .6);
    color: #7c8db0;
    font-weight: 400;
    font-style: italic;
}

/*
 * Avtomoyka nomi — nishon ostida. `translate` bilan pastga suriladi,
 * shu tufayli nishonning o'zini yopib qo'ymaydi.
 */
.map-label-carwash {
    transform: translate(-50%, 18px);
    font-size: 11px;
    padding: 1px 6px;
    background: rgba(255, 255, 255, .92);
    color: #0f2352;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
}

[data-theme="dark"] .map-label-carwash {
    background: rgba(24, 36, 61, .94);
    color: #f8fafc;
}

/* Tanlangan hudud — ajratib ko'rsatiladi */
.map-label-selected {
    background: #0f172a;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

[data-theme="dark"] .map-label {
    background: rgba(24, 36, 61, .92);
    color: #f8fafc;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

[data-theme="dark"] .map-label-empty {
    background: rgba(24, 36, 61, .75);
    color: #cbd5e1;
}

[data-theme="dark"] .map-label-muted {
    background: rgba(24, 36, 61, .6);
    color: #94a3b8;
}

[data-theme="dark"] .map-label-selected {
    background: #60a5fa;
    color: #0b1830;
}

[data-theme="dark"] .map-label-count {
    background: #22c55e;
    color: #052e16;
}

/* Kichik ekranlarda nomlar bir-birini bosmasin */
@media (max-width: 767.98px) {
    .map-label {
        font-size: 10.5px;
        padding: 1px 5px;
    }

    .map-label-selected {
        font-size: 12px;
    }
}

/* ---------------------------------------------------- Marker uchun tooltip */

.map-tip {
    background: var(--mon-surface);
    color: var(--mon-text);
    border: 1px solid var(--mon-border);
    border-radius: var(--mon-radius-sm);
    box-shadow: var(--mon-shadow);
    padding: 7px 11px;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
}

.map-tip::before {
    border-top-color: var(--mon-border) !important;
}

.map-tip-title {
    font-weight: 700;
    color: var(--mon-heading);
    font-size: 13px;
}

.map-tip-row {
    color: var(--mon-secondary);
}

.map-tip-hint {
    color: var(--mon-primary);
    font-size: 11.5px;
    margin-top: 2px;
}

/* ------------------------------------------------------------------ Legenda */

.map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 12.5px;
    color: var(--mon-muted);
}

.map-legend-title {
    font-weight: 600;
    color: var(--mon-secondary);
}

.map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.map-pin-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.map-legend-hint {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .map-explorer-canvas {
        height: 380px;
    }

    .map-legend-hint {
        margin-left: 0;
        width: 100%;
    }
}

/* --------------------------------------------------------- Kirish sahifasi */

.login-card {
    border-radius: var(--mon-radius-lg);
    overflow: hidden;
    box-shadow: var(--mon-shadow-lg);
}

.login-hero {
    background: linear-gradient(135deg, #0f2352 0%, #2563eb 100%);
    color: #fff;
    padding: 46px 40px;
    position: relative;
    overflow: hidden;
}

.login-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 40px solid rgba(255, 255, 255, .06);
    pointer-events: none;
}

[data-theme="dark"] .login-hero {
    background: linear-gradient(135deg, #14203a 0%, #1e3a5f 100%);
}

.login-hero > * {
    position: relative;
    z-index: 1;
}

.login-hero h2 {
    color: #fff;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: -.4px;
}

.login-hero .feature {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    margin-top: 22px;
}

.login-hero .feature i {
    font-size: 20px;
    opacity: .9;
    flex-shrink: 0;
    color: #93c5fd;
}

.login-hero .feature strong {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
}

.login-hero .feature span {
    font-size: 13px;
    opacity: .8;
    line-height: 1.5;
}

.login-page-toggle {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 10;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--mon-surface);
    border: 1px solid var(--mon-border);
    box-shadow: var(--mon-shadow-sm);
    font-size: 17px;
}

.login-page-toggle:hover {
    transform: none;
    border-color: var(--mon-primary);
}

@media (min-width: 992px) {
    .login-hero {
        border-radius: var(--mon-radius-lg) 0 0 var(--mon-radius-lg);
    }
}

@media (max-width: 991.98px) {
    .login-hero {
        border-radius: var(--mon-radius-lg) var(--mon-radius-lg) 0 0;
        padding: 30px 26px;
    }

    .login-hero h2 {
        font-size: 22px;
    }
}

/* ==========================================================================
   6. Responsive va chop etish
   ========================================================================== */

@media (max-width: 1199.98px) {
    :root {
        --mon-card-gap: 20px;
    }

    #main {
        padding: 18px 18px 22px;
    }

    .pagetitle h1 {
        font-size: 24px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --mon-card-gap: 16px;
    }

    .pagetitle h1 {
        font-size: 21px;
    }

    .kpi-card h6.kpi-value {
        font-size: 25px;
    }

    .kpi-card .kpi-icon {
        width: 42px;
        height: 42px;
        font-size: 19px;
        border-radius: 10px;
    }

    .card-title {
        font-size: 16px;
        padding-top: 18px;
    }

    .card-body {
        padding: 0 16px 16px;
    }

    .kpi-card .card-body {
        padding: 18px 16px 16px;
    }

    .page-actions {
        width: 100%;
    }

    .page-actions .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 575.98px) {
    .table td,
    .table th {
        font-size: 13px;
    }

    .empty-state {
        padding: 32px 14px;
    }
}

@media print {
    #header,
    #sidebar,
    #footer,
    .page-actions,
    .filter-card,
    .back-to-top,
    .theme-toggle {
        display: none !important;
    }

    #main {
        margin: 0;
        padding: 0;
    }

    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
}

/* Harakatni kamaytirish sozlamasini hurmat qilish */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}