main > .container {
    padding: 72px 16px 24px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ============================================================
   THEME TOKENS — sidebar va kirim/chiqim ranglari
   ============================================================ */
:root {
    --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem;
    --app-sidebar-bg:          #1b1e22;
    --app-sidebar-link:        #adb5bd;
    --app-sidebar-link-active: linear-gradient(90deg, rgba(13,110,253,0.15), transparent);
    --app-sidebar-active-border: #0d6efd;
    --app-sidebar-active-color: #fff;
    --app-income-fg:           #146c43;
    --app-expense-fg:          #dc3545;
    --app-income-bg:           rgba(25, 135, 84, .08);
    --app-expense-bg:          rgba(220, 53, 69, .08);
    --app-income-bg-hover:     rgba(25, 135, 84, .15);
    --app-expense-bg-hover:    rgba(220, 53, 69, .15);
}
[data-bs-theme="dark"] {
    --app-sidebar-bg:          var(--bs-body-bg);
    --app-sidebar-link:        #9aa0a6;
    --app-sidebar-link-active: linear-gradient(90deg, rgba(13,110,253,0.15), transparent);
    --app-sidebar-active-border: #0d6efd;
    --app-sidebar-active-color: #fff;
    --app-income-fg:           var(--bs-success-text-emphasis);
    --app-expense-fg:          var(--bs-danger-text-emphasis);
    --app-income-bg:           rgba(var(--bs-success-rgb), 0.15);
    --app-expense-bg:          rgba(var(--bs-danger-rgb), 0.15);
    --app-income-bg-hover:     rgba(var(--bs-success-rgb), 0.2);
    --app-expense-bg-hover:    rgba(var(--bs-danger-rgb), 0.2);
}

body { background: var(--bs-tertiary-bg); }

.sidebar { min-height: calc(100vh - 56px); background: var(--app-sidebar-bg); padding-top: 1rem; }
.sidebar .nav-link {
    color: var(--app-sidebar-link);
    padding: 0.65rem 1rem;
    border-radius: 0.45rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    font-weight: 500;
}
.sidebar .nav-link i { width: 24px; transition: transform 0.3s ease; font-size: 1.1rem; }
.sidebar .nav-link:hover {
    color: var(--app-sidebar-active-color);
    background: rgba(255, 255, 255, 0.04);
}
.sidebar .nav-link:hover i {
    transform: translateX(4px);
}
.sidebar .nav-link.active {
    color: var(--app-sidebar-active-color);
    background: var(--app-sidebar-link-active);
}
.sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--app-sidebar-active-border);
    border-radius: 0 4px 4px 0;
}

.transaction-income  { color: var(--app-income-fg);  font-weight: 600; }
.transaction-expense { color: var(--app-expense-fg); font-weight: 600; }
/* Fon rangi qatorning o'ziga beriladi. Jadvalda esa <td> lar ham bo'yalishi
   kerak (Bootstrap --bs-table-bg ularni qayta bo'yaydi) — shuning uchun `> *`
   faqat tr uchun. Mobil kartada u ichki bloklarga ham tushib, yashil ustiga
   yashil qo'yib xunuk ko'rinardi. */
.row-income  { --bs-table-bg: var(--app-income-bg);  background-color: var(--app-income-bg); }
.row-expense { --bs-table-bg: var(--app-expense-bg); background-color: var(--app-expense-bg); }
tr.row-income  > * { --bs-table-bg: var(--app-income-bg);  background-color: var(--app-income-bg); }
tr.row-expense > * { --bs-table-bg: var(--app-expense-bg); background-color: var(--app-expense-bg); }
.table-hover > tbody > tr.row-income:hover  > * { --bs-table-bg: var(--app-income-bg-hover);  background-color: var(--app-income-bg-hover); }
.table-hover > tbody > tr.row-expense:hover > * { --bs-table-bg: var(--app-expense-bg-hover); background-color: var(--app-expense-bg-hover); }

.spinner-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9999; display: none; align-items: center; justify-content: center; }
.spinner-overlay.show { display: flex; }

/* ============================================================
   APP-WIDE SHARED COMPONENTS
   Barcha sahifalar shu classlardan foydalanadi — dizayn uyg'un
   ============================================================ */

/* --- Page header --- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.page-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.page-title i { opacity: .75; }

/* --- Icon picker (kategoriya modali) --- */
.icon-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; }
.icon-picker-item {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    border-radius: .4rem;
    padding: .4rem 0;
    font-size: 1.05rem;
}
.icon-picker-item.active {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
}

/* --- Sidebar guruh toggle --- */
.sidebar-group-toggle { border: 0; background: transparent; }
.sidebar-chevron { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: .8rem; }
.sidebar-group-toggle:not(.collapsed) .sidebar-chevron { transform: rotate(180deg); }

/* --- Sidebar Sozlamalar daraxti --- */
.sidebar .settings-menu {
    border-left: 2px solid rgba(255, 255, 255, 0.08);
    margin-left: 1.25rem;
    padding-left: 0.5rem;
}
.sidebar .settings-menu .nav-link {
    padding: 0.55rem 0.8rem;
    font-size: 0.95rem;
}
.sidebar .settings-menu .nav-link::before {
    display: none; /* inner active links don't have the heavy left border */
}
.sidebar .settings-menu .nav-link.active {
    background: transparent;
    color: var(--app-sidebar-active-border);
    font-weight: 600;
}

/* --- Floating action button (mobil, yangi tranzaksiya) --- */
/* FAB va uning tanlov menyusi — o'ngdan pastda, ustma-ust joylashadi */
.app-fab-wrap {
    position: fixed;
    right: 1rem;
    bottom: 1.25rem;
    z-index: 1040;             /* modal (1055) dan past, kontent ustida */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}
.app-fab {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    transition: transform .2s ease;
}
/* Menyu ochiq bo'lganda "+" belgisi "×" ga aylanadi */
.app-fab[aria-expanded="true"] { transform: rotate(45deg); }

.app-fab-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}
/* Bootstrap collapse'ning display:none holatini flex bilan almashtirish */
.app-fab-menu.collapsing,
.app-fab-menu.show { display: flex; }
.app-fab-menu .btn { padding: .5rem 1rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .app-fab { transition: none; }
}

/* --- Stat strip (3-column summary row) --- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-bottom: 1rem;
}
.stat-strip-card, .content-card, .filter-card, .register-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
}
.stat-strip-card {
    padding: .5rem .65rem;
}
.stat-strip-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    line-height: 1;
    margin-bottom: .2rem;
}
.stat-strip-value {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.2;
}
/* "?" tushuntirishi: label'dan meros qolgan uppercase/letter-spacing bekor
   qilinadi — bu ko'p qatorli oddiy matn, sarlavha emas. */
.stat-help {
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.45;
    font-size: var(--fs-xs);
}
.stat-help code {
    font-size: inherit;
    color: var(--bs-body-color);
    background: var(--bs-secondary-bg);
    padding: .05rem .3rem;
    border-radius: .25rem;
}
.stat-help-btn {
    text-transform: none;
    letter-spacing: normal;
    vertical-align: baseline;
}

/* --- Content card (jadval, ro'yxat wrapper) --- */
.content-card {
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.content-card-header {
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.content-card-header .cc-title {
    font-size: .85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* --- Filter card --- */
.filter-card {
    padding: .6rem .85rem;
    margin-bottom: .75rem;
}

/* --- Empty state --- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}
.empty-state i {
    font-size: 2rem;
    opacity: .25;
    margin-bottom: .5rem;
}
.empty-state span { font-size: .85rem; }

/* --- Mobile list (replaces table on xs) --- */
.mobile-list-item {
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    transition: background-color 0.2s ease;
}
.mobile-list-item:last-child { border-bottom: none; }
@media (hover: hover) { .mobile-list-item:hover { background-color: var(--bs-tertiary-bg); } }
.mobile-list-item:active { background-color: var(--bs-secondary-bg); }
.mobile-list-item .mli-main  { flex: 1; min-width: 0; }
.mobile-list-item .mli-right { text-align: right; flex-shrink: 0; }
.mli-primary   { font-size: .88rem; font-weight: 600; }
.mli-secondary { font-size: .72rem; color: var(--bs-secondary-color); margin-top: .1rem; }

/* Mobil ro'yxatdagi amal tugmalari — kvadrat va barmoq bilan aniq bosiladigan
   o'lchamda (btn-sm default'i telefon uchun juda kichik: yonidagi tugma
   noto'g'ri bosiladi). Uchtasi yonma-yon 375px enda ham sig'adi. */
.mli-right .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: .5rem;
    font-size: .9rem;
}

/* --- Modal defaults --- */
.modal-content { border-radius: .9rem; border: none; }

/* --- table-light: Bootstrap'da bu "kontekst" rangi, tema-neytral emas —
   [data-bs-theme=dark] da ham har doim och fon+qora matn beradi (rasmiy
   cheklov). Loyihada thead/tfoot fon rangi uchun ishlatilgani sabab, mavjud
   --bs-tertiary-bg/--bs-body-color token'lariga bog'lab qayta aniqlanadi —
   shunda u boshqa joylardagi kabi tema bilan birga almashadi. --- */
.table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-tertiary-bg);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: var(--bs-secondary-bg);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--bs-secondary-bg);
    --bs-table-hover-color: var(--bs-body-color);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* table-warning ("bugun" qatori belgisi): Bootstrap'da bu ham table-light kabi
   qattiq rang — qora matn dark mode'da o'qilmay qoladi. Faqat matn rangini
   tuzatamiz, fon o'zining sariq ohangida qoladi (semantik ma'no saqlanadi). */
.table-warning {
    --bs-table-color: var(--bs-body-color);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-color: var(--bs-body-color);
}

/* report/category-monthly: sticky ustun/qator fon rangi uchun bg-light/bg-white
   ishlatilgan edi — ular ham Bootstrap kontekst rangi, dark mode'ga
   moslashmaydi. Shu sahifaga xos klass bilan almashtirilgan, --bs-tertiary-bg
   va --bs-body-bg loyiha tokenlariga bog'langan. */
.cm-sticky-head { background: var(--bs-tertiary-bg) !important; }
.cm-sticky-col  { background: var(--bs-body-bg) !important; }
/* Dam kuni qatori xira fon (butun qator, sticky emas) */
.cm-weekend-row { background: var(--bs-tertiary-bg); }

/* --- Responsive table hide/show --- */
@media (max-width: 767.98px) {
    .hide-xs { display: none !important; }
    .show-xs { display: block !important; }
}
.show-xs { display: none; }

.not-set {
    color: var(--bs-danger);
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px var(--bs-body-color);
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px var(--bs-body-color);
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: var(--bs-secondary-color);
}

.error-summary {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border-left: 3px solid var(--bs-danger-border-subtle);
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align navbar brand baseline with nav links */
.navbar > .container,
.navbar > .container-fluid {
    align-items: baseline;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    color: var(--bs-navbar-color);
}

@media (max-width: 767.98px) {
    .navbar-nav .nav-link.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.navbar-nav .nav-link.logout:focus,
.navbar-nav .nav-link.logout:hover {
    color: var(--bs-navbar-hover-color);
}

/* footer logo: light logo by default (light bg-body-tertiary), dark logo for dark theme */
.footer-logo-dark { display: none; }

[data-bs-theme="dark"] .footer-logo-light { display: none; }
[data-bs-theme="dark"] .footer-logo-dark  { display: inline-block; }

/* login inputs: seamless icon inside input (Volt style) */
.login-split-card .input-group {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.login-split-card .input-group .input-group-text {
    background: transparent;
    border: 0;
    padding-left: 1rem;
    padding-right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-split-card .input-group .form-control {
    border: 0;
    background: transparent;
}

.login-split-card .input-group .form-control:focus {
    box-shadow: none;
}

.login-split-card .input-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* validation styles for login split card (browsers with :has()) */
@supports selector(.input-group:has(.is-invalid)) {
    .login-split-card .input-group:has(.is-invalid) ~ .invalid-feedback {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .login-split-card .input-group:has(.is-invalid) {
        border-color: var(--bs-danger);
    }

    .login-split-card .input-group:has(.is-invalid):focus-within {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* fallback validation styles for login split card (browsers without :has()) */
@supports not selector(.input-group:has(.is-invalid)) {
    .login-split-card .invalid-feedback:not(:empty) {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .login-split-card .input-group .form-control.is-invalid {
        border: var(--bs-border-width) solid var(--bs-danger);
    }

    .login-split-card .input-group .form-control.is-invalid:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* login split card */
.login-split-card {
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .10);
    background-color: var(--bs-gray-100);
    width: 100%;
    max-width: 900px;
}

.login-split-card-wide {
    max-width: 960px;
}

.login-brand-title {
    font-size: 1.75rem;
    line-height: 1.3;
}

.login-brand-text {
    font-size: .9rem;
}

.login-brand-panel {
    background: linear-gradient(135deg, #40B3D8 0%, #3a9cbd 40%, #83C933 100%);
    position: relative;
    min-height: 480px;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(241, 138, 42, .25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(131, 201, 51, .2) 0%, transparent 40%);
    pointer-events: none;
}

.login-btn {
    background: linear-gradient(135deg, #40B3D8, #3a9cbd);
    border: none;
    font-weight: 600;
    letter-spacing: .02em;
    transition: opacity .2s, transform .1s;
}

.login-btn:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.login-btn:active {
    transform: translateY(0);
}

/* dark mode login card */
[data-bs-theme="dark"] .login-split-card {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 4px 24px rgba(0, 0, 0, .4);
}

[data-bs-theme="dark"] .login-mobile-logo {
    filter: invert(1);
}

/* contact form textarea height */
.site-contact textarea.form-control {
    height: 140px;
}

/* captcha: blend with card background */
.site-contact img[src*="captcha"] {
    border-radius: var(--bs-border-radius);
    mix-blend-mode: multiply;
}

/* dark mode: invert captcha for visibility on dark background */
[data-bs-theme="dark"] .site-contact img[src*="captcha"] {
    mix-blend-mode: screen;
    filter: invert(1) hue-rotate(180deg);
}

/* centered page layout */
.site-login,
.site-contact,
.site-index,
.site-error,
.site-about,
.site-contact-success {
    flex: 1;
}

.site-error .site-error-content,
.site-about .site-about-content,
.site-contact-success .site-contact-success-content {
    width: 100%;
    max-width: 90%;
}

@media (min-width: 576px) {
    .site-error .site-error-content,
    .site-about .site-about-content,
    .site-contact-success .site-contact-success-content {
        max-width: 80%;
    }
}

@media (min-width: 768px) {
    .site-error .site-error-content,
    .site-about .site-about-content,
    .site-contact-success .site-contact-success-content {
        max-width: 60%;
    }
}

@media (min-width: 992px) {
    .site-error .site-error-content,
    .site-about .site-about-content,
    .site-contact-success .site-contact-success-content {
        max-width: 50%;
    }
}

/* hero banner */
.hero-banner {
    background: linear-gradient(135deg, #83C933 0%, #3a9cbd 40%, #40B3D8 100%);
    position: relative;
}

.hero-lead {
    max-width: 520px;
}

.hero-logo {
    height: 120px;
    opacity: .45;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 15% 85%, rgba(241, 138, 42, .3) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(131, 201, 51, .25) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(64, 179, 216, .15) 0%, transparent 60%);
    pointer-events: none;
}

/* extension cards */
.extension-card {
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.extension-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
}

.extension-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* dark mode: extension cards */
[data-bs-theme="dark"] .extension-card {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 2px 8px rgba(0, 0, 0, .3);
}

[data-bs-theme="dark"] .extension-card:hover {
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 8px 24px rgba(0, 0, 0, .4) !important;
}

/* ============================================================
   KASSA KARTOCHKALARI — bosh sahifa (dashboard/index)
   ============================================================ */

/* Pul raqamlari ustma-ust tushishi uchun — jadval va kartochkalarda */
.num { font-variant-numeric: tabular-nums; }

.register-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: .85rem 1rem;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.register-card:hover,
.register-card:focus-visible {
    color: inherit;
    border-color: var(--bs-primary-border-subtle);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.register-card:active { transform: scale(.995); }

.register-card-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.register-card-name {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.register-card-branch {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    line-height: 1.2;
}
/* Kassa turi belgisi — rangi turga qarab */
.register-badge {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: .6rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
}
.register-badge.type-trade   { background: rgba(13,110,253,.12);  color: #0d6efd; }
.register-badge.type-service { background: rgba(111,66,193,.12);  color: #6f42c1; }
.register-badge.type-bar     { background: rgba(253,126,20,.12);  color: #fd7e14; }
.register-badge.type-none    { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }

/* Kirim/chiqim juftligi — kartochkaning asosiy raqamlari */
.money-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
.money-cell {
    border-radius: .55rem;
    padding: .45rem .6rem;
}
.money-cell.income  { background: var(--app-income-bg); }
.money-cell.expense { background: var(--app-expense-bg); }
.money-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    line-height: 1;
    margin-bottom: .25rem;
}
.money-value {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.money-value.income  { color: var(--app-income-fg); }
.money-value.expense { color: var(--app-expense-fg); }

/* To'lov usullari — kartochka tagidagi mayda chiplar */
.method-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .6rem;
}
.method-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    padding: .15rem .45rem;
    border-radius: 99px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
.method-chip i { font-size: .8rem; opacity: .8; }

/* Pul: raqam va valyuta belgisi. "so'm" raqamdan keyin, kichikroq va xiraroq —
   bir butun matnda u keyingi qatorga tushib ketardi. */
.money-num { font-variant-numeric: tabular-nums; }
.money-cur {
    font-size: .58em;
    font-weight: 600;
    opacity: .5;
    margin-left: .22em;
    letter-spacing: .01em;
    /* Raqamdan ajralib keyingi qatorga o'tmasligi uchun */
    white-space: nowrap;
}
/* Kichik matnlarda (chip, kategoriya qatori) valyuta nisbatan kattaroq bo'lsin */
.small .money-cur,
.cat-amounts .money-cur { font-size: .72em; }

/* Kunlik jamlanma — sahifa tepasidagi asosiy ko'rsatkich */
.day-summary {
    border-radius: .85rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    padding: 1rem 1.1rem;
    margin-bottom: .85rem;
}
.day-summary-net {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.day-summary-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
}

/* Kategoriya qatori — kassa detali sahifasi */
.cat-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.cat-row:last-child { border-bottom: none; }

/* Bosiladigan kategoriya qatori — <a> bo'lgani uchun havola uslublari
   (rang, tagchiziq) o'chiriladi, qator matn kabi ko'rinishda qoladi. */
.cat-row-link {
    color: inherit;
    text-decoration: none;
    transition: background-color .12s ease;
}
.cat-row-link:hover,
.cat-row-link:focus-visible {
    background: var(--bs-tertiary-bg);
    color: inherit;
}
.cat-chevron {
    flex-shrink: 0;
    font-size: .7rem;
    color: var(--bs-secondary-color);
    opacity: .5;
}
.cat-row-link:hover .cat-chevron { opacity: 1; }

.cat-dot {
    width: .7rem; height: .7rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.cat-name {
    flex: 1;
    min-width: 0;
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-amounts {
    text-align: right;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

@media (max-width: 400px) {
    .money-value      { font-size: .95rem; }
    .day-summary-net  { font-size: 1.5rem; }
}

/* =========================================================================
   Tranzaksiya modali (views/widgets/transaction-modal.php)

   Minimal, bir ustunli forma. Ranglar Bootstrap tokenlaridan olinadi —
   [data-bs-theme="dark"] uchun alohida qoida yozish shart emas, faqat
   token yetmagan joyda qo'shiladi.
   ========================================================================= */
.tx-modal-header {
    border-bottom: none;
    padding: 1.25rem 1.5rem .25rem;
}
.tx-modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
}
.tx-modal-body { padding: 1rem 1.5rem 1.25rem; }

/* Maydonlar orasidagi masofani layout beradi — har bir elementga margin emas */
.tx-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tx-field { margin-bottom: 0; }

.tx-form .form-label {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    margin-bottom: .3rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-body-color);
}
.tx-form .form-label-sm {
    font-weight: 500;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

/* Majburiy belgisi diqqatni tortmasin — faqat skanerlashga yordam bersin */
.tx-req {
    color: var(--bs-danger);
    font-weight: 400;
}
/* "ixtiyoriy" yozuvi label ichida, past kontrastda — ortiqcha yulduzchalarsiz */
.tx-opt {
    margin-left: auto;
    font-size: .6875rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
    text-transform: lowercase;
}

.tx-form .form-control,
.tx-form .form-select {
    border-color: var(--bs-border-color);
}
.tx-form .form-text {
    margin-top: .3rem;
    font-size: .75rem;
}

/* Bootstrap xato matnini faqat ".is-invalid ~ .invalid-feedback" (qardosh) orqali
   ko'rsatadi. app-form.js esa .input-group ichidagi inputning xatosini guruhdan
   KEYIN qo'yadi — u payt input qardosh emas va xato ko'rinmay qoladi (summa, kurs).
   Shuning uchun .tx-field ichida xato bloki doim ko'rsatiladi. */
.tx-field > .invalid-feedback { display: block; }

/* Summa — formadagi yagona urg'u nuqtasi */
.tx-amount .form-control {
    font-weight: 600;
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.tx-amount .input-group-text {
    font-size: .875rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
}
#cashAmountInput, #cardAmountInput, #shotAmountInput, #exchangeRateInput {
    font-variant-numeric: tabular-nums;
}

/* Aralash to'lov qismlari — ustma-ust qatorlar.
   Yonma-yon 3 ustunda katta summalar ("1 500 000") kesilib qolardi; bu yerda
   input to'liq kenglikni oladi, uchala raqam bitta ustunda tekislanadi va
   ularning jamiga qo'shilishini ko'z bilan tekshirish oson. */
.tx-split {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    border-radius: .5rem;
    background-color: var(--bs-tertiary-bg);
}
.tx-split-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    align-items: center;
    gap: .75rem;
}
/* .tx-form .form-label bilan bir xil solishtirma og'irlikda (0,2,0) va undan
   keyin turadi — shuning uchun display'ni ham qayta e'lon qilamiz, aks holda
   yuqoridagi qoidadan flex meros bo'lib qoladi. */
.tx-split-row .form-label {
    display: block;
    margin-bottom: 0;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}
.tx-split-row .form-control {
    text-align: right;
    font-variant-numeric: tabular-nums;
    background-color: var(--bs-body-bg);
}

/* Yig'indi qatori inputlar ustuniga tekislanadi */
.tx-split-sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .5rem;
    margin-top: .125rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}
.tx-split-sum:empty { display: none; }
.tx-split-sum-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tx-split-sum.is-ok  { color: var(--app-income-fg); }
.tx-split-sum.is-off { color: var(--app-expense-fg); }

/* Mahsulot ichidagi miqdor + birlik juftligi */
.tx-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .5rem;
}
#productUnitLabel {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

/* Izoh qatorlari (fallback, bar ingredient) — alert emas, sokin yordamchi matn */
.tx-note {
    display: flex;
    gap: .5rem;
    padding: .625rem .75rem;
    border-radius: .5rem;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    line-height: 1.45;
}
.tx-note .bi { flex-shrink: 0; line-height: 1.45; }

/* To'lov usuli tugmalari */
.tx-form .btn-check + .btn {
    font-size: .875rem;
    font-weight: 500;
    padding: .5rem .25rem;
}

/* Sana tez-tugmalari asosiy inputdan ustun ko'rinmasin */
.btn-date-quick {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}
.btn-date-quick.active {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* "Valyuta va izoh" ochish tugmasi — havola emas, sokin boshqaruv */
.tx-more {
    display: flex;
    align-items: center;
    gap: .4rem;
    align-self: flex-start;
    padding: .25rem 0;
    border: none;
    background: none;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    font-weight: 500;
}
.tx-more:hover { color: var(--bs-body-color); }
.tx-more-caret { transition: transform .15s ease; font-size: .7rem; }
.tx-more[aria-expanded="true"] .tx-more-caret { transform: rotate(90deg); }

.tx-advanced {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: .875rem;
    margin-top: .25rem;
    border-top: 1px solid var(--bs-border-color);
}

/* --- Chek rasmi biriktirish --- */
/* Tugma "bosiladigan joy" ekani ko'rinib tursin, lekin summa/to'lov usuli kabi
   asosiy maydonlardan ko'zni tortmasin — shuning uchun uzuq-uzuq chegara. */
.tx-receipt-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .625rem .75rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
    background: none;
    color: var(--bs-secondary-color);
    font-size: .875rem;
}
.tx-receipt-btn:hover:not(:disabled) {
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
}
.tx-receipt-btn:disabled { opacity: .6; }
.tx-receipt-btn .tx-opt { margin-left: auto; }

.tx-receipt-preview {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
}
.tx-receipt-preview img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: .375rem;
    flex-shrink: 0;
}
.tx-receipt-info {
    display: flex;
    flex-direction: column;
    min-width: 0;          /* uzun fayl nomi flex'ni cho'zmasin */
    line-height: 1.3;
}
.tx-receipt-name {
    font-size: .8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tx-receipt-size { font-size: .75rem; color: var(--bs-secondary-color); }
.tx-receipt-preview .btn-close { margin-left: auto; flex-shrink: 0; }

/* Chek ko'rish sahifasidagi to'liq rasm — balandligi ekranga sig'sin, aks holda
   uzun chek rasmi sahifani cheksiz cho'zib yuboradi. */
.receipt-full {
    max-width: 100%;
    max-height: calc(100vh - 220px);
    border-radius: .5rem;
}

/* Chek modali: rasm yuklanguncha ramka balandligi saqlanadi — aks holda
   spinner'dan rasmga o'tishda modal sakrab ketadi. */
.receipt-modal-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}
.receipt-modal-img {
    max-width: 100%;
    max-height: 65vh;
    border-radius: .5rem;
}

.tx-modal-footer {
    border-top: none;
    padding: .5rem 1.5rem 1.25rem;
    gap: .5rem;
}
.tx-modal-footer .btn { padding-inline: 1.1rem; }
.tx-cancel {
    color: var(--bs-secondary-color);
    text-decoration: none;
}
.tx-cancel:hover { color: var(--bs-body-color); }

@media (prefers-reduced-motion: reduce) {
    .tx-more-caret { transition: none; }
}

@media (max-width: 575.98px) {
    .tx-modal-header { padding: 1rem 1rem .25rem; }
    .tx-modal-body   { padding: .875rem 1rem 1rem; }
    .tx-modal-footer { padding: .5rem 1rem 1rem; }
    /* Mobilda asosiy amal keng bo'lsin */
    .tx-modal-footer .btn { flex: 1 1 auto; }
}

@media (pointer: coarse) {
    .mli-right .btn, .filter-card .btn-sm, .table .btn-sm {
        min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
    }
}