/* =====================================================================
   To'yxona — Design System
   my.e-bozor.com dizayni asosida (shadcn/ui neutral + brand #012970)
   Yorug' / Qorong'u rejim, mobilga to'liq moslashgan
   ===================================================================== */

/* ------------------------------ TOKENS ------------------------------ */
:root {
    /* Brauzerning o'z boshqaruvlari (select ro'yxati, scrollbar, kalendar)
       ham mavzuga moslashsin — aks holda qorong'u rejimda oq bo'lib qoladi */
    color-scheme: light;

    --brand: #012970;
    --brand-soft: #3b6fd4;

    --background: #ffffff;
    --foreground: #0a0a0a;
    --card: #ffffff;
    --card-foreground: #0a0a0a;
    --popover: #ffffff;
    --popover-foreground: #0a0a0a;
    --primary: var(--brand);
    --primary-text: var(--brand);
    --success-text: #007a2e;
    --warning-text: #a35200;
    --destructive-text: #c50008;
    --info-text: #0b4ed6;
    --primary-foreground: #fafafa;
    --secondary: #f5f5f5;
    --secondary-foreground: #262626;
    --muted: #f5f5f5;
    --muted-foreground: #6a6a6a;
    --accent: #f5f5f5;
    --accent-foreground: #262626;
    --destructive: #e7000b;
    --success: #00a63e;
    --warning: #e17100;
    --info: #155dfc;
    --border: #e5e5e5;
    --input: #e5e5e5;
    --ring: var(--brand);

    --sidebar: #fafafa;
    --sidebar-foreground: #0a0a0a;
    --sidebar-accent: #f5f5f5;
    --sidebar-accent-foreground: var(--brand);
    --sidebar-border: #e5e5e5;

    --radius: 0.625rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    --radius-xl: 0.875rem;

    --sidebar-width: 16rem;
    --header-height: 4rem;

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .06), 0 1px 2px -1px rgba(0, 0, 0, .06);
}

html.dark {
    color-scheme: dark;

    --background: #0a0a0a;
    --foreground: #fafafa;
    --card: #0a0a0a;
    --card-foreground: #fafafa;
    --popover: #171717;
    --popover-foreground: #fafafa;
    --primary: var(--brand-soft);
    --primary-text: #7aa5f5;
    --success-text: #05df72;
    --warning-text: #ffb900;
    --destructive-text: #ff8a8c;
    --info-text: #7cb6ff;
    --primary-foreground: #fafafa;
    --secondary: #262626;
    --secondary-foreground: #fafafa;
    --muted: #262626;
    --muted-foreground: #a1a1a1;
    --accent: #262626;
    --accent-foreground: #fafafa;
    --destructive: #ff6467;
    --success: #05df72;
    --warning: #ffb900;
    --info: #51a2ff;
    --border: #262626;
    --input: #262626;
    --ring: var(--brand-soft);

    --sidebar: #171717;
    --sidebar-foreground: #fafafa;
    --sidebar-accent: #262626;
    --sidebar-accent-foreground: #fafafa;
    --sidebar-border: #262626;

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .5), 0 1px 2px -1px rgba(0, 0, 0, .5);
}

/* Bootstrap 5.3 o'zgaruvchilarini bizning tokenlarga bog'laymiz —
   shunda barcha BS komponentlari (modal, dropdown, table, form) avtomat moslashadi */
:root,
html.dark {
    --bs-body-bg: var(--background);
    --bs-body-color: var(--foreground);
    --bs-body-font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-secondary-color: var(--muted-foreground);
    --bs-emphasis-color: var(--foreground);
    --bs-tertiary-bg: var(--muted);
    --bs-heading-color: var(--foreground);
    --bs-link-color: var(--primary-text);
    --bs-link-hover-color: var(--primary-text);
    --bs-primary: var(--brand);
    --bs-primary-rgb: 1, 41, 112;
}

/* Bootstrap ranglarining RGB qiymatlari — .text-success, .bg-danger-subtle
   kabi utilitalar shular orqali hisoblanadi. Qorong'u rejimda yorug'roq
   variantga almashtiramiz, aks holda matn fonda ko'rinmay qoladi. */
:root {
    --bs-success-rgb: 0, 122, 46;
    --bs-danger-rgb: 197, 0, 8;
    --bs-warning-rgb: 163, 82, 0;
    --bs-info-rgb: 11, 78, 214;
    --bs-secondary-rgb: 115, 115, 115;
    --bs-dark-rgb: 10, 10, 10;
    --bs-light-rgb: 245, 245, 245;
}

html.dark {
    --bs-primary: var(--brand-soft);
    --bs-primary-rgb: 122, 165, 245;
    --bs-success-rgb: 5, 223, 114;
    --bs-danger-rgb: 255, 138, 140;
    --bs-warning-rgb: 255, 185, 0;
    --bs-info-rgb: 124, 182, 255;
    --bs-secondary-rgb: 161, 161, 161;
    --bs-dark-rgb: 250, 250, 250;
    --bs-light-rgb: 38, 38, 38;
}

/* --------------------------- BASE / RESET --------------------------- */
* {
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--background) !important;
    color: var(--foreground) !important;
    font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .18s ease, color .18s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit !important;
    color: var(--foreground);
    font-weight: 600;
    letter-spacing: -.01em;
}

a {
    color: var(--primary-text);
    text-decoration: none !important;
}

hr {
    border-color: var(--border);
    opacity: 1;
}

::selection {
    background: color-mix(in srgb, var(--primary) 22%, transparent);
}

/* Nozik scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 99px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--muted-foreground);
}

/* ------------------------------ HEADER ------------------------------ */
#header.header {
    height: var(--header-height);
    background: var(--background) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: none !important;
    padding: 0 1rem !important;
    left: var(--sidebar-width);
    right: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .75rem;
    transition: left .2s ease;
}

.tx-header-left {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.tx-header-right {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
}

.tx-page-title {
    font-size: .875rem;
    font-weight: 500;
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ikonali tugma (toggle, tema) */
.tx-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--foreground);
    border-radius: var(--radius-md);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.tx-icon-btn:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

.tx-icon-btn:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Sana / soat bloki */
.tx-clock {
    text-align: right;
    line-height: 1.25;
    font-size: .75rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    padding-right: .25rem;
}

.tx-clock .tx-clock-date {
    color: var(--foreground);
    font-weight: 500;
}

/* Header profil */
#header .header-nav {
    margin-left: 0 !important;
}

#header .header-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#header .nav-profile {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem .25rem .25rem !important;
    border-radius: var(--radius-md);
    color: var(--foreground) !important;
    font-size: .875rem;
    font-weight: 500;
    transition: background-color .15s ease;
}

#header .nav-profile:hover {
    background: var(--accent);
}

#header .nav-profile img {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    border-radius: 999px;
    border: 1px solid var(--border);
}

#header .nav-profile > span {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------ SIDEBAR ----------------------------- */
#sidebar.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    z-index: 1035;
    background: var(--sidebar) !important;
    color: var(--sidebar-foreground);
    border-right: 1px solid var(--sidebar-border);
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    /* dropup menyusi qirqilib qolmasligi uchun visible — gorizontal
       toshish .sidebar-nav ning overflow-x: hidden'i bilan ushlanadi */
    overflow: visible;
    transition: transform .22s ease;
}

/* Brend bloki */
.tx-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    height: var(--header-height);
    flex: 0 0 auto;
    padding: 0 .75rem;
    color: var(--sidebar-foreground) !important;
    text-decoration: none;
}

.tx-brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .02em;
    overflow: hidden;
}

html.dark .tx-brand-mark {
    background: var(--brand-soft);
}

.tx-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tx-brand-text {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Menyu ro'yxati */
#sidebar .sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .25rem .5rem .75rem !important;
    margin: 0 !important;
    list-style: none;
    display: block;
}

/* Bo'lim sarlavhasi ("Asosiy", "Boshqaruv" ...) */
.tx-nav-label {
    display: flex;
    align-items: center;
    height: 2rem;
    padding: 0 .5rem;
    margin-top: .375rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--muted-foreground);
    white-space: nowrap;
    list-style: none;
}

#sidebar .nav-item {
    margin: 0;
    list-style: none;
}

#sidebar .sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    height: 2.25rem;
    padding: .5rem !important;
    margin-bottom: .125rem !important;
    background: transparent !important;
    color: var(--sidebar-foreground) !important;
    font-size: .875rem;
    font-weight: 400;
    border-radius: var(--radius-md);
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color .15s ease, color .15s ease;
}

#sidebar .sidebar-nav .nav-link i {
    font-size: 1.05rem;
    line-height: 1;
    flex: 0 0 auto;
    color: inherit !important;
    margin: 0;
    width: 1.125rem;
    text-align: center;
}

#sidebar .sidebar-nav .nav-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0 !important;
}

#sidebar .sidebar-nav .nav-link:hover {
    background: var(--sidebar-accent) !important;
    color: var(--sidebar-accent-foreground) !important;
}

#sidebar .sidebar-nav .nav-link.active,
#sidebar .sidebar-nav .nav-link[aria-current="page"] {
    background: var(--sidebar-accent) !important;
    color: var(--sidebar-accent-foreground) !important;
    font-weight: 500;
}

#sidebar .sidebar-nav .nav-link .ms-auto {
    margin-left: auto !important;
    font-size: .8rem !important;
    opacity: .7;
    transition: transform .2s ease;
}

#sidebar .sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

/* Ichki menyu */
#sidebar .nav-content {
    list-style: none;
    padding: .125rem 0 .25rem 1.0625rem !important;
    margin: 0 0 .125rem !important;
    position: relative;
}

#sidebar .nav-content::before {
    content: "";
    position: absolute;
    left: 1.0625rem;
    top: .125rem;
    bottom: .25rem;
    width: 1px;
    background: var(--sidebar-border);
}

#sidebar .nav-content li {
    padding-left: .625rem;
}

#sidebar .nav-content a {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 2rem;
    padding: .375rem .5rem;
    border-radius: var(--radius-md);
    color: var(--muted-foreground) !important;
    font-size: .8125rem;
    transition: background-color .15s ease, color .15s ease;
}

#sidebar .nav-content a i {
    font-size: .5rem;
    opacity: .55;
}

#sidebar .nav-content a:hover {
    background: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground) !important;
}

#sidebar .nav-content a.active {
    background: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground) !important;
    font-weight: 500;
}

#sidebar .nav-content a.active i {
    opacity: 1;
}

/* Pastdagi foydalanuvchi bloki */
.tx-sidebar-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--sidebar-border);
    padding: .5rem;
}

.tx-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .375rem .5rem;
    border: 0;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--sidebar-foreground);
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.tx-user:hover {
    background: var(--sidebar-accent);
    color: var(--sidebar-foreground);
}

.tx-user img,
.tx-user .tx-user-mark {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 999px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid var(--sidebar-border);
}

.tx-user-meta {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.2;
}

.tx-user-name {
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-user-role {
    font-size: .6875rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------- MAIN ------------------------------- */
#main.main {
    margin-left: var(--sidebar-width);
    margin-top: var(--header-height);
    padding: 1.5rem 1.5rem 2rem !important;
    background: var(--background);
    transition: margin-left .2s ease;
    min-height: calc(100vh - var(--header-height) - 3.5rem);
}

.pagetitle {
    margin-bottom: 1.25rem;
}

.pagetitle h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground) !important;
    letter-spacing: -.02em;
    margin-bottom: .25rem;
}

.pagetitle .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: .8125rem;
}

.pagetitle .breadcrumb a,
.pagetitle .breadcrumb-item {
    color: var(--muted-foreground);
}

.pagetitle .breadcrumb-item.active {
    color: var(--foreground);
}

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

/* Sidebar yig'ilgan holat (desktop) */
body.toggle-sidebar #sidebar.sidebar {
    transform: translateX(-100%);
}

body.toggle-sidebar #header.header {
    left: 0;
}

body.toggle-sidebar #main.main,
body.toggle-sidebar #footer.footer {
    margin-left: 0;
}

/* ------------------------------ CARDS ------------------------------- */
.card {
    background: var(--card) !important;
    color: var(--card-foreground) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: none !important;
    margin-bottom: 1.5rem;
}

.card-header,
.card-footer {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
    padding: 1rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

.card-title {
    color: var(--foreground) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0 0 .5rem 0 !important;
    letter-spacing: -.01em;
}

.card-title span {
    color: var(--muted-foreground);
    font-size: .8125rem;
    font-weight: 400;
}

/* NiceAdmin statistik kartalari */
.card .card-icon,
.info-card .card-icon {
    background: var(--muted) !important;
    color: var(--primary) !important;
    border-radius: var(--radius-md) !important;
}

/* ------------------------------ TABLES ------------------------------ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--foreground);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: var(--muted);
    --bs-table-striped-color: var(--foreground);
    --bs-table-hover-bg: var(--accent);
    --bs-table-hover-color: var(--foreground);
    color: var(--foreground);
    font-size: .875rem;
    vertical-align: middle;
}

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

.table thead th {
    background: var(--muted) !important;
    color: var(--muted-foreground) !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap;
}

.table-responsive {
    border-radius: var(--radius-md);
}

/* DataTables */
table.dataTable,
table.dataTable thead th,
table.dataTable tbody td,
table.dataTable tfoot th {
    border-color: var(--border) !important;
    border-width: 0 0 1px 0 !important;
    color: var(--foreground) !important;
    background: transparent !important;
}

table.dataTable thead th,
table.dataTable tfoot th {
    background: var(--muted) !important;
    color: var(--muted-foreground) !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
}

table.dataTable tbody tr:hover > td {
    background: var(--accent) !important;
}

th.sorting::before,
th.sorting::after,
th.sorting_asc::before,
th.sorting_asc::after,
th.sorting_desc::before,
th.sorting_desc::after {
    color: var(--muted-foreground) !important;
    opacity: .55;
}

.dataTables_wrapper .dataTables_filter input {
    background: var(--background) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--input) !important;
    border-radius: var(--radius-md) !important;
    padding: .375rem .625rem !important;
    width: 16rem !important;
    font-size: .875rem;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent);
}

.dataTables_wrapper .dataTables_length select {
    background: var(--background) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--input) !important;
    border-radius: var(--radius-sm) !important;
    padding: .25rem 1.5rem .25rem .5rem !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_processing {
    color: var(--muted-foreground) !important;
    font-size: .8125rem;
}

.dataTables_wrapper .dataTables_processing {
    background: var(--popover) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--foreground) !important;
    border-radius: var(--radius-sm) !important;
    padding: .25rem .625rem !important;
    margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--accent) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    border-color: transparent !important;
    /* DataTables o'z CSS'ida #666 ni !important bilan beradi — aniq qiymat yozamiz */
    color: #6a6a6a !important;
    opacity: .9;
}

html.dark .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
html.dark .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover,
html.dark .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:active,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #a1a1a1 !important;
}

/* Laravel pagination */
.pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--foreground);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-hover-bg: var(--accent);
    --bs-pagination-hover-color: var(--foreground);
    --bs-pagination-hover-border-color: var(--border);
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--muted-foreground);
    --bs-pagination-disabled-border-color: var(--border);
    --bs-pagination-border-radius: var(--radius-md);
}

/* ------------------------------ FORMS ------------------------------- */
.form-control,
.form-select,
.input-group-text {
    background: var(--background) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--input) !important;
    border-radius: var(--radius-md) !important;
    font-size: .875rem;
    padding: .5rem .75rem;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.input-group-text {
    background: var(--muted) !important;
    color: var(--muted-foreground) !important;
}

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

.form-control:focus,
.form-select:focus {
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent) !important;
}

.form-control:disabled,
.form-select:disabled {
    background: var(--muted) !important;
    color: var(--muted-foreground) !important;
    opacity: 1;
}

.form-label,
.col-form-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: .375rem;
}

.form-text {
    color: var(--muted-foreground);
}

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

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

.form-check-input:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent);
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    background-size: 14px 14px;
}

/* Ochilgan ro'yxat (native popup) — Windows'dagi Chrome/Edge uni mavzuga
   o'zi moslashtirmaydi, shuning uchun ranglarini o'zimiz beramiz */
.form-select option,
.form-select optgroup {
    background-color: var(--popover);
    color: var(--popover-foreground);
}

html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6);
}

/* ----------------------------- BUTTONS ------------------------------ */
.btn {
    --bs-btn-border-radius: var(--radius-md);
    border-radius: var(--radius-md);
    font-size: .875rem;
    font-weight: 500;
    padding: .5rem .875rem;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.btn:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.btn-sm {
    padding: .3125rem .625rem;
    font-size: .8125rem;
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--primary) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--primary) 88%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--primary) 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--primary) 80%, #000);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}

.btn-secondary,
.btn-light {
    --bs-btn-bg: var(--secondary);
    --bs-btn-border-color: var(--border);
    --bs-btn-color: var(--secondary-foreground);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-hover-color: var(--accent-foreground);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-color: var(--accent-foreground);
    --bs-btn-active-border-color: var(--border);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
    --bs-btn-color: var(--foreground);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-hover-color: var(--foreground);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-color: var(--foreground);
    --bs-btn-active-border-color: var(--border);
}

.btn-danger {
    --bs-btn-bg: var(--destructive);
    --bs-btn-border-color: var(--destructive);
    --bs-btn-hover-bg: color-mix(in srgb, var(--destructive) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--destructive) 88%, #000);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: color-mix(in srgb, var(--success) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--success) 88%, #000);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-warning {
    --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--warning) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--warning) 88%, #000);
}

.btn-info {
    --bs-btn-bg: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--info) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--info) 88%, #000);
}

/* ------------------------ DROPDOWN / MODAL -------------------------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--popover);
    --bs-dropdown-color: var(--popover-foreground);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-link-color: var(--popover-foreground);
    --bs-dropdown-link-hover-bg: var(--accent);
    --bs-dropdown-link-hover-color: var(--accent-foreground);
    --bs-dropdown-link-active-bg: var(--accent);
    --bs-dropdown-link-active-color: var(--accent-foreground);
    --bs-dropdown-header-color: var(--muted-foreground);
    --bs-dropdown-divider-bg: var(--border);
    --bs-dropdown-border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm), 0 8px 24px -8px rgba(0, 0, 0, .18);
    padding: .25rem;
    font-size: .875rem;
    min-width: 12rem;
}

html.dark .dropdown-menu {
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, .7);
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: .4375rem .625rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Shablon (style.css) hover uchun qattiq `#f6f9ff` beradi — qorong'u rejimda
   satr oppoq bo'lib, matn ko'rinmay qolardi. Shu sabab mavzu tokenlariga
   qaytaramiz. Selektorlar shablonnikidan kuchsiz bo'lmasligi kerak. */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.header-nav .profile .dropdown-item:hover,
.header-nav .profile .dropdown-item:focus {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* Tanlangan satr (masalan, joriy mavzu) — fon o'sha, lekin ajralib tursin */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active,
.header-nav .profile .dropdown-item.active,
.header-nav .profile .dropdown-item:active {
    background-color: var(--accent);
    color: var(--primary-text);
    font-weight: 600;
}

.dropdown-header {
    padding: .5rem .625rem;
}

.dropdown-header h6 {
    font-size: .875rem;
    margin: 0 0 .125rem;
    color: var(--foreground);
}

.dropdown-header span {
    font-size: .75rem;
    color: var(--muted-foreground);
}

.dropdown-menu-arrow::before,
.dropdown-menu-arrow::after {
    display: none !important;
}

.modal-content {
    background: var(--popover) !important;
    color: var(--popover-foreground) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
}

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

.modal-title {
    font-size: 1.0625rem;
    font-weight: 600;
}

.modal-backdrop.show {
    opacity: .5;
}

.btn-close {
    transform: scale(.85);
}

html.dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.offcanvas {
    background: var(--popover);
    color: var(--popover-foreground);
    border-color: var(--border);
}

.tooltip-inner {
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: .75rem;
}

/* ------------------------------ BADGES ------------------------------ */
.badge {
    font-size: .6875rem;
    font-weight: 500;
    padding: .25rem .5rem;
    border-radius: 999px;
    line-height: 1.2;
}

.badge.bg-danger { background: color-mix(in srgb, var(--destructive) 15%, transparent) !important; color: var(--destructive-text) !important; }
.badge.bg-success { background: color-mix(in srgb, var(--success) 15%, transparent) !important; color: var(--success-text) !important; }
.badge.bg-warning { background: color-mix(in srgb, var(--warning) 15%, transparent) !important; color: var(--warning-text) !important; }
.badge.bg-primary { background: color-mix(in srgb, var(--primary) 18%, transparent) !important; color: var(--primary-text) !important; }
.badge.bg-info { background: color-mix(in srgb, var(--info) 15%, transparent) !important; color: var(--info-text) !important; }
.badge.bg-secondary { background: var(--muted) !important; color: var(--muted-foreground) !important; }
.badge.bg-warning.text-dark { color: var(--warning-text) !important; }

/* --------------------------- ALERTS / MISC -------------------------- */
.alert {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    font-size: .875rem;
    background: var(--muted);
    color: var(--foreground);
}

.alert-success { background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success-text); }
.alert-danger  { background: color-mix(in srgb, var(--destructive) 12%, transparent); border-color: color-mix(in srgb, var(--destructive) 30%, transparent); color: var(--destructive-text); }
.alert-warning { background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning-text); }
.alert-info    { background: color-mix(in srgb, var(--info) 12%, transparent); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info-text); }

.nav-tabs {
    border-bottom: 1px solid var(--border);
}

.nav-tabs .nav-link {
    color: var(--muted-foreground);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: .875rem;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    color: var(--foreground);
}

.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--primary-text);
    border-bottom-color: var(--primary);
}

.list-group-item {
    background: var(--card);
    color: var(--foreground);
    border-color: var(--border);
}

/* ===================================================================
   KONTRAST — har ikkala mavzuda ham matn ko'rinib turishi uchun.
   NiceAdmin va Bootstrap qattiq kodlangan ranglar ishlatadi
   (#012970, #444, .text-dark, .bg-light ...). Ularning barchasini
   token'larga bog'laymiz, aks holda qorong'u rejimda yozuv
   fon bilan qo'shilib ketadi.
   =================================================================== */

/* --- NiceAdmin'ning to'q ko'k / kulrang matnlari --- */
.pagetitle h1,
.card-title,
.card-footer,
.breadcrumb .active,
.breadcrumb a:hover,
.dashboard .info-card h6,
.dashboard .activity .activity-item .activite-label,
.dashboard .news h4 a,
.dashboard .news h4 a:hover,
.dashboard .news p,
.profile .profile-card h2,
.profile .profile-overview .card-title,
.contact .info-box h3,
.faq .basic h6,
.faq .basic p,
.error-404 h1,
.error-404 h2,
.iconslist .label,
.header-nav .messages .message-item h4,
.header-nav .messages .message-item p,
.header-nav .notifications .notification-item p,
.header-nav .profile .dropdown-header h6,
.accordion-flush .accordion-body,
.nav-tabs-bordered .nav-link {
    color: var(--foreground) !important;
}

.dashboard .news p,
.faq .basic p,
.header-nav .messages .message-item p,
.header-nav .notifications .notification-item p,
.footer .copyright,
.footer .credits,
.iconslist .icon,
.profile .profile-overview .label,
.profile .profile-overview .row .label {
    color: var(--muted-foreground) !important;
}

.nav-tabs-bordered .nav-link.active,
.nav-tabs-bordered .nav-link:focus,
.accordion-button:not(.collapsed),
.contact .info-box i,
.dropdown-menu .dropdown-footer a {
    color: var(--primary-text) !important;
}

/* --- Bootstrap matn utilitalari --- */
.text-muted,
.text-secondary,
.text-body-secondary {
    color: var(--muted-foreground) !important;
}

.text-dark,
.text-black,
.text-body,
.text-body-emphasis,
.text-emphasis {
    color: var(--foreground) !important;
}

.text-black-50 {
    color: var(--muted-foreground) !important;
}

/* .text-light odatda xira ikonka/matn uchun ishlatiladi — yorug' rejimda
   oq fonda butunlay ko'rinmay qoladi, shuning uchun xira kulrangga o'tkazamiz.
   Rangli/qora fon ustida turgan bo'lsa .text-white ishlatilishi kerak. */
.text-light:not(.btn):not(.badge) {
    color: var(--muted-foreground) !important;
}

/* --- Fon utilitalari --- */
.bg-white {
    background-color: var(--card) !important;
}

.bg-light {
    background-color: var(--muted) !important;
    color: var(--foreground) !important;
}

.bg-body,
.bg-body-tertiary,
.bg-body-secondary {
    background-color: var(--muted) !important;
    color: var(--foreground) !important;
}

.bg-dark {
    background-color: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
}

/* Rangli fon ustidagi oq matn har doim oq qolsin */
.bg-primary, .bg-success, .bg-danger, .bg-info,
.text-bg-primary, .text-bg-success, .text-bg-danger, .text-bg-info,
.bg-primary *, .bg-success *, .bg-danger *, .bg-info * {
    color: #fff;
}

.bg-primary { background-color: var(--primary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--destructive) !important; }
.bg-warning { background-color: var(--warning) !important; color: #fff !important; }
.bg-info { background-color: var(--info) !important; }
.bg-secondary { background-color: var(--muted) !important; color: var(--foreground) !important; }

/* --- Chegaralar --- */
.border,
.border-top, .border-bottom, .border-start, .border-end,
.border-light, .border-secondary {
    border-color: var(--border) !important;
}

.border-primary { border-color: var(--primary) !important; }
.border-success { border-color: var(--success) !important; }
.border-danger { border-color: var(--destructive) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-info { border-color: var(--info) !important; }

/* --- Havolalar --- */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    opacity: .85;
}

.link-dark, .link-body-emphasis {
    color: var(--foreground) !important;
}

/* --- Jadval ichidagi matn --- */
.table .fw-semibold,
.table .fw-bold,
.table td,
.table th {
    color: var(--foreground);
}

.table .text-muted,
.table small.text-muted {
    color: var(--muted-foreground) !important;
}

/* --- Qorong'u rejimga xos qo'shimcha tuzatishlar --- */
html.dark .badge.bg-light,
html.dark .badge.bg-white {
    background: var(--muted) !important;
    color: var(--muted-foreground) !important;
    border-color: var(--border) !important;
}

html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-lg {
    box-shadow: none !important;
}

html.dark img.bg-white,
html.dark .rounded-circle.bg-light {
    background: var(--muted) !important;
}

/* Matn hech qachon fon bilan bir xil bo'lib qolmasin */
html.dark [style*="color:#012970"],
html.dark [style*="color: #012970"],
html.dark [style*="color:#0f172a"],
html.dark [style*="color: #0f172a"],
html.dark [style*="color:#000"],
html.dark [style*="color: #000"] {
    color: var(--foreground) !important;
}

html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background-color:#fff"],
html.dark [style*="background-color: #fff"] {
    background: var(--card) !important;
    color: var(--foreground) !important;
}

.progress {
    background: var(--muted);
    border-radius: 999px;
}

.accordion {
    --bs-accordion-bg: var(--card);
    --bs-accordion-color: var(--foreground);
    --bs-accordion-border-color: var(--border);
    --bs-accordion-btn-bg: var(--card);
    --bs-accordion-btn-color: var(--foreground);
    --bs-accordion-active-bg: var(--accent);
    --bs-accordion-active-color: var(--foreground);
}

/* ------------------------------ FOOTER ------------------------------ */
#footer.footer {
    margin-left: var(--sidebar-width);
    background: var(--background);
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: .8125rem;
    padding: 1rem 1.5rem;
    transition: margin-left .2s ease;
}

#footer.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

#footer .copyright,
#footer .credits {
    color: var(--muted-foreground);
    text-align: left;
    margin: 0;
}

#footer strong span {
    color: var(--foreground);
}

/* Tepaga qaytish */
.back-to-top {
    background: var(--primary) !important;
    border-radius: var(--radius-md) !important;
    width: 2.5rem;
    height: 2.5rem;
    box-shadow: var(--shadow-sm);
}

.back-to-top i {
    color: #fff;
}

/* ------------------------- SIDEBAR OVERLAY -------------------------- */
.tx-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    z-index: 1034;
    transition: opacity .2s ease, visibility .2s ease;
}

body.sidebar-open .tx-overlay {
    opacity: 1;
    visibility: visible;
}

/* ------------------------------ MOBIL ------------------------------- */
@media (max-width: 991.98px) {
    :root {
        --sidebar-width: 18rem;
    }

    #sidebar.sidebar {
        transform: translateX(-100%);
        box-shadow: 0 0 40px rgba(0, 0, 0, .18) !important;
    }

    body.sidebar-open #sidebar.sidebar,
    body.sidebar-open.toggle-sidebar #sidebar.sidebar {
        transform: translateX(0);
    }

    body.toggle-sidebar #sidebar.sidebar {
        transform: translateX(-100%);
    }

    #header.header {
        left: 0;
        padding: 0 .75rem !important;
    }

    #main.main,
    body.toggle-sidebar #main.main {
        margin-left: 0;
        padding: 1rem 1rem 1.5rem !important;
    }

    #footer.footer,
    body.toggle-sidebar #footer.footer {
        margin-left: 0;
        padding: 1rem;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .pagetitle h1 {
        font-size: 1.25rem;
    }

    .tx-clock {
        display: none;
    }

    .card-body {
        padding: 1rem;
    }

    .card {
        margin-bottom: 1rem;
    }
}

@media (max-width: 575.98px) {
    #header .nav-profile > span {
        display: none !important;
    }

    .tx-page-title {
        font-size: .8125rem;
    }

    #main.main {
        padding: .875rem .75rem 1.25rem !important;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_filter label {
        width: 100%;
        display: block;
        text-align: left;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem;
        justify-content: center;
        padding-top: .5rem;
    }
}

/* Mobil: jadvallar karta ko'rinishida */
@media (max-width: 767.98px) {
    .table-responsive {
        border: none !important;
    }

    table.dataTable,
    table.table {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    table.dataTable thead,
    table.table thead {
        display: none !important;
    }

    table.dataTable tbody,
    table.table tbody {
        display: block !important;
        width: 100% !important;
    }

    table.dataTable tbody tr,
    table.table tbody tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: .75rem !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-lg) !important;
        background: var(--card) !important;
        box-shadow: none !important;
        padding: .25rem .75rem !important;
    }

    table.dataTable tbody td,
    table.table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: .75rem;
        text-align: right !important;
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
        padding: .625rem .25rem !important;
        font-size: .8125rem;
    }

    table.dataTable tbody td:last-child,
    table.table tbody td:last-child {
        border-bottom: none !important;
    }

    table.dataTable tbody td::before,
    table.table tbody td::before {
        content: attr(data-label);
        font-weight: 500;
        text-align: left;
        color: var(--muted-foreground);
        flex-shrink: 0;
        max-width: 50%;
        word-wrap: break-word;
    }

    table.dataTable tbody tr:hover > td {
        background: transparent !important;
    }

    table.dataTable tbody td .btn {
        margin: 2px !important;
    }

    .back-to-top {
        bottom: 1rem !important;
    }
}

/* Grafiklar qorong'u rejimda o'qilishi uchun */
html.dark .apexcharts-text,
html.dark .apexcharts-legend-text {
    fill: var(--muted-foreground) !important;
    color: var(--muted-foreground) !important;
}

html.dark .apexcharts-gridline,
html.dark .apexcharts-xaxis line,
html.dark .apexcharts-yaxis line {
    stroke: var(--border) !important;
}

html.dark .apexcharts-tooltip {
    background: var(--popover) !important;
    color: var(--popover-foreground) !important;
    border-color: var(--border) !important;
}

html.dark .apexcharts-tooltip-title {
    background: var(--muted) !important;
    border-color: var(--border) !important;
}

/* ===================================================================
   DASHBOARD KOMPONENTLARI (my.e-bozor.com uslubida)
   =================================================================== */

/* Sahifa sarlavhasi qatori */
.tx-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.tx-page-head h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 .25rem;
}

.tx-page-head .tx-page-sub {
    color: var(--muted-foreground);
    font-size: .8125rem;
    margin: 0;
}

/* Umumiy karta (dashboard bloklari) */
.tx-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tx-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.tx-card-head h3,
.tx-card-title {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--foreground);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tx-card-title i {
    color: var(--muted-foreground);
    font-size: 1rem;
}

.tx-card-sub {
    font-size: .75rem;
    color: var(--muted-foreground);
    margin: .125rem 0 0;
}

.tx-card-meta {
    font-size: .75rem;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.tx-card-meta strong {
    color: var(--foreground);
}

/* --- Doiraviy (donut) statistik karta --- */
.tx-ring-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1rem 1rem 1.125rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tx-ring-label {
    align-self: flex-start;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: .75rem;
}

/* Halqa: conic-gradient bilan chiziladi — JS kutubxona kerak emas */
.tx-ring {
    position: relative;
    width: 8.75rem;
    height: 8.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        conic-gradient(var(--ring-color, var(--primary)) calc(var(--ring-value, 0) * 1%),
            var(--ring-track, var(--muted)) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
}

.tx-ring-wrap {
    position: relative;
    width: 8.75rem;
    height: 8.75rem;
    display: grid;
    place-items: center;
}

.tx-ring-wrap > .tx-ring {
    position: absolute;
    inset: 0;
}

.tx-ring-center {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--foreground);
    line-height: 1;
}

.tx-ring-center small {
    display: block;
    font-size: .6875rem;
    font-weight: 400;
    color: var(--muted-foreground);
    margin-top: .25rem;
}

.tx-ring-values {
    margin-top: .875rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.tx-ring-values .sep {
    color: var(--muted-foreground);
    font-weight: 400;
    margin: 0 .125rem;
}

.tx-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    margin-top: .5rem;
    font-size: .75rem;
    color: var(--muted-foreground);
}

.tx-legend span {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
}

/* --- Kichik KPI karta --- */
.tx-kpi {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .75rem .75rem .875rem;
    height: 100%;
    color: var(--foreground) !important;
    transition: border-color .15s ease, background-color .15s ease;
}

a.tx-kpi:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: var(--muted);
    opacity: 1;
}

.tx-kpi-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-kpi-value {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    word-break: break-word;
}

.tx-kpi-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .375rem;
    font-size: .625rem;
    line-height: 1.3;
    color: var(--muted-foreground);
}

.tx-kpi-foot i {
    font-size: .875rem;
    opacity: .6;
}

/* --- Kichik doiralar qatori ("Sektorlar kesimida" uslubi) --- */
.tx-mini-rings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 1rem;
}

.tx-mini-ring {
    text-align: center;
}

.tx-mini-ring .tx-ring-wrap,
.tx-mini-ring .tx-ring {
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto;
}

.tx-mini-ring .tx-ring {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
}

.tx-mini-ring .tx-ring-center {
    font-size: 1.125rem;
}

.tx-mini-ring .tx-mini-values {
    margin-top: .5rem;
    font-size: .875rem;
    font-weight: 700;
}

.tx-mini-ring .tx-mini-name {
    font-size: .75rem;
    color: var(--muted-foreground);
    margin-top: .125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Yumshoq rangli mini plitkalar (o'ng ustun) --- */
.tx-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .625rem;
}

.tx-tile {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem .75rem;
    border-radius: var(--radius-lg);
    background: var(--muted);
    border: 1px solid transparent;
    color: var(--foreground) !important;
    min-width: 0;
}

.tx-tile i {
    font-size: 1rem;
    flex: 0 0 auto;
}

.tx-tile-num {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

.tx-tile-cap {
    font-size: .6875rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-tile--success { background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.tx-tile--success i, .tx-tile--success .tx-tile-num { color: var(--success-text); }
.tx-tile--warning { background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
.tx-tile--warning i, .tx-tile--warning .tx-tile-num { color: var(--warning-text); }
.tx-tile--danger { background: color-mix(in srgb, var(--destructive) 12%, transparent); border-color: color-mix(in srgb, var(--destructive) 22%, transparent); }
.tx-tile--danger i, .tx-tile--danger .tx-tile-num { color: var(--destructive-text); }
.tx-tile--info { background: color-mix(in srgb, var(--info) 12%, transparent); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.tx-tile--info i, .tx-tile--info .tx-tile-num { color: var(--info-text); }

/* --- Progress chizig'i --- */
.tx-progress {
    height: .375rem;
    border-radius: 999px;
    background: var(--muted);
    overflow: hidden;
    margin: .5rem 0 .625rem;
}

.tx-progress > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--success);
}

/* --- Gorizontal bar ro'yxati --- */
.tx-bars {
    display: grid;
    gap: .625rem;
}

.tx-bar-row {
    display: grid;
    grid-template-columns: minmax(6rem, 9rem) 1fr auto;
    align-items: center;
    gap: .75rem;
    font-size: .8125rem;
}

.tx-bar-row .tx-bar-name {
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tx-bar-track {
    display: block;
    width: 100%;
    min-width: 3rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--muted);
    overflow: hidden;
}

.tx-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
}

.tx-bar-row .tx-bar-val {
    font-weight: 600;
    color: var(--foreground);
    white-space: nowrap;
}

/* --- Legenda ro'yxati (donut yonida) --- */
.tx-legend-list {
    display: grid;
    gap: .5rem;
    min-width: 10rem;
}

.tx-legend-list > div {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--muted-foreground);
}

.tx-legend-list .tx-legend-val {
    margin-left: auto;
    font-weight: 700;
    color: var(--foreground);
}

/* --- Ro'yxat qatorlari (o'ng ustun) --- */
.tx-rows {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.tx-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 0;
    border-bottom: 1px solid var(--border);
}

.tx-row:last-child {
    border-bottom: 0;
}

.tx-row-main {
    min-width: 0;
    flex: 1 1 auto;
}

.tx-row-title {
    font-size: .875rem;
    font-weight: 600;
    color: var(--foreground);
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.tx-row-sub {
    font-size: .75rem;
    color: var(--muted-foreground);
    margin-top: .125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tx-row-val {
    font-size: .875rem;
    font-weight: 600;
    color: var(--foreground);
    white-space: nowrap;
}

/* --- Bo'sh holat --- */
.tx-empty {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--muted-foreground);
    font-size: .875rem;
    flex: 1 1 auto;
}

.tx-empty i {
    font-size: 1.5rem;
    opacity: .45;
    margin-bottom: .5rem;
}

/* --- Yashil / qizil raqamlar --- */
.tx-pos { color: var(--success-text); }
.tx-neg { color: var(--destructive-text); }
.tx-warn { color: var(--warning-text); }
.tx-inf { color: var(--info-text); }
.tx-pri { color: var(--primary-text); }

/* --- Mobil --- */
@media (max-width: 767.98px) {
    .tx-card,
    .tx-ring-card {
        padding: 1rem;
    }

    .tx-ring,
    .tx-ring-wrap {
        width: 7.5rem;
        height: 7.5rem;
    }

    .tx-tiles {
        grid-template-columns: 1fr 1fr;
    }

    .tx-bar-row {
        grid-template-columns: minmax(5rem, 7rem) 1fr auto;
        gap: .5rem;
        font-size: .75rem;
    }

    .tx-mini-rings {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Davr filtri — segmentli tugmalar (Bugun / Hafta / Oy) */
.tx-seg {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    padding: .1875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--muted);
}

.tx-seg > a {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .8125rem;
    border-radius: var(--radius-md);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--muted-foreground);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.tx-seg > a:hover {
    color: var(--foreground);
}

.tx-seg > a.is-active {
    background: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-xs);
}

/* ---------- Sarlavha o'ngidagi asboblar: hudud filtri + davr tugmalari ---------- */
.tx-head-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Hudud filtri — davr tugmalari (.tx-seg) bilan bir xil balandlik va uslubda */
.tx-hudud {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    padding: .1875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--muted);
}

.tx-hudud-select {
    appearance: none;
    -webkit-appearance: none;
    max-width: 11rem;
    padding: .3125rem 1.5rem .3125rem .625rem;
    border: 0;
    border-radius: var(--radius-md);
    background-color: transparent;
    /* O'ngdagi kichkina strelka — brauzer standart o'qi olib tashlangani uchun */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .375rem center;
    background-size: .875rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.tx-hudud-select:hover:not(:disabled) {
    color: var(--foreground);
}

/* Tanlangan holat — davr tugmasidagi "is-active" bilan bir xil ko'rinish.
   `.is-set` serverda qo'yiladi: `required` bo'lmagan select har doim `:valid`
   bo'lgani uchun CSS bilan "tanlanganmi" degan holatni bilib bo'lmaydi. */
.tx-hudud-select.is-set {
    background-color: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-xs);
}

.tx-hudud-select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

.tx-hudud-select:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Ochilgan ro'yxatning fon/matn rangi — qorong'u rejimda oq bo'lib
   qolmasligi uchun (yuqoridagi `color-scheme` ustiga qo'shimcha kafolat) */
.tx-hudud-select option {
    background-color: var(--popover);
    color: var(--popover-foreground);
    font-weight: 500;
}

/* Tozalash tugmasi */
.tx-hudud-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted-foreground);
    font-size: .6875rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.tx-hudud-clear:hover {
    background: var(--card);
    color: var(--destructive);
}

/* Sarlavha ostidagi "qaysi hudud ko'rsatilyapti" belgisi */
.tx-hudud-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-weight: 600;
    color: var(--foreground);
}

.tx-hudud-soni {
    padding: 0 .3125rem;
    border-radius: 999px;
    background: var(--muted);
    font-size: .6875rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

@media (max-width: 575.98px) {
    .tx-head-tools { width: 100%; }
    .tx-hudud { width: 100%; }
    .tx-hudud-select { flex: 1 1 0; max-width: none; min-width: 0; }
}

/* Ko'p rangli progress chizig'i — obuna holati taqsimoti uchun */
.tx-progress--split {
    display: flex;
    overflow: hidden;
}

.tx-progress--split > span {
    position: static;
    height: 100%;
    border-radius: 0;
}

/* Mayda sonlar qatori — platforma ko'rsatkichlari */
.tx-mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
    gap: .5rem;
    text-align: center;
}

.tx-mini-stats > div {
    padding: .5rem .25rem;
    border-radius: var(--radius-md);
    background: var(--muted);
    font-size: .6875rem;
    color: var(--muted-foreground);
}

.tx-mini-num {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--foreground);
}

/* "Kamera aniqladi" belgisi — bron yo'q, holat kamera hisobidan olingan */
.tx-kam-belgi {
    display: inline-flex;
    align-items: center;
    gap: .1875rem;
    padding: 0 .3125rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--info) 16%, transparent);
    color: var(--info-text, var(--info));
    font-size: .625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Jonli holat nuqtasi — "hozir to'y bo'lyapti" */
.tx-live {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent);
    animation: tx-live-pulse 1.8s infinite;
    flex: 0 0 auto;
}

@keyframes tx-live-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
    70%  { box-shadow: 0 0 0 .375rem transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .tx-live { animation: none; }
}

/* Holat ustuni — jadvaldagi ixcham matn */
.tx-state {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    white-space: nowrap;
}

.tx-state small {
    color: var(--muted-foreground);
    font-size: .6875rem;
}

@media (max-width: 575.98px) {
    .tx-seg {
        width: 100%;
        justify-content: space-between;
        /* Tugmalar ko'p bo'lsa (Bugun / Hafta / Oy / Hammasi) — sig'masa surilsin */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tx-seg > a {
        flex: 1 0 auto;
        justify-content: center;
        padding: .375rem .5rem;
    }
}

/* Chop etish */
@media print {
    #sidebar, #header, #footer, .back-to-top, .tx-overlay { display: none !important; }
    #main.main { margin: 0 !important; padding: 0 !important; }
}

/* ===================================================================
   YAKUNIY SAYQAL (v2) — interfeysning o'ziga xos ko'rinishi.
   Ranglar tokenlardan olinadi, shuning uchun yorug'/qorong'u rejimda
   ham to'g'ri ishlaydi. Maqsad — soddalashtirish emas, boyitish.
   =================================================================== */

/* ------------------------ Sidebar: aktiv element ------------------------ */
/* Aktiv menyu endi kulrang emas — brend rangida, chapida ingichka ustun */
#sidebar .sidebar-nav .nav-link {
    position: relative;
}

#sidebar .sidebar-nav .nav-link.active,
#sidebar .sidebar-nav .nav-link[aria-current="page"] {
    background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
    color: var(--primary-text) !important;
    font-weight: 600;
}

#sidebar .sidebar-nav .nav-link.active::before,
#sidebar .sidebar-nav .nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.25rem;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

#sidebar .sidebar-nav .nav-link.active i:first-child {
    color: var(--primary-text) !important;
}

#sidebar .nav-content a.active {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary-text) !important;
}

#sidebar .nav-content a.active i {
    color: var(--primary-text) !important;
}

/* Bo'lim sarlavhalari — mayda kapital, kengaytirilgan harf oralig'i */
.tx-nav-label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
    margin-top: .75rem;
}

/* Brend belgisi — tekis emas, yumshoq gradient */
.tx-brand-mark {
    background: linear-gradient(135deg,
        var(--brand) 0%,
        color-mix(in srgb, var(--brand) 65%, #4c7fe0) 100%) !important;
    box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--brand) 60%, transparent);
}

html.dark .tx-brand-mark {
    background: linear-gradient(135deg, var(--brand-soft) 0%, #7aa5f5 100%) !important;
}

.tx-brand-text {
    letter-spacing: -.015em;
}

/* Sidebar chegarasi — o'ng tomonda yumshoq soya */
#sidebar.sidebar {
    box-shadow: 1px 0 0 0 var(--sidebar-border), 4px 0 16px -12px rgba(0, 0, 0, .25) !important;
}

/* ------------------------------- Header ------------------------------- */
/* Yarim shaffof fon + blur — kontent tagidan siljib o'tadi */
#header.header {
    background: color-mix(in srgb, var(--background) 82%, transparent) !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
}

@supports not (backdrop-filter: blur(1px)) {
    #header.header {
        background: var(--background) !important;
    }
}

.tx-page-title {
    letter-spacing: -.015em;
}

/* Sarlavha oldidagi brend nuqtasi */
.tx-header-left .tx-page-title::before {
    content: "";
    display: inline-block;
    width: .375rem;
    height: .375rem;
    border-radius: 999px;
    background: var(--primary);
    vertical-align: middle;
    margin-right: .5rem;
}

/* -------------------------- Sahifa sarlavhasi -------------------------- */
/* Chapida brend ustuni — sahifa boshlanishini aniq belgilaydi */
.pagetitle,
.tx-page-head {
    position: relative;
    padding-left: .875rem;
}

.pagetitle::before,
.tx-page-head::before {
    content: "";
    position: absolute;
    left: 0;
    top: .1875rem;
    bottom: .1875rem;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg,
        var(--primary) 0%,
        color-mix(in srgb, var(--primary) 25%, transparent) 100%);
}

/* ------------------------------ Kartalar ------------------------------ */
/* Tekis chegara o'rniga — nozik soya va ustki yorug'lik chizig'i */
.card,
.tx-card {
    box-shadow: var(--shadow-xs) !important;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.card:hover,
.tx-card:hover {
    box-shadow: var(--shadow-sm) !important;
    border-color: color-mix(in srgb, var(--border) 55%, var(--primary)) !important;
}

.card > .card-header {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--muted) 55%, transparent) 0%,
        transparent 100%) !important;
    font-weight: 600;
}

/* Karta sarlavhasi oldidagi ikonka — brend rangida */
.tx-card-title i,
.card-title i {
    color: var(--primary-text);
}

/* ------------------------------ Jadvallar ------------------------------ */
.table thead th:first-child {
    border-top-left-radius: var(--radius-sm);
}

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

.table tbody tr {
    transition: background-color .12s ease;
}

/* Qator ustiga kelganda chapda brend chizig'i paydo bo'ladi */
.table-hover > tbody > tr:hover > * {
    background-color: color-mix(in srgb, var(--primary) 6%, transparent) !important;
}

.table-hover > tbody > tr:hover > *:first-child {
    box-shadow: inset 3px 0 0 0 var(--primary);
}

/* ------------------------------- Tugmalar ------------------------------- */
.btn {
    transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.btn-primary {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 92%, #ffffff) 0%,
        var(--primary) 100%) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 1px 2px 0 color-mix(in srgb, var(--primary) 35%, transparent);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary) !important;
    box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--primary) 65%, transparent);
}

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

/* ------------------------------- Formalar ------------------------------- */
/* Fokus halqasi — brend rangi, aniqroq ko'rinadigan */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

/* ------------------------------- Nishonlar ------------------------------- */
.badge {
    border: 1px solid transparent;
}

.badge.bg-danger  { border-color: color-mix(in srgb, var(--destructive) 30%, transparent) !important; }
.badge.bg-success { border-color: color-mix(in srgb, var(--success) 30%, transparent) !important; }
.badge.bg-warning { border-color: color-mix(in srgb, var(--warning) 32%, transparent) !important; }
.badge.bg-primary { border-color: color-mix(in srgb, var(--primary) 32%, transparent) !important; }
.badge.bg-info    { border-color: color-mix(in srgb, var(--info) 30%, transparent) !important; }

/* ------------------------------- Modallar ------------------------------- */
.modal-content {
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
}

.modal-header {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--muted) 55%, transparent) 0%,
        transparent 100%);
}

/* ---------------------------- Aylanma paneli ---------------------------- */
/* Nozik skrollbar — ro'yxatlar va modal ichida */
.hs-side-body,
#sidebar .sidebar-nav,
.modal-dialog-scrollable .modal-body {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent) transparent;
}

.hs-side-body::-webkit-scrollbar,
#sidebar .sidebar-nav::-webkit-scrollbar,
.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
    width: 8px;
}

.hs-side-body::-webkit-scrollbar-thumb,
#sidebar .sidebar-nav::-webkit-scrollbar-thumb,
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted-foreground) 32%, transparent);
    border-radius: 999px;
}

/* Harakatni kamaytirish sozlamasi yoqilgan bo'lsa — animatsiyasiz */
@media (prefers-reduced-motion: reduce) {
    .card,
    .tx-card,
    .btn,
    .hs-day {
        transition: none !important;
    }

    .hs-day.has-toy:hover {
        transform: none;
    }
}

/* ===================================================================
   DASHBOARD SAYQALI (v3) — KPI kartalari olib tashlangach, halqali
   statistika sahifaning yuzi bo'lib qoldi. Shuning uchun unga alohida
   e'tibor: yengil gradient fon, kursor tekkanda jonlanish.
   =================================================================== */

.tx-ring-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--muted) 45%, var(--card)) 0%,
        var(--card) 55%);
    box-shadow: var(--shadow-xs);
    transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}

.tx-ring-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: color-mix(in srgb, var(--border) 50%, var(--primary));
    transform: translateY(-2px);
}

/* Ustki chetidagi ingichka rangli chiziq — kartani ajratib turadi */
.tx-ring-card::before {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 0;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--primary) 55%, transparent) 50%,
        transparent 100%);
}

.tx-ring-label {
    color: var(--foreground);
    opacity: .75;
}

/* Halqa markazidagi raqam ostiga yumshoq fon — o'qilishi yaxshilanadi */
.tx-ring-wrap::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--card) 92%, transparent) 60%,
        transparent 100%);
}

.tx-ring-center { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
    .tx-ring-card { transition: none; }
    .tx-ring-card:hover { transform: none; }
}

/* Bugungi manzara plitalari — biroz aniqroq chegara */
.tx-tile {
    box-shadow: var(--shadow-xs);
}