/* ==========================================================================
   Kontur Theme — komponent qatı
   --------------------------------------------------------------------------
   Bu fayl SRTDash şablonunun üstünə yazılır və HƏMİŞƏ ƏN SONDA yüklənir
   (`Views/Shared/Partials/Headers/BaseHeader.cshtml`).
   Şablon fayllarını (styles.css, default-css.css…) redaktə ETMƏ — onlar
   vendor kodudur; dəyişiklik burada olur ki, geri qaytarıla bilsin.

   Qayda: hər rəng `tokens.css`-dən gəlir — bu faylda hex və rgba() yazma.
   Bələdçi: `docs/design/03-components.md`
   ========================================================================== */

/* ==========================================================================
   1. BASE
   ========================================================================== */
body {
    font-family: var(--k-font-ui);
    font-size: var(--k-fs-body);
    line-height: var(--k-lh-body);
    color: var(--k-text);
    background: var(--k-bg-page);
    margin-bottom: 0;
    -webkit-font-smoothing: antialiased;
}

.page-container,
.main-content,
.main-content-inner {
    background: var(--k-bg-page);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--k-font-ui);
    color: var(--k-text-strong);
    font-weight: var(--k-fw-bold);
    line-height: var(--k-lh-snug);
    letter-spacing: var(--k-ls-tight);
}

a { color: var(--k-link); transition: color var(--k-dur-fast) var(--k-ease); }
a:hover, a:focus { color: var(--k-link-hover); text-decoration: none; }

/* Klaviatura fokusu həmişə görünsün — audit izlənilən sistemdir,
   siçansız iş real ssenaridir. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--k-border-focus);
    outline-offset: 2px;
    border-radius: var(--k-r-sm);
}

::selection { background: var(--k-navy-200); color: var(--k-navy-900); }

/* ==========================================================================
   2. SIGNATURE — mitre rail
   --------------------------------------------------------------------------
   Loqodakı şevronun kəsilmiş (mitred) ucu. Sistemin yadda qalan elementi.

   Rail kimi CƏMİ İKİ yerdə işlənir:
     · aktiv naviqasiya elementi  → bölmə 3
     · kart başlığı               → bölmə 5
   Üçüncü, fərqli miqyaslı təkrar boş vəziyyət nişanıdır (bölmə 14) — o, rail
   deyil, eyni həndəsənin böyüdülmüş formasıdır.

   Başqa yerə əlavə etmə — təkrarlanan imza imza olmaqdan çıxır.
   Ümumi utility qəsdən yoxdur ki, "hər yerə yapışdırmaq" asan olmasın.
   ========================================================================== */

/* ==========================================================================
   3. SIDEBAR
   ========================================================================== */
.sidebar-menu {
    background: var(--k-bg-inverse);
    width: var(--k-sidebar-w);
    border-right: 1px solid var(--k-navy-950);
}

.sidebar-header {
    background: var(--k-navy-950);
    border-bottom: 1px solid var(--k-overlay-line);
    padding: var(--k-sp-4) var(--k-sp-5);
}

.sidebar-header .logo { display: flex; align-items: center; gap: var(--k-sp-3); }
/* `max-width: none` — şablon `.logo a`-ya `max-width: 120px` verir; nişan + söz
   nişanı məhz 120 px tutur, yəni ehtiyat sıfırdır. Segoe UI olmayan maşında
   fallback şriftin metrikası fərqlidir və mətn qutudan çıxardı. */
.sidebar-header .logo a {
    display: flex;
    align-items: center;
    gap: var(--k-sp-3);
    max-width: none;
}
.sidebar-header .logo img { width: 34px; height: auto; flex: 0 0 auto; }

/* Söz nişanı — loqonun yanında, wordmark-ın həndəsəsini təkrar edir. */
.sidebar-header .logo .k-wordmark {
    font-weight: var(--k-fw-black);
    font-size: 15px;
    letter-spacing: var(--k-ls-eyebrow);
    text-transform: uppercase;
    color: var(--k-n-0);
    line-height: 1;
}
.sidebar-header .logo .k-wordmark small {
    display: block;
    font-size: 9px;
    font-weight: var(--k-fw-semi);
    letter-spacing: .16em;
    color: var(--k-navy-300);
    margin-top: 3px;
}

/* padding-left `!important` — şablon `.metismenu >li >a`-ya
   `padding-left: 32px !important` verir. */
.sidebar-menu .metismenu a {
    color: var(--k-navy-200);
    font-size: var(--k-fs-body);
    font-weight: var(--k-fw-medium);
    padding: 11px var(--k-sp-5);
    padding-left: var(--k-sp-5) !important;
    border: 0;
    transition: background var(--k-dur-fast) var(--k-ease),
                color var(--k-dur-fast) var(--k-ease);
}
.sidebar-menu .metismenu a i { color: var(--k-navy-300); }

.sidebar-menu .metismenu a:hover,
.sidebar-menu .metismenu a:focus {
    background: var(--k-overlay-hover);
    color: var(--k-n-0);
}
.sidebar-menu .metismenu a:hover i { color: var(--k-n-0); }

/* Aktiv element — imza rail-i burada. */
.sidebar-menu .metismenu > li.active > a {
    position: relative;
    background: var(--k-navy-800);
    color: var(--k-n-0);
    font-weight: var(--k-fw-semi);
}
.sidebar-menu .metismenu > li.active > a::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--k-rail-w);
    background: var(--k-accent);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--k-mitre)), 0 100%);
}
.sidebar-menu .metismenu > li.active > a i { color: var(--k-n-0); }

/* Alt menyu — sakit, girintili, öz rail-i yoxdur. */
.sidebar-menu .metismenu ul a {
    padding-left: calc(var(--k-sp-5) + var(--k-sp-6)) !important;
    font-size: var(--k-fs-sm);
    color: var(--k-navy-300);
}
.sidebar-menu .metismenu ul li.active > a {
    color: var(--k-n-0);
    font-weight: var(--k-fw-semi);
    background: var(--k-overlay-active);
}

/* ==========================================================================
   4. HEADER + PAGE TITLE
   ========================================================================== */
.header-area {
    background: var(--k-bg-surface);
    border-bottom: 1px solid var(--k-border);
    box-shadow: none;
    padding: var(--k-sp-3) var(--k-sp-6);
}

.page-title-area {
    background: transparent;
    box-shadow: none;
    padding: var(--k-sp-6) var(--k-sp-6) var(--k-sp-4);
}

.breadcrumbs-area .page-title {
    font-size: var(--k-fs-h1);
    font-weight: var(--k-fw-bold);
    letter-spacing: var(--k-ls-tight);
    color: var(--k-text-strong);
}

.breadcrumbs li,
.breadcrumbs li a,
.breadcrumbs li span {
    font-size: var(--k-fs-sm);
    color: var(--k-text-muted);
}
.breadcrumbs li a { color: var(--k-link); }
.breadcrumbs li:last-child span { color: var(--k-text); font-weight: var(--k-fw-semi); }

.user-profile .user-name {
    font-size: var(--k-fs-body);
    font-weight: var(--k-fw-semi);
    color: var(--k-text-strong);
}
.user-profile .avatar {
    border: 2px solid var(--k-border);
    border-radius: var(--k-r-pill);
}

/* --------------------------------------------------------------------------
   `pull-right` / `pull-left` Bootstrap 3 classlarıdır və BS4-də SİLİNİB.
   Şablonun `bootstrap.min.css`-i v4.0.0-dır, bu classlar heç yerdə təyin
   olunmayıb — yəni `PageHeaderComponent` və `PageTitle` markup-ındakı
   `pull-*` heç nə etmir və bloklar sağa çəkilmirdi.
   Markup-a toxunmadan flex ilə düzəldilir.
   -------------------------------------------------------------------------- */
.header-area .notification-area,
.page-title-area .user-profile {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--k-sp-5);
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}
.header-area .notification-area > li { margin-left: 0; display: flex; align-items: center; }

/* Şablon `.user-profile`-a bənövşəyi gradient + `margin-right: -30px` verir.
   Blok sütunun bütün enini tutduğu üçün 600 px-lik rəngli zolaq kimi boyanırdı.
   Fon götürülür, blok məzmun eninə yığılır və sağa dayanır. */
.page-title-area .user-profile {
    width: auto;
    margin-left: auto;
    gap: var(--k-sp-2);
    background: none;
    border-radius: var(--k-r-pill);
}
.page-title-area .user-profile .avatar {
    margin: 0;
    width: 34px;
    height: 34px;
}
.page-title-area .user-profile .user-name {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--k-sp-2);
    cursor: pointer;
}
.page-title-area .user-profile .user-name i {
    font-size: 12px;
    color: var(--k-text-muted);
}

.notification-area > li > i {
    position: relative;      /* sayğacın lövbəri — `.dropdown-toggle`-dan asılı olmasın */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--k-text-muted);
    text-shadow: none;
    transition: color var(--k-dur-fast) var(--k-ease);
}
.notification-area > li > i:hover { color: var(--k-primary); }

.notification-area > li > i > span {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--k-accent);
    color: var(--k-n-0);
    font-family: var(--k-font-ui);
    font-size: 10px;
    font-weight: var(--k-fw-bold);
    line-height: 1;
    border-radius: var(--k-r-pill);
    box-shadow: 0 0 0 2px var(--k-bg-surface); /* zəngin üstündə oxunsun */
}

/* ==========================================================================
   5. CARD
   ========================================================================== */
.card {
    background: var(--k-bg-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-r-lg);
    box-shadow: var(--k-sh-1);
}
.card .card-body { padding: var(--k-sp-6); }

/* Kart başlığı — imzanın ikinci (və sonuncu) görünüş yeri. */
.card .header-title {
    position: relative;
    font-size: var(--k-fs-h2);
    font-weight: var(--k-fw-bold);
    letter-spacing: var(--k-ls-tight);
    color: var(--k-text-strong);
    padding-left: var(--k-sp-4);
    margin-bottom: var(--k-sp-2);
    line-height: var(--k-lh-snug);
}
.card .header-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: var(--k-rail-w);
    background: var(--k-primary);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--k-mitre)), 0 100%);
}

.card .card-footer {
    background: var(--k-bg-sunken);
    border-top: 1px solid var(--k-border);
    border-radius: 0 0 var(--k-r-lg) var(--k-r-lg);
    padding: var(--k-sp-3) var(--k-sp-6);
}

/* Eyebrow — bölmə üstü kiçik etiket. */
.k-eyebrow {
    font-size: var(--k-fs-micro);
    font-weight: var(--k-fw-bold);
    letter-spacing: var(--k-ls-eyebrow);
    text-transform: uppercase;
    color: var(--k-text-faint);
}

/* ==========================================================================
   6. BUTTONS
   --------------------------------------------------------------------------
   Marka qırmızısı = dayan / pul borcu / geri qaytarılmaz.
   Əsas hərəkət (CTA) HEÇ VAXT qırmızı olmur — bax docs/design/01.
   ========================================================================== */
.btn {
    font-family: var(--k-font-ui);
    font-size: var(--k-fs-body);
    font-weight: var(--k-fw-semi);
    line-height: 1;
    height: var(--k-control-h);
    padding: 0 var(--k-sp-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--k-sp-2);
    border-radius: var(--k-r-md);
    border: 1px solid transparent;
    box-shadow: none;
    transition: background var(--k-dur-fast) var(--k-ease),
                border-color var(--k-dur-fast) var(--k-ease),
                color var(--k-dur-fast) var(--k-ease);
}
.btn:focus-visible { box-shadow: var(--k-sh-focus); outline: none; }
.btn.btn-lg { height: 46px; font-size: 15px; padding: 0 var(--k-sp-6); }
.btn.btn-sm { height: 30px; font-size: var(--k-fs-sm); padding: 0 var(--k-sp-3); }

.btn-primary {
    background: var(--k-primary);
    border-color: var(--k-primary);
    color: var(--k-text-on-brand);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--k-primary-hover);
    border-color: var(--k-primary-hover);
    color: var(--k-n-0);
}
.btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--k-primary-active);
    border-color: var(--k-primary-active);
}

.btn-secondary {
    background: var(--k-bg-surface);
    border-color: var(--k-border-strong);
    color: var(--k-text);
}
.btn-secondary:hover, .btn-secondary:focus {
    background: var(--k-bg-sunken);
    border-color: var(--k-n-400);
    color: var(--k-text-strong);
}

.btn-success {
    background: var(--k-success);
    border-color: var(--k-success);
    color: var(--k-n-0);
}
.btn-success:hover, .btn-success:focus {
    background: var(--k-success-hover);
    border-color: var(--k-success-hover);
    color: var(--k-n-0);
}

.btn-danger {
    background: var(--k-accent);
    border-color: var(--k-accent);
    color: var(--k-n-0);
}
.btn-danger:hover, .btn-danger:focus { background: var(--k-accent-hover); border-color: var(--k-accent-hover); color: var(--k-n-0); }

.btn-warning {
    background: var(--k-warning);
    border-color: var(--k-warning);
    color: var(--k-n-0);
}
.btn-warning:hover, .btn-warning:focus {
    background: var(--k-warning-hover);
    border-color: var(--k-warning-hover);
    color: var(--k-n-0);
}

.btn-info {
    background: var(--k-info);
    border-color: var(--k-info);
    color: var(--k-n-0);
}
.btn-info:hover, .btn-info:focus { background: var(--k-navy-500); border-color: var(--k-navy-500); color: var(--k-n-0); }

.btn-dark {
    background: var(--k-n-800);
    border-color: var(--k-n-800);
    color: var(--k-n-0);
}
.btn-dark:hover, .btn-dark:focus { background: var(--k-n-900); border-color: var(--k-n-900); color: var(--k-n-0); }

/* Outline — sətir daxili əməliyyatlar üçün standart. */
.btn-outline-primary { color: var(--k-primary); border-color: var(--k-navy-200); background: transparent; }
.btn-outline-primary:hover { background: var(--k-primary); border-color: var(--k-primary); color: var(--k-n-0); }

.btn-outline-danger { color: var(--k-accent); border-color: var(--k-red-200); background: transparent; }
.btn-outline-danger:hover { background: var(--k-accent); border-color: var(--k-accent); color: var(--k-n-0); }

.btn-outline-warning { color: var(--k-warning); border-color: var(--k-warning-border); background: transparent; }
.btn-outline-warning:hover { background: var(--k-warning); border-color: var(--k-warning); color: var(--k-n-0); }

.btn-outline-success { color: var(--k-success); border-color: var(--k-success-border); background: transparent; }
.btn-outline-success:hover { background: var(--k-success); border-color: var(--k-success); color: var(--k-n-0); }

.btn-outline-info { color: var(--k-info); border-color: var(--k-info-border); background: transparent; }
.btn-outline-info:hover { background: var(--k-info); border-color: var(--k-info); color: var(--k-n-0); }

/* Yalnız ikonlu düymə — kvadrat, cədvəl sətirlərində sıraya düşsün. */
.btn.k-btn-icon { width: var(--k-control-h); padding: 0; }
.btn-sm.k-btn-icon { width: 30px; }

/* ==========================================================================
   7. FORMS
   ========================================================================== */
label,
.form-group > label {
    font-size: var(--k-fs-sm);
    font-weight: var(--k-fw-semi);
    color: var(--k-text-muted);
    margin-bottom: var(--k-sp-1);
    letter-spacing: 0;
}

.form-control {
    height: var(--k-control-h);
    font-family: var(--k-font-ui);
    font-size: var(--k-fs-body);
    color: var(--k-text-strong);
    background: var(--k-bg-surface);
    border: 1px solid var(--k-border-strong);
    border-radius: var(--k-r-md);
    padding: 0 var(--k-sp-3);
    box-shadow: none;
    transition: border-color var(--k-dur-fast) var(--k-ease),
                box-shadow var(--k-dur-fast) var(--k-ease);
}
textarea.form-control { height: auto; padding: var(--k-sp-3); line-height: var(--k-lh-body); }

.form-control:focus {
    border-color: var(--k-border-focus);
    box-shadow: var(--k-sh-focus);
    outline: none;
}
.form-control::placeholder { color: var(--k-text-faint); }
.form-control[readonly],
.form-control:disabled {
    background: var(--k-bg-sunken);
    color: var(--k-text-muted);
    cursor: not-allowed;
}

/* Rəqəm sahələri — pul və miqdar sağa düzülür, rəqəmlər sütun tutur. */
input[type="number"].form-control,
.k-input-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.text-danger,
span[asp-validation-for] {
    color: var(--k-accent) !important;
    font-size: var(--k-fs-sm);
    font-weight: var(--k-fw-medium);
}
.form-control.input-validation-error,
.form-control.is-invalid { border-color: var(--k-accent); }

/* select2 — şablonla eyni hündürlük və sərhəd. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    height: var(--k-control-h) !important;
    border: 1px solid var(--k-border-strong);
    border-radius: var(--k-r-md);
    background: var(--k-bg-surface);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--k-text-strong);
    font-size: var(--k-fs-body);
    line-height: var(--k-control-h);
    padding-left: var(--k-sp-3);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--k-control-h); }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--k-border-focus);
    box-shadow: var(--k-sh-focus);
}
.select2-dropdown {
    border-color: var(--k-border-strong);
    border-radius: var(--k-r-md);
    box-shadow: var(--k-sh-2);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--k-primary);
    color: var(--k-n-0);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--k-primary-soft);
    border: 1px solid var(--k-navy-200);
    color: var(--k-primary);
    border-radius: var(--k-r-sm);
    font-size: var(--k-fs-sm);
    font-weight: var(--k-fw-medium);
}

/* ==========================================================================
   8. TABLE
   --------------------------------------------------------------------------
   ERP-nin əsas ekranı cədvəldir. Sıxlıq və oxunaqlılıq burada həll olunur.
   ========================================================================== */
.table {
    color: var(--k-text);
    font-size: var(--k-fs-body);
    margin-bottom: 0;
}

.table thead th {
    background: var(--k-bg-sunken);
    color: var(--k-text-muted);
    font-size: var(--k-fs-micro);
    font-weight: var(--k-fw-bold);
    letter-spacing: var(--k-ls-label);
    text-transform: uppercase;
    border-top: 0;
    border-bottom: 1px solid var(--k-border);
    padding: var(--k-sp-3) var(--k-sp-3);
    white-space: nowrap;
    vertical-align: middle;
}

/* `!important` — çünki şablonun `styles.css`-i özü
   `table tr th, table tr td { border-top: … !important }` yazır.
   Vendor `!important`-ini yalnız `!important` üstələyə bilir. */
.table tbody td {
    border-top: 1px solid var(--k-border) !important;
    padding: var(--k-sp-3);
    vertical-align: middle;
    height: var(--k-row-h);
    color: var(--k-text);
}
.table thead th { border-top: 0 !important; }

.table-hover tbody tr { transition: background var(--k-dur-fast) var(--k-ease); }
.table-hover tbody tr:hover { background: var(--k-primary-soft); }

/* Sıx rejim — 100+ sətirli siyahılar üçün. */
.k-table--dense tbody td { padding: var(--k-sp-2) var(--k-sp-3); height: var(--k-row-h-dense); }
.k-table--dense thead th { padding: var(--k-sp-2) var(--k-sp-3); }

/* Sətir şeridi — sifariş axını zolağı. Rəng workflow lane token-lərindən.
   Class `<tr>`-dədir, sərhəd isə birinci `<td>`-yə verilir: `border-collapse:
   collapse` altında `<tr>` sərhədi etibarlı render olunmur. */
.k-row-lane > td:first-child { border-left: var(--k-rail-w) solid transparent; }
.k-row-lane--request    > td:first-child { border-left-color: var(--k-lane-request); }
.k-row-lane--accounting > td:first-child { border-left-color: var(--k-lane-accounting); }
.k-row-lane--factory    > td:first-child { border-left-color: var(--k-lane-factory); }
.k-row-lane--completed  > td:first-child { border-left-color: var(--k-lane-completed); }
.k-row-lane--cancelled  > td:first-child { border-left-color: var(--k-lane-cancelled); }

/* ==========================================================================
   9. DATA TYPOGRAPHY  — sistemin ikinci imzası
   --------------------------------------------------------------------------
   Pul və kod nəsr mətnindən tipoqrafik olaraq ayrılır:
   pul → sağa düzülmüş, tabular; kod → monospace.
   Mühasib gözü sütunu bir baxışda tutur.
   ========================================================================== */
.k-money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-weight: var(--k-fw-semi);
    color: var(--k-text-strong);
    text-align: right;
    white-space: nowrap;
    display: inline-block;
}
.k-money__unit {
    font-size: .85em;
    font-weight: var(--k-fw-medium);
    color: var(--k-text-faint);
    margin-left: var(--k-sp-1);
}
.k-money--negative { color: var(--k-accent); }
.k-money--positive { color: var(--k-success); }

td.k-num, th.k-num { text-align: right; font-variant-numeric: tabular-nums; }

.k-code {
    font-family: var(--k-font-mono);
    font-size: var(--k-fs-code);
    letter-spacing: .02em;
    color: var(--k-primary);
    background: var(--k-primary-soft);
    border: 1px solid var(--k-navy-100);
    border-radius: var(--k-r-sm);
    padding: 2px var(--k-sp-2);
    white-space: nowrap;
}

/* ==========================================================================
   10. BADGE / STATUS
   ========================================================================== */
.badge,
.k-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--k-fs-micro);
    font-weight: var(--k-fw-bold);
    letter-spacing: var(--k-ls-label);
    text-transform: uppercase;
    padding: 4px var(--k-sp-2);
    border-radius: var(--k-r-sm);
    border: 1px solid transparent;
    line-height: 1.4;
}

.k-badge--neutral { background: var(--k-bg-sunken);    color: var(--k-text-muted); border-color: var(--k-border); }
.k-badge--info    { background: var(--k-info-bg);      color: var(--k-info);       border-color: var(--k-info-border); }
.k-badge--warning { background: var(--k-warning-bg);   color: var(--k-warning);    border-color: var(--k-warning-border); }
.k-badge--success { background: var(--k-success-bg);   color: var(--k-success);    border-color: var(--k-success-border); }
.k-badge--danger  { background: var(--k-danger-bg);    color: var(--k-danger);     border-color: var(--k-danger-border); }
.k-badge--brand   { background: var(--k-primary-soft); color: var(--k-primary);    border-color: var(--k-navy-200); }

.badge-primary   { background: var(--k-primary-soft); color: var(--k-primary);  border-color: var(--k-navy-200); }
.badge-success   { background: var(--k-success-bg);   color: var(--k-success);  border-color: var(--k-success-border); }
.badge-danger    { background: var(--k-danger-bg);    color: var(--k-danger);   border-color: var(--k-danger-border); }
.badge-warning   { background: var(--k-warning-bg);   color: var(--k-warning);  border-color: var(--k-warning-border); }
.badge-info      { background: var(--k-info-bg);      color: var(--k-info);     border-color: var(--k-info-border); }
.badge-secondary { background: var(--k-bg-sunken);    color: var(--k-text-muted); border-color: var(--k-border); }

/* ==========================================================================
   11. KPI TILE  — dashboard
   ========================================================================== */
.k-kpi {
    position: relative;
    background: var(--k-bg-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-r-lg);
    padding: var(--k-sp-5);
    box-shadow: var(--k-sh-1);
}
.k-kpi__label {
    font-size: var(--k-fs-micro);
    font-weight: var(--k-fw-bold);
    letter-spacing: var(--k-ls-eyebrow);
    text-transform: uppercase;
    color: var(--k-text-faint);
    margin-bottom: var(--k-sp-2);
}
.k-kpi__value {
    font-size: var(--k-fs-display);
    font-weight: var(--k-fw-black);
    letter-spacing: var(--k-ls-display);
    color: var(--k-text-strong);
    font-variant-numeric: tabular-nums;
    line-height: var(--k-lh-tight);
}
.k-kpi__meta { font-size: var(--k-fs-sm); color: var(--k-text-muted); margin-top: var(--k-sp-2); }
.k-kpi--accent .k-kpi__value { color: var(--k-accent); }

/* ==========================================================================
   11b. CHART — `js/kontur-charts.js` ilə birlikdə
   ========================================================================== */
.k-chart { width: 100%; }
.k-chart svg { display: block; width: 100%; }

.k-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-sp-4);
    margin-top: var(--k-sp-3);
    padding-left: 62px; /* ox etiketlərinin eni */
}
.k-chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--k-sp-2);
    font-size: var(--k-fs-sm);
    color: var(--k-text-muted); /* mətn həmişə mətn tokeni — seriya rəngi deyil */
}
.k-chart-legend__swatch {
    width: 10px; height: 10px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.k-chart-tip {
    display: none;
    position: absolute;
    z-index: 1080;
    min-width: 168px;
    padding: var(--k-sp-2) var(--k-sp-3);
    background: var(--k-bg-inverse);
    color: var(--k-text-on-dark);
    border-radius: var(--k-r-md);
    box-shadow: var(--k-sh-3);
    font-size: var(--k-fs-sm);
    pointer-events: none;
}
.k-chart-tip__head {
    font-weight: var(--k-fw-bold);
    color: var(--k-n-0);
    margin-bottom: var(--k-sp-1);
}
.k-chart-tip__row {
    display: flex;
    align-items: center;
    gap: var(--k-sp-2);
    line-height: 1.7;
}
.k-chart-tip__swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.k-chart-tip__name { color: var(--k-navy-200); }
.k-chart-tip__val {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: var(--k-fw-semi);
    color: var(--k-n-0);
}

.k-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: var(--k-text-muted);
    font-size: var(--k-fs-body);
}

/* Diaqramın altındakı cədvəl görünüşü — rəngdən asılı olmayan alternativ. */
.k-chart-table { margin-top: var(--k-sp-4); }
.k-chart-table summary {
    cursor: pointer;
    font-size: var(--k-fs-sm);
    color: var(--k-link);
    padding: var(--k-sp-1) 0;
}
.k-chart-table summary:hover { color: var(--k-link-hover); }
.k-chart-table table { margin-top: var(--k-sp-2); }

/* ==========================================================================
   11c. BOOTSTRAP `bg-*` UTILITY-LƏRİ  (D-UI-1)
   --------------------------------------------------------------------------
   Şablon ekranları Bootstrap-ın xam default rənglərini işlədir
   (`bg-primary` #007BFF, `bg-success` #28A745, `bg-info` #17A2B8) və bunlar
   dizayn sistemindən tamam kənardadır. 10 faylda markup-ı əl ilə dəyişmək
   əvəzinə utility-lər bir yerdən marka token-lərinə bağlanır — beləliklə
   gələcəkdə kimsə `bg-success` yazsa da düzgün rəng alır.

   Yeni ekranda `bg-*` İŞLƏTMƏ — bölmə başlığı üçün `.k-section` var.
   Bax: docs/design/06-order-crm.md
   ========================================================================== */
.bg-primary   { background-color: var(--k-primary) !important; }
.bg-success   { background-color: var(--k-success) !important; }
.bg-info      { background-color: var(--k-info) !important; }
.bg-warning   { background-color: var(--k-warning) !important; }
.bg-danger    { background-color: var(--k-danger) !important; }
.bg-secondary { background-color: var(--k-n-500) !important; }
.bg-dark      { background-color: var(--k-n-800) !important; }
.bg-light     { background-color: var(--k-bg-sunken) !important; }
.table-light, .table-light > th, .table-light > td { background-color: var(--k-bg-sunken) !important; }

/* ==========================================================================
   11d. BÖLMƏ BAŞLIĞI — rəngli zolağın əvəzi  (D-UI-1, D-UI-4)
   ========================================================================== */
.k-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-sp-3);
    padding: 0 0 var(--k-sp-3);
    margin-bottom: var(--k-sp-4);
    border-bottom: 1px solid var(--k-border);
}
.k-section__title {
    position: relative;
    margin: 0;
    padding-left: var(--k-sp-4);
    font-size: var(--k-fs-h2);
    font-weight: var(--k-fw-bold);
    letter-spacing: var(--k-ls-tight);
    color: var(--k-text-strong);
    line-height: var(--k-lh-snug);
}
.k-section__title::before {
    content: "";
    position: absolute;
    left: 0; top: 2px; bottom: 2px;
    width: var(--k-rail-w);
    background: var(--k-primary);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--k-mitre)), 0 100%);
}
.k-section__meta { font-size: var(--k-fs-sm); color: var(--k-text-muted); }

/* Başlıq + vəziyyət nişanı bir sətirdə (istehsalat xidmət kartı). */
.k-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--k-sp-4);
}

/* Oxu üçün fakt zolağı — söndürülmüş input əvəzinə.
   `k-order-context` ilə eyni görünüş; ora sifariş üçündür, bu isə ümumidir. */
.k-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-sp-6);
    padding: var(--k-sp-4) var(--k-sp-5);
    background: var(--k-bg-sunken);
    border: 1px solid var(--k-border);
    border-radius: var(--k-r-lg);
    margin-bottom: var(--k-sp-5);
}
.k-facts__item { display: flex; flex-direction: column; gap: 2px; }
.k-facts__label {
    font-size: var(--k-fs-micro);
    font-weight: var(--k-fw-bold);
    letter-spacing: var(--k-ls-eyebrow);
    text-transform: uppercase;
    color: var(--k-text-faint);
}
.k-facts__value {
    font-size: var(--k-fs-body);
    font-weight: var(--k-fw-semi);
    color: var(--k-text-strong);
}
/* `k-num` cədvəl xanası üçün yazılıb; zolaqda da rəqəm sütunu kimi oxunsun. */
.k-facts__value.k-num { text-align: left; }

/* Yekun məbləğ — sonda dayanır və qalanlardan ayrılır. */
.k-facts__item--total {
    margin-left: auto;
    padding-left: var(--k-sp-6);
    border-left: 1px solid var(--k-border-strong);
}
.k-facts__item--total .k-facts__value {
    font-size: var(--k-fs-h3);
    color: var(--k-primary);
}

/* Sifariş səviyyəsində əməliyyat zolağı — izah solda, düymə sağda.
   İzah düymənin yanındadır ki, nə baş verəcəyi klikdən ƏVVƏL oxunsun. */
.k-order-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-sp-4);
    flex-wrap: wrap;
    padding: var(--k-sp-4) var(--k-sp-5);
    margin-bottom: var(--k-sp-4);
    background: var(--k-bg-surface);
    border: 1px solid var(--k-border);
    border-left: 3px solid var(--k-accent);
    border-radius: var(--k-r-lg);
}
.k-order-actions__text {
    font-size: var(--k-fs-sm);
    color: var(--k-text-muted);
    min-width: 0;
}

/* Sərbəst mətn qeydi — oxunan blok, textarea deyil. */
.k-note {
    padding: var(--k-sp-4) var(--k-sp-5);
    background: var(--k-bg-sunken);
    border-left: 3px solid var(--k-border-strong);
    border-radius: 0 var(--k-r-md) var(--k-r-md) 0;
    white-space: pre-line; /* sətir sonları qorunsun */
}
.k-note__label {
    font-size: var(--k-fs-micro);
    font-weight: var(--k-fw-bold);
    letter-spacing: var(--k-ls-eyebrow);
    text-transform: uppercase;
    color: var(--k-text-faint);
    margin-bottom: var(--k-sp-1);
}

/* ==========================================================================
   11e. SƏTİR REDAKTORU — Simeta / Kalkulyator / ProductOrders  (D-UI-3)
   ========================================================================== */
.k-lineitems { margin-bottom: var(--k-sp-6); }

.k-lineitems__table { margin-bottom: 0; }
.k-lineitems__table thead th {
    background: var(--k-bg-sunken);
    font-size: var(--k-fs-micro);
    font-weight: var(--k-fw-bold);
    letter-spacing: var(--k-ls-label);
    text-transform: uppercase;
    color: var(--k-text-muted);
    white-space: nowrap;
}
/* `table-bordered` tam şəbəkə çəkir — sıxlıqda səs-küydür (D-UI-5). */
.k-lineitems__table.table-bordered,
.k-lineitems__table.table-bordered td,
.k-lineitems__table.table-bordered th { border-left: 0 !important; border-right: 0 !important; }

.k-lineitems__table td { vertical-align: middle; }

/* Seçilmiş sətir. JS `bg-warning text-white` əlavə edir — tam doymuş amber
   sətir cədvəldə çox ağırdır, ona görə yumşaq fon + tünd mətnə çevrilir.
   JS-ə toxunulmur. */
.k-lineitems__table tr.bg-warning > td { background: var(--k-warning-bg) !important; }
.k-lineitems__table tr.bg-warning.text-white > td { color: var(--k-warning) !important; }

/* Təklif siyahısının fonu — inline `#f1f1f1` əvəzinə. */
.k-lineitems .suggestions-container,
.suggestions-container { background: var(--k-bg-sunken) !important; border-radius: var(--k-r-md); }
.k-lineitems__table .form-control { height: 34px; }
.k-lineitems__table img { border-radius: var(--k-r-sm); object-fit: cover; }

/* Cəm zolağı — doymuş rəngli blok DEYİL.
   Rəqəm rənglə deyil, çəki və ölçü ilə vurğulanır.

   Tipoqrafiya elementin ÖZÜNDƏDİR, alt elementdə deyil: mövcud ekranlarda
   jQuery `.text()` ilə yazır və alt elementləri silərdi. Struktur markup
   mümkün olanda `__label` / `__value` işlət — ikisi də eyni görünür. */
.k-total {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--k-sp-3);
    padding: var(--k-sp-3) var(--k-sp-4);
    border-top: 2px solid var(--k-border-strong);
    background: var(--k-bg-surface);
    font-size: 20px;
    font-weight: var(--k-fw-black);
    letter-spacing: var(--k-ls-tight);
    font-variant-numeric: tabular-nums;
    color: var(--k-text-strong);
    white-space: nowrap;
}
.k-total__label,
.k-total::before {
    font-size: var(--k-fs-micro);
    font-weight: var(--k-fw-bold);
    letter-spacing: var(--k-ls-eyebrow);
    text-transform: uppercase;
    color: var(--k-text-muted);
}
.k-total__value {
    font-size: inherit;
    font-weight: inherit;
    font-variant-numeric: inherit;
    color: inherit;
}

/* Yekun cəm — səhifədə bir dənə. Etiket CSS-dən gəlir ki, `.text()` onu silməsin. */
.k-total--grand {
    background: var(--k-primary-soft);
    border-top-color: var(--k-primary);
    color: var(--k-primary);
    font-size: 24px;
}
.k-total--grand::before { content: "Ümumi cəm"; }

/* ==========================================================================
   11f. ADDIM RELSİ — sifariş axını  (D-UI-2)
   --------------------------------------------------------------------------
   Sifariş bir prosesdir, amma 8 səhifəyə bölünüb. Bu rels istifadəçiyə
   harada olduğunu, nəyin bitdiyini və növbətinin nə olduğunu deyir.
   ========================================================================== */
.k-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-sp-1);
    padding: var(--k-sp-3) var(--k-sp-6) 0;
    margin-bottom: var(--k-sp-4);
}
.k-steps__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--k-sp-2);
    padding: var(--k-sp-2) var(--k-sp-3) var(--k-sp-2) var(--k-sp-4);
    font-size: var(--k-fs-sm);
    font-weight: var(--k-fw-medium);
    color: var(--k-text-faint);
    background: var(--k-bg-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-r-md);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--k-dur-fast) var(--k-ease),
                color var(--k-dur-fast) var(--k-ease);
}
.k-steps__item::before {
    content: "";
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    border-radius: 2px 0 0 2px;
    background: var(--k-border-strong);
}
a.k-steps__item:hover { background: var(--k-primary-soft); color: var(--k-primary); }

.k-steps__item--done { color: var(--k-text); }
.k-steps__item--done::before { background: var(--k-success); }

/* Sifarişin çatdığı mərhələ — baxdığın səhifədən fərqli ola bilər. */
.k-steps__item--stage {
    color: var(--k-primary);
    background: var(--k-primary-soft);
    font-weight: var(--k-fw-semi);
}
.k-steps__item--stage::before { background: var(--k-accent); }

/* Baxdığın səhifə. --stage-dən SONRA gəlir ki, ikisi üst-üstə düşəndə üstün olsun. */
.k-steps__item--current {
    color: var(--k-n-0);
    background: var(--k-primary);
    border-color: var(--k-primary);
    font-weight: var(--k-fw-semi);
}
.k-steps__item--current::before {
    background: var(--k-accent);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 0 100%);
}
a.k-steps__item--current:hover { background: var(--k-primary-hover); color: var(--k-n-0); }

/* Sifariş konteksti — hər addımda kimin sifarişində olduğun görünsün. */
.k-order-context {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-sp-6);
    padding: var(--k-sp-4) var(--k-sp-6);
    background: var(--k-bg-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-r-lg);
    margin-bottom: var(--k-sp-4);
}
.k-order-context__item { display: flex; flex-direction: column; gap: 2px; }
.k-order-context__label {
    font-size: var(--k-fs-micro);
    font-weight: var(--k-fw-bold);
    letter-spacing: var(--k-ls-eyebrow);
    text-transform: uppercase;
    color: var(--k-text-faint);
}
.k-order-context__value {
    font-size: var(--k-fs-body);
    font-weight: var(--k-fw-semi);
    color: var(--k-text-strong);
}

/* --------------------------------------------------------------------------
   Seçim kartları (.k-choice) — bir-birini istisna edən variantlar üçün.
   Tab əvəzinə istifadə olunur: tab "eyni şeyin görünüşləri" deməkdir,
   bu isə seçimdir. Radio-lar realdır — klaviatura ox düymələri işləyir.
   -------------------------------------------------------------------------- */
.k-orderer {
    border: 0;
    padding: 0;
    margin: 0 0 var(--k-sp-6);
    min-width: 0; /* fieldset default-u grid/flex-i sıxışdırır */
}
.k-orderer__legend {
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 2px;
    font-size: var(--k-fs-h3);
    font-weight: var(--k-fw-semi);
    color: var(--k-text-strong);
}
.k-orderer__lead {
    margin-bottom: var(--k-sp-3);
    font-size: var(--k-fs-sm);
    color: var(--k-text-muted);
}
.k-orderer__panel { margin-top: var(--k-sp-5); }
.k-orderer__panel[hidden] { display: none !important; }

.k-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--k-sp-3);
}
@media (max-width: 767.98px) {
    .k-choices { grid-template-columns: minmax(0, 1fr); }
}

.k-choice { display: block; margin: 0; cursor: pointer; }
/* Radio görünmür, amma fokuslana bilir — `display:none` bunu öldürərdi. */
.k-choice__input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.k-choice__box {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--k-sp-3);
    row-gap: 2px;
    padding: var(--k-sp-3) var(--k-sp-4);
    background: var(--k-bg-surface);
    border: 1px solid var(--k-border-strong);
    border-radius: var(--k-r-md);
    transition: border-color var(--k-dur-fast) var(--k-ease),
                background-color var(--k-dur-fast) var(--k-ease),
                box-shadow var(--k-dur-fast) var(--k-ease);
}
.k-choice__mark {
    grid-row: 1 / span 2;
    align-self: center;
    width: 18px; height: 18px;
    border: 2px solid var(--k-border-strong);
    border-radius: 50%;
    background: var(--k-bg-surface);
    transition: border-color var(--k-dur-fast) var(--k-ease),
                box-shadow var(--k-dur-fast) var(--k-ease);
}
.k-choice__title {
    font-size: var(--k-fs-body);
    font-weight: var(--k-fw-semi);
    color: var(--k-text-strong);
}
.k-choice__hint {
    font-size: var(--k-fs-sm);
    color: var(--k-text-muted);
}

.k-choice:hover .k-choice__box { border-color: var(--k-primary); }
.k-choice:hover .k-choice__mark { border-color: var(--k-primary); }

.k-choice__input:focus-visible + .k-choice__box {
    border-color: var(--k-border-focus);
    box-shadow: var(--k-sh-focus);
}

.k-choice__input:checked + .k-choice__box {
    border-color: var(--k-primary);
    background: var(--k-primary-soft);
}
.k-choice__input:checked + .k-choice__box .k-choice__mark {
    border-color: var(--k-primary);
    /* içəri nöqtə — ayrıca element olmadan */
    box-shadow: inset 0 0 0 3px var(--k-bg-surface), inset 0 0 0 9px var(--k-primary);
}
/* Sistemin imza detalı — addım relsindəki eyni kəsik. */
.k-choice__input:checked + .k-choice__box::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--k-accent);
    border-radius: var(--k-r-md) 0 0 var(--k-r-md);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 0 100%);
}

/* --------------------------------------------------------------------------
   Ölçü siyahısı (.k-measures) — məhsulun hər ölçü vahidi və qalığı.
   Qalıqları CƏMLƏMƏK olmaz: metr + ədəd + kq mənasız rəqəm verir.
   Qalığı sıfır olan ölçü də göstərilir — "yoxdur" ilə "təyin olunmayıb"
   fərqli şeylərdir.
   -------------------------------------------------------------------------- */
.k-measures {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.k-measures__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--k-sp-3);
    min-width: 120px;
    font-size: var(--k-fs-sm);
}
.k-measures__unit { color: var(--k-text-muted); }
.k-measures__qty {
    font-weight: var(--k-fw-semi);
    color: var(--k-text-strong);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
/* Qalığı bitmiş ölçü — sətir qalır, rəqəm xəbərdarlıq rəngindədir. */
.k-measures__item--empty .k-measures__qty { color: var(--k-accent); }

/* select2 gizli konteynerdə ilkinləşəndə enini 100px kimi "dondurur".
   dr-select2 həmişə tam en tutur, ona görə inline eni ləğv edilir. */
select.dr-select2 + .select2-container { width: 100% !important; }

/* ==========================================================================
   12. MODAL / DROPDOWN / ALERT
   ========================================================================== */
.modal-content {
    border: 0;
    border-radius: var(--k-r-lg);
    box-shadow: var(--k-sh-3);
}
.modal-header {
    border-bottom: 1px solid var(--k-border);
    padding: var(--k-sp-4) var(--k-sp-6);
}
.modal-title {
    font-size: var(--k-fs-h2);
    font-weight: var(--k-fw-bold);
    color: var(--k-text-strong);
    letter-spacing: var(--k-ls-tight);
}
.modal-body { padding: var(--k-sp-6); }
.modal-footer {
    border-top: 1px solid var(--k-border);
    background: var(--k-bg-sunken);
    border-radius: 0 0 var(--k-r-lg) var(--k-r-lg);
    padding: var(--k-sp-3) var(--k-sp-6);
}

.dropdown-menu {
    border: 1px solid var(--k-border);
    border-radius: var(--k-r-md);
    box-shadow: var(--k-sh-2);
    padding: var(--k-sp-1);
    font-size: var(--k-fs-body);
}
.dropdown-item {
    border-radius: var(--k-r-sm);
    padding: var(--k-sp-2) var(--k-sp-3);
    color: var(--k-text);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--k-primary-soft);
    color: var(--k-primary);
}

.alert {
    border-radius: var(--k-r-md);
    border-width: 1px;
    font-size: var(--k-fs-body);
    padding: var(--k-sp-3) var(--k-sp-4);
}
.alert-success { background: var(--k-success-bg); border-color: var(--k-success-border); color: var(--k-success); }
.alert-danger  { background: var(--k-danger-bg);  border-color: var(--k-danger-border);  color: var(--k-danger); }
.alert-warning { background: var(--k-warning-bg); border-color: var(--k-warning-border); color: var(--k-warning); }
.alert-info    { background: var(--k-info-bg);    border-color: var(--k-info-border);    color: var(--k-info); }

/* SweetAlert2 — sistemin dilində danışsın. */
.swal2-popup { border-radius: var(--k-r-lg) !important; font-family: var(--k-font-ui) !important; }
.swal2-title { font-size: var(--k-fs-h2) !important; color: var(--k-text-strong) !important; font-weight: var(--k-fw-bold) !important; }
.swal2-html-container, .swal2-content { font-size: var(--k-fs-body) !important; color: var(--k-text) !important; }
.swal2-styled.swal2-confirm {
    background: var(--k-primary) !important;
    border-radius: var(--k-r-md) !important;
    font-weight: var(--k-fw-semi) !important;
}
.swal2-styled.swal2-cancel {
    background: var(--k-bg-surface) !important;
    color: var(--k-text) !important;
    border: 1px solid var(--k-border-strong) !important;
    border-radius: var(--k-r-md) !important;
    font-weight: var(--k-fw-semi) !important;
}

/* ==========================================================================
   13. PAGINATION
   ========================================================================== */
.pagination .page-link {
    color: var(--k-text);
    border: 1px solid var(--k-border);
    border-radius: var(--k-r-sm);
    margin: 0 2px;
    font-size: var(--k-fs-sm);
    font-weight: var(--k-fw-medium);
    min-width: 32px;
    text-align: center;
}
.pagination .page-link:hover { background: var(--k-primary-soft); color: var(--k-primary); border-color: var(--k-navy-200); }
.pagination .page-item.active .page-link {
    background: var(--k-primary);
    border-color: var(--k-primary);
    color: var(--k-n-0);
}

/* ==========================================================================
   14. EMPTY STATE
   --------------------------------------------------------------------------
   Boş ekran əməliyyata dəvətdir. Hazırda bir çox siyahı sadəcə heç nə
   göstərmir — bu blok onu əvəz edir.
   ========================================================================== */
.k-empty {
    text-align: center;
    padding: var(--k-sp-16) var(--k-sp-6);
    color: var(--k-text-muted);
}
/* İmza həndəsəsinin böyüdülmüş təkrarı — kəsim rail ilə eyni nisbətdə
   (rail: 8/44 hündürlük; burada: 8×2 / 44). */
.k-empty__mark {
    display: inline-block;
    width: 44px; height: 44px;
    margin-bottom: var(--k-sp-4);
    background: var(--k-primary);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--k-mitre) * 2), 0 100%);
    opacity: .12;
}
.k-empty__title {
    font-size: var(--k-fs-h2);
    font-weight: var(--k-fw-bold);
    color: var(--k-text-strong);
    margin-bottom: var(--k-sp-2);
}
.k-empty__hint { font-size: var(--k-fs-body); margin-bottom: var(--k-sp-5); }

/* Kart içindəki kiçik boş vəziyyət — bütöv səhifə deyil, bir bölmə boşdur.
   Nişan və düymə olmadan, çünki bu bölmə səhifənin yalnız bir hissəsidir. */
.k-empty--inline {
    padding: var(--k-sp-6) var(--k-sp-4);
    font-size: var(--k-fs-sm);
}
.k-empty--inline span {
    display: block;
    margin-top: var(--k-sp-1);
    color: var(--k-text-faint);
}

/* Məlumatın olmadığını bildirən sönük mətn — cədvəl xanalarında "—" üçün. */
.k-muted { color: var(--k-text-faint); }

/* ==========================================================================
   15. FOOTER + PRELOADER
   ========================================================================== */
footer .footer-area {
    background: transparent;
    border-top: 1px solid var(--k-border);
    color: var(--k-text-faint);
    font-size: var(--k-fs-sm);
    padding: var(--k-sp-4) var(--k-sp-6);
    box-shadow: none;
}
footer .footer-area p { margin: 0; }

#preloader { background: var(--k-bg-page); }
.loading-spin.active { border-right-color: var(--k-primary) !important; }

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
    .page-title-area { padding: var(--k-sp-4); }
    .card .card-body { padding: var(--k-sp-4); }
    .k-kpi__value { font-size: 22px; }
}

@media (max-width: 575px) {
    .table thead th, .table tbody td { padding: var(--k-sp-2); }
    .btn { padding: 0 var(--k-sp-3); }
}

/* Çap — hesabat çıxarışı üçün. */
@media print {
    .sidebar-menu, .header-area, footer, .btn, .modal { display: none !important; }
    body { background: var(--k-n-0); }
    .card { border: 1px solid var(--k-n-300); box-shadow: none; }
}

/* ==========================================================================
   CRM Kanban lövhəsi (OrderKanban)
   Sütunun üst zolağı sifarişin axın zonasını göstərir (lane token-ləri) —
   cədvəllərdəki .k-row-lane ilə eyni məna.
   ========================================================================== */
.k-kanban {
    display: flex;
    gap: var(--k-sp-3);
    align-items: flex-start;
    overflow-x: auto;
    padding: var(--k-sp-4) 0 var(--k-sp-6);
}

.k-kanban__col {
    flex: 0 0 248px;
    max-width: 248px;
    background: var(--k-bg-sunken);
    border: 1px solid var(--k-border);
    border-radius: var(--k-r-md);
}

/* İcra / Tamamlandı — yalnız baxış, dar sütun */
.k-kanban__col--readonly {
    flex-basis: 208px;
    max-width: 208px;
    background: var(--k-bg-page);
}

.k-kanban__head {
    display: flex;
    align-items: center;
    gap: var(--k-sp-2);
    padding: var(--k-sp-3);
    border-bottom: 1px solid var(--k-border);
    border-top: 3px solid var(--k-lane-request);
    border-radius: var(--k-r-md) var(--k-r-md) 0 0;
    font-size: var(--k-fs-h3);
    font-weight: var(--k-fw-semi);
    color: var(--k-text-strong);
}

.k-kanban__col--lane-accounting .k-kanban__head { border-top-color: var(--k-lane-accounting); }
.k-kanban__col--lane-factory    .k-kanban__head { border-top-color: var(--k-lane-factory); }
.k-kanban__col--lane-completed  .k-kanban__head { border-top-color: var(--k-lane-completed); }

.k-kanban__count {
    margin-left: auto;
    font-size: var(--k-fs-micro);
    font-weight: var(--k-fw-semi);
    color: var(--k-text-muted);
    background: var(--k-bg-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-r-pill);
    padding: 1px var(--k-sp-2);
}

.k-kanban__hint {
    font-size: var(--k-fs-micro);
    color: var(--k-text-faint);
    padding: var(--k-sp-1) var(--k-sp-3) 0;
}

.k-kanban__list {
    display: flex;
    flex-direction: column;
    gap: var(--k-sp-2);
    padding: var(--k-sp-3);
    min-height: 80px;
    max-height: 70vh;
    overflow-y: auto;
}

.k-kanban__card {
    background: var(--k-bg-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-r-sm);
    box-shadow: var(--k-sh-1);
    padding: var(--k-sp-3);
}

.k-kanban__card[draggable="true"] { cursor: grab; }

.k-kanban__card:hover {
    box-shadow: var(--k-sh-2);
    border-color: var(--k-border-strong);
}

.k-kanban__card.is-dragging { opacity: .5; }

.k-kanban__card-title {
    font-size: var(--k-fs-body);
    font-weight: var(--k-fw-medium);
    color: var(--k-text-strong);
    margin: var(--k-sp-1) 0;
}

.k-kanban__card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-sp-2);
    font-size: var(--k-fs-sm);
    color: var(--k-text-muted);
}

/* Drag zamanı icazəli hədəf sütun */
.k-kanban__col.is-drop-target {
    border-color: var(--k-border-focus);
    box-shadow: var(--k-sh-focus);
}

.k-kanban__col.is-drop-target .k-kanban__list { background: var(--k-primary-soft); }

/* ==========================================================================
   CRM-1 — borc son tarixi: sətir zolağı və kanban kartı
   Gecikib / bu gün → danger; 1..3 gün qalıb → warning. Rənglər yalnız token-dən.
   ========================================================================== */
.k-row-lane--overdue  > td:first-child { border-left-color: var(--k-danger); }
.k-row-lane--due-soon > td:first-child { border-left-color: var(--k-warning); }
.k-row-lane--overdue  > td { background: var(--k-danger-bg); }
.k-row-lane--due-soon > td { background: var(--k-warning-bg); }

.k-kanban__card--overdue  { border-left: 3px solid var(--k-danger);  background: var(--k-danger-bg); }
.k-kanban__card--due-soon { border-left: 3px solid var(--k-warning); background: var(--k-warning-bg); }

/* Kanban — hissə-hissə yükləmə footer-i */
.k-kanban__more { display: flex; justify-content: center; padding: var(--k-sp-2) 0; }

/* ==========================================================================
   CRM-3 — kanban kartında zəng / ⓘ və xatırlatma modalı
   ========================================================================== */
.k-kanban__card { position: relative; }
.k-kanban__card .k-code { margin-right: 48px; }
.k-kanban__card-actions { position: absolute; top: var(--k-sp-2); right: var(--k-sp-2); display: flex; gap: 2px; }
.k-kanban__icon { background: none; border: 0; padding: 0 2px; cursor: pointer; font-size: 14px; line-height: 1; color: var(--k-text-muted); }
.k-kanban__icon:hover { color: var(--k-primary); }
.k-kanban__icon--info { color: var(--k-primary); font-weight: var(--k-fw-bold); }

.k-reminder-list { max-height: 40vh; overflow-y: auto; margin-bottom: var(--k-sp-3); }
.k-reminder { padding: var(--k-sp-2) 0; border-bottom: 1px solid var(--k-border); }
.k-reminder--sent { color: var(--k-text-muted); }
.k-reminder__text { white-space: pre-wrap; }