:root {
    --kl-bg: #f4f6f3;
    --kl-paper: #fff;
    --kl-ink: #21352e;
    --kl-muted: #637169;
    --kl-line: #e2e8e2;
    --kl-green: #276448;
    --kl-green-dark: #1b4934;
    --kl-soft: #edf5e9;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; color: var(--kl-ink); }
a, .accent-success a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn) { color: var(--kl-green); }
a:hover, .accent-success a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn):hover { color: var(--kl-green-dark); }
a, button, input, select, textarea { touch-action: manipulation; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #75a884; outline-offset: 3px; }
[hidden] { display: none !important; }
.content-wrapper { background: var(--kl-bg); }
.content-wrapper .container-fluid { max-width: none; }
.content-wrapper > .content > .container-fluid, .content-wrapper #content { padding-inline: 0; }
.content-wrapper > .content { padding: 16px 20px; }
.content-wrapper > .content.border-bottom { background: #fff; padding: 18px 20px; border-color: var(--kl-line) !important; margin-bottom: 8px !important; }
.content-wrapper h1.h4 { font-size: 24px; font-weight: 650; letter-spacing: -.4px; }
.breadcrumb { font-size: 15px; }
/* Green trail that fades the deeper it goes (Home > App > Model > Object). */
.breadcrumb-item, .breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before { color: var(--kl-green); }
.breadcrumb-item:nth-child(2) { opacity: .78; }
.breadcrumb-item:nth-child(3) { opacity: .62; }
.breadcrumb-item:nth-child(4) { opacity: .5; }
.breadcrumb-item:nth-child(n+5) { opacity: .42; }
/* The current page (last item) stays fully visible whatever its depth; its separator keeps the fade. */
.breadcrumb-item.active { opacity: 1; color: #1a7f4b; font-weight: 700; }
.breadcrumb-item.active::before { opacity: .5; }
.breadcrumb-item:hover { opacity: 1; }
.kl-breadcrumb-note { color: var(--kl-muted); font-size: 15px; }
#jazzy-navbar { min-height: 65px; border-color: var(--kl-line); padding-inline: 22px; }
#jazzy-navbar .nav-link { font-weight: 550; font-size: 16px; }
#jazzy-sidebar { background: #1b3028; box-shadow: none !important; }
#jazzy-logo { height: 65px; border-color: #ffffff12; padding: 16px 20px; display: flex; align-items: center; gap: 10px; }
#jazzy-logo .brand-image { margin: 0; opacity: 1 !important; box-shadow: none !important; max-height: 33px; }
#jazzy-logo .brand-text { font-size: 25px; font-weight: 700 !important; letter-spacing: -.9px; color: #fff; }
#jazzy-sidebar .sidebar { padding: 0 14px; }
#jazzy-sidebar .user-panel { border-color: #ffffff12; padding: 5px 4px 17px; align-items: center; }
#jazzy-sidebar .user-profile { font-size: 25px; color: #a6c8a6; }
#jazzy-sidebar .user-panel .info { font-size: 16px; }
#jazzy-sidebar .user-panel .info a { color: #d4dfd7; }
#jazzy-sidebar .user-panel .info a:hover { color: #fff; }
#jazzy-sidebar .nav-header { padding: 22px 13px 9px; font-size: 13px; font-weight: 650; color: #9caf9f; text-transform: uppercase; letter-spacing: 1.3px; }
#jazzy-sidebar .nav-sidebar .nav-link { width: auto; border-radius: 7px; color: #d4dfd7; padding: 11px 12px; margin-bottom: 3px; font-size: 15px; }
#jazzy-sidebar .nav-sidebar .nav-link:hover { background: #ffffff0e; color: #fff; }
#jazzy-sidebar .nav-sidebar .nav-link.active { background: #b8ed83; color: #1b3028; box-shadow: none; font-weight: 650; }
#jazzy-sidebar .nav-sidebar .nav-link .nav-icon { width: 22px; margin-right: 7px; font-size: 16px; }
#jazzy-sidebar .nav-sidebar .nav-link { display: flex; align-items: center; }
#jazzy-sidebar .nav-sidebar .nav-link .nav-icon { flex-shrink: 0; }
#jazzy-sidebar .nav-sidebar .nav-link p { white-space: normal; line-height: 1.45; overflow-wrap: anywhere; }
.kl-sidebar-search { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #ffffff09; border: 1px solid #ffffff20; border-radius: 7px; color: #a7bbaf; margin-bottom: 10px; }
.kl-sidebar-search input { width: 100%; color: #fff; background: transparent; border: 0; min-width: 0; font-size: 15px; }
.kl-sidebar-search input::placeholder { color: #acbeb3; }
.sidebar-collapse .kl-sidebar-search { display: none; }
.kl-sidebar-empty { color: #c7d6cd; font-size: 15px; padding: 12px; }
/* The sidebar never scrolls sideways: AdminLTE keeps headings on one line, so a long one (Uzbek "Autentifikatsiya va Avtorizatsiya") made it 86px wider than its box. Headings and names wrap instead. */
#jazzy-sidebar .sidebar { overflow-x: hidden; }
#jazzy-sidebar .nav-sidebar > .nav-header { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
#jazzy-sidebar .user-panel .info { min-width: 0; overflow-wrap: anywhere; }
/* Section headings fold their items away; the heading is one full-width button so the whole row is the click target. */
#jazzy-sidebar .nav-header.kl-nav-group { padding: 0; }
.kl-group-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 22px 13px 9px; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; text-transform: inherit; cursor: pointer; }
.kl-group-toggle:hover { color: #d4dfd7; }
.kl-group-toggle i { flex-shrink: 0; font-size: 10px; transition: transform .2s ease; }
.kl-group-toggle[aria-expanded="false"] i { transform: rotate(-90deg); }
.nav-sidebar > .kl-group-collapsed { display: none; }
/* Searching shows matches even in a folded section (the [hidden] rule above still hides the rest). */
.nav-sidebar.kl-searching > .kl-group-collapsed { display: block; }
@media (prefers-reduced-motion: reduce) { .kl-group-toggle i { transition: none; } }
/* Open/close: the button inside the sidebar hides it; the navbar hamburger brings it back. The brand row is fixed at z-index 1035, so the button is fixed above it; with no left set it keeps its place in the sidebar (250px - 12px gap - 37px width) and slides with it. */
.kl-sidebar-close { position: fixed; z-index: 1036; top: 14px; margin-left: 201px; display: grid; place-items: center; width: 37px; height: 37px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #a7bbaf; font-size: 16px; cursor: pointer; }
.kl-sidebar-close:hover { background: #ffffff14; color: #fff; }
/* Closed on a desktop screen the sidebar slides fully out of view and the page takes the whole width; AdminLTE's icon-only rail showed no labels and no group headings. visibility keeps the hidden links out of the tab order. */
@media (min-width: 992px) {
    body.sidebar-mini.sidebar-collapse .content-wrapper, body.sidebar-mini.sidebar-collapse .main-footer, body.sidebar-mini.sidebar-collapse .main-header { margin-left: 0 !important; }
    body.sidebar-mini.sidebar-collapse #jazzy-sidebar, body.sidebar-mini.sidebar-collapse #jazzy-sidebar::before { width: 250px; margin-left: -250px; }
    body.sidebar-mini.sidebar-collapse #jazzy-sidebar { visibility: hidden; transition: margin-left .3s ease-in-out, visibility 0s linear .3s; }
}
.kl-footer { border-color: var(--kl-line); font-size: 14px; color: var(--kl-muted); padding: 17px 32px; display: flex; justify-content: space-between; gap: 16px; }
.kl-footer strong { color: var(--kl-ink); }
.kl-footer span span { padding: 0 10px; color: #b3bfb7; }
.btn { border-radius: 7px; font-size: 15px; font-weight: 600; padding: 9px 14px; box-shadow: none !important; }
.btn i { margin-right: 4px; }
.btn-primary, .btn-success { background-color: var(--kl-green); border-color: var(--kl-green); color: #fff; }
.btn-primary:hover, .btn-success:hover, .btn-primary:focus, .btn-success:focus { background-color: var(--kl-green-dark); border-color: var(--kl-green-dark); }
.btn-outline-secondary { color: #53645a; border-color: #cbd5cd; }
.btn-outline-info { color: var(--kl-green); border-color: #b0cbb7; }
.btn-outline-info:hover { background: var(--kl-green); border-color: var(--kl-green); }
.btn-warning { color: #694511; background: #fff0cc; border-color: #edd6a3; }
.btn-danger { background: #af4141; border-color: #af4141; }
.btn-xs { padding: 4px 8px; font-size: 14px; }
.card, .module { border-radius: 10px; }
.card { border: 1px solid var(--kl-line); box-shadow: 0 3px 12px #22352b04; }
.card-header { padding: 18px 20px; border-color: var(--kl-line); }
.card-title { font-size: 20px; font-weight: 650; }
.card-primary.card-outline { border-top: 3px solid var(--kl-green); }
.card-primary:not(.card-outline) > .card-header { background: var(--kl-green); }
.nav-pills .nav-link.active { background-color: var(--kl-green); }
.form-control:not(.btn), input[type=text], input[type=email], input[type=number], input[type=password], input[type=url], textarea, select { border-radius: 6px; border: 1px solid #cdd8cf; color: var(--kl-ink); }
.form-control:not(.btn):focus { border-color: #79a689; box-shadow: 0 0 0 3px #3e895317; }
.form-control, select, textarea, .select2-container, .kl-search input { font-size: 16px; }
input.form-control, select.form-control, .select2-container--default .select2-selection--single { min-height: 44px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border-color: #cdd8cf; border-radius: 6px; }
/* Django's autocomplete.css (e.g. the product search in Настройки) reads admin
   base.css variables that Jazzmin never loads; without them the box has no border. */
.select2-container--admin-autocomplete {
    --body-bg: var(--kl-paper);
    --body-fg: var(--kl-ink);
    --body-quiet-color: var(--kl-muted);
    --border-color: #cdd8cf;
    --darkened-bg: var(--kl-soft);
    --primary: var(--kl-green);
    --primary-fg: #fff;
    --selected-bg: var(--kl-soft);
}
.select2-container--admin-autocomplete .select2-selection--multiple { min-height: 44px; border-radius: 6px; }
input[type=checkbox] { accent-color: var(--kl-green); }
.help, .help-block, .helptext { color: var(--kl-muted); }
.alert { border-radius: 8px; border: 1px solid transparent; }
.alert-success { color: #1f5132; background: #eaf4e7; border-color: #cfe3c8; }
.alert-warning { color: #694511; background: #fcf2d9; border-color: #edd6a3; }
.alert-danger { color: #8a2f28; background: #fcece8; border-color: #f2c9c1; }
.alert-info { color: #244f63; background: #e9f2f7; border-color: #c8dde8; }
.alert a, .alert .close { color: inherit; }
.alert .close { opacity: .6; text-shadow: none; }
/* Django's messages ("saved", "select items first"...) float in the middle of the screen; admin.js moves them here. */
.kl-toasts { position: fixed; z-index: 2000; top: 50%; left: 50%; display: grid; gap: 12px; width: min(540px, calc(100vw - 32px)); transform: translate(-50%, -50%); pointer-events: none; }
.kl-toasts .alert { margin: 0; padding: 18px 48px 18px 20px; border-radius: 12px; box-shadow: 0 18px 60px #1b302838, 0 2px 8px #1b30281c; font-size: 16px; font-weight: 550; line-height: 1.45; pointer-events: auto; animation: kl-toast-in .2s ease-out; transition: opacity .18s, transform .18s; }
.kl-toasts .alert .close { top: 8px; right: 6px; padding: 10px 14px; font-size: 24px; line-height: 1; }
.kl-toasts .alert .icon { margin-right: 10px; }
.kl-toasts .alert.kl-leaving { opacity: 0; transform: scale(.97); }
@keyframes kl-toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .kl-toasts .alert { animation: none; transition: none; } }
.page-actions { gap: 8px; flex-wrap: wrap; }
.kl-object-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.kl-sync-form { margin: 0; }
.kl-object-tools a.btn.btn-outline-secondary.active { background: transparent; color: #53645a; border-color: #cbd5cd; }
.kl-object-tools a.btn.btn-outline-secondary.active:hover { background: #6c757d; color: #fff; }
#changelist { background: #fff; border: 1px solid var(--kl-line); padding: 18px; }
#changelist-search { padding-block: 5px 15px; }
#changelist-search .form-group { margin-right: 10px; }
.change-list .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.change-list .actions label { margin: 0; }
.change-list .action-counter { color: var(--kl-muted); font-size: 15px; }
.kl-action-hint { padding: 6px 10px; border: 1px solid #f2c9c1; border-radius: 6px; background: #fcece8; color: #8a2f28; font-size: 14px; font-weight: 600; }
/* Sortable headers: label, direction icon, then the "remove sort" cross. Jazzmin floats the cross to the far edge of the column, away from what it removes. */
#result_list thead th .text { display: flex; align-items: center; gap: 8px; }
#result_list thead th .text > i.fa { order: 2; margin: 0 !important; }
#result_list thead th .text > a:has(.fa-times) { order: 3; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--kl-muted); }
#result_list thead th .text > a:has(.fa-times):hover { background: #e7efe3; color: var(--kl-ink); }
#result_list thead th .text .fa-times { float: none !important; margin: 0 !important; font-size: 11px; }
/* Delete confirmations: the summary column was 25% wide, which clipped the confirm button on tablets and phones. */
.delete-confirmation #content-main .row { flex-wrap: wrap; }
.delete-confirmation #content-main .row > .col-sm-9 { flex: 1 1 320px; max-width: 100%; min-width: 0; }
.delete-confirmation #content-main .row > .col-sm-3 { flex: 0 0 320px; max-width: 100%; }
#result_list { font-size: 15px; }
#result_list thead th { background: #f5f8f3; border-bottom: 1px solid var(--kl-line); font-size: 14px; color: #5b6b60; font-weight: 650; padding: 14px 12px; vertical-align: middle; }
#result_list tbody td, #result_list tbody th { padding: 15px 12px; border-top: 1px solid #edf0eb; vertical-align: middle; }
#result_list tbody tr:nth-of-type(odd) { background: transparent; }
#result_list tbody tr:hover { background: #f7faf5; }
/* Order list: admin.js opens the order on a click anywhere in the row. */
#result_list.kl-row-links tbody tr { cursor: pointer; }
#result_list.kl-row-links .action-checkbox { cursor: default; }
#result_list input[type=text] { min-width: 110px; max-width: 210px; }
#result_list .field-name { min-width: 180px; }
#result_list .field-order_number { white-space: nowrap; }
#result_list .field-status_badge { min-width: 155px; }
#result_list .kl-status { white-space: nowrap; }
#result_list .field-billz_identifier { min-width: 140px; max-width: 220px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kl-order-billz { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#result_list .field-created_at, #result_list .field-date, #result_list .field-updated_at { white-space: nowrap; }
#result_list .field-total_amount, #result_list .field-price_amount, #result_list .field-full_price_amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kl-compact #result_list tbody td, .kl-compact #result_list tbody th { padding-block: 7px; }
.kl-density-toggle { margin-left: auto; white-space: nowrap; }
.kl-density-toggle[aria-pressed=true] { background: var(--kl-soft); color: var(--kl-green); border-color: #b0cbb7; }
.date-hierarchy { display: flex; flex-wrap: nowrap; gap: 6px; max-width: 100%; overflow-x: auto; padding: 2px 2px 8px; margin: 0 0 8px; scrollbar-width: thin; }
.date-hierarchy .btn { flex: 0 0 auto; margin: 0 !important; border-radius: 999px !important; padding: 6px 13px; font-size: 14px; font-weight: 600; }
.date-hierarchy a.btn.btn-primary { background: #fff; color: var(--kl-green); border: 1px solid #c9dccb; }
.date-hierarchy a.btn.btn-primary:hover, .date-hierarchy a.btn.btn-primary:focus { background: var(--kl-soft); color: var(--kl-green-dark); border-color: #9dbc9d; }
.date-hierarchy .btn-outline-secondary { background: transparent; }
.pagination .page-item.active .page-link { background: var(--kl-green); border-color: var(--kl-green); }
.pagination .page-link { color: var(--kl-green); }
.kl-dashboard { padding-bottom: 28px; }
.kl-welcome { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 18px 0 28px; }
.kl-eyebrow { color: #647969; font-size: 13px; font-weight: 700; letter-spacing: 1.65px; margin-bottom: 10px; }
.kl-welcome h2 { font-size: clamp(30px, 2.6vw, 40px); font-weight: 650; letter-spacing: -1.3px; margin: 0 0 10px; }
.kl-welcome h2 span { color: #79a756; }
.kl-welcome p:last-child { color: var(--kl-muted); font-size: 16px; margin-bottom: 0; }
.kl-welcome-actions { display: flex; align-items: flex-end; flex-direction: column; gap: 15px; flex-shrink: 0; }
.kl-welcome-actions .btn { padding: 11px 16px; }
.kl-welcome-actions .btn i { margin-left: 18px; margin-right: 0; font-size: 13px; }
.kl-date { color: var(--kl-muted); font-size: 15px; }
.kl-date i { margin-right: 7px; }
.kl-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.kl-metric { display: block; background: #fff; border: 1px solid var(--kl-line); border-radius: 10px; padding: 18px 20px 16px; color: var(--kl-ink); transition: border-color .15s, transform .15s; }
.kl-metric > strong { color: var(--kl-ink); }
.kl-metric:hover { color: var(--kl-ink); border-color: #9dbc9d; transform: translateY(-2px); }
.kl-metric-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #65746a; font-size: 15px; }
.kl-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; color: #446f50; background: var(--kl-soft); font-size: 16px; }
.kl-icon--warning { color: #966619; background: #fcf2d9; }
.kl-icon--danger { color: #aa4e46; background: #fceeea; }
.kl-icon--neutral { color: #6a7381; background: #eef1f5; }
.kl-metric > strong { display: block; font-size: 40px; font-weight: 650; letter-spacing: -1px; line-height: 1.3; margin: 10px 0 14px; font-variant-numeric: tabular-nums; }
.kl-metric-bottom { display: flex; justify-content: space-between; align-items: center; color: var(--kl-muted); font-size: 14px; }
.kl-metric-bottom i { transform: rotate(45deg); color: #91a590; }
.kl-operations, .kl-workspace-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(310px, 1fr); gap: 22px; align-items: start; margin-bottom: 24px; }
.kl-operations--single { grid-template-columns: 1fr; }
.kl-panel { background: #fff; border: 1px solid var(--kl-line); border-radius: 10px; overflow: hidden; min-width: 0; }
.kl-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px; }
.kl-panel-heading h3 { margin: 0 0 6px; font-size: 20px; font-weight: 650; letter-spacing: -.3px; }
.kl-panel-heading p { color: var(--kl-muted); margin: 0; font-size: 14px; }
.kl-panel-heading > a { font-size: 14px; white-space: nowrap; font-weight: 600; }
.kl-panel-heading > a i { margin-left: 6px; font-size: 12px; }
.kl-panel-heading > i { color: #839687; }
.kl-table-scroll { overflow-x: auto; }
.kl-orders-table { width: 100%; font-size: 15px; margin: 0; }
.kl-orders-table th { background: #f7f9f5; padding: 12px 20px; font-weight: 500; font-size: 13px; color: var(--kl-muted); border-block: 1px solid #eaf0e8; white-space: nowrap; }
.kl-orders-table td { padding: 15px 20px; border-bottom: 1px solid #edf1eb; }
.kl-orders-table tr:last-child td { border-bottom: 0; }
.kl-orders-table tbody tr:hover { background: #fbfcfa; }
.kl-order-link { font-weight: 650; color: var(--kl-ink); overflow-wrap: anywhere; }
.kl-order-link span { margin-left: 5px; font-weight: 500; }
.kl-orders-table td small { display: block; margin-top: 5px; color: var(--kl-muted); font-size: 13px; }
.kl-amount { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 550; }
.kl-status { display: inline-block; padding: 5px 8px; border-radius: 5px; font-size: 13px; line-height: 1.5; font-weight: 600; background: #eef1f5; color: #586774; }
.kl-status--success { color: #356645; background: #eaf4e7; }
.kl-status--warning { color: #86601b; background: #fcf2d9; }
.kl-status--danger { color: #a44139; background: #fcece8; }
.kl-status--primary { color: #306077; background: #e9f2f7; }
.kl-queue-list { padding: 0 18px; }
.kl-queue { display: flex; align-items: center; gap: 10px; padding: 17px 0; border-top: 1px solid #edf1eb; color: var(--kl-ink); }
.kl-queue:hover .kl-queue-copy strong { color: var(--kl-green); text-decoration: underline; }
.kl-queue-copy { flex: 1; min-width: 0; }
.kl-queue-copy strong { display: block; font-size: 15px; font-weight: 550; }
.kl-queue-copy small { display: block; font-size: 13px; color: var(--kl-muted); margin-top: 4px; }
.kl-queue-count { min-width: 25px; padding: 4px 6px; border-radius: 5px; text-align: center; background: #f3f6f1; font-size: 15px; font-weight: 650; }
.kl-queue-count--danger { color: #a44139; background: #fcece8; }
.kl-queue-count--warning { color: #86601b; background: #fcf2d9; }
.kl-queue > i { font-size: 12px; color: #96a58f; }
.kl-panel-note { margin: 0; padding: 16px 20px; font-size: 13px; color: var(--kl-muted); border-top: 1px solid #edf1eb; background: #fbfcfa; }
.kl-panel-note i { margin-right: 5px; }
.kl-search { display: flex; align-items: center; gap: 9px; border: 1px solid var(--kl-line); padding: 9px 11px; border-radius: 6px; color: #8a978d; max-width: 245px; margin: 0; }
.kl-search input { border: 0; background: transparent; min-width: 0; width: 100%; font-size: 14px; color: var(--kl-ink); }
.kl-directory-list { padding: 0 22px 20px; }
.kl-directory-group + .kl-directory-group { margin-top: 21px; }
.kl-directory-group h4 { font-size: 13px; color: var(--kl-muted); font-weight: 650; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px; }
.kl-directory-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kl-directory-item { display: flex; align-items: center; border: 1px solid #e9eee6; border-radius: 7px; }
.kl-directory-item:hover { background: #f7faf4; border-color: #c8d8c2; }
.kl-model-link { flex: 1; display: flex; align-items: center; gap: 11px; padding: 13px 12px; color: var(--kl-ink); font-size: 14px; font-weight: 500; }
.kl-model-link i { width: 15px; color: #7c947b; font-size: 16px; text-align: center; }
.kl-add-link { padding: 13px; color: #70896c; font-size: 13px; border-left: 1px solid #edf1e9; }
.kl-activity-list { list-style: none; margin: 0; padding: 0 22px 22px; }
.kl-activity-list li { display: flex; align-items: flex-start; gap: 12px; padding: 15px 0; border-top: 1px solid #edf1eb; }
.kl-activity-list strong { font-size: 15px; font-weight: 550; overflow-wrap: anywhere; }
.kl-activity-list p { color: var(--kl-muted); font-size: 14px; margin: 4px 0; }
.kl-activity-list time { color: #748374; font-size: 13px; }
.kl-activity-dot { width: 8px; height: 8px; background: #80a875; border-radius: 50%; flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 4px #f1f6ed; }
.kl-activity-dot--danger { background: #c77f75; box-shadow: 0 0 0 4px #fbf0ed; }
.kl-activity-empty > i { color: #8aa57c; font-size: 20px; margin-top: 4px; }
.kl-empty { text-align: center; padding: 42px 24px; color: var(--kl-muted); }
.kl-empty > i { font-size: 26px; color: #8aa57c; margin-bottom: 18px; }
.kl-empty h4 { font-size: 18px; color: var(--kl-ink); }
.kl-empty p { font-size: 15px; margin-bottom: 0; }
.jazzmin-login-page { background: var(--kl-bg); }
.login-box { width: min(390px, calc(100% - 36px)); }
.login-box .card { border-radius: 14px; padding: 14px; box-shadow: 0 16px 60px #243b2b0c; }
.login-logo img { max-height: 64px; }
.login-box-msg { color: var(--kl-muted); font-size: 16px; padding: 0 0 18px; }
.login-box .form-group > label { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.login-box .callout { font-size: 14px; }
.login-box .callout p { margin: 0; }
.jazzmin-login-page .kl-language-switch { width: max-content; margin: 0 0 18px auto; }
.kl-language-switch { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--kl-line); border-radius: 8px; background: #f4f7f2; margin: 0 8px 0 0; }
.kl-language-switch button { border: 0; background: transparent; border-radius: 5px; color: var(--kl-muted); font-size: 14px; font-weight: 650; min-width: 44px; min-height: 38px; padding: 6px 10px; }
.kl-language-switch button[aria-pressed="true"] { background: var(--kl-green); color: #fff; }
.kl-language-switch button:hover { background: #dfeadb; color: var(--kl-ink); }
.kl-language-switch button[aria-pressed="true"]:hover { background: var(--kl-green-dark); color: #fff; }
.kl-language-switch-fallback { position: fixed; z-index: 1035; top: 10px; right: 70px; }
.wrapper > #kl-language-switch { position: fixed; z-index: 1035; top: 10px; right: 70px; }
.kl-banner-preview { display: inline-flex; max-width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--kl-line); background: #f3f6f1; }
.kl-banner-image { display: block; width: 280px; height: 140px; object-fit: contain; }
.change-form .kl-banner-image { width: min(640px, 100%); height: auto; max-height: 320px; }
#jazzy-actions > div:first-child { display: flex; flex-direction: column; }
#jazzy-actions .form-group:has(> .btn-danger) { order: 1; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--kl-line); }
/* Plain choice selects only: related-object selects share their row with the edit/add/view icons. */
.change-form .form-group [class*="col-"] > .select2-container { min-width: min(100%, 360px); }
.tab-pane > .card > .card-header { padding: 12px 20px; background: #f7faf5; }
/* In tabbed forms Jazzmin prints a fieldset's description as the card title; show it as a note. */
.tab-pane > .card > .card-header .card-title { display: flex; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--kl-muted); }
.tab-pane > .card > .card-header .card-title::before { content: "\f05a"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #7c947b; }
/* Collapsed sidebar: its hidden labels are 0px wide, and the "anywhere" wrapping above broke them one letter per line, stretching the page by thousands of pixels. */
.sidebar-collapse:not(.sidebar-open) #jazzy-sidebar:not(:hover) .nav-sidebar .nav-link p { white-space: nowrap; overflow: hidden; overflow-wrap: normal; }
/* Change-form tabs: an underline instead of a boxed tab. */
.change-form #jazzy-tabs { gap: 4px; border-bottom: 1px solid var(--kl-line); margin-bottom: 20px !important; }
#jazzy-tabs .nav-link { margin-bottom: -1px; padding: 11px 16px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--kl-muted); font-size: 15px; font-weight: 600; }
#jazzy-tabs .nav-link:hover { color: var(--kl-green-dark); border-bottom-color: #cadfc2; }
#jazzy-tabs .nav-link.active { color: var(--kl-green); border-bottom-color: var(--kl-green); background: transparent; }
.change-form .tab-pane > .card > .card-body.p-5 { padding: 28px !important; }
/* Labels sit in a fixed column beside their field: at 25% of the page they were about 400px away from it on a wide screen. :where() keeps this weaker than the per-field layouts below. */
@media (min-width: 576px) {
    :where(.change-form) :where(.form-group > .row) > label.col-sm-3 { flex: 0 0 240px; max-width: 240px; padding-top: calc(.375rem + 1px); padding-right: 20px; }
    :where(.change-form) :where(.form-group > .row) > div.col-sm-7 { flex: 1 1 0; min-width: 0; max-width: 720px; }
}
/* Password inputs carry no CSS class, so they missed the input styling and came out 28px tall beside 38px text inputs. */
.change-form input[type=password] { height: 38px; padding: 6px 12px; }
/* Help text needs air under its input; :where() keeps this weaker than the switch rows' own spacing. */
:where(.change-form .form-group) .help-block:not(.red):not(.text-red) { margin-top: 6px; }
/* Forms without tabs: the card had 20px around the fields, tighter than the tabbed ones. */
.change-form #content-main .col-lg-9 > .card > .card-body:not(:has(#jazzy-tabs)) { padding: 28px; }
/* The sentence above the add-user form: a note, not centred loose text. */
.app-auth.change-form #content-main > form > p.text-center { margin: 0 0 16px; padding: 12px 16px; border: 1px solid #cadfc2; border-radius: 10px; background: var(--kl-soft); color: var(--kl-green-dark); font-size: 15px; text-align: left !important; }
.app-auth.change-form #content-main > form > p.text-center::before { content: "\f05a"; margin-right: 10px; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #7c947b; }
.kl-password-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.kl-password-dots { color: var(--kl-ink); font-size: 18px; letter-spacing: 3px; line-height: 1; }
.kl-password-note { color: var(--kl-muted); font-size: 14px; }
/* Action panel: real buttons, so long labels wrap instead of being cut off, each with an icon. */
#jazzy-actions .btn.form-control { display: flex; align-items: center; justify-content: center; gap: 9px; height: auto; min-height: 44px; padding: 10px 14px; line-height: 1.3; white-space: normal; text-align: center; }
#jazzy-actions .form-group { margin-bottom: 10px; }
.kl-action::before, #jazzy-actions .object-tools a[href$="/history/"]::before { flex-shrink: 0; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 14px; }
.kl-action--save::before { content: "\f0c7"; }
.kl-action--add::before { content: "\f067"; }
.kl-action--continue::before { content: "\f303"; }
.kl-action--copy::before { content: "\f0c5"; }
.kl-action--delete::before { content: "\f2ed"; }
.kl-action--close::before { content: "\f00d"; }
#jazzy-actions .object-tools a[href$="/history/"]::before { content: "\f1da"; margin-right: 8px; }
/* Delete confirmation: only the destructive answer is red; "take me back" is a neutral button with a back arrow. */
a.btn.cancel-link { display: flex; align-items: center; justify-content: center; gap: 9px; border-color: #cbd5cd; background: #fff; color: #53645a; }
a.btn.cancel-link:hover, a.btn.cancel-link:focus { border-color: #b3c1b7; background: #f4f7f2; color: var(--kl-ink); }
a.btn.cancel-link::before { content: "\f060"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 13px; }
/* Groups and permissions: Django's two-list picker. Jazzmin ships it unfinished (4%-wide arrows that clip, a hint that always reads "0 selected options not visible"), so it is rebuilt here. Add points right and remove points left; stacked, they point down and up. */
.change-form .form-group:has(.selector) > .row > * { flex: 0 0 100%; max-width: 100%; }
.change-form .form-group:has(.selector) > .row > label { margin-bottom: 10px; font-size: 15px; font-weight: 650; }
.change-form .form-group:has(.selector) > .row > div { container-type: inline-size; }
.change-form .related-widget-wrapper:has(> .selector) { display: flex; flex-direction: column; }
.change-form .related-widget-wrapper:has(> .selector) > .add-related { order: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 12px; border: 1px solid #cadfc2; border-radius: 7px; background: var(--kl-soft); color: var(--kl-green-dark); font-size: 14px; font-weight: 600; }
.change-form .related-widget-wrapper:has(> .selector) > .add-related:hover { background: #e0edd8; }
.change-form .related-widget-wrapper:has(> .selector) > .add-related img { width: 14px; height: 14px; }
.change-form .related-widget-wrapper:has(> .selector) > .add-related::after { content: attr(title); }
.selector { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; float: none; width: 100%; }
.selector .selector-available, .selector .selector-chosen { float: none; width: auto; min-width: 0; margin: 0; display: flex; flex-direction: column; border: 1px solid #cdd8cf; border-radius: 10px; background: #fff; overflow: hidden; text-align: left; }
.selector .selector-available h2, .selector .selector-chosen h2 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--kl-line); background: #f5f8f3; color: var(--kl-ink); font-size: 14px; font-weight: 650; text-align: left; }
.selector .selector-chosen h2 { background: var(--kl-soft); color: var(--kl-green-dark); }
.selector h2 .help-icon { display: none; }
.kl-selector-count { margin-left: auto; min-width: 26px; padding: 1px 9px; border: 1px solid var(--kl-line); border-radius: 999px; background: #fff; color: var(--kl-muted); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.selector .selector-filter { position: relative; margin: 0; padding: 10px 12px; border: 0; border-bottom: 1px solid #edf1eb; background: #fff; }
.selector .selector-filter label { position: absolute; z-index: 1; top: 50%; left: 25px; float: none; width: 16px; height: 16px; margin: 0; transform: translateY(-50%); color: #8aa08e; pointer-events: none; }
.selector .selector-filter .search-label-icon::before { content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 13px; line-height: 16px; }
.selector .selector-filter input, .selector .selector-available input { width: 100%; height: 38px; margin: 0 !important; padding: 6px 12px 6px 34px; border: 1px solid #cdd8cf; border-radius: 8px; background: #fbfcfa; color: var(--kl-ink); font-size: 14px; line-height: 1.4; }
.selector .selector-filter input:focus { border-color: #79a689; background: #fff; box-shadow: 0 0 0 3px #3e895317; outline: 0; }
.selector select { width: 100%; height: 340px !important; margin: 0; padding: 6px; border: 0 !important; border-radius: 0; background: #fff; font-size: 14px; }
.field-groups .selector select { height: 220px !important; }
.selector select option { padding: 7px 10px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; }
.selector select option:checked { background: #cfe3c8 linear-gradient(#cfe3c8, #cfe3c8); color: var(--kl-ink); }
.selector ul.selector-chooser { float: none; width: auto; margin: 0; padding: 0; align-self: center; display: flex; flex-direction: column; gap: 10px; border-radius: 0; background: none; }
.selector .selector-chooser li { margin: 0; padding: 0; list-style: none; }
.selector .selector-chooser a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; overflow: hidden; border: 1px solid #cdd8cf; border-radius: 10px; background: #fff none; color: #a3b0a6 !important; font-size: 0; text-indent: 0; opacity: 1; cursor: not-allowed; transition: background-color .15s, border-color .15s, color .15s; }
.selector .selector-chooser a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 15px; }
.selector .selector-add::before { content: "\f054"; }
.selector .selector-remove::before { content: "\f053"; }
.selector .selector-chooser a.active { border-color: var(--kl-green); background: var(--kl-green); color: #fff !important; cursor: pointer; }
.selector .selector-chooser a.active:hover, .selector .selector-chooser a.active:focus { border-color: var(--kl-green-dark); background: var(--kl-green-dark); }
.selector a.selector-chooseall, .selector a.selector-clearall { display: flex; align-items: center; justify-content: center; gap: 8px; height: auto; margin: 0; padding: 11px 14px; overflow: visible; border-top: 1px solid var(--kl-line); background: #fbfcfa none; color: #a3b0a6 !important; font-size: 14px; font-weight: 600; line-height: 1.3; opacity: 1; cursor: not-allowed; transition: background-color .15s, color .15s; }
.selector a.selector-chooseall::after, .selector a.selector-clearall::before { font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; }
.selector a.selector-chooseall::after { content: "\f101"; }
.selector a.selector-clearall::before { content: "\f100"; }
.selector a.selector-chooseall.active, .selector a.selector-clearall.active { color: var(--kl-green) !important; cursor: pointer; }
.selector a.selector-chooseall.active:hover, .selector a.selector-clearall.active:hover, .selector a.selector-chooseall.active:focus, .selector a.selector-clearall.active:focus { background: var(--kl-soft); color: var(--kl-green-dark) !important; }
.selector .list-footer-display { display: none; padding: 8px 14px; border-top: 1px solid #edd6a3; background: #fcf2d9; color: #86601b; font-size: 13px; cursor: pointer; }
.selector .selector-chosen--with-filtered .list-footer-display { display: block; }
.selector .list-footer-display__clear { font-weight: 650; text-decoration: underline; }
@container (max-width: 640px) {
    .selector { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .selector ul.selector-chooser { flex-direction: row; justify-content: center; }
    .selector .selector-add::before { content: "\f078"; }
    .selector .selector-remove::before { content: "\f077"; }
    .selector select { height: 240px !important; }
}
/* Account switches (active, staff, superuser): the label and its help text on the left, a real switch on the right. */
.app-auth.change-form .form-group[class*="field-is_"] { margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--kl-line); border-radius: 10px; background: #fbfcfa; transition: background-color .15s, border-color .15s; }
.app-auth.change-form .form-group[class*="field-is_"]:has(input:checked) { border-color: #cfe0c9; background: #f6faf3; }
.app-auth.change-form .form-group.field-is_superuser:has(input:checked) { border-color: #f2c9c1; background: #fdf6f4; }
.app-auth.change-form .form-group[class*="field-is_"] > .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; margin: 0; }
.app-auth.change-form .form-group[class*="field-is_"] > .row > label { grid-column: 1; flex: none; max-width: none; margin: 0; font-size: 15px; font-weight: 650; cursor: pointer; }
.app-auth.change-form .form-group[class*="field-is_"] > .row > div { display: contents; }
.app-auth.change-form .form-group[class*="field-is_"] .help-block { grid-column: 1; margin: 2px 0 0; font-size: 13px; }
.app-auth.change-form .form-group[class*="field-is_"] input[type=checkbox] { appearance: none; -webkit-appearance: none; grid-column: 2; grid-row: 1 / span 4; align-self: center; width: 46px; height: 26px; margin: 0; border-radius: 999px; background-color: #b9c5bc; background-image: radial-gradient(circle, #fff 9px, transparent 10px); background-repeat: no-repeat; background-size: 26px 26px; background-position: 0 50%; cursor: pointer; transition: background-color .15s, background-position .15s; }
.app-auth.change-form .form-group[class*="field-is_"] input[type=checkbox]:checked { background-color: var(--kl-green); background-position: 100% 50%; }
.app-auth.change-form .form-group.field-is_superuser input[type=checkbox]:checked { background-color: #af4141; }
.kl-photo-field, .kl-photo-item { display: flex; align-items: center; gap: 12px; }
.kl-photo-field > input, .kl-photo-item > input { flex: 1; min-width: 0; }
.kl-photo-items { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.kl-photo-item { padding: 8px 10px 8px 8px; border: 1px solid var(--kl-line); border-radius: 10px; background: #fff; }
.kl-photo-index { flex-shrink: 0; width: 20px; text-align: center; font-size: 13px; font-weight: 650; color: var(--kl-muted); font-variant-numeric: tabular-nums; }
.kl-photo-thumb { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; overflow: hidden; border: 1px solid var(--kl-line); border-radius: 8px; background: #f3f6f1; color: #9aaa9c; font-size: 22px; }
.kl-photo-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.kl-photo-thumb[href]:hover { border-color: #9dbc9d; }
.kl-photo-field.is-broken .kl-photo-thumb, .kl-photo-item.is-broken .kl-photo-thumb { background: #fcece8; border-color: #f2c9c1; color: #a44139; }
.is-broken .kl-photo-thumb img { display: none; }
.is-broken .kl-photo-thumb i { font-weight: 900; }
.is-broken .kl-photo-thumb i::before { content: "\f071"; }
.kl-photo-remove { flex-shrink: 0; min-width: 44px; min-height: 44px; }
.kl-photo-add i { margin-right: 6px; }
/* Photo URLs are long: give both photo fields the full row width of the form. */
.change-form .form-group.field-photo > .row > [class*="col-"]:last-child, .change-form .form-group.field-photos > .row > [class*="col-"]:last-child { flex: 1 1 0; max-width: none; }
/* Настройки: a setting's products (cards to remove, a search box to add). */
.change-form .form-group.field-remove_products > .row > [class*="col-"]:last-child,
.change-form .form-group.field-add_products > .row > [class*="col-"]:last-child { flex: 1 1 0; max-width: 780px; }
.kl-sp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.kl-sp-total { font-size: 14px; color: var(--kl-muted); }
.kl-sp-total strong { color: var(--kl-ink); font-variant-numeric: tabular-nums; }
.kl-sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kl-sp-index { flex-shrink: 0; width: 20px; text-align: center; font-size: 13px; font-weight: 650; color: var(--kl-muted); font-variant-numeric: tabular-nums; }
.kl-sp-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border: 1px solid var(--kl-line); border-radius: 10px; background: #fff; transition: background-color .15s, border-color .15s; }
.kl-sp-thumb { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; overflow: hidden; border: 1px solid var(--kl-line); border-radius: 8px; background: #f3f6f1; color: #9aaa9c; font-size: 18px; }
.kl-sp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.kl-sp-info { flex: 1; min-width: 0; display: grid; gap: 4px; }
.kl-sp-name { font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.kl-sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--kl-muted); font-variant-numeric: tabular-nums; }
.kl-sp-meta .kl-status { padding: 1px 7px; font-size: 12px; }
.kl-sp-button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; padding: 4px 12px; border: 1px solid var(--kl-line); border-radius: 8px; background: #fff; color: var(--kl-muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.kl-sp-button:hover { background: #fcece8; border-color: #f2c9c1; color: #a44139; }
.kl-sp-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kl-sp-toggle:has(input:focus-visible) { outline: 3px solid #75a884; outline-offset: 2px; }
.kl-sp-when-removed { display: none; }
.kl-sp-item:has(input:checked) { background: #fdf5f3; border-color: #f2c9c1; }
.kl-sp-item:has(input:checked) .kl-sp-name { color: var(--kl-muted); text-decoration: line-through; }
.kl-sp-item:has(input:checked) .kl-sp-thumb { opacity: .45; }
.kl-sp-item:has(input:checked) .kl-sp-when-kept,
.kl-sp:not(:has(.kl-sp-item input:not(:checked))) .kl-sp-remove-all .kl-sp-when-kept { display: none; }
.kl-sp-item:has(input:checked) .kl-sp-when-removed,
.kl-sp:not(:has(.kl-sp-item input:not(:checked))) .kl-sp-remove-all .kl-sp-when-removed { display: inline; }
.kl-sp-item:has(input:checked) .kl-sp-toggle,
.kl-sp:not(:has(.kl-sp-item input:not(:checked))) .kl-sp-remove-all { color: var(--kl-green); }
.kl-sp-item:has(input:checked) .kl-sp-toggle:hover,
.kl-sp:not(:has(.kl-sp-item input:not(:checked))) .kl-sp-remove-all:hover { background: var(--kl-soft); border-color: #cfe0c9; }
.kl-sp-pending { display: none; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #fcf2d9; color: #86601b; font-size: 14px; }
.kl-sp:has(.kl-sp-item input:checked) .kl-sp-pending { display: flex; }
.kl-sp-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 20px; border: 1px dashed #cdd8cf; border-radius: 10px; background: #fbfcfa; text-align: center; color: var(--kl-muted); font-size: 14px; }
.kl-sp-empty i { margin-bottom: 4px; font-size: 24px; color: #8aa57c; }
.kl-sp-empty strong { font-size: 16px; color: var(--kl-ink); }
/* The add box: full width, and chips wrap instead of cutting long product names. */
.change-form .form-group.field-add_products .select2-container { width: 100% !important; }
.change-form .select2-container--admin-autocomplete .select2-selection--multiple { position: relative; min-height: 46px; border-radius: 8px; }
.change-form .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 34px 6px 6px; white-space: normal; }
.change-form .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 0; padding: 4px 10px 4px 8px; border: 1px solid #cfe0c9; border-radius: 999px; background: var(--kl-soft); color: var(--kl-ink); font-size: 14px; line-height: 1.35; white-space: normal; float: none; }
.change-form .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove { margin: 0; color: #6f8a74; font-size: 16px; line-height: 1; }
.change-form .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove:hover { color: #a44139; }
.change-form .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__clear { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); float: none; margin: 0; color: var(--kl-muted); font-size: 18px; }
.change-form .select2-container--admin-autocomplete .select2-search--inline { flex: 1 1 140px; }
.change-form .select2-container--admin-autocomplete .select2-search--inline .select2-search__field { width: 100% !important; min-height: 30px; margin: 0; padding: 0 4px; }
/* Настройки list: a setting's products as one summary link to the setting. */
#result_list a.kl-sp-cell { display: flex; align-items: center; gap: 12px; max-width: 620px; margin: -6px 0; padding: 6px 12px 6px 6px; border: 1px solid transparent; border-radius: 10px; color: var(--kl-ink) !important; text-decoration: none !important; }
#result_list a.kl-sp-cell:hover { border-color: var(--kl-line); background: #fbfcfa; }
.kl-sp-stack { display: flex; flex-shrink: 0; }
.kl-sp-stack-item { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: -10px; overflow: hidden; border: 2px solid #fff; border-radius: 9px; background: #f3f6f1; box-shadow: 0 0 0 1px var(--kl-line); color: #9aaa9c; font-size: 13px; }
.kl-sp-stack-item:first-child { margin-left: 0; }
.kl-sp-stack-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.kl-sp-stack-more { background: var(--kl-soft); color: var(--kl-green); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kl-sp-cell-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kl-sp-cell-copy strong { font-size: 15px; font-weight: 650; }
.kl-sp-cell-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--kl-muted); }
.kl-sp-cell .kl-status { flex-shrink: 0; padding: 2px 8px; font-size: 12px; }
.kl-sp-cell-empty { flex: 1; color: var(--kl-muted); }
.kl-sp-cell-empty i { margin-right: 6px; color: #8aa57c; }
.kl-sp-cell-arrow { flex-shrink: 0; font-size: 12px; color: #96a58f; }
#result_list a.kl-sp-cell:hover .kl-sp-cell-arrow { color: var(--kl-green); }
@media (max-width: 767px) {
    /* Phones: the remove button moves under the product info (index 20px + thumb 52px + 2 gaps). */
    .kl-sp-item { flex-wrap: wrap; }
    .kl-sp-info { flex-basis: calc(100% - 108px); }
    .kl-sp-toggle { margin-left: 96px; }
}
.kl-order-filters { width: 100%; margin-bottom: 20px; background: #fff; border: 1px solid var(--kl-line); border-radius: 10px; padding: 20px; }
.kl-order-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.kl-order-filter-heading h2 { font-size: 20px; font-weight: 650; margin: 0; }
.kl-order-filter-heading p { font-size: 14px; color: var(--kl-muted); margin: 4px 0 0; }
.kl-order-filters #changelist-search { padding: 0; }
.kl-order-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; align-items: end; }
.kl-order-search { grid-column: 1 / -1; }
.kl-order-search input { width: 100%; }
.kl-order-search .help { margin: 8px 0 0; font-size: 14px; }
.kl-order-search + .kl-order-filter-grid { margin-top: 18px; }
.kl-order-result-count { color: var(--kl-muted); font-size: 14px; white-space: nowrap; }
.kl-order-filter-hint { font-size: 14px; color: var(--kl-muted); }
.kl-order-filter-heading h2 i { margin-right: 6px; color: var(--kl-green); font-size: 16px; }
.kl-order-filter-grid .kl-filter-field { margin: 0; min-width: 0; }
.kl-filter-field > label, .kl-order-search > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.kl-filter-field select, .kl-filter-field .select2-container { width: 100% !important; }
.kl-filter-field select { padding: 10px 12px; background: #fafcf8; }
.kl-order-filter-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kl-line); }
.kl-order-filter-actions .btn { min-height: 44px; }
.kl-order-filter-actions .small, .kl-order-filter-actions .quiet { font-size: 14px; color: var(--kl-muted); }
.kl-order-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kl-filter-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #cadfc2; border-radius: 6px; background: var(--kl-soft); padding: 7px 10px; font-size: 14px; }
.kl-filter-chip:hover { background: #e0edd8; }
@media (min-width: 992px) {
    .change-form #jazzy-actions { position: sticky; top: 84px; align-self: flex-start; }
    .change-form #content-main > form > .row > .col-lg-9 { flex: 0 0 calc(100% - 260px); max-width: calc(100% - 260px); }
    .change-form #content-main > form > .row > .col-lg-3 { flex: 0 0 260px; max-width: 260px; }
}
@media (max-width: 1250px) {
    .kl-operations, .kl-workspace-grid { grid-template-columns: minmax(0, 1.5fr) minmax(270px, 1fr); gap: 16px; }
    .kl-operations--single { grid-template-columns: 1fr; }
    .kl-orders-table td, .kl-orders-table th { padding-inline: 12px; }
    .kl-panel-heading { padding: 18px; }
    .kl-metric { padding: 16px; }
}
@media (max-width: 1100px) {
    .kl-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kl-operations, .kl-workspace-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .content-wrapper > .content, .content-wrapper > .content.border-bottom { padding: 14px 12px; }
    .kl-dashboard-page .content-wrapper h1.border-right { border-right: 0 !important; }
    #jazzy-navbar { padding-inline: 10px; }
    .kl-breadcrumb-note { display: none; }
    .kl-welcome { align-items: flex-start; flex-direction: column; gap: 18px; margin: 12px 0 24px; }
    .kl-welcome-actions { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
    .kl-welcome h2 { letter-spacing: -.9px; }
    .kl-metrics { gap: 10px; }
    .kl-metric { padding: 14px; }
    .kl-metric-top { font-size: 14px; align-items: flex-start; }
    .kl-metric-top .kl-icon { width: 27px; height: 27px; font-size: 14px; }
    .kl-metric > strong { font-size: 34px; }
    .kl-metric-bottom { font-size: 13px; }
    .kl-metric-bottom i { display: none; }
    .kl-directory-models { grid-template-columns: 1fr; }
    .kl-directory .kl-panel-heading { flex-direction: column; align-items: stretch; }
    .kl-search { max-width: none; }
    .kl-footer { padding: 16px; }
    .kl-footer > span:last-child { display: none; }
    .page-actions { justify-content: flex-start !important; margin-top: 12px; }
    .kl-object-tools { justify-content: flex-start; }
    #changelist { padding: 12px; }
    .kl-density-toggle { margin-left: 0; }
    .kl-order-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .kl-order-filters { padding: 14px; }
    .kl-order-filter-heading { align-items: flex-start; }
    .kl-language-switch { margin-right: 0; }
    .kl-language-switch-fallback { right: 58px; }
    .kl-welcome-actions { flex-wrap: wrap; }
    .kl-banner-image { width: 230px; height: 115px; }
    .change-form .tab-pane > .card > .card-body.p-5 { padding: 20px 14px !important; }
    .kl-photo-thumb { width: 64px; height: 64px; }
    .kl-photo-item { flex-wrap: wrap; }
    .kl-photo-item > input { flex-basis: 100%; order: 3; }
    .kl-photo-remove { margin-left: auto; }
}
@media (max-width: 340px) {
    .kl-order-filter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .kl-metric-top { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
    .kl-orders-table { min-width: 650px; }
}
@media (prefers-reduced-motion: reduce) { .kl-metric { transition: none; } .kl-metric:hover { transform: none; } }
@media print { .kl-welcome-actions, .kl-sidebar-search, .kl-density-toggle, .kl-add-link, .kl-search { display: none; } .kl-panel { break-inside: avoid; } }