@charset "UTF-8";
/* ==========================================================================================
   style.css — Tikinti Mağaza Sistemi dizayn sistemi
   Modern, peşəkar POS/admin görünüşü. Saf CSS, çərçivəsiz (framework yoxdur).

   MÜNDƏRİCAT
     01. Dizayn nişanları (tokens)
     02. Sıfırlama və əsas qaydalar
     03. Tipoqrafiya
     04. Səhifə düzümü və gövdə konteynerləri
     05. Naviqasiya (tətbiq paneli)
     06. Bölmə / kart səthləri
     07. Formalar və sahələr
     08. Düymələr
     09. Mesaj / bildiriş
     10. Cədvəllər
     11. Mobil cədvəl → kart (data-etiket)
     12. Səbət, ödəniş və günlük bölmələri
     13. Məhsul şəbəkəsi və kartları
     14. Nişanlar / vəziyyət pilləri
     15. Sətir vəziyyətləri və xətli üslub
     16. Səhifələmə
     17. Növbə təqvimi
     18. Audit, əməliyyat panelləri, boş vəziyyət
     19. Toplu əməliyyat və icazə dəsti
     20. Giriş / çıxış səhifələri
     21. Yardımçı siniflər
     22. Animasiyalar
     23. Responsiv düzüm (360px → 1920px)
     24. Çap üslubları
   ========================================================================================== */

/* ══════════════════════════════════════════════════════════════════════════════════════════
   01. DİZAYN NİŞANLARI (TOKENS)
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    /* — Əsas palet: dərin indiqo/mavi — */
    --renk-esas-050: #eef2ff; --renk-esas-100: #e0e7ff; --renk-esas-200: #c7d2fe;
    --renk-esas-300: #a5b4fc; --renk-esas-400: #60a5fa; --renk-esas-500: #3b5bdb;
    --renk-esas-600: #2547c8; --renk-esas: #1e40af;     --renk-esas-700: #1e3a8a;
    --renk-esas-800: #1b3272; --renk-esas-900: #172554;

    /* — Neytral (slate) — */
    --renk-ag: #ffffff;           --renk-neytral-025: #fbfcfe; --renk-neytral-050: #f8fafc;
    --renk-neytral-100: #f1f5f9;  --renk-neytral-150: #eaeff5; --renk-neytral-200: #e2e8f0;
    --renk-neytral-300: #cbd5e1;  --renk-neytral-400: #94a3b8; --renk-neytral-500: #64748b;
    --renk-neytral-600: #475569;  --renk-neytral-700: #334155; --renk-neytral-800: #1e293b;
    --renk-neytral-900: #0f172a;

    /* — Semantik: uğur / xəta / xəbərdarlıq / məlumat / bənövşəyi — */
    --renk-ugur-050: #ecfdf5; --renk-ugur-100: #d1fae5; --renk-ugur-200: #a7f3d0;
    --renk-ugur: #047857;     --renk-ugur-700: #065f46;
    --renk-xeta-050: #fef2f2; --renk-xeta-100: #fee2e2; --renk-xeta-200: #fecaca;
    --renk-xeta: #b91c1c;     --renk-xeta-700: #991b1b;
    --renk-xeberdarliq-050: #fffbeb; --renk-xeberdarliq-100: #fef3c7;
    --renk-xeberdarliq-200: #fde68a; --renk-xeberdarliq: #b45309;
    --renk-xeberdarliq-700: #92400e;
    --renk-melumat-050: #eff6ff; --renk-melumat-100: #dbeafe;
    --renk-melumat-200: #bfdbfe; --renk-melumat: #1d4ed8;
    --renk-bene-050: #faf5ff; --renk-bene-200: #e9d5ff; --renk-bene: #6b21a8;

    /* — Mətn və səthlər — */
    --metn: var(--renk-neytral-800); --metn-solgun: var(--renk-neytral-500); --metn-ters: #ffffff;
    --seth: var(--renk-ag); --seth-alt: var(--renk-neytral-050); --seth-fon: #f1f4f9;
    --kenar: var(--renk-neytral-200); --kenar-guclu: var(--renk-neytral-300);

    /* — Radius — */
    --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px;
    --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;

    /* — Kölgələr — */
    --kolge-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
    --kolge-md: 0 2px 4px rgba(15, 23, 42, 0.06), 0 6px 16px -4px rgba(15, 23, 42, 0.10);
    --kolge-lg: 0 8px 24px -6px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
    --kolge-fokus: 0 0 0 3px rgba(30, 64, 175, 0.18);

    /* — Boşluq şkalası — */
    --bos-1: 0.25rem; --bos-2: 0.5rem; --bos-3: 0.75rem; --bos-4: 1rem;
    --bos-5: 1.25rem; --bos-6: 1.5rem; --bos-8: 2rem;    --bos-10: 2.5rem;

    /* — Keçidlər və ölçülər — */
    --kecid-tez: 120ms ease; --kecid: 160ms ease; --kecid-yavas: 240ms cubic-bezier(0.4, 0, 0.2, 1);
    --nizam-en: 1240px; --toxunma: 40px;

    /* — Şriftlər — */
    --serif-yox: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    --serif-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   02. SIFIRLAMA VƏ ƏSAS QAYDALAR
   ══════════════════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0; padding: 0; font-family: var(--serif-yox); font-size: 1rem; line-height: 1.55;
    color: var(--metn); background-color: var(--seth-fon);
    background-image: linear-gradient(180deg, #eef2f8 0%, #f4f6fa 220px, var(--seth-fon) 100%);
    overflow-x: hidden; /* üfüqi sürüşdürmə olmadan (Tələb 12.7) */
    min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--renk-esas); text-decoration: none; border-bottom: 1px solid rgba(30, 64, 175, 0.28);
    transition: color var(--kecid), border-color var(--kecid);
}

a:hover { color: var(--renk-esas-700); border-bottom-color: var(--renk-esas-700); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--renk-esas);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--kenar); margin: var(--bos-5) 0; }

fieldset {
    border: 1px solid var(--kenar); border-radius: var(--radius-sm); padding: var(--bos-3) var(--bos-4);
    margin: 0;
}

legend {
    padding: 0 var(--bos-2); font-size: 0.85rem; font-weight: 600; color: var(--renk-neytral-600);
    text-transform: uppercase; letter-spacing: 0.04em;
}

code, kbd, pre, samp { font-family: var(--serif-mono); font-size: 0.9em; }
::selection { background: var(--renk-esas-100); color: var(--renk-esas-900); }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   03. TİPOQRAFİYA
   ══════════════════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
    margin: 0 0 var(--bos-3); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em;
    color: var(--renk-neytral-900);
}

h1 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
h2 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; }
p { margin: 0 0 var(--bos-3); }
small { font-size: 0.8125rem; color: var(--metn-solgun); }
strong, b { font-weight: 700; }

/* Rəqəm və məbləğ sütunları üçün bərabər genişlikli rəqəmlər */
.cedvel td,
.cedvel th,
.sebet-cedvel td,
.cem-deyer,
.setir-cemi,
.gunluk-cem,
.qaliq-satir,
.cem-satir,
.catismayan-satir,
.mehsul-qiymeti,
.mehsul-karti-qiymet,
.teqvim-cem { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.izah {
    color: var(--metn-solgun); font-size: 0.9rem; margin: 0 0 var(--bos-4); 
    /* max-width: 72ch; */
}

.panel-basliq {
    font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--bos-4);
    color: var(--renk-neytral-900);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   04. SƏHİFƏ DÜZÜMÜ VƏ GÖVDƏ KONTEYNERLƏRİ
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.admin-sehifesi,
.isci-sehifesi,
.isci-paneli { padding: 0; margin: 0; }

.admin-govde,
.isci-govde,
.satis-govde {
    width: 100%; max-width: var(--nizam-en); margin: 0 auto;
    padding: var(--bos-5) var(--bos-4) var(--bos-10);
}

/* bootstrap.php-dəki sadə xəta qutusu ilə uyğunluq */
.qutu {
    max-width: 560px; margin: var(--bos-10) auto; background: var(--seth);
    border: 1px solid var(--kenar); border-radius: var(--radius-lg); padding: var(--bos-6);
    box-shadow: var(--kolge-md);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   05. NAVİQASİYA (TƏTBİQ PANELİ) — sticky
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.naviqasiya {
    position: sticky; top: 0; z-index: 200; display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--bos-1); padding: 0.5rem clamp(0.75rem, 2vw, 1.5rem); color: var(--metn-ters);
    background: linear-gradient(135deg, var(--renk-esas-900) 0%, var(--renk-esas) 55%, var(--renk-esas-600) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 4px 14px -4px rgba(15, 23, 42, 0.45);
}

.naviqasiya a {
    display: inline-flex; align-items: center; min-width: var(--toxunma); min-height: var(--toxunma);
    padding: 0.45rem 0.75rem; color: rgba(255, 255, 255, 0.88); font-size: 0.875rem; font-weight: 500;
    text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background-color var(--kecid), color var(--kecid), border-color var(--kecid);
}

.naviqasiya a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: transparent; }
.naviqasiya a:active { background: rgba(255, 255, 255, 0.22); }
.naviqasiya a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Cari səhifə (aria-current və ya .aktiv) */
.naviqasiya a[aria-current="page"],
.naviqasiya a.aktiv {
    background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 600;
    box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.85);
}

.naviqasiya .naviqasiya-baslik {
    display: inline-flex; align-items: center; gap: var(--bos-2); margin-right: var(--bos-4);
    padding: 0.25rem 0.6rem; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.08em; color: #fff;
    background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-sm);
}

.naviqasiya .naviqasiya-istifadeci {
    display: inline-flex; align-items: center; gap: var(--bos-2); margin-left: auto;
    padding: 0.35rem 0.6rem; font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.naviqasiya .naviqasiya-istifadeci::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}

.naviqasiya .naviqasiya-cixis {
    margin-left: var(--bos-2); font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.34);
}

.naviqasiya .naviqasiya-cixis:hover { background: var(--renk-xeta); border-color: var(--renk-xeta); color: #fff; }

/* Panel daxili naviqasiya (səhifə başında bölmə keçidləri) */
.panel-nav {
    display: flex; flex-wrap: wrap; gap: var(--bos-2); margin: 0 0 var(--bos-5);
}

.panel-nav a {
    display: inline-flex; align-items: center; min-height: var(--toxunma); padding: 0.4rem 0.85rem;
    font-size: 0.875rem; font-weight: 500; color: var(--renk-neytral-700); background: var(--seth);
    border: 1px solid var(--kenar); border-radius: var(--radius-pill); text-decoration: none;
    transition: background-color var(--kecid), color var(--kecid), border-color var(--kecid);
}

.panel-nav a:hover {
    background: var(--renk-esas-050);
    border-color: var(--renk-esas-200);
    color: var(--renk-esas-700);
}

.panel-nav a[aria-current="page"] { background: var(--renk-esas); border-color: var(--renk-esas); color: #fff; }
.istifadeci-adi { font-weight: 600; color: var(--renk-neytral-700); }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   06. BÖLMƏ / KART SƏTHLƏRİ
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.bolme {
    position: relative; background: var(--seth); border: 1px solid var(--kenar);
    border-radius: var(--radius-lg); padding: var(--bos-5); margin: 0 0 var(--bos-5);
    box-shadow: var(--kolge-sm);
}

.bolme > h2,
.bolme > h3 {
    display: flex; align-items: center; gap: var(--bos-2); margin: 0 0 var(--bos-4);
    padding: 0 0 var(--bos-3); border-bottom: 1px solid var(--kenar);
}

.bolme > h2::before {
    content: ""; flex: 0 0 auto; width: 4px; height: 1.05em; border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--renk-esas-500), var(--renk-esas-700));
}

.bolme > h2 > small,
.bolme > h3 > small { font-weight: 500; }
.bolme > *:last-child { margin-bottom: 0; }

/* Səhifə daxilindəki adi bölmələr də kart kimi oxunur */
.mehsul-bolmesi,
.sebet-bolmesi,
.gunluk-bolmesi,
.qaytarma-forma-bolmesi,
.qaytarma-siyahi-bolmesi {
    background: var(--seth); border: 1px solid var(--kenar); border-radius: var(--radius-lg);
    padding: var(--bos-5); margin: 0 0 var(--bos-5); box-shadow: var(--kolge-sm);
}

.mehsul-bolmesi > h2,
.sebet-bolmesi > h2,
.gunluk-bolmesi > h2,
.qaytarma-forma-bolmesi > h2,
.qaytarma-siyahi-bolmesi > h2 {
    display: flex; align-items: center; gap: var(--bos-2); margin: 0 0 var(--bos-4);
    padding: 0 0 var(--bos-3); border-bottom: 1px solid var(--kenar);
}

.qaytarma-siyahi-bolmesi { margin-top: 0; }
.gunluk-bolmesi { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   07. FORMALAR VƏ SAHƏLƏR
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.hesab-forma,
.giris-forma,
.cixis-forma { display: flex; flex-direction: column; gap: var(--bos-4); }
.hesab-forma { max-width: 560px; }

.sahe {
    display: flex; flex-direction: column; gap: var(--bos-1); min-width: 0;
}

.sahe > label,
.sahe > .sahe-etiket {
    font-size: 0.8125rem; font-weight: 600; color: var(--renk-neytral-700); letter-spacing: 0.01em;
}

.sahe input[type="text"],
.sahe input[type="password"],
.sahe input[type="number"],
.sahe input[type="date"],
.sahe input[type="datetime-local"],
.sahe input[type="time"],
.sahe input[type="email"],
.sahe input[type="search"],
.sahe input[type="tel"],
.sahe select,
.sahe textarea,
.suzgec input,
.suzgec select,
.suzgec-forma input,
.suzgec-forma select,
.odenis-sahesi input[type="text"],
.odenis-sahesi input[type="number"] {
    width: 100%; min-height: var(--toxunma); padding: 0.5rem 0.7rem; font-family: inherit;
    font-size: 0.95rem; color: var(--metn); background: var(--renk-ag);
    border: 1px solid var(--kenar-guclu); border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
    transition: border-color var(--kecid), box-shadow var(--kecid), background-color var(--kecid);
    appearance: none; -webkit-appearance: none;
}

.sahe textarea { min-height: 96px; line-height: 1.5; resize: vertical; }

.sahe select,
.suzgec select,
.suzgec-forma select {
    padding-right: 2rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--renk-neytral-500) 50%),
        linear-gradient(135deg, var(--renk-neytral-500) 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 11px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer;
}

.sahe input::placeholder,
.sahe textarea::placeholder { color: var(--renk-neytral-400); }

.sahe input:hover:not(:disabled),
.sahe select:hover:not(:disabled),
.sahe textarea:hover:not(:disabled) { border-color: var(--renk-neytral-400); }

.sahe input:focus,
.sahe select:focus,
.sahe textarea:focus,
.suzgec input:focus,
.suzgec select:focus,
.suzgec-forma input:focus,
.suzgec-forma select:focus {
    outline: 2px solid var(--renk-esas); outline-offset: 2px; border-color: var(--renk-esas);
    box-shadow: var(--kolge-fokus);
}

.sahe input:disabled,
.sahe select:disabled,
.sahe textarea:disabled,
.sahe input[readonly] {
    background: var(--renk-neytral-100); color: var(--renk-neytral-500); cursor: not-allowed;
    box-shadow: none;
}

.sahe input[aria-invalid="true"],
.sahe select[aria-invalid="true"],
.sahe textarea[aria-invalid="true"],
.sahe input.xeta,
.sahe select.xeta { border-color: var(--renk-xeta); background: var(--renk-xeta-050); }

.sahe input[aria-invalid="true"]:focus,
.sahe select[aria-invalid="true"]:focus {
    outline-color: var(--renk-xeta);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.16);
}

.sahe input[type="file"] {
    width: 100%; min-height: var(--toxunma); padding: 0.4rem 0.5rem; font-size: 0.875rem;
    background: var(--renk-neytral-050); border: 1px dashed var(--kenar-guclu);
    border-radius: var(--radius-sm); cursor: pointer;
}

.sahe input[type="file"]:hover { border-color: var(--renk-esas-300); background: var(--renk-esas-050); }

.sahe-ipucu {
    margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--metn-solgun);
}

.sahe-sehvi {
    display: block; margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--renk-xeta);
}

.sahe-sehvi:not(:empty)::before { content: "⚠ "; }

/* Şəkil önbaxışı — sabit kvadrat çərçivə, şəkil KƏSİLMİR (`contain`) */
.sekil-onbaxis {
    display: block; width: 120px; height: 120px; margin: var(--bos-2) 0;
    padding: var(--bos-2); object-fit: contain; background: var(--seth-alt);
    border: 1px solid var(--kenar); border-radius: var(--radius-sm);
}

/* Yan-yana yerləşən sahələr */
.sahe--inline { flex: 1 1 180px; min-width: 140px; }

/* Radio / checkbox dəstləri — toxunma hədəfi qorunur */
.sahe--secim { gap: var(--bos-2); }

.sahe--secim label {
    display: flex; align-items: center; gap: var(--bos-2); min-height: var(--toxunma);
    padding: 0.15rem 0.25rem; font-size: 0.9rem; font-weight: 500; color: var(--renk-neytral-700);
    border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--kecid);
}

.sahe--secim label:hover { background: var(--renk-esas-050); }

.sahe--secim input[type="checkbox"],
.sahe--secim input[type="radio"] {
    flex: 0 0 auto; width: 20px; height: 20px; min-width: 20px; min-height: 20px; margin: 0;
    accent-color: var(--renk-esas); cursor: pointer;
}

/* Sətir daxili kiçik formalar (cədvəl əməliyyat sütunları) */
.setir-forma {
    display: inline-flex; flex-wrap: wrap; gap: var(--bos-2); align-items: flex-end; margin: 0;
}

.setir-forma .sahe { flex: 1 1 auto; min-width: 0; }

/* Süzgəc panelləri */
.suzgec,
.suzgec-forma {
    display: flex; flex-wrap: wrap; gap: var(--bos-3); align-items: flex-end; margin: 0 0 var(--bos-5);
    padding: var(--bos-4); background: linear-gradient(180deg, var(--renk-neytral-050), var(--renk-ag));
    border: 1px solid var(--kenar); border-radius: var(--radius-md); box-shadow: var(--kolge-sm);
}

.suzgec .sahe,
.suzgec-forma .sahe { flex: 1 1 170px; min-width: 140px; }

.suzgec .duyme,
.suzgec-forma .duyme { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   08. DÜYMƏLƏR — toxunma hədəfləri ən azı 40×40 px (Tələb 12.7)
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.duyme {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--bos-2);
    min-width: var(--toxunma); min-height: var(--toxunma); padding: 0.5rem 1.15rem;
    font-family: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1.3; text-align: center;
    text-decoration: none; white-space: nowrap; background: var(--seth); color: var(--renk-neytral-700);
    border: 1px solid var(--kenar-guclu); border-radius: var(--radius-sm); box-shadow: var(--kolge-sm);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--kecid), border-color var(--kecid),
        color var(--kecid), box-shadow var(--kecid), transform var(--kecid-tez);
}

.duyme:hover {
    background: var(--renk-neytral-050);
    border-color: var(--renk-neytral-400);
    color: var(--renk-neytral-900);
}

.duyme:active { transform: translateY(1px); box-shadow: none; }
.duyme:focus-visible { outline: 2px solid var(--renk-esas); outline-offset: 2px; }

/* — Əsas (solid) — */
.duyme--esas {
    background: linear-gradient(180deg, var(--renk-esas-600), var(--renk-esas));
    border-color: var(--renk-esas-700); color: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

.duyme--esas:hover {
    background: linear-gradient(180deg, var(--renk-esas), var(--renk-esas-700));
    border-color: var(--renk-esas-800); color: #fff; box-shadow: var(--kolge-md);
}

.duyme--esas:active { background: var(--renk-esas-800); }

/* — İkinci dərəcəli (outline) — */
.duyme--sade { background: var(--renk-ag); color: var(--renk-esas); border-color: var(--renk-esas-200); }

.duyme--sade:hover {
    background: var(--renk-esas-050);
    border-color: var(--renk-esas-300);
    color: var(--renk-esas-700);
}

.duyme--sade:active { background: var(--renk-esas-100); }

/* — Xəbərdarlıq — */
.duyme--xeberdarliq {
    background: linear-gradient(180deg, #d97706, var(--renk-xeberdarliq));
    border-color: var(--renk-xeberdarliq-700);
    color: #fff;
}

.duyme--xeberdarliq:hover {
    background: linear-gradient(180deg, var(--renk-xeberdarliq), var(--renk-xeberdarliq-700));
    border-color: var(--renk-xeberdarliq-700);
    color: #fff;
}

/* — Təhlükə / xəta (eyni görünüş, iki ad) — */
.duyme--tehlike,
.duyme--xeta {
    background: linear-gradient(180deg, #dc2626, var(--renk-xeta));
    border-color: var(--renk-xeta-700);
    color: #fff;
}

.duyme--tehlike:hover,
.duyme--xeta:hover {
    background: linear-gradient(180deg, var(--renk-xeta), var(--renk-xeta-700));
    border-color: var(--renk-xeta-700);
    color: #fff;
}

.duyme--tehlike:active,
.duyme--xeta:active { background: var(--renk-xeta-700); }

/* — Kiçik ölçü (toxunma hədəfi hələ də 40px yüksəklikdə saxlanır) — */
.duyme--kicik { min-height: var(--toxunma); padding: 0.3rem 0.75rem; font-size: 0.8125rem; }

/* — Söndürülmüş — */
.duyme:disabled,
.duyme[aria-disabled="true"],
.duyme.deaktiv {
    opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; filter: saturate(0.7);
}

/* Sinifsiz düymələr də oxunaqlı olsun */
button:not([class]),
input[type="submit"]:not([class]) {
    min-height: var(--toxunma); padding: 0.5rem 1rem; font-family: inherit; font-size: 0.9rem;
    font-weight: 600; color: var(--renk-neytral-700); background: var(--seth);
    border: 1px solid var(--kenar-guclu); border-radius: var(--radius-sm); cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   09. MESAJ / BİLDİRİŞ
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.mesaj {
    position: relative; display: flex; align-items: flex-start; gap: var(--bos-2);
    margin: 0 0 var(--bos-4); padding: 0.75rem 1rem 0.75rem 0.9rem; font-size: 0.9rem; line-height: 1.5;
    border: 1px solid var(--kenar); border-left: 4px solid var(--renk-neytral-400);
    border-radius: var(--radius-sm); background: var(--renk-neytral-050);
    color: var(--renk-neytral-700); box-shadow: var(--kolge-sm);
    animation: tms-sonme-ile-gorun var(--kecid-yavas) both;
}

.mesaj::before { flex: 0 0 auto; font-size: 1rem; line-height: 1.35; }

.mesaj--xeta {
    background: var(--renk-xeta-050); border-color: var(--renk-xeta-200);
    border-left-color: var(--renk-xeta); color: var(--renk-xeta-700);
}

.mesaj--xeta::before { content: "⛔"; }

.mesaj--melumat {
    background: var(--renk-melumat-050); border-color: var(--renk-melumat-200);
    border-left-color: var(--renk-melumat); color: var(--renk-esas-700);
}

.mesaj--melumat::before { content: "ℹ"; }

.mesaj--ugur {
    background: var(--renk-ugur-050); border-color: var(--renk-ugur-200);
    border-left-color: var(--renk-ugur); color: var(--renk-ugur-700);
}

.mesaj--ugur::before { content: "✔"; }

.mesaj--xeberdarliq {
    background: var(--renk-xeberdarliq-050); border-color: var(--renk-xeberdarliq-200);
    border-left-color: var(--renk-xeberdarliq); color: var(--renk-xeberdarliq-700);
}

.mesaj--xeberdarliq::before { content: "⚠"; }
.mesaj a { color: inherit; font-weight: 600; border-bottom-color: currentColor; }

/* Redaktə / kontekst məlumat lövhəsi */
.redakte-melumat {
    display: flex; flex-wrap: wrap; gap: var(--bos-2) var(--bos-5); margin: 0 0 var(--bos-4);
    padding: 0.85rem 1rem; font-size: 0.9rem; color: var(--renk-esas-700);
    background: var(--renk-melumat-050); border: 1px solid var(--renk-melumat-200);
    border-radius: var(--radius-md);
}

.redakte-melumat strong { color: var(--renk-esas-900); }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   10. CƏDVƏLLƏR
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.cedvel-konteyner {
    width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch; border: 1px solid var(--kenar); border-radius: var(--radius-md);
    background: var(--seth); box-shadow: var(--kolge-sm);
}

.cedvel,
.sebet-cedvel,
.gunluk-cedvel {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem;
    background: var(--seth);
}

.cedvel { min-width: 560px; /* kiçik ekranda kart rejiminə keçir, aşağıya bax */ }

.cedvel thead th,
.sebet-cedvel thead th {
    position: sticky; top: 0; z-index: 2; padding: 0.7rem 0.85rem; font-size: 0.75rem; font-weight: 700;
    text-align: left; text-transform: uppercase; letter-spacing: 0.05em; color: var(--renk-neytral-600);
    background: linear-gradient(180deg, var(--renk-neytral-100), var(--renk-neytral-050));
    border-bottom: 1px solid var(--kenar-guclu); white-space: nowrap;
}

.cedvel tbody td,
.sebet-cedvel tbody td {
    padding: 0.65rem 0.85rem; text-align: left; vertical-align: middle;
    border-bottom: 1px solid var(--renk-neytral-150); color: var(--renk-neytral-800);
}

.cedvel tbody tr:last-child td,
.sebet-cedvel tbody tr:last-child td { border-bottom: none; }

/* Zebra zolaqlama */
.cedvel tbody tr:nth-child(even),
.gunluk-cedvel tbody tr:nth-child(even) { background: var(--renk-neytral-025); }

/* Sətir üzərinə gəlmə */
.cedvel tbody tr:hover,
.sebet-cedvel tbody tr:hover { background: var(--renk-esas-050); }
.cedvel tbody tr:focus-within { background: var(--renk-esas-050); box-shadow: inset 3px 0 0 0 var(--renk-esas); }

.cedvel tfoot td,
.cedvel tfoot th {
    padding: 0.7rem 0.85rem; font-weight: 700; background: var(--renk-neytral-050);
    border-top: 2px solid var(--kenar-guclu);
}

.cedvel caption {
    padding: 0 0 var(--bos-2); font-size: 0.85rem; color: var(--metn-solgun); text-align: left;
    caption-side: top;
}

/* Rəqəm / məbləğ sütunları sağa yığılır */
.cedvel td.reqem,
.cedvel th.reqem,
.cedvel td.metn-sag,
.cedvel th.metn-sag,
.setir-cemi,
.gunluk-cedvel tbody td:nth-child(5),
.gunluk-cedvel tbody td:nth-child(6),
.gunluk-cedvel tbody td:nth-child(7),
.gunluk-cedvel thead th:nth-child(5),
.gunluk-cedvel thead th:nth-child(6),
.gunluk-cedvel thead th:nth-child(7) { text-align: right; }
/* Qeyd: günlük cədvəldə Miqdar/Vahid qiymət/Cəm sütunları 5–7-ci mövqedədir
   (əvvəldəki Qeyd № və Sənəd sütunlarından sonra) — satis.php ilə eyni sıra. */

/* Kiçik variant */
.cedvel--kicik { min-width: 0; font-size: 0.8125rem; }
.cedvel--kicik thead th { padding: 0.45rem 0.6rem; font-size: 0.7rem; }
.cedvel--kicik tbody td { padding: 0.4rem 0.6rem; }

/* Cədvəl içindəki idarəedicilər */
.cedvel input[type="text"],
.cedvel input[type="number"],
.cedvel input[type="date"],
.cedvel select,
.sebet-cedvel input[type="text"],
.sebet-cedvel input[type="number"] {
    min-height: var(--toxunma); padding: 0.4rem 0.55rem; font-family: inherit; font-size: 0.875rem;
    color: var(--metn); background: var(--renk-ag); border: 1px solid var(--kenar-guclu);
    border-radius: var(--radius-sm);
}

.cedvel input:focus,
.cedvel select:focus,
.sebet-cedvel input:focus {
    outline: 2px solid var(--renk-esas);
    outline-offset: 1px;
    border-color: var(--renk-esas);
}

.cedvel .duyme,
.cedvel .setir-forma { vertical-align: middle; }

/* Vəziyyət sətirləri — mövcud sinif adları (Tələb 7.2) */
.cedvel tr.silinme-isareli td { text-decoration: line-through; color: var(--renk-neytral-400); }
.cedvel tr.silinme-isareli { background: var(--renk-xeberdarliq-050); }
.cedvel tr.silinmis td { text-decoration: line-through; color: var(--renk-neytral-400); font-style: italic; }
.cedvel tr.stok-xeberdarliq td { color: var(--renk-xeta); background: var(--renk-xeta-050); }

/* Əməliyyat sütunu */
.emeliyyat-sutunu { white-space: nowrap; }
.emeliyyat-sutunu > * { vertical-align: middle; }
.emeliyyat-sutunu .setir-forma + .setir-forma { margin-left: var(--bos-1); }
.emeliyyat-sutunu .duyme + .duyme,
.emeliyyat-sutunu .duyme + .setir-forma { margin-left: var(--bos-1); }

/* Silinmə işarəsi düymələri — "Əməliyyat" xanasında "Qaytar" keçidi ilə yan-yana durur
   (Tələb 7.1). Mətn uzun olduğu üçün ("İşarəni geri al") xana lazım gələndə sətrə bölünür. */
.emeliyyat-sutunu .silinme-isarele,
.emeliyyat-sutunu .isare-geri-al { white-space: nowrap; }

.gunluk-cedvel .emeliyyat-sutunu { white-space: normal; }

.gunluk-cedvel .emeliyyat-sutunu .duyme { margin-bottom: 0.15rem; }

/* Qeyd nömrəsi sütunu — satıcı bu nömrəni qaytarma formasına köçürür,
   ona görə bir toxunuşla tam seçilir (Tələb 8.1 istifadə rahatlığı) */
.qeyd-nomresi {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
    -webkit-user-select: all; user-select: all; white-space: nowrap;
    color: var(--metn);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   11. MOBİL CƏDVƏL → KART (data-etiket ilə) (Tələb 12.7)
   ══════════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .cedvel-konteyner {
        overflow-x: visible; border: 0; background: transparent; box-shadow: none; border-radius: 0;
    }

    .cedvel { min-width: 0; background: transparent; }
    .cedvel thead { display: none; }

    .cedvel tbody,
    .cedvel tfoot { display: block; }

    .cedvel tbody tr {
        display: block; margin: 0 0 var(--bos-3); padding: var(--bos-3) var(--bos-4);
        background: var(--seth); border: 1px solid var(--kenar); border-radius: var(--radius-md);
        box-shadow: var(--kolge-sm);
    }

    .cedvel tbody tr:nth-child(even) { background: var(--seth); }
    .cedvel tbody tr:hover { background: var(--seth); }

    .cedvel tbody td {
        display: flex; justify-content: space-between; align-items: center; gap: var(--bos-3);
        padding: 0.4rem 0; text-align: right; border-bottom: 1px dashed var(--renk-neytral-150);
    }

    .cedvel tbody td:last-child { border-bottom: none; padding-bottom: 0; }

    .cedvel tbody td[data-etiket]::before {
        content: attr(data-etiket); flex: 0 0 auto; margin-right: var(--bos-3); font-size: 0.72rem;
        font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--metn-solgun);
        text-align: left;
    }

    /* Etiketi olmayan sütunlar (JS ilə qurulan səbət sətirləri) tam eni tutur */
    .cedvel tbody td:not([data-etiket]) { justify-content: flex-start; text-align: left; }

    .cedvel tbody td.emeliyyat-sutunu {
        flex-wrap: wrap; justify-content: flex-start; white-space: normal; padding-top: var(--bos-2);
    }

    /* Kart rejimində aralığı xananın `gap` dəyəri verir — əlavə kənar boşluq ikiqatlanmasın */
    .cedvel tbody td.emeliyyat-sutunu .duyme + .duyme,
    .cedvel tbody td.emeliyyat-sutunu .duyme + .setir-forma { margin-left: 0; }

    .gunluk-cedvel .emeliyyat-sutunu .duyme { margin-bottom: 0; }

    /* Silinmə işarəli sətir kart formasında da xətli qalır (Tələb 7.2) */
    .cedvel tr.silinme-isareli td,
    .cedvel tr.silinmis td,
    .cedvel tr.xetli td,
    .cedvel tr.setir--xetli td { text-decoration: line-through; color: var(--renk-neytral-400); }

    .cedvel tfoot tr {
        display: block; padding: var(--bos-3) var(--bos-4); background: var(--renk-neytral-050);
        border: 1px solid var(--kenar); border-radius: var(--radius-md);
    }

    .cedvel tfoot td { display: flex; justify-content: space-between; border: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   12. SƏBƏT, ÖDƏNİŞ VƏ GÜNLÜK BÖLMƏLƏRİ
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.sebet-cedvel { margin: 0 0 var(--bos-4); }

/* JS ilə yaradılan səbət sətir elementləri */
.sebet-miqdar {
    width: 96px; min-height: var(--toxunma); padding: 0.4rem 0.55rem; font-family: inherit;
    font-size: 0.9rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--metn);
    background: var(--renk-ag); border: 1px solid var(--kenar-guclu); border-radius: var(--radius-sm);
    transition: border-color var(--kecid), box-shadow var(--kecid);
}

.sebet-miqdar:focus { outline: 2px solid var(--renk-esas); outline-offset: 1px; border-color: var(--renk-esas); }

.miqdar-xeta {
    display: block; margin-top: var(--bos-1); font-size: 0.75rem; font-weight: 600;
    color: var(--renk-xeta);
}

.setir-cemi { font-weight: 600; color: var(--renk-neytral-900); }

.sebet-sil {
    display: inline-flex; align-items: center; justify-content: center; width: var(--toxunma);
    height: var(--toxunma); padding: 0; font-size: 1rem; line-height: 1; color: var(--renk-xeta);
    background: var(--renk-xeta-050); border: 1px solid var(--renk-xeta-200);
    border-radius: var(--radius-sm); cursor: pointer;
    transition: background-color var(--kecid), color var(--kecid), border-color var(--kecid);
}

.sebet-sil:hover { background: var(--renk-xeta); border-color: var(--renk-xeta); color: #fff; }
.sebet-sil:focus-visible { outline: 2px solid var(--renk-xeta); outline-offset: 2px; }

/* Səbətin altı: cəm, ödəniş, qalıq */
.sebet-alt {
    display: flex; flex-direction: column; gap: var(--bos-2); margin-top: var(--bos-4);
    padding: var(--bos-4); background: linear-gradient(180deg, var(--renk-neytral-050), var(--renk-ag));
    border: 1px solid var(--kenar); border-radius: var(--radius-md);
}

.cem-satir {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--bos-3);
    padding: var(--bos-2) 0; font-size: 1.15rem; font-weight: 700; color: var(--renk-neytral-900);
    border-top: 1px solid var(--kenar);
}

.cem-satir:first-child { border-top: 0; padding-top: 0; }

.odenis-sahesi,
.odenis-bolmesi {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--bos-3); margin: var(--bos-2) 0;
    padding: var(--bos-3) var(--bos-4); background: var(--renk-ag); border: 1px solid var(--kenar);
    border-radius: var(--radius-md);
}

.odenis-sahesi label,
.odenis-bolmesi label { font-size: 0.85rem; font-weight: 600; color: var(--renk-neytral-700); }

.odenis-sahesi input {
    flex: 0 1 180px; min-width: 120px; min-height: var(--toxunma); padding: 0.5rem 0.7rem;
    font-family: inherit; font-size: 1.05rem; font-weight: 600; text-align: right;
    font-variant-numeric: tabular-nums; background: var(--renk-ag);
    border: 1px solid var(--kenar-guclu); border-radius: var(--radius-sm);
}

.odenis-sahesi input:focus {
    outline: 2px solid var(--renk-esas); outline-offset: 2px; border-color: var(--renk-esas);
    box-shadow: var(--kolge-fokus);
}

.odenis-bolmesi .sahe { flex: 1 1 160px; min-width: 130px; }
.odenis-bolmesi .cem-gosterici { font-size: 1.2rem; font-weight: 700; color: var(--renk-ugur-700); }
.odenis-bolmesi .catisan-mesaj { font-size: 0.9rem; font-weight: 600; color: var(--renk-xeta); }

.qaliq-satir {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--bos-3);
    padding: var(--bos-2) var(--bos-3); font-size: 1.15rem; font-weight: 700;
    color: var(--renk-ugur-700); background: var(--renk-ugur-050);
    border: 1px solid var(--renk-ugur-200); border-radius: var(--radius-sm);
}

.catismayan-satir {
    font-size: 0.95rem; font-weight: 600; color: var(--renk-xeta); min-height: 1.2em;
}

.catismayan-satir span:not(:empty) {
    display: inline-block; padding: 0.35rem 0.6rem; background: var(--renk-xeta-050);
    border: 1px solid var(--renk-xeta-200); border-radius: var(--radius-sm);
}

.sebet-alt .duyme--esas {
    align-self: flex-start; min-height: 46px; padding: 0.6rem 1.6rem; font-size: 1rem;
}

/* Günün satışları */
.gunluk-cem {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
    gap: var(--bos-3); margin: 0 0 var(--bos-4); padding: var(--bos-3) var(--bos-4); font-size: 1.05rem;
    font-weight: 600; color: var(--renk-esas-900);
    background: linear-gradient(135deg, var(--renk-esas-050), var(--renk-ag));
    border: 1px solid var(--renk-esas-100); border-radius: var(--radius-md);
}

.cem-deyer {
    font-size: 1.25rem; font-weight: 800; color: var(--renk-ugur-700); letter-spacing: -0.01em;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   13. MƏHSUL ŞƏBƏKƏSİ VƏ KARTLARI
   Şəkillər HEÇ VAXT kəsilmir: object-fit: contain + açıq fon + daxili boşluq.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* — Məhsul axtarışı: sahə `.sahe` stillərini miras alır, burada yalnız yerləşmə — */

.mehsul-axtaris { max-width: 420px; margin: 0 0 var(--bos-4); }

.mehsul-axtaris input[type="search"] { font-size: 1rem; }

.mehsul-axtaris input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.mehsul-axtaris > .izah { min-height: 1.25rem; margin: var(--bos-1) 0 0; }

.mehsul-sebekesi,
.mehsul-sebeke {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--bos-4);
    margin: 0; padding: 0; list-style: none;
}

.mehsul-karti {
    display: flex; flex-direction: column; min-height: 200px; overflow: hidden; background: var(--seth);
    border: 1px solid var(--kenar); border-radius: var(--radius-lg); box-shadow: var(--kolge-sm);
    cursor: pointer;
    transition: transform var(--kecid), box-shadow var(--kecid), border-color var(--kecid);
}

.mehsul-karti:hover,
.mehsul-karti:focus-within {
    transform: translateY(-3px);
    border-color: var(--renk-esas-200);
    box-shadow: var(--kolge-lg);
}

.mehsul-karti:active { transform: translateY(-1px); }

.mehsul-karti img,
.mehsul-sekil {
    width: 100%; aspect-ratio: 1 / 1;
    object-fit: contain; /* şəkil kəsilmir — istifadəçi tələbi */
    object-position: center; padding: 10px;
    background: linear-gradient(180deg, var(--renk-neytral-050), var(--renk-neytral-100));
    border-bottom: 1px solid var(--kenar);
}

.mehsul-melumat,
.mehsul-karti-melumat {
    display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-between;
    gap: var(--bos-1); padding: var(--bos-3);
}

.mehsul-adi,
.mehsul-karti-ad {
    /* ad iki sətirdən sonra kəsilir */
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.35;
    color: var(--renk-neytral-800);
}

.mehsul-qiymeti,
.mehsul-karti-qiymet {
    display: block; margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--renk-esas);
    letter-spacing: -0.01em;
}

.mehsul-karti--arxiv { position: relative; opacity: 0.6; filter: grayscale(0.65); }

.mehsul-karti--arxiv::after {
    content: "Arxiv"; position: absolute; top: var(--bos-2); left: var(--bos-2);
    padding: 0.15rem 0.5rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--renk-neytral-700); background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--kenar-guclu); border-radius: var(--radius-pill);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   14. NİŞANLAR / VƏZİYYƏT PİLLƏRİ
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.nisan,
.nisani,
.veziyyet-nisani,
.nisan-menfi,
.nisan-kenar,
.nisan-avto,
.nisan-teyinat,
.nisan-xeta {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3em;
    padding: 0.2rem 0.6rem; font-size: 0.72rem; font-weight: 700; line-height: 1.6;
    letter-spacing: 0.03em; white-space: nowrap; border-radius: var(--radius-pill);
    border: 1px solid transparent; background: var(--renk-neytral-100); color: var(--renk-neytral-700);
    vertical-align: middle;
}

.nisan { text-transform: uppercase; }

/* — Müsbət / aktiv — */
.nisan--aktiv,
.nisani--ugurlu,
.veziyyet--aktiv,
.nisan-teyinat { background: var(--renk-ugur-050); border-color: var(--renk-ugur-200); color: var(--renk-ugur-700); }

/* — Neqativ / deaktiv / xəta — */
.nisan--deaktiv,
.nisani--xeta,
.nisan-menfi,
.nisan-xeta { background: var(--renk-xeta-050); border-color: var(--renk-xeta-200); color: var(--renk-xeta-700); }

/* — Xəbərdarlıq / işarələnmiş / silinmə — */
.nisan--isareli,
.veziyyet--silinme,
.nisan-kenar {
    background: var(--renk-xeberdarliq-050);
    border-color: var(--renk-xeberdarliq-200);
    color: var(--renk-xeberdarliq-700);
}

.veziyyet--silinme { text-decoration: none; }

/* — Təsdiqlənmiş silinmə (arxiv qeydi) və naməlum vəziyyət (Tələb 7.8) —
   Bu nişanlar normal halda görünmür: `silinmis` qeydlər satış siyahılarından süzgəclənir.
   Lakin vəziyyət göstərişi tam (exhaustive) olduğu üçün nişanın üslubu da mövcuddur. */
.veziyyet--silinmis {
    background: var(--renk-xeta-050);
    border-color: var(--renk-xeta-200);
    color: var(--renk-xeta-700);
    text-decoration: none;
}

.veziyyet--namelum {
    background: var(--renk-neytral-100);
    border-color: var(--kenar-guclu);
    color: var(--renk-neytral-700);
    text-decoration: none;
}

/* — Xüsusi hallar — */
.nisan--qrafikden-kenar { background: #fdf2f8; border-color: #fbcfe8; color: #9d174d; }

.nisan--avtomatik,
.nisan-avto { background: var(--renk-bene-050); border-color: var(--renk-bene-200); color: var(--renk-bene); }

/* Canlı yenilənmə göstəricisi (günlük siyahı AJAX ilə yenilənəndə) */
.canli-nisan {
    display: inline-flex; align-items: center; gap: 0.35em;
    padding: 0.1rem 0.55rem; font-size: 0.72rem; font-weight: 600;
    color: var(--renk-ugur-700); background: var(--renk-ugur-050);
    border: 1px solid var(--renk-ugur-200); border-radius: var(--radius-pill);
    vertical-align: middle;
}

.canli-nisan::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; animation: tms-nebz 1.8s ease-in-out infinite;
}

.canli-nisan.metn-solgun {
    font-size: 0.72rem; font-weight: 600; color: var(--metn-solgun);
    background: var(--renk-neytral-100); border-color: var(--kenar);
}

/* İkon nişanları (tək simvol) dairəvi görünür */
.nisan-menfi,
.nisan-xeta,
.nisan-kenar,
.nisan-avto { min-width: 1.6rem; padding: 0.15rem 0.4rem; font-size: 0.8rem; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   15. SƏTİR VƏZİYYƏTLƏRİ VƏ XƏTLİ ÜSLUB (Tələb 7.2)
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.xetli,
.setir--xetli td,
.deger--xetli,
tr.xetli td { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--renk-neytral-400); }

.xetli,
.setir--xetli { background: var(--renk-xeberdarliq-050); }

/* Xətli sətirdə nişan oxunaqlı qalır */
.xetli .veziyyet-nisani,
.setir--xetli .veziyyet-nisani,
.xetli .veziyyet--silinmis,
.setir--xetli .veziyyet--silinmis,
.xetli .nisan,
.setir--xetli .nisan { text-decoration: none; }
.setir--aktiv { background: var(--seth); }
.setir--deaktiv td { color: var(--renk-neytral-400); }

.setir--solgun,
tr.setir--solgun td { opacity: 0.62; }
.setir--menfi td { color: var(--renk-xeta); background: var(--renk-xeta-050); }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   16. SƏHİFƏLƏMƏ
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.sehifeleme,
.sehife-kecidleri {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--bos-2); margin-top: var(--bos-4);
    padding-top: var(--bos-3); border-top: 1px solid var(--kenar);
}

.sehifeleme .duyme,
.sehife-kecidleri .duyme { min-width: var(--toxunma); min-height: var(--toxunma); }

.sehifeleme-melumat,
.sehifeleme-gosteris,
.sehife-gosterisi,
.sehife-gosteris {
    padding: 0 var(--bos-2); font-size: 0.8125rem; font-weight: 600; color: var(--renk-neytral-600);
    font-variant-numeric: tabular-nums;
}

.sehifeleme-melumat { margin-left: auto; font-weight: 500; color: var(--metn-solgun); }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   17. NÖVBƏ TƏQVİMİ
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.teqvim-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0 0 var(--bos-4);
    width: 100%; max-width: 100%;
}

.teqvim-hefte-gunu {
    padding: 0.4rem; font-size: 0.7rem; font-weight: 700; text-align: center;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--renk-neytral-600);
    overflow-wrap: anywhere;
}

.teqvim-hefte-gunu abbr { text-decoration: none; border: 0; cursor: help; }

.teqvim-gun {
    display: block; min-height: 84px; min-width: 0; padding: 0.4rem 0.45rem; font-size: 0.78rem;
    text-align: left; overflow-wrap: anywhere;
    background: var(--seth); border: 1px solid var(--kenar); border-radius: var(--radius-sm);
    transition: border-color var(--kecid), box-shadow var(--kecid);
}

.teqvim-gun:hover { border-color: var(--renk-esas-200); box-shadow: var(--kolge-sm); }
.teqvim-gun--teyin { background: var(--renk-esas-050); border-color: var(--renk-esas-200); }

/* Cari gün — qalın çərçivə və nömrənin vurğulanması */
.teqvim-gun--bugun {
    border-color: var(--renk-esas-500); box-shadow: 0 0 0 2px var(--renk-esas-100);
}

.teqvim-gun--bugun .teqvim-gun-nomre { color: var(--renk-esas); }

.teqvim-gun--bos {
    display: block; min-height: 84px; opacity: 0.7;
    background: repeating-linear-gradient(45deg, var(--renk-neytral-050),
        var(--renk-neytral-050) 6px, var(--renk-neytral-100) 6px, var(--renk-neytral-100) 12px);
    border: 1px solid var(--kenar); border-radius: var(--radius-sm);
}

.teqvim-gun-nomre {
    display: block; margin-bottom: var(--bos-1); font-size: 0.8rem; font-weight: 700;
    color: var(--renk-neytral-700); font-variant-numeric: tabular-nums;
}

.teqvim-teyinat {
    display: block; margin-bottom: 0.2rem; font-size: 0.72rem; line-height: 1.35;
    word-break: break-word;
}

.teqvim-qeyd {
    display: flex; flex-wrap: wrap; gap: 0.2rem; margin-bottom: 0.2rem;
}

.teqvim-cem {
    display: block; font-size: 0.72rem; font-weight: 700; color: var(--renk-ugur-700);
}

/* Həftə günü adı yalnız bir sütunlu mobil siyahıda görünür */
.teqvim-gun-hefte { display: none; }

/* — Dar ekran (≤ 600px): 7 sütun oxunmaz olur → bir sütunlu gün siyahısı — */
@media (max-width: 600px) {
    .teqvim-grid { grid-template-columns: 1fr; gap: var(--bos-2); }

    /* Başlıq sətri və boş xanalar bir sütunlu siyahıda mənasızdır */
    .teqvim-hefte-gunu,
    .teqvim-gun--bos { display: none; }

    .teqvim-gun { min-height: 0; padding: var(--bos-3); font-size: 0.85rem; }

    .teqvim-gun-nomre {
        display: flex; align-items: baseline; gap: var(--bos-2);
        font-size: 0.95rem;
    }

    .teqvim-gun-hefte {
        display: inline; font-size: 0.75rem; font-weight: 500; color: var(--metn-solgun);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   18. AUDİT, ƏMƏLİYYAT PANELLƏRİ, BOŞ VƏZİYYƏT
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.audit-detallar {
    margin-top: var(--bos-2); padding: var(--bos-3); font-size: 0.8125rem;
    background: var(--renk-neytral-050); border: 1px solid var(--kenar);
    border-left: 3px solid var(--renk-esas-300); border-radius: var(--radius-sm); overflow-x: auto;
}

.audit-detallar .cedvel { background: transparent; }

.emeliyyat-paneli {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--bos-3); margin-top: var(--bos-4);
    padding-top: var(--bos-4); border-top: 1px solid var(--kenar);
}

.bos-mesaj,
.bos-netice {
    margin: 0; padding: var(--bos-8) var(--bos-4); font-size: 0.95rem; text-align: center;
    color: var(--metn-solgun); background: var(--renk-neytral-050);
    border: 1px dashed var(--kenar-guclu); border-radius: var(--radius-md);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   19. TOPLU ƏMƏLİYYAT VƏ İCAZƏ DƏSTİ
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.toplu-emeliyyat {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--bos-3); margin: 0 0 var(--bos-4);
    padding: var(--bos-3) var(--bos-4); background: var(--renk-xeberdarliq-050);
    border: 1px solid var(--renk-xeberdarliq-200); border-radius: var(--radius-md);
}

.toplu-emeliyyat label {
    display: inline-flex; align-items: center; gap: var(--bos-2); min-height: var(--toxunma);
    font-size: 0.875rem; font-weight: 600; color: var(--renk-xeberdarliq-700); cursor: pointer;
}

.toplu-emeliyyat input[type="checkbox"] {
    width: 20px; height: 20px; accent-color: var(--renk-xeberdarliq); cursor: pointer;
}

.qeyd-sec {
    width: 20px; height: 20px; accent-color: var(--renk-esas); cursor: pointer;
}

.icaze-desti {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--bos-1) var(--bos-4); padding: var(--bos-3) var(--bos-4);
    background: var(--renk-neytral-050); border: 1px solid var(--kenar);
    border-radius: var(--radius-md);
}

.icaze-desti legend { color: var(--renk-neytral-700); }

.icaze-desti label {
    display: flex; align-items: center; gap: var(--bos-2); min-height: var(--toxunma);
    padding: 0 0.25rem; font-size: 0.875rem; color: var(--renk-neytral-700);
    border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--kecid);
}

.icaze-desti label:hover { background: var(--renk-esas-050); }

.icaze-desti input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--renk-esas); cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   20. GİRİŞ / ÇIXIŞ SƏHİFƏLƏRİ
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.giris-sehifesi,
.cixis-sehifesi {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: var(--bos-4);
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(59, 91, 219, 0.22), transparent 60%),
        radial-gradient(900px 500px at 100% 100%, rgba(30, 64, 175, 0.20), transparent 55%),
        linear-gradient(160deg, var(--renk-esas-900) 0%, #1f2a56 45%, #101a35 100%);
}

.giris-qutu,
.cixis-qutu {
    width: 100%; max-width: 420px; margin: 0 auto; padding: var(--bos-8) var(--bos-6);
    background: var(--seth); border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px -20px rgba(8, 15, 40, 0.55), var(--kolge-md);
    animation: tms-yuksel var(--kecid-yavas) both;
}

.giris-qutu h1,
.cixis-qutu h1 { margin: 0 0 var(--bos-2); font-size: 1.35rem; text-align: center; }

.giris-qutu h1::before,
.cixis-qutu h1::before {
    content: "TMS"; display: block; margin: 0 auto var(--bos-4); width: fit-content;
    padding: 0.3rem 0.8rem; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.18em; color: #fff;
    background: linear-gradient(135deg, var(--renk-esas-700), var(--renk-esas-500));
    border-radius: var(--radius-sm); box-shadow: var(--kolge-sm);
}

.giris-izah {
    margin: 0 0 var(--bos-6); font-size: 0.875rem; text-align: center; color: var(--metn-solgun);
}

.giris-forma .duyme,
.cixis-forma .duyme { width: 100%; min-height: 46px; font-size: 0.95rem; }
.cixis-qutu { text-align: center; }
.cixis-forma { align-items: stretch; margin-top: var(--bos-4); }
.cixis-qutu p { color: var(--metn-solgun); font-size: 0.9rem; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   21. YARDIMÇI SİNİFLƏR
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.gorunmez {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.metn-merkez { text-align: center; }
.metn-sag { text-align: right; }
.metn-sol { text-align: left; }
.metn-qalin { font-weight: 700; }
.metn-solgun { color: var(--metn-solgun); font-size: 0.85rem; font-weight: 500; }
.metn-ugur { color: var(--renk-ugur-700); font-weight: 600; }
.metn-xeta { color: var(--renk-xeta); font-weight: 600; }
.metn-xeberdarliq { color: var(--renk-xeberdarliq-700); font-weight: 600; }
.boslug-ust { margin-top: var(--bos-4); }
.boslug-alt { margin-bottom: var(--bos-4); }
.boslug-yox { margin: 0; }
.tam-en { width: 100%; }
.gizli { display: none !important; }

/* İnventar düzəlişi: seçilmiş məhsulun cari qalıq sətri (seçim siyahısının altında) */
.cari-qaliq:not(:empty) {
    color: var(--renk-neytral-700); font-weight: 600;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* Əməliyyat xanasında yan-yana duran mətn keçidləri bir-birinə yapışmasın */
.emeliyyat-sutunu a + a { margin-left: var(--bos-2); }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   22. ANİMASİYALAR
   ══════════════════════════════════════════════════════════════════════════════════════════ */

@keyframes tms-sonme-ile-gorun {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@keyframes tms-nebz {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@keyframes tms-yuksel {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important; scroll-behavior: auto !important;
    }

    .mehsul-karti:hover,
    .mehsul-karti:focus-within,
    .duyme:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   23. RESPONSİV DÜZÜM (360px → 1920px, üfüqi sürüşdürmə olmadan) (Tələb 12.7)
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* — Çox kiçik telefonlar (≤ 480px) — */
@media (max-width: 480px) {
    html { font-size: 15.5px; }

    .admin-govde,
    .isci-govde,
    .satis-govde { padding: var(--bos-3) var(--bos-3) var(--bos-8); }
    .naviqasiya { gap: 2px; padding: 0.4rem 0.5rem; }
    .naviqasiya .naviqasiya-baslik { margin-right: var(--bos-2); font-size: 0.95rem; }
    .naviqasiya a { padding: 0.4rem 0.55rem; font-size: 0.8rem; }
    .naviqasiya .naviqasiya-istifadeci { order: 99; margin-left: 0; font-size: 0.75rem; }
    .naviqasiya .naviqasiya-cixis { order: 98; margin-left: auto; }

    .bolme,
    .mehsul-bolmesi,
    .sebet-bolmesi,
    .gunluk-bolmesi,
    .qaytarma-forma-bolmesi,
    .qaytarma-siyahi-bolmesi { padding: var(--bos-4) var(--bos-3); border-radius: var(--radius-md); }

    .mehsul-sebekesi,
    .mehsul-sebeke { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--bos-2); }
    .mehsul-karti { min-height: 0; }

    .suzgec,
    .suzgec-forma,
    .odenis-sahesi,
    .odenis-bolmesi { flex-direction: column; align-items: stretch; }
    .odenis-sahesi input { flex: 1 1 auto; width: 100%; }

    .suzgec .duyme,
    .suzgec-forma .duyme { width: 100%; }
    .sebet-alt .duyme--esas { align-self: stretch; width: 100%; }

    .emeliyyat-paneli .duyme,
    .toplu-emeliyyat .duyme { flex: 1 1 140px; }

    .giris-qutu,
    .cixis-qutu { padding: var(--bos-6) var(--bos-4); }

    /* Bir sütunlu təqvim siyahısında xanalar sıxlaşır */
    .teqvim-gun { padding: var(--bos-2) var(--bos-3); }

    .cem-satir,
    .qaliq-satir { font-size: 1rem; }
}

/* — Telefon/planşet aralığı (481–768px) — */
@media (min-width: 481px) and (max-width: 768px) {
    .mehsul-sebekesi,
    .mehsul-sebeke { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--bos-3); }

    .admin-govde,
    .isci-govde,
    .satis-govde { padding: var(--bos-4) var(--bos-4) var(--bos-8); }
}

/* — Planşet və yuxarı (≥ 769px) — */
@media (min-width: 769px) {
    .mehsul-sebekesi,
    .mehsul-sebeke { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }

    .admin-govde,
    .isci-govde,
    .satis-govde { padding: var(--bos-6) var(--bos-5) var(--bos-10); }

    .sebet-alt {
        flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
        gap: var(--bos-4);
    }

    .sebet-alt > * { flex: 1 1 auto; }
    .sebet-alt .cem-satir { flex: 1 1 100%; border-top: 0; padding-top: 0; }
    .sebet-alt .odenis-sahesi { flex: 1 1 260px; margin: 0; }
    .sebet-alt .qaliq-satir { flex: 1 1 220px; }
    .sebet-alt .duyme--esas { flex: 0 0 auto; }
}

/* — Masaüstü (≥ 1024px) — */
@media (min-width: 1024px) {
    .mehsul-sebekesi,
    .mehsul-sebeke { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
}

/* — Geniş ekranlar (≥ 1440px) — */
@media (min-width: 1440px) {
    :root { --nizam-en: 1400px; }

    .mehsul-sebekesi,
    .mehsul-sebeke { grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); }
}

/* — Çox geniş ekranlar (≥ 1800px) — */
@media (min-width: 1800px) {
    :root { --nizam-en: 1640px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   24. ÇAP ÜSLUBLARI
   ══════════════════════════════════════════════════════════════════════════════════════════ */

@media print {
    .naviqasiya,
    .panel-nav,
    .suzgec,
    .suzgec-forma,
    .sehifeleme,
    .sehife-kecidleri,
    .toplu-emeliyyat,
    .emeliyyat-paneli,
    .emeliyyat-sutunu,
    .duyme,
    .sebet-sil,
    .setir-forma { display: none !important; }
    html { font-size: 11pt; }
    body { background: #fff !important; color: #000; line-height: 1.35; }

    .admin-govde,
    .isci-govde,
    .satis-govde { max-width: none; padding: 0; }

    .bolme,
    .mehsul-bolmesi,
    .sebet-bolmesi,
    .gunluk-bolmesi,
    .qaytarma-forma-bolmesi,
    .qaytarma-siyahi-bolmesi,
    .cedvel-konteyner,
    .qutu {
        border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 12pt;
        break-inside: avoid;
    }

    .bolme > h2 { border-bottom: 1pt solid #000; padding-bottom: 3pt; }
    .bolme > h2::before { display: none; }

    .cedvel {
        min-width: 0; width: 100%; border-collapse: collapse; font-size: 9.5pt;
    }

    .cedvel thead { display: table-header-group; }

    .cedvel thead th {
        position: static; background: #eee !important; color: #000; border: 1px solid #999;
        padding: 4pt 6pt;
    }

    .cedvel tbody td { border: 1px solid #bbb; padding: 3pt 6pt; background: transparent !important; }
    .cedvel tbody tr { break-inside: avoid; }
    .mesaj { border: 1pt solid #999; box-shadow: none; animation: none; }

    .nisan,
    .nisani,
    .veziyyet-nisani { border: 1pt solid #999; background: transparent !important; color: #000 !important; }

    .xetli,
    .setir--xetli td,
    .deger--xetli,
    .cedvel tr.silinme-isareli td,
    .cedvel tr.silinmis td { text-decoration: line-through; color: #555; }

    .mehsul-sebekesi,
    .mehsul-sebeke { grid-template-columns: repeat(4, 1fr); gap: 6pt; }
    .mehsul-karti { border: 1pt solid #ccc; box-shadow: none; break-inside: avoid; }
    a { color: #000; border-bottom: 0; }
}