/* ============================================================
   ARETA ERP · TEMA KATMANI
   ------------------------------------------------------------
   site.css'ten SONRA yüklenir. site.css düzeni yönetmeye devam
   eder, bu dosya renk, tipografi ve doku devralır.

   Palet: Denizci  · Gece modu: Kömür  · Font: IBM Plex Sans

   Paleti değiştirmek için yalnızca "1. MARKA RAMPASI" bölümündeki
   dört değeri düzenlemek yeterlidir; geri kalan her şey onlara
   bağlıdır.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* ============================================================
   1. MARKA RAMPASI  —  paleti burada değiştir
   ============================================================ */
:root {
    --brand-900: #142850; /* kenar çubuğu, başlıklar */
    --brand-700: #27496D; /* koyu ara ton */
    --brand-500: #0C7B93; /* birincil aksiyon */
    --brand-400: #00A8CC; /* vurgu, odak, aktif */
    /* Rampadan türeyen açık tonlar */
    --brand-200: #C9E9F3;
    --brand-100: #E4F6FB;
    --brand-50: #F2F8FB;
}
/* ============================================================
   2. NÖTR MERDİVEN  —  kenarlık ve ikincil metin
   ============================================================ */
:root {
    --n-0: #FFFFFF;
    --n-50: #F8FAFC;
    --n-100: #F1F5F9;
    --n-200: #E2E8F0;
    --n-300: #CBD5E1;
    --n-400: #94A3B8;
    --n-500: #64748B;
    --n-600: #475569;
    --n-700: #334155;
    --n-800: #1E293B;
    --n-900: #0F172A;
}

/* ============================================================
   3. DURUM RENKLERİ
   Markadan bağımsız: "vadesi geçti" her palette kırmızı olmalı.
   ============================================================ */
:root {
    --danger: #D64545;
    --danger-bg: #FBE4E4;
    --danger-fg: #B3282D;
    --warning: #D9930D;
    --warning-bg: #FDF0D9;
    --warning-fg: #A66F08;
    --success: #2E9E6B;
    --success-bg: #DFF3E9;
    --success-fg: #207A52;
}
/* ============================================================
   4. ANLAMSAL KATMAN  —  AÇIK MOD
   View'lar yalnızca bu isimleri kullanmalı, ham renk kullanmamalı.
   ============================================================ */
:root {
    --surface-page: var(--brand-50);
    --surface-card: var(--n-0);
    --surface-raised: var(--n-50);
    --surface-sunken: var(--n-100);
    --surface-accent: var(--brand-100);
    --surface-selected: #EDF9FC;
    --text-primary: var(--n-900);
    --text-heading: var(--brand-900);
    --text-secondary: var(--n-500);
    --text-muted: var(--n-400);
    --text-on-brand: #FFFFFF;
    --border: #E1EBF0;
    --border-strong: var(--n-300);
    --primary: var(--brand-500);
    --primary-hover: #0A6A7F;
    --accent: var(--brand-400);
    --sidebar-bg: var(--brand-900);
    --sidebar-fg: #BFE6F2;
    --sidebar-muted: #5D7A9E;
    --shadow-sm: 0 1px 2px rgba(20, 40, 80, .05);
    --shadow-md: 0 4px 14px rgba(20, 40, 80, .08);
    --shadow-lg: 0 12px 34px rgba(20, 40, 80, .14);
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-xl: 12px;
}
/* ============================================================
   5. ESKİ DEĞİŞKEN ADLARI
   Mevcut 15 view bu isimleri kullanıyor. Yeni tokenlara
   bağlanıyorlar ki hiçbir ekran bozulmasın. View'lar
   temizlendikçe bu bölüm küçülecek.
   ============================================================ */
:root {
    --color-text-secondary: var(--text-secondary);
    --color-text-muted: var(--text-muted);
    --color-text-info: var(--primary);
    --color-text-warning: var(--warning-fg);
    --color-text-success: var(--success-fg);
    --color-danger: var(--danger);
    --color-warning: var(--warning);
    --color-bg-secondary: var(--surface-raised);
    --color-background-secondary: var(--surface-raised);
    --color-background-subtle: var(--surface-raised);
    --color-background-tertiary: var(--surface-sunken);
    --color-background-info: var(--surface-accent);
    --color-background-warning: var(--warning-bg);
    --color-warning-bg: var(--warning-bg);
    --color-border: var(--border);
    --color-border-secondary: var(--border);
    --color-border-tertiary: var(--border);
    /* site.css'in kendi değişkenleri */
    --primary-dark: var(--brand-900);
    --primary-blue: var(--brand-700);
    --primary-light: var(--brand-500);
    --primary-cream: var(--brand-100);
    --white: var(--n-0);
    --text-dark: var(--text-primary);
    --text-light: var(--text-secondary);
    --border-color: var(--border);
    --error: var(--danger);
}
/* ============================================================
   6. GECE MODU · KÖMÜR
   <html data-theme="dark"> ile etkinleşir.
   Yalnızca anlamsal katman yeniden tanımlanır; bileşen
   kurallarının hiçbiri tekrarlanmaz.
   ============================================================ */
[data-theme="dark"] {
    --surface-page: #191E26;
    --surface-card: #222833;
    --surface-raised: #272E3A;
    --surface-sunken: #1E242E;
    --surface-accent: #1C3038;
    --surface-selected: #252C37;
    --text-primary: #C9D1DA;
    --text-heading: #E3E9F0;
    --text-secondary: #8A94A3;
    --text-muted: #6B7480;
    --text-on-brand: #EAF6FA;
    --border: #2F3743;
    --border-strong: #3A424F;
    --primary: #3E7E93;
    --primary-hover: #4A8FA6;
    --accent: #79C6DA;
    --sidebar-bg: #1E242E;
    --sidebar-fg: #C9D1DA;
    --sidebar-muted: #6B7480;
    --danger-bg: #3A2B2B;
    --danger-fg: #E09B9B;
    --warning-bg: #3A3423;
    --warning-fg: #D8B878;
    --success-bg: #22372E;
    --success-fg: #89C7A6;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .35);
    --shadow-lg: 0 12px 34px rgba(0, 0, 0, .45);
    --primary-dark: var(--text-heading);
    --white: var(--surface-card);
    --text-dark: var(--text-primary);
    --border-color: var(--border);
}
/* ============================================================
   7. TEMEL
   ============================================================ */

.spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    margin-right: 7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: areta-spin .6s linear infinite;
}

@keyframes areta-spin {
    to {
        transform: rotate(360deg);
    }
}

html, body {
    height: 100%;
    font-size: 14px;
    line-height: 1.6;
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--surface-page);
    color: var(--text-primary);
}

.erp-layout,
.content-area {
    background: var(--surface-page);
}

    .content-area {
        flex: 1;
        overflow-y: auto;
        padding: 32px;
    }

        .content-area::-webkit-scrollbar {
            width: 8px;
        }

        .content-area::-webkit-scrollbar-thumb {
            background: var(--border-strong);
            border-radius: 4px;
        }

    @media (max-width: 768px) {
        .hamburger-btn {
            display: flex;
        }

        .topbar {
            padding: 0 16px;
        }

        .topbar-left h3 {
            font-size: 16px;
        }

        .content-area {
            padding: 20px;
        }
    }

    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .topbar {
        height: 70px;
        background: var(--surface-page);
        border-bottom: 1px solid var(--border);
        color: var(--text-primary);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32px;
    }

    .topbar-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

        .topbar-left h3 {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-heading);
        }

    .topbar-right {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .hamburger-btn {
        display: none;
        background: transparent;
        border: none;
        color: var(--text-heading);
        cursor: pointer;
        padding: 8px;
        border-radius: var(--r-md);
        transition: background .2s;
    }

        .hamburger-btn:hover {
            background: var(--surface-sunken);
        }

        .hamburger-btn svg {
            display: block;
        }

    .theme-toggle {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        color: var(--text-secondary);
        cursor: pointer;
        flex-shrink: 0;
        transition: background .15s, color .15s, border-color .15s;
    }

        .theme-toggle:hover {
            background: var(--surface-sunken);
            border-color: var(--border-strong);
            color: var(--text-heading);
        }

        .theme-toggle svg {
            display: block;
        }

        .theme-toggle .theme-toggle__sun {
            display: none;
        }

    [data-theme="dark"] .theme-toggle .theme-toggle__moon {
        display: none;
    }

    [data-theme="dark"] .theme-toggle .theme-toggle__sun {
        display: block;
    }

    h1, h2, h3, h4, h5 {
        color: var(--text-heading);
        font-weight: 600;
        letter-spacing: -.01em;
    }
    /* Rakamlar her yerde eşit genişlikte — sütunlar titremesin */
    table, .stat-value, .val, input[type="number"], .qty-cell, td, th {
        font-variant-numeric: tabular-nums;
    }

    a {
        color: var(--primary);
    }

        a:hover {
            color: var(--primary-hover);
        }

    ::selection {
        background: var(--brand-200);
        color: var(--brand-900);
    }
    /* ============================================================
   8. BUTONLAR
   Dört ayrı sistem var (btn, btn-action, btn-xs, btn-add);
   hepsi aynı görsel dile bağlanıyor.
   ============================================================ */
    .btn,
    .btn-action {
        font-family: inherit;
        font-weight: 500;
        border-radius: var(--r-md);
        border: 1px solid transparent;
        transition: background .15s ease, border-color .15s ease, color .15s ease;
        cursor: pointer;
    }

    .btn {
        padding: 8px 16px;
        font-size: 13px;
    }

    .btn-sm {
        padding: 6px 12px;
        font-size: 12px;
    }

    .btn-xs {
        padding: 4px 10px;
        font-size: 12px;
        border-radius: var(--r-sm);
    }

    .btn-primary,
    .btn-action.btn-add {
        background: var(--primary);
        color: var(--text-on-brand);
        border-color: var(--primary);
    }

        .btn-primary:hover,
        .btn-action.btn-add:hover {
            background: var(--primary-hover);
            border-color: var(--primary-hover);
        }

    .btn-secondary,
    .btn-outline {
        background: var(--surface-card);
        color: var(--primary);
        border-color: var(--border-strong);
    }

        .btn-secondary:hover,
        .btn-outline:hover {
            background: var(--surface-raised);
            border-color: var(--primary);
        }

    .btn-danger,
    .btn-action.btn-delete {
        background: var(--danger-bg);
        color: var(--danger-fg);
        border-color: transparent;
    }

        .btn-danger:hover,
        .btn-action.btn-delete:hover {
            background: var(--danger);
            color: #fff;
        }

    .btn-success {
        background: var(--success);
        color: #fff;
        border-color: var(--success);
    }

    .btn-warning {
        background: var(--warning);
        color: #fff;
        border-color: var(--warning);
    }

    .btn-action.btn-edit,
    .btn-action.btn-info {
        background: var(--surface-accent);
        color: var(--primary);
        border-color: transparent;
    }

        .btn-action.btn-edit:hover,
        .btn-action.btn-info:hover {
            background: var(--brand-200);
        }

    .btn:disabled, .btn[disabled] {
        opacity: .5;
        cursor: not-allowed;
    }
    /* --- site.css'ten devralınan temel davranışlar --- */
    .btn {
        display: inline-block;
        text-align: center;
        text-decoration: none;
        outline: none;
    }

        .btn svg {
            vertical-align: middle;
            margin-right: 4px;
        }

    .btn-block {
        width: 100%;
        display: block;
    }

    .btn-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 14px;
        font-size: 13px;
        text-decoration: none;
        white-space: nowrap;
    }

        .btn-action.btn-xs {
            padding: 4px 8px;
            font-size: 12px;
        }

    .btn-warning:hover {
        filter: brightness(.93);
    }

    .filter-group .btn {
        flex: 0 0 auto;
    }

    .add-row .btn {
        flex-shrink: 0;
    }
/* --- Satır içi işlem butonları --- */
.btn-action.btn-edit,
.btn-action.btn-info,
.btn-action.btn-delete,
.btn-action.btn-undo {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

    .btn-action.btn-edit:hover,
    .btn-action.btn-info:hover {
        background: var(--surface-accent);
        color: var(--primary);
    }

    .btn-action.btn-delete:hover {
        background: var(--danger-bg);
        color: var(--danger-fg);
    }

    .btn-action.btn-undo:hover {
        background: var(--warning-bg);
        color: var(--warning-fg);
    }

.btn-action.btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    gap: 0;
}

    .btn-action.btn-icon svg {
        width: 16px;
        height: 16px;
        margin: 0;
        flex-shrink: 0;
    }

    .btn-action:disabled,
    .btn-action.btn-icon:disabled {
        opacity: .35;
        cursor: default;
    }

        .btn-action:disabled:hover {
            background: transparent;
            color: var(--text-secondary);
        }
    /* ============================================================
   9. ROZETLER
   ============================================================ */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: var(--r-sm);
        font-size: 11px;
        font-weight: 500;
        line-height: 1.5;
        white-space: nowrap;
    }

    .badge-success {
        background: var(--success-bg);
        color: var(--success-fg);
    }

    .badge-warning {
        background: var(--warning-bg);
        color: var(--warning-fg);
    }

    .badge-danger {
        background: var(--danger-bg);
        color: var(--danger-fg);
    }

    .badge-info {
        background: var(--surface-accent);
        color: var(--primary);
    }

    .badge-secondary {
        background: var(--surface-sunken);
        color: var(--text-secondary);
    }

    .badge-company {
        background: var(--brand-100);
        color: var(--brand-900);
    }

    .badge-role {
        background: var(--surface-sunken);
        color: var(--text-secondary);
    }
    /* ============================================================
   10. KARTLAR VE YÜZEYLER
   ============================================================ */
    .card {
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        box-shadow: none;
    }

    .card-header {
        background: var(--surface-raised);
        border-bottom: 1px solid var(--border);
        color: var(--text-heading);
        font-weight: 600;
    }

    .card-body {
        padding: 16px;
    }

    .stat-card,
    .dash-card,
    .asset-card {
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        box-shadow: none;
        transition: border-color .15s ease;
    }

        .stat-card:hover,
        .dash-card:hover,
        .asset-card:hover {
            border-color: var(--brand-200);
        }

    .stat-label, .dash-card__h {
        color: var(--text-secondary);
        font-size: 12px;
    }

    .stat-value {
        color: var(--text-heading);
        font-weight: 600;
    }
    /* ============================================================
   11. TABLOLAR
   Uygulamanın en geniş yüzeyi. Sakin kenarlık, net başlık.
   ============================================================ */
    .table, .data-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

        .table thead tr,
        .data-table thead tr {
            background: var(--surface-raised);
            color: var(--text-secondary);
        }

        .table th, .data-table th {
            padding: 10px 12px;
            font-weight: 500;
            font-size: 12px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }

        .table td, .data-table td {
            padding: 10px 12px;
            border-top: 1px solid var(--surface-sunken);
            color: var(--text-primary);
        }

        .table tbody tr:hover,
        .data-table tbody tr:hover {
            background: var(--surface-selected);
        }

    .table-responsive {
        overflow-x: auto;
    }

    .table th,
    .data-table th {
        white-space: nowrap;
    }

    .table td {
        vertical-align: middle;
    }

    .data-table .text-center {
        text-align: center;
    }

    .data-table .text-right {
        text-align: right;
    }

    .table th:nth-child(1),
    .table td:nth-child(1) {
        width: 25%;
    }

    .table th:nth-child(2),
    .table td:nth-child(2) {
        width: 20%;
    }

    .table th:nth-child(3),
    .table td:nth-child(3) {
        width: 15%;
    }

    .table th:nth-child(4),
    .table td:nth-child(4) {
        width: 10%;
        text-align: center;
    }

    .table th:nth-child(5),
    .table td:nth-child(5) {
        width: 10%;
        text-align: center;
    }

    .table th:nth-child(6),
    .table td:nth-child(6) {
        width: 10%;
        text-align: center;
    }
    /* ============================================================
   12. FORMLAR
   ============================================================ */
    .form-label,
    .form-group > label {
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 5px;
    }

    .form-control,
    .form-select {
        width: 100%;
        padding: 8px 11px;
        font-family: inherit;
        font-size: 13px;
        color: var(--text-primary);
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md);
        transition: border-color .15s ease, box-shadow .15s ease;
    }

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

        .form-control:focus,
        .form-select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
        }

        .form-control:disabled,
        .form-control[readonly] {
            background: var(--surface-sunken);
            color: var(--text-secondary);
            cursor: not-allowed;
        }

    .form-group {
        margin-bottom: 14px;
    }

    .form-container {
        max-width: 900px;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
    }

    .form-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

        .form-header-row .form-check {
            margin: 0;
        }

    .form-group-actions {
        display: flex;
        align-items: flex-end;
        padding-bottom: 4px;
    }

    .form-actions {
        display: flex;
        gap: 12px;
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid var(--border);
    }

    .filter-form {
        margin-bottom: 24px;
    }

    .filter-group {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

        .filter-group .form-control {
            max-width: 220px;
            flex: 0 0 auto;
        }

    .assignment-row .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 12px;
        align-items: end;
        margin-bottom: 0;
    }

    .assortment-row .form-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1.3fr auto;
        gap: 12px;
        align-items: flex-end;
    }

    .add-row .form-control,
    .add-row .form-select {
        flex: 1;
    }

    @media (max-width: 768px) {
        .form-row,
        .assignment-row .form-row,
        .assortment-row .form-row {
            grid-template-columns: 1fr;
        }

        .form-header-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .form-group-actions {
            justify-content: flex-start;
        }

        .filter-group {
            flex-direction: column;
            align-items: stretch;
        }

            .filter-group .form-control {
                max-width: 100%;
            }
    }
    /* ============================================================
   13. MODALLAR
   ============================================================ */
    /* display:none burada olmalı: site.css 1269'daki .modal kuralı bunu veriyordu,
   theme.css sonra yüklenip özelliği yazmayınca modallar kararsız davranıyordu
   (bazen kapalı kalıyor, bazen iki modal üst üste açılıyor).
   JS style.display = 'flex' ile açıyor. */
    .modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(10, 23, 40, .48);
        backdrop-filter: blur(2px);
        z-index: 1000;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    [data-theme="dark"] .modal {
        background: rgba(0, 0, 0, .6);
    }

    .modal-content {
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        box-shadow: var(--shadow-lg);
        width: 100%;
        max-width: 600px;
        max-height: 90vh;
        overflow-y: auto;
    }

    @media (max-width: 768px) {
        .modal-content {
            max-width: 100%;
            margin: 0;
        }
    }

    .modal-header {
        padding: 15px 18px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .modal-header h3 {
            margin: 0;
            font-size: 15px;
        }

    .modal-body {
        padding: 18px;
    }

    .modal-footer {
        padding: 13px 18px;
        background: var(--surface-raised);
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .modal-close {
        background: none;
        border: none;
        font-size: 20px;
        line-height: 1;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0 4px;
    }

        .modal-close:hover {
            color: var(--text-primary);
        }
    /* Modal içi bilgi/uyarı kutusu. İki modalda birden kullanılıyor,
   o yüzden adı modül adı taşımıyor. */
    .modal-note {
        background: var(--surface-sunken);
        color: var(--text-secondary);
        border-radius: var(--r-md);
        padding: 9px 12px;
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 1.5;
    }

        .modal-note strong {
            color: var(--text-heading);
        }

    .modal-note--warning {
        background: var(--warning-bg);
        color: var(--warning-fg);
    }

        .modal-note--warning strong {
            color: var(--warning-fg);
        }

    .modal-note--accent {
        background: var(--surface-accent);
        color: var(--primary);
    }

        .modal-note--accent strong {
            color: var(--primary);
        }
    /* ============================================================
   14. SEKMELER
   ============================================================ */
    .tabs-nav {
        display: flex;
        gap: 4px;
        border-bottom: 1px solid var(--border);
        flex-wrap: wrap;
    }

    .tab-button {
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        padding: 10px 14px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-secondary);
        cursor: pointer;
        margin-bottom: -1px;
        transition: color .15s ease, border-color .15s ease;
    }

        .tab-button:hover {
            color: var(--text-primary);
        }

        .tab-button.active {
            color: var(--primary);
            border-bottom-color: var(--accent);
        }

    .tab-content {
        display: none;
    }

        .tab-content.active {
            display: block;
        }
    /* Sekme düğmelerinde simge. Boyut metinle orantılı, renk metinden miras alınır —
   aktif sekmede vurgu rengine kendiliğinden döner. */
    .tab-button {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

        .tab-button svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

    @media (max-width: 520px) {
        .tab-button svg {
            display: none;
        }
    }
    /* ============================================================
   15. KENAR ÇUBUĞU
   ============================================================ */
    .erp-container {
        display: flex;
        height: 100vh;
        overflow: hidden;
    }

    .sidebar {
        width: 260px;
        background: var(--sidebar-bg);
        color: var(--sidebar-fg);
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        box-shadow: 4px 0 12px rgba(0, 0, 0, .1);
        z-index: 100;
    }

    .sidebar-header {
        /* Yükseklik topbar ile aynı olmalı — iki ayırıcı çizgi
               aynı hizada başlasın. Dolgu yerine sabit yükseklik + dikey
               ortalama; başlık metni büyürse çizgi kaymaz. */
        height: 70px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 0 20px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
        .sidebar-header h2 {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-cream);
        }

    .sidebar-nav {
        flex: 1;
        padding: 20px 0;
        overflow-y: auto;
    }

        .sidebar-nav::-webkit-scrollbar {
            width: 6px;
        }

        .sidebar-nav::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, .2);
            border-radius: 3px;
        }

    .nav-item {
        display: flex;
        align-items: center;
        padding: 14px 24px;
        color: var(--sidebar-fg);
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        border-left: 3px solid transparent;
        border-radius: var(--r-md);
        transition: background .15s ease;
    }

        .nav-item svg {
            margin-right: 12px;
            flex-shrink: 0;
        }

        .nav-item:hover {
            background: rgba(255, 255, 255, .07);
            color: #fff;
            border-left-color: var(--primary-cream);
        }

        .nav-item.active {
            background: rgba(0, 168, 204, .16);
            color: #fff;
            border-left-color: var(--primary-cream);
        }

    [data-theme="dark"] .nav-item.active {
        background: rgba(121, 198, 218, .14);
    }

    .nav-submenu {
        display: none;
        flex-direction: column;
        margin-left: 32px;
        margin-top: 2px;
        border-left: 1px solid rgba(255, 255, 255, .12);
        padding-left: 8px;
    }

        .nav-submenu.open {
            display: flex;
        }

    .nav-subitem {
        padding: 6px 10px;
        font-size: 13px;
        color: var(--sidebar-fg);
        text-decoration: none;
        border-radius: var(--r-xs);
        opacity: .85;
        transition: background .15s ease, opacity .15s ease;
    }

        .nav-subitem:hover {
            background: rgba(255, 255, 255, .08);
            opacity: 1;
        }

    @media (max-width: 1024px) {
        .sidebar {
            width: 220px;
        }
    }

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -260px;
        height: 100vh;
        transition: left .3s ease;
        z-index: 1000;
    }

        .sidebar.open {
            left: 0;
            box-shadow: 4px 0 20px rgba(0, 0, 0, .3);
        }

    body.sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 999;
    }
}

    .sidebar-user {
        position: relative;
        border-top: 1px solid rgba(255, 255, 255, .1);
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        user-select: none;
    }

    .sidebar-user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--brand-700);
        color: var(--sidebar-fg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        flex-shrink: 0;
        letter-spacing: .5px;
    }

    .sidebar-user-info {
        flex: 1;
        min-width: 0;
    }

    .sidebar-user-name {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-user-role {
        font-size: 11px;
        color: var(--sidebar-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-settings-btn {
        width: 30px;
        height: 30px;
        border-radius: var(--r-md);
        border: none;
        background: transparent;
        color: var(--sidebar-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: background .15s, color .15s, transform .3s;
    }

        .sidebar-settings-btn:hover {
            background: rgba(255, 255, 255, .1);
            color: #fff;
        }

        .sidebar-settings-btn.open {
            transform: rotate(60deg);
            color: #fff;
        }

    .sidebar-settings-menu {
        position: absolute;
        bottom: calc(100% + 6px);
        left: 16px;
        right: 16px;
        background: var(--brand-700);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: var(--r-lg);
        overflow: hidden;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease;
    }

        .sidebar-settings-menu.open {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

    .settings-menu-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        color: var(--sidebar-muted);
        padding: 10px 14px 4px;
    }

    .settings-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 14px;
        color: var(--sidebar-fg);
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: background .12s, color .12s;
    }

        .settings-menu-item:hover {
            background: rgba(255, 255, 255, .07);
            color: #fff;
        }

        .settings-menu-item svg {
            flex-shrink: 0;
            opacity: .7;
        }

        .settings-menu-item:hover svg {
            opacity: 1;
        }

.settings-menu-divider {
    height: 1px;
    margin: 6px 10px;
    background: rgba(255, 255, 255, .10);
}

.settings-menu-item--danger {
    color: #E8A0A0;
}

    .settings-menu-item--danger:hover {
        background: rgba(224, 108, 108, .14);
        color: #FFC9C9;
    }

.sidebar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-700);
    color: var(--sidebar-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: .5px;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 11px;
    color: var(--sidebar-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-settings-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--r-md);
    border: none;
    background: transparent;
    color: var(--sidebar-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, transform .3s;
}

    .sidebar-settings-btn:hover {
        background: rgba(255, 255, 255, .1);
        color: #fff;
    }

    .sidebar-settings-btn.open {
        transform: rotate(60deg);
        color: #fff;
    }

.sidebar-settings-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 16px;
    right: 16px;
    background: var(--brand-700);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

    .sidebar-settings-menu.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

.settings-menu-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--sidebar-muted);
    padding: 10px 14px 4px;
}

.settings-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--sidebar-fg);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background .12s, color .12s;
}

    .settings-menu-item:hover {
        background: rgba(255, 255, 255, .07);
        color: #fff;
    }

    .settings-menu-item svg {
        flex-shrink: 0;
        opacity: .7;
    }

    .settings-menu-item:hover svg {
        opacity: 1;
    }
/* ============================================================
   16. BİLDİRİM VE BOŞ DURUM
   ============================================================ */
.alert, .notification {
    border-radius: var(--r-md);
    border: 1px solid transparent;
    padding: 11px 14px;
    font-size: 13px;
}

.alert-success, .notification-success {
    background: var(--success-bg);
    color: var(--success-fg);
}

.alert-danger, .notification-error {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.alert-warning, .notification-warning {
    background: var(--warning-bg);
    color: var(--warning-fg);
}

.alert-info, .notification-info {
    background: var(--surface-accent);
    color: var(--primary);
}

.empty-state {
    color: var(--text-secondary);
    text-align: center;
    padding: 32px 16px;
}

.empty-hint {
    color: var(--text-muted);
    font-size: 12px;
}
/* --- Bildirim şeridi --- */
.notification-bar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-radius: var(--r-lg);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    border-left: 4px solid transparent;
    animation: notifySlideDown .3s ease;
}

    .notification-bar.auto-dismiss {
        animation: notifySlideDown .3s ease, notifyFadeOut .4s ease 4.6s forwards;
    }

    .notification-bar .notification-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 1px;
    }

    .notification-bar .notification-text {
        flex: 1;
    }

    .notification-bar .notification-close {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        flex-shrink: 0;
        font-size: 18px;
        color: inherit;
        opacity: .6;
        transition: opacity .2s;
    }

        .notification-bar .notification-close:hover {
            opacity: 1;
        }

.notification-error {
    border-left-color: var(--danger-fg);
}

.notification-success {
    border-left-color: var(--success-fg);
}

.notification-warning {
    border-left-color: var(--warning-fg);
}

/* --- Uyarı kutusu --- */
.alert {
    margin-bottom: 20px;
}

/* --- Toast --- */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--r-lg);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    border-left: 4px solid transparent;
    min-width: 280px;
    max-width: 380px;
    pointer-events: all;
    box-shadow: var(--shadow-md);
    animation: toastSlideIn .3s ease;
}

    .toast.hiding {
        animation: toastSlideOut .3s ease forwards;
    }

    .toast .toast-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 1px;
    }
    .toast .toast-text {
        flex: 1;
    }
    .toast .toast-close {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        padding: 0;
        flex-shrink: 0;
        color: inherit;
        opacity: .6;
        transition: opacity .2s;
    }

        .toast .toast-close:hover {
            opacity: 1;
        }

.toast-error {
    background: var(--danger-bg);
    color: var(--danger-fg);
    border-left-color: var(--danger-fg);
}

.toast-success {
    background: var(--success-bg);
    color: var(--success-fg);
    border-left-color: var(--success-fg);
}

.toast-warning {
    background: var(--warning-bg);
    color: var(--warning-fg);
    border-left-color: var(--warning-fg);
}

.toast-info {
    background: var(--surface-accent);
    color: var(--primary);
    border-left-color: var(--primary);
}

/* --- Onay kutusu --- */
.confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 40, 80, .55);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

    .confirm-overlay.open {
        display: flex;
    }

.confirm-box {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    width: 90%;
    max-width: 440px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: confirmPop .15s ease;
}

.confirm-header {
    padding: 18px 22px 0 22px;
}

    .confirm-header h3 {
        margin: 0;
        font-size: 18px;
        color: var(--text-heading);
    }

.confirm-body {
    padding: 14px 22px 20px 22px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
}
.confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 22px 20px 22px;
}
/* --- Animasyonlar --- */
@keyframes notifySlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes notifyFadeOut {
    to {
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
    }
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

@keyframes confirmPop {
    from {
        transform: scale(.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* ============================================================
   17. YARDIMCI SINIFLAR
   İnline stillerin en sık tekrar eden kalıpları.
   View'ları geçirirken bunları kullanacağız.
   ============================================================ */
.text-muted {
    color: var(--text-muted) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}
.text-success {
    color: var(--success-fg) !important;
}
.text-danger {
    color: var(--danger-fg) !important;
}
.text-warning {
    color: var(--warning-fg) !important;
}
.text-info {
    color: var(--accent) !important;
}
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.u-num {
    font-variant-numeric: tabular-nums;
}

.u-sub {
    font-size: 11px;
    color: var(--text-secondary);
}

.u-caption {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Özet kart ızgarası — 19 yerde tekrar eden inline kalıbın karşılığı */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.metric {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px 14px;
}

.metric__label {
    font-size: 12px;
    color: var(--text-secondary);
}

.metric__value {
    font-size: 21px;
    font-weight: 600;
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
}

.metric__hint {
    font-size: 11px;
    color: var(--text-muted);
}

.metric--danger .metric__value {
    color: var(--danger-fg);
}

.metric--warning .metric__value {
    color: var(--warning-fg);
}

.metric--accent {
    background: var(--surface-accent);
    border-color: var(--brand-200);
}

[data-theme="dark"] .metric--accent {
    border-color: var(--primary);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

    .page-header h1 {
        font-size: 22px;
        margin: 0;
    }

/* ============================================================
   18. UZUN FORM DÜZENİ
   Solda numaralı bölümler, sağda kaydırırken sabit kalan özet
   paneli. Yeni Anlaşma için yazıldı; tedarikçi ve atölye
   formlarında da aynı iskelet kullanılabilsin diye adlar genel.
   ============================================================ */
.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 14px;
    align-items: start;
}

.form-aside {
    position: sticky;
    top: 12px;
}

.form-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.form-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.form-total-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 3px 0;
}

.form-total-line--grand {
    color: var(--text-heading);
    font-weight: 600;
    font-size: 15px;
    border-top: 1px solid var(--border);
    padding-top: 6px;
    margin-top: 4px;
}

/* Dinamik satır ızgaraları. Başlık satırı ve satırların kendisi aynı
   sınıfı kullanır; hizalama böyle garanti altına alınıyor. */
.assortment-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr 28px;
    gap: 8px;
    align-items: center;
}

.delivery-plan-grid {
    display: grid;
    grid-template-columns: 150px 130px minmax(0, 1fr) 28px;
    gap: 8px;
    align-items: center;
}

.payment-plan-grid {
    display: grid;
    grid-template-columns: 150px 130px 100px 130px minmax(0, 1fr) 28px;
    gap: 8px;
    align-items: center;
}

.assortment-row,
.delivery-plan-row,
.payment-plan-row {
    margin-bottom: 6px;
}

@media (max-width: 1100px) {
    .form-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-aside {
        position: static;
    }
}

@media (max-width: 900px) {
    .assortment-grid,
    .delivery-plan-grid,
    .payment-plan-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* site.css satır 1422'de bu sınıf flex-direction:column tanımlı.
   Yatay düzen için açıkça row yazmak gerekiyor. */
.agreement-summary {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 16px;
    flex-wrap: wrap;
    flex: 1;
}

.agreement-info {
    min-width: 200px;
    flex: 1;
}
.agreement-progress {
    width: 320px;
    flex: none;
}

.progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-label {
    width: 48px;
    flex: none;
    font-size: 12px;
    color: var(--text-secondary);
}

.progress-track {
    flex: 1;
    height: 6px;
    background: var(--surface-sunken);
    border-radius: 3px;
    overflow: hidden;
}

/* Karışık birimli anlaşmada çubuk eşit dilimlere bölünür.
   Dilim genişliği miktarla orantılı DEĞİL — farklı birimler
   kıyaslanamaz, her dilim yalnızca kendi içinde doluluk gösterir. */
.progress-track--split {
    flex: 1;
    display: flex;
    gap: 2px;
}

.progress-slot {
    flex: 1;
    height: 6px;
    background: var(--surface-sunken);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 3px;
}

.progress-fill--1 {
    background: var(--accent);
}

.progress-fill--2 {
    background: var(--success);
}

.progress-fill--3 {
    background: var(--warning);
}

.progress-value {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.progress-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 5px;
    padding-left: 58px;
    font-size: 11px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 2px;
    vertical-align: middle;
}

.dot--1 {
    background: var(--accent);
}

.dot--2 {
    background: var(--success);
}

.dot--3 {
    background: var(--warning);
}

@media (max-width: 900px) {
    .agreement-progress {
        width: 100%;
    }

    .progress-legend {
        padding-left: 0;
    }
}

.agreement-details {
    border-top: 1px solid var(--border);
    padding: 11px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 2;
}

    .agreement-details .val {
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

.agreement-other-currency {
    margin-top: 3px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
    line-height: 1.7;
}
/* Akordiyon içindeki bölümler — yeni anlaşma formundaki kartlarla
   aynı görünüm, numarasız. Okuma ekranı olduğu için sıra iması yok. */
.agreement-section {
    margin-bottom: 12px;
}

    .agreement-section .card-body > .data-table {
        margin-top: 4px;
    }

.agreement-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
}
/* Tedarikçi listesi akordiyonu */
.sup-accordion-toggle {
    color: var(--primary);
    cursor: pointer;
    border-bottom: 1px dotted;
}

.sup-agreement-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr);
    gap: 14px;
    align-items: start;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.sup-agreement-card--done {
    opacity: .72;
}

@media (max-width: 900px) {
    .sup-agreement-card {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Modal içinde alan grubu — başlıklı, çizgiyle ayrılmış bölüm */
.modal-section {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 4px;
    margin-bottom: 14px;
}

.modal-section-title {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 10px;
}

/* Etiketiyle tek satır onay kutusu. form-check'ten farkı: kutu ile
   metin aynı hizada ve tüm satır tıklanabilir. */
.check-line {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    margin: 0;
}

    .check-line input[type="checkbox"] {
        width: auto;
        margin: 0;
        flex: none;
    }
/* form-section-title bir h3 üzerinde de kullanılabilsin */
h3.form-section-title {
    margin: 0 0 10px;
    line-height: 1.4;
}
/* Künye kartları — etiket sabit genişlikte, değer sola hizalı.
   Sağa hizalı iki sütunda uzun adres ve IBAN sıkışıyordu. */
.info-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

.info-list {
    font-size: 13px;
}

    .info-list > div {
        display: flex;
        gap: 12px;
        padding: 5px 0;
        border-top: 1px solid var(--border);
    }

        .info-list > div > span:first-child {
            width: 92px;
            flex: none;
            color: var(--text-secondary);
        }

        .info-list > div > span:last-child {
            flex: 1;
            color: var(--text-primary);
            min-width: 0;
        }

/* Erişim · roller ve yetkiler — solda liste, sağda seçili rolün izinleri */
.access-role-layout {
    display: grid;
    grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    align-items: start;
}

.access-role-list {
    border-right: 1px solid var(--border);
    padding: 14px;
}

.access-perm-panel {
    padding: 14px;
    min-width: 0;
}

.access-role-item {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--r-md);
    padding: 2px 6px 2px 0;
}

    .access-role-item:hover {
        background: var(--surface-raised);
    }

.access-role-item--active {
    background: var(--surface-accent);
}

.access-role-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 7px 8px;
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
    min-width: 0;
}

    .access-role-link:hover {
        color: var(--text-primary);
    }

@media (max-width: 900px) {
    .access-role-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .access-role-list {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}
/* Kullanıcı modalındaki marka-rol atama satırları */
.assignment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
    gap: 8px;
    align-items: center;
}

.assignment-row {
    margin-bottom: 6px;
}
/* ============================================================
   GİRİŞ VE MARKA SEÇİMİ
   Layout = null ile çalışıyorlar, theme.css'i kendi <head>'lerinde
   yüklüyorlar. site.css'teki eski mor-lacivert degradeyi ve
   fazla boşlukları burada düzeltiyoruz.
   ============================================================ */
.auth-page,
.company-selection-page {
    background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-500) 100%);
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

.auth-card,
.company-selection-card {
    background: var(--surface-card);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 32px 30px;
}
/* Marka işareti — tek satır kelime. Kenarlık yerine hafif gölge,
   kutu hissi vermeden yükseklik veriyor. */
.brand-mark {
    display: inline-block;
    padding: 9px 20px;
    border-radius: var(--r-xl);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.15;
    color: var(--brand-900);
    /* Gölge camgöbeği tonunda — "4" ile aynı renk ailesi.
       0 168 204 = --brand-400 */
    box-shadow: 0 3px 14px rgba(0, 168, 204, .22), 0 0 0 1px rgba(0, 168, 204, .14);
}

.brand-mark__four {
    color: var(--brand-400);
}

.brand-tagline {
    text-align: center;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--text-secondary);
    margin: 9px 0 22px;
}
[data-theme="dark"] .brand-mark {
    color: var(--text-heading);
    box-shadow: 0 3px 14px rgba(0, 168, 204, .18), 0 0 0 1px rgba(0, 168, 204, .22);
}
.auth-header,
.company-selection-header {
    text-align: center;
    margin-bottom: 18px;
}

/* .auth-card ortalasın diye — brand-mark inline-flex */
.auth-card {
    text-align: center;
}

    .auth-card .form-group,
    .auth-card .alert {
        text-align: left;
    }

/* site.css .auth-form'a 24px alt boşluk veriyordu; kartın kendi
   dolgusuyla üst üste binip butonun altında 70px boşluk bırakıyordu. */
.auth-form {
    margin-bottom: 0;
}

    .auth-form .form-group {
        margin-bottom: 14px;
    }

    /* Buton tam genişlikte değil, içeriği kadar — form alanlarından
       ayrışsın diye üstünde belirgin boşluk var. */
    .auth-form .auth-submit {
        display: inline-block;
        width: auto;
        margin-top: 26px;
        padding: 9px 32px;
    }
/* site.css 440px veriyordu, giriş kartı için geniş kalıyordu */
.auth-container {
    max-width: 380px;
}

.company-selection-header h1 {
    font-size: 20px;
    color: var(--text-heading);
}

.company-selection-header p {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Giriş kartıyla aynı ölçek: 380px yerine 460px kart, 48px ikon.
   site.css'in 700px/64px değerleri bu akışta fazla büyük kalıyordu. */
.company-selection-container {
    max-width: 460px;
}

.company-selection-card {
    padding: 28px 26px;
}

.company-list {
    gap: 10px;
    margin-bottom: 16px;
}

.company-item {
    gap: 14px;
    padding: 13px 14px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: border-color .15s ease, background .15s ease;
}

    /* site.css hover'da yukarı zıplatıp gölge veriyordu; tasarım
       sisteminin geri kalanında böyle bir hareket yok. */
    .company-item:hover {
        background: var(--surface-raised);
        border-color: var(--accent);
        transform: none;
        box-shadow: none;
    }

.company-icon {
    width: 48px;
    height: 48px;
    margin-right: 0;
    flex: none;
    background: var(--primary);
    color: var(--text-on-brand);
    border-radius: var(--r-md);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
}

.company-details {
    min-width: 0;
}

    .company-details h3 {
        font-size: 15px;
        color: var(--text-heading);
        margin-bottom: 2px;
    }

    .company-details span {
        font-size: 12px;
        color: var(--text-secondary);
    }

/* Dar ekran — giriş ekranıyla aynı davranış */
@media (max-width: 520px) {
    .auth-card,
    .company-selection-card {
        padding: 24px 18px;
    }

    .company-item {
        padding: 11px 12px;
        gap: 11px;
    }

    .company-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .brand-mark {
        font-size: 26px;
        padding: 8px 16px;
    }
}
.company-selection-footer {
    text-align: center;
    padding-top: 11px;
    border-top: 1px solid var(--border);
}

.logout-link {
    font-size: 12px;
    color: var(--danger-fg);
}

/* Kenar çubuğu marka işareti — giriş ekranındaki kelime işaretiyle
   aynı kurgu, koyu zemine uyarlanmış. Gölge yerine renk ayrımı. */
.sidebar-brand {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--sidebar-fg);
    margin: 0;
}

.sidebar-brand__four {
    color: var(--brand-400);
}

.sidebar-brand__erp {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.5px;
    color: var(--sidebar-muted);
    vertical-align: middle;
    margin-left: 3px;
}
/* ============================================================
   20. ATÖLYE HAREKETLER SEKMESİ
   ============================================================ */
.mv-filterbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

    .mv-filterbar > input[type="text"] {
        flex: 1;
        min-width: 200px;
    }

.mv-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.mv-head-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.mv-title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
}

.mv-strip {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 7px;
    font-size: 13px;
}

.mv-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.price-chart {
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    padding: 12px;
    margin-bottom: 12px;
}

.price-chart__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.mv-table th,
.mv-table td {
    vertical-align: top;
}

/* Ana anlaşma satırı. Adı bilerek "line-row" DEĞİL — o ad site.css 2081'de
   display:flex veren başka bir bileşene ait ve <tr>'yi tablo satırı olmaktan
   çıkarıp kutuya çeviriyor, tablonun hizası bozuluyor. */
.mv-line > td {
    border-top: 1px solid var(--border);
}

.link-cell {
    cursor: pointer;
    color: var(--primary);
    border-bottom: 1px dotted var(--primary);
}

.link-cell--warn {
    color: var(--warning-fg);
    border-bottom-color: var(--warning-fg);
}

.cell-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--surface-accent);
    color: var(--primary);
    margin-left: 3px;
}

.cell-badge--warn {
    background: var(--warning-bg);
    color: var(--warning-fg);
}

.detail-box {
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    padding: 10px 12px;
    margin: 0 0 6px;
}

.detail-box__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.detail-row--off {
    opacity: .6;
}

.u-strike {
    text-decoration: line-through;
}

@media (max-width: 900px) {
    .mv-head {
        flex-direction: column;
    }

    .mv-filterbar > input[type="text"] {
        min-width: 100%;
    }
}
.mfr-filterbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
}

    .mfr-filterbar > input[type="text"] {
        flex: 1;
        min-width: 200px;
    }

    .mfr-filterbar > select {
        width: auto;
    }

.mfr-chips {
    display: flex;
    gap: 4px;
}

.mfr-chip {
    padding: 5px 11px;
    font-size: 12px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--r-sm);
    cursor: pointer;
}

    .mfr-chip.is-on {
        background: var(--surface-accent);
        border-color: var(--brand-400);
        color: var(--primary);
    }

.mfr-item {
    border-bottom: 1px solid var(--border);
}

.mfr-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    cursor: pointer;
    background: var(--surface-card);
}

    .mfr-row:hover {
        background: var(--surface-raised);
    }

.mfr-row--flat {
    cursor: default;
}

    .mfr-row--flat:hover {
        background: var(--surface-card);
    }

.mfr-main {
    flex: 1;
    min-width: 0;
}

.mfr-name {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading);
}

.mfr-name--off {
    color: var(--text-secondary);
    font-weight: 500;
}

.mfr-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 3px;
}

.mfr-count {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.mfr-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mfr-toggle {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    transition: transform .15s ease;
}

.mfr-item.open .mfr-toggle {
    transform: rotate(180deg);
}

.mfr-panel {
    display: none;
    padding: 12px 14px 14px;
    background: var(--surface-sunken);
    border-top: 1px solid var(--border);
}

.mfr-item.open .mfr-panel {
    display: block;
}

.mfr-stockgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mfr-stockcard {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
}

.mfr-stockcard--warn {
    background: var(--warning-bg);
    border-color: var(--warning-fg);
}

.mfr-stockcard--empty {
    opacity: .7;
}

.mfr-stockcard__name {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.mfr-stockcard__value {
    font-size: 19px;
    font-weight: 600;
    color: var(--text-heading);
    margin: 4px 0 2px;
}

.mfr-stockcard__unit {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
}

.mfr-stockcard__hint {
    font-size: 11px;
    color: var(--text-muted);
}

.mfr-stockcard--warn .mfr-stockcard__name,
.mfr-stockcard--warn .mfr-stockcard__value,
.mfr-stockcard--warn .mfr-stockcard__unit,
.mfr-stockcard--warn .mfr-stockcard__hint {
    color: var(--warning-fg);
}

.mfr-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
}

    .mfr-foot select {
        width: auto;
        padding: 3px 8px;
        font-size: 12px;
    }

@media (max-width: 900px) {
    .mfr-stockgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mfr-filterbar > input[type="text"] {
        min-width: 100%;
    }
}

@media (max-width: 520px) {
    .mfr-stockgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mfr-row {
        padding: 11px 12px;
    }

    .mfr-panel {
        padding: 10px 12px 12px;
    }
}
@media print {
    .sidebar, .tabs-nav, .btn, .btn-action, .modal {
        display: none !important;
    }

    .card {
        border: 1px solid #ccc;
    }

    body {
        background: #fff;
    }
}
/* ============================================================
   21. ATÖLYE STOK DURUMU SEKMESİ
   ============================================================ */
.st-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.st-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading);
}

.st-limit {
    font-size: 11px;
    color: var(--text-muted);
}

.st-bell {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

    .st-bell:hover {
        border-color: var(--brand-400);
        color: var(--primary);
    }

.st-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.st-grid--sub {
    margin-top: 10px;
}

.st-box {
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    padding: 10px 12px;
    position: relative;
}

.st-box__label {
    font-size: 12px;
    color: var(--text-secondary);
}

.st-box__value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-heading);
    margin-top: 2px;
}

.st-box__unit {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
}

.st-box__hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.st-grid--sub .st-box__value {
    font-size: 16px;
}

.st-box--warning {
    background: var(--warning-bg);
}

    .st-box--warning .st-box__label,
    .st-box--warning .st-box__value,
    .st-box--warning .st-box__unit {
        color: var(--warning-fg);
    }

.st-box--accent {
    background: var(--surface-accent);
}

    .st-box--accent .st-box__label,
    .st-box--accent .st-box__value,
    .st-box--accent .st-box__unit {
        color: var(--primary);
    }

.st-box--danger {
    background: var(--danger-bg);
}

    .st-box--danger .st-box__label,
    .st-box--danger .st-box__value,
    .st-box--danger .st-box__unit {
        color: var(--danger-fg);
    }

.st-box__edit {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0;
    display: inline-flex;
}

.st-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--border);
}

.st-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

    .st-toggle.is-open {
        color: var(--primary);
    }

    .st-toggle svg {
        transition: transform .15s ease;
    }

    .st-toggle.is-open svg {
        transform: rotate(180deg);
    }

.st-move-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid var(--border);
    font-size: 12px;
}

    .st-move-row > .st-move-date {
        color: var(--text-secondary);
        width: 82px;
        flex-shrink: 0;
    }

    .st-move-row > .st-move-qty {
        font-weight: 600;
        width: 90px;
        flex-shrink: 0;
    }

    .st-move-row > .st-move-note {
        color: var(--text-secondary);
        flex: 1;
        min-width: 0;
    }

@media (max-width: 900px) {
    .st-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .st-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* ============================================================
   22. ATÖLYE BORÇ SEKMESİ
   ============================================================ */
.dbt-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px 18px;
    margin-bottom: 10px;
}

.dbt-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dbt-head--click {
    cursor: pointer;
}

.dbt-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dbt-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading);
}

.dbt-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.dbt-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dbt-chevron {
    color: var(--text-secondary);
    display: inline-flex;
    transition: transform .15s ease;
    flex-shrink: 0;
}

.dbt-item.is-open .dbt-chevron {
    transform: rotate(90deg);
    color: var(--primary);
}

.dbt-body {
    display: none;
    margin-top: 12px;
}

.dbt-item.is-open .dbt-body {
    display: block;
}

.dbt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .dbt-table th {
        text-align: left;
        padding: 6px 4px;
        font-weight: 500;
        font-size: 12px;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border);
    }

    .dbt-table td {
        padding: 9px 4px;
        border-bottom: 1px solid var(--border);
        vertical-align: top;
    }

    .dbt-table tbody tr:last-child td {
        border-bottom: none;
    }

.dbt-sub-line {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.dbt-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 4px 0;
}

    .dbt-foot select {
        width: auto;
        padding: 3px 8px;
        font-size: 12px;
    }

@media (max-width: 900px) {
    .dbt-head {
        align-items: flex-start;
    }
}
.dbt-extra-row > td {
    padding-top: 0;
    border-bottom: 1px solid var(--border);
}

.dbt-extra {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.dbt-line > td {
    border-bottom: none;
}

/* ============================================================
   23. ÜRÜN STOK ÇIKIŞI
   ============================================================ */
.exit-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.exit-size-cell {
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    padding: 7px 8px;
}

.exit-size-cell__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
}

.exit-size-cell__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-heading);
}

.exit-size-cell__stock {
    font-size: 11px;
    color: var(--text-muted);
}

.exit-size-cell input {
    text-align: right;
    padding: 4px 6px;
    font-size: 13px;
}

.exit-size-cell__after {
    font-size: 10px;
    color: var(--text-muted);
    min-height: 13px;
    margin-top: 2px;
    text-align: right;
}
/* ============================================================
   24. ÜRÜN KARTLARI
   ============================================================ */
.pr-grid {
    /* auto-fill, auto-fit değil: tek kart kaldığında boş sütunlar yerini
       korusun, kart satırı boydan boya kaplamasın. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    grid-auto-rows: auto auto auto auto;
    gap: 16px;
    align-items: start;
}

/* Kartın dört bölümü (başlık / stok / bedenler / hammaddeler) ızgaranın
   dört satırına oturuyor; satırdaki kartlar aynı hizada başlıyor.
   span 3 denendi — dördüncü bölüm yer bulamayıp üçüncünün üstüne bindi. */
.pr-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    /* Subgrid üst ızgaranın satır boşluğunu miras alıyor; kartın İÇİNDE
       bölümler arasında 16px boşluk açıyordu. Kart kendi boşluğunu sıfırlar,
       kartlar arasındaki 16px .pr-grid'de kalır. */
    row-gap: 0;
}
@supports not (grid-template-rows: subgrid) {
    .pr-card {
        display: block;
    }
}

.pr-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
}

.pr-card__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
    margin: 0 0 4px;
}

.pr-card--empty .pr-card__title {
    color: var(--danger-fg);
}
.pr-card__stock,
.pr-card__sizes,
.pr-card__materials {
    padding-left: 18px;
    padding-right: 18px;
    /* Grid item varsayılan min-width:auto — içeriğinden dar olamıyor.
       Sıfırlanmazsa geniş beden tablosu bölümü şişiriyor ve
       .pr-size-wrap'teki overflow-x hiç devreye girmiyor. */
    min-width: 0;
}
/* Her bölüm kendi satırının üstüne yaslansın. Verilmezse subgrid
   bölümü satır yüksekliğine geriyor, içerik yukarıda kalıyor ve
   altta gereksiz boşluk oluşuyor. */
.pr-card__header,
.pr-card__stock,
.pr-card__sizes,
.pr-card__materials {
    align-self: start;
}
.pr-card__stock {
    padding-top: 12px;
}

.pr-card__materials {
    padding-bottom: 16px;
}

.pr-card__sizes {
    align-self: start;
}

/* Bölüm başlıkları HTML'de büyük harfle yazılı — CSS text-transform yok,
   Türkçede 'i' harfi tarayıcıya göre I ya da İ oluyor. */
.pr-card__section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .5px;
    margin: 12px 0 0;
}

.pr-card__stock-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .5px;
}

.pr-card__stock-value {
    font-size: 26px;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
    margin-top: 1px;
}

    .pr-card__stock-value small {
        font-size: 13px;
        font-weight: 400;
        color: var(--text-secondary);
        margin-left: 4px;
    }

.pr-card--empty .pr-card__stock-value {
    color: var(--danger-fg);
}
/* Beden dağılımı — görüntü site.css'teki eski size-table ile aynı:
   adın altında 2px kalın çizgi, adedin altında 1px ince çizgi.
   Ama <table> değil: tablo satır kırmıyor, çok bedenli üründe yatay
   kaydırmaya mecbur kalıyordu. Flex ile sütunlar alt satıra iniyor.
   flex:1 ile az bedende satırı dolduruyor, tablo gibi duruyor. */
.pr-size-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    margin-top: 6px;
}

/* Sütun genişliği sabit: satır başına dört tane sığar, beşinci alta iner
   ve ortalanır. flex:1 denendi — alt satırda kalan iki sütun genişleyip
   satırı dolduruyor, üsttekilerle hizasız duruyordu. */
/* Satır başına altı sütun: S/M/L/XL/XXL/3XL tek satıra sığsın.
   Boşluk 5 × 10px = 50px, kalan altıya bölünüyor. */
.pr-size-col {
    flex: 0 0 auto;
    width: calc((100% - 50px) / 6);
    min-width: 44px;
    text-align: center;
}
/* Uzun varyant adları (NOODLAB, Lacivert) altı sütunlu düzende dar kutuya
   sığmıyor; kesmek yerine iki satıra sarıyoruz. İki satırı da aşarsa kesilir,
   tamamı title'da durur. min-height ile tüm sütunlar aynı hizada kalır. */
.pr-size-col__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 6px 2px;
    min-height: 34px;
    border-bottom: 2px solid var(--brand-400);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-heading);
    overflow-wrap: anywhere;
}

.pr-size-col__qty {
    display: block;
    padding: 7px 2px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading);
}

.pr-size-col--zero .pr-size-col__name {
    color: var(--text-muted);
    border-bottom-color: var(--border);
}

.pr-size-col--zero .pr-size-col__qty {
    color: var(--text-muted);
    font-weight: 400;
}
.pr-size__sync {
    color: var(--success-fg);
    font-size: 10px;
    margin-left: 2px;
}

/* Hammadde satırı: ad solda, rozetler ortada, miktar sağda.
   Uzun tip adları rozette kırpılıyor, tam metin title'da. */
.pr-material {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

    .pr-material:last-child {
        border-bottom: none;
    }

.pr-material__name {
    color: var(--text-heading);
    font-weight: 500;
}

.pr-material__tag {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-material__tag--color {
    background: var(--surface-accent);
    color: var(--primary);
}

.pr-material__qty {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-heading);
}
/* Sürükle-bırak sıralama. Tutamak yalnızca "Tümü" filtresindeyken etkin —
   filtre aktifken aradaki kartlar gizli, sürüklenen kart gizli kartların
   arasına düşerse sıra bozulurdu. */
.pr-drag {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: grab;
    flex-shrink: 0;
}

    .pr-drag:hover {
        color: var(--primary);
    }

    .pr-drag:active {
        cursor: grabbing;
    }

.pr-grid.is-locked .pr-drag {
    opacity: .3;
    cursor: not-allowed;
}

.pr-card.is-dragging {
    opacity: .4;
}

.pr-card.is-over {
    outline: 2px dashed var(--brand-400);
    outline-offset: -2px;
}
/* ============================================================
   25. SLIDE-OVER PANEL
   ============================================================ */
/* Panel yapısı site.css 1976-2140'ta; burada yalnızca ham renkleri ve
   dar panelde bozulan yerleşimi düzeltiyoruz. */
/* site.css 1996'da 480px; içerik o kadar geniş alana yayılınca boşluk fazla duruyor. */
.slideover-panel {
    width: 500px;
}
.slideover-body {
    padding: 18px;
}

.slideover-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
}

    .slideover-section h4 {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-muted);
        letter-spacing: .4px;
        margin-bottom: 10px;
    }

/* site.css 2131'de background:#f9fafb var — gece modunda beyaz kalıyordu. */
.slideover-panel .line-row {
    background: var(--surface-sunken);
    border-color: var(--border);
    padding: 6px 10px;
    margin-bottom: 4px;
    font-size: 13px;
}

.slideover-panel .line-row__label {
    font-weight: 600;
    color: var(--text-heading);
    min-width: 42px;
}

.slideover-panel .line-row__value {
    color: var(--text-secondary);
}

.line-row__remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
}

    .line-row__remove:hover {
        color: var(--danger-fg);
    }

/* Ekleme çubuğu: alanlar ızgarada, buton her zaman tam satır.
   auto-fit denendi — alanlar panel genişliğine göre serbest bölünüyor,
   beden ve hammadde bölümleri farklı yerleşiyordu. */
.slideover-panel .add-row {
    display: grid;
    gap: 8px 10px;
    align-items: end;
    padding: 12px;
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    margin-top: 10px;
}

/* Beden: üç alan yan yana (Beden · SKU · Adet) */
.add-row--size {
    grid-template-columns: 1fr 1.4fr .8fr;
}

/* Hammadde: seçim tam satır, altında miktar ve birim */
.add-row--material {
    grid-template-columns: 1.4fr 1fr;
}

    .add-row--material .add-row__field--wide {
        grid-column: 1 / -1;
    }

.slideover-panel .add-row .btn {
    grid-column: 1 / -1;
    margin-top: 2px;
}

@media (max-width: 560px) {
    .add-row--size {
        grid-template-columns: 1fr 1fr;
    }

        .add-row--size .add-row__field:first-child {
            grid-column: 1 / -1;
        }
}

.add-row__field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .3px;
    margin-bottom: 3px;
}

.slideover-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
}
/* ============================================================
   26. DEPO GİRİŞ / ÇIKIŞ
   ============================================================ */
.dp-filterbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

    .dp-filterbar > input[type="text"] {
        flex: 0 1 240px;
        min-width: 150px;
    }

    .dp-filterbar input[type="date"] {
        width: auto;
    }

.dp-group {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px 18px;
    margin-bottom: 10px;
}

.dp-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
}

.dp-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dp-chevron {
    color: var(--text-secondary);
    display: inline-flex;
    transition: transform .15s ease;
    flex-shrink: 0;
}

.dp-group.is-open .dp-chevron {
    transform: rotate(90deg);
    color: var(--primary);
}

.dp-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading);
}

.dp-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.dp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dp-body {
    display: none;
    margin-top: 12px;
    border-top: 1px solid var(--border);
}

.dp-group.is-open .dp-body {
    display: block;
}

/* Grup içindeki ürün satırı: solda ad + bedenler + hammadde,
   sağda adet ve ödeme. */
.dp-entry {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

    .dp-entry:last-child {
        border-bottom: none;
    }

.dp-entry__main {
    flex: 1;
    min-width: 0;
}

.dp-entry__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
}

.dp-entry__side {
    flex-shrink: 0;
    text-align: right;
}

.dp-entry__qty {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading);
}

.dp-entry__qty--out {
    color: var(--danger-fg);
}

.dp-sizes {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.dp-size {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    white-space: nowrap;
}

    .dp-size b {
        color: var(--text-heading);
        font-weight: 600;
    }

.dp-consumed {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

.dp-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 4px 0;
}

    .dp-foot select {
        width: auto;
        padding: 3px 8px;
        font-size: 12px;
    }

.dp-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading);
    margin: 18px 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .dp-head {
        align-items: flex-start;
    }

    .dp-filterbar > input[type="text"] {
        flex: 1 1 100%;
    }
}
/* Çok ürünlü depo girişi paneli: her ürün bir blok, blokta bedenler ve fiyat. */
.pe-item {
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    padding: 10px 12px;
    margin-bottom: 8px;
}

.pe-item__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pe-item__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
}

.pe-item__remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

    .pe-item__remove:hover {
        color: var(--danger-fg);
    }

.pe-sizes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px;
}

.pe-size {
    background: var(--surface-card);
    border-radius: var(--r-sm);
    padding: 5px 7px;
}

.pe-size__name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-size input {
    text-align: right;
    padding: 3px 5px;
    font-size: 13px;
}

.pe-price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    align-items: end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

    .pe-price label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        margin-bottom: 3px;
    }

.pe-item__total {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    text-align: right;
}

.pe-recipe {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

    .pe-recipe.is-short {
        color: var(--danger-fg);
    }

.pe-grand {
    background: var(--surface-accent);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--primary);
    margin-top: 10px;
}
/* Panel içi iki sütunlu form ızgarası. Dar panelde tek sütuna iner. */
.pe-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

    .pe-form-grid .form-group--wide {
        grid-column: 1 / -1;
    }

@media (max-width: 460px) {
    .pe-form-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   27. NESSTRO SENKRON MODALI
   ============================================================ */
.ns-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.ns-stat {
    flex: 1;
    min-width: 130px;
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    padding: 10px 12px;
}

.ns-stat__label {
    font-size: 12px;
    color: var(--text-secondary);
}

.ns-stat__value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-heading);
    margin-top: 1px;
}

    .ns-stat__value small {
        font-size: 12px;
        font-weight: 400;
    }

.ns-stat--ok {
    background: var(--success-bg);
}

    .ns-stat--ok .ns-stat__label,
    .ns-stat--ok .ns-stat__value {
        color: var(--success-fg);
    }

.ns-stat--warn {
    background: var(--warning-bg);
}

    .ns-stat--warn .ns-stat__label,
    .ns-stat--warn .ns-stat__value {
        color: var(--warning-fg);
    }

.ns-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

    .ns-table th {
        text-align: left;
        padding: 7px 6px;
        font-weight: 500;
        font-size: 12px;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border);
    }

    .ns-table td {
        padding: 9px 6px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        word-break: break-word;
    }

    .ns-table tbody tr:last-child td {
        border-bottom: none;
    }

    .ns-table .form-control,
    .ns-table .form-select {
        width: 100%;
        font-size: 12px;
        padding: 4px 6px;
    }

.ns-row--done {
    opacity: .55;
}

.ns-sku {
    font-size: 12px;
    background: var(--surface-sunken);
    padding: 1px 6px;
    border-radius: var(--r-sm);
    font-family: inherit;
}

/* ============================================================
   28. ÜRÜN SAYIMI
   ============================================================ */
.sc-row {
    cursor: pointer;
}

.sc-chevron {
    display: inline-flex;
    width: 16px;
    color: var(--text-secondary);
    transition: transform .15s ease;
    vertical-align: -3px;
}

.sc-row.is-open .sc-chevron {
    transform: rotate(90deg);
    color: var(--primary);
}

.sc-note {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 20px;
    margin-top: 2px;
}

.sc-diff--plus {
    color: var(--success-fg);
    font-weight: 600;
}

.sc-diff--minus {
    color: var(--danger-fg);
    font-weight: 600;
}

.sc-diff--zero {
    color: var(--text-muted);
}

.sc-detail > td {
    background: var(--surface-sunken);
    padding: 0;
}

.sc-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .sc-detail-table th {
        text-align: left;
        padding: 7px 14px;
        font-weight: 500;
        font-size: 12px;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border);
    }

    .sc-detail-table td {
        padding: 7px 14px;
        border-bottom: 1px solid var(--border);
    }

    .sc-detail-table tbody tr:last-child td {
        border-bottom: none;
    }

/* Sayım modalındaki ürün grubu */
.sc-group {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    margin-top: 10px;
}

.sc-group__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.sc-group__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
}

.sc-group-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

    .sc-group-table th {
        text-align: left;
        padding: 4px 0;
        font-weight: 500;
        font-size: 11px;
        color: var(--text-muted);
        letter-spacing: .3px;
    }

    .sc-group-table td {
        padding: 4px 0;
    }

    .sc-group-table .form-control {
        width: 100px;
        text-align: right;
        padding: 4px 6px;
        font-size: 13px;
    }

.sc-apply-box {
    background: var(--warning-bg);
    border-radius: var(--r-md);
    padding: 10px 12px;
    margin-top: 14px;
}

    .sc-apply-box label {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
        color: var(--warning-fg);
        cursor: pointer;
        margin: 0;
    }

    .sc-apply-box input {
        margin-top: 2px;
        flex-shrink: 0;
    }

/* ============================================================
   30. VAKIF ATÖLYESİ
   ============================================================ */
.vk-filterbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

    .vk-filterbar > input[type="text"] {
        flex: 0 1 280px;
        min-width: 170px;
    }

    /* Tarih kutuları içerik kadar yer kaplasın; form-control genel kuralı
       width:100% verdiği için satırı boydan boya dolduruyorlardı. */
    .vk-filterbar > input[type="date"] {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
    }

    .vk-filterbar .check-line {
        flex: 0 0 auto;
        white-space: nowrap;
        margin: 0;
    }

.vk-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
}

.vk-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading);
    margin: 0;
}

.vk-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vk-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.vk-detail {
    font-size: 12px;
    color: var(--text-secondary);
}

.vk-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.vk-balance {
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin-bottom: 14px;
}

.vk-balance__label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.vk-balance__row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: baseline;
}

.vk-balance__value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-heading);
}

    .vk-balance__value small {
        font-size: 13px;
        font-weight: 400;
        color: var(--text-secondary);
    }

.vk-balance__hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
    max-width: 340px;
    text-align: right;
    line-height: 1.5;
}

.vk-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 18px;
    border-top: 1px solid var(--border);
}

    .vk-foot select {
        width: auto;
        padding: 3px 8px;
        font-size: 12px;
    }

.vk-amount {
    font-weight: 600;
    color: var(--text-heading);
}

    .vk-amount small {
        font-weight: 400;
        color: var(--text-secondary);
    }

@media (max-width: 900px) {
    .vk-balance__hint {
        margin-left: 0;
        text-align: left;
        max-width: 100%;
        margin-top: 6px;
    }
}
/* Vakıf modallarında iki/üç sütunlu form ızgarası. */
.vk-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

.vk-modal-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 520px) {
    .vk-modal-grid,
    .vk-modal-grid--3 {
        grid-template-columns: 1fr;
    }
}

.vk-stock-box {
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    padding: 12px;
    margin-top: 12px;
}
/* ============================================================
   31. DASHBOARD
   Sıfırdan yazıldı. Eski .dash-card / .stat-card ailesiyle
   ilgisi yok, o aile 387. satırda duruyor ve başka ekranlarca
   kullanılıyor olabilir.
   ============================================================ */

.db-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Dikkat şeridi ───────────────────────────────────────── */
.db-alert {
    background: var(--warning-bg);
    border-radius: var(--r-lg);
    padding: 12px 14px;
}

.db-alert-t {
    font-size: 13px;
    color: var(--warning-fg);
    margin-bottom: 8px;
}

.db-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.db-chip {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 5px 10px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: box-shadow .12s;
}

    .db-chip:hover {
        box-shadow: var(--shadow-sm);
    }

.db-chip--d {
    border-color: var(--danger);
    color: var(--danger-fg);
}

.db-chip--w {
    border-color: var(--warning);
    color: var(--warning-fg);
}

/* Sorun yokken şerit sessizleşir */
.db-alert--calm {
    background: var(--surface-raised);
}

    .db-alert--calm .db-alert-t {
        color: var(--text-secondary);
        margin-bottom: 0;
    }

/* ── Üst kutular ─────────────────────────────────────────── */
.db-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.db-stat {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
}

.db-stat-k {
    font-size: 11px;
    color: var(--text-muted);
}

.db-stat-v {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-heading);
    margin: 3px 0;
}

/* Döviz sayısı artsa da kart uzamaz */
.db-stat-h {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Bölüm başlığı ───────────────────────────────────────── */
.db-sec-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.db-sec-t {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-heading);
}

.db-sec-s {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.db-nav {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.db-nav-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

    .db-nav-btn:hover:not(:disabled) {
        border-color: var(--primary);
        color: var(--primary);
    }

    .db-nav-btn:disabled {
        opacity: .35;
        cursor: default;
    }

/* ── Kaydırmalı kartçık şeridi ───────────────────────────── */
.db-strip {
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;
}

    .db-strip::-webkit-scrollbar {
        height: 0;
    }

.db-mini {
    flex: 0 0 210px;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .12s, border-color .12s;
}

    .db-mini:hover {
        border-color: var(--primary);
        box-shadow: var(--shadow-md);
    }

.db-mini-h {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-heading);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .db-mini-h span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* "+3" taşma rozeti — uyarı değil, sadece devamı var bilgisi */
.db-pill {
    flex-shrink: 0;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 10.5px;
    padding: 1px 7px;
    font-weight: 400;
}

.db-spacer {
    flex: 1;
    min-height: 6px;
}

.db-mini-foot {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 6px;
}

/* Hareketsizleri toplayan kesikli kart */
.db-mini--ghost {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--primary);
    font-size: 13px;
}

    .db-mini--ghost:hover {
        background: var(--surface-raised);
    }

/* ── Satır (kartçık ve liste ortak) ──────────────────────── */
.db-r {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    padding: 4px 0;
}

.db-r-k {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-r-v {
    flex-shrink: 0;
    color: var(--text-primary);
}

/* ── Büyük kart ──────────────────────────────────────────── */
.db-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}

.db-card-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.db-card-t {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-heading);
    display: flex;
    align-items: center;
    gap: 7px;
}

.db-card-s {
    font-size: 12px;
    color: var(--text-muted);
    margin: 2px 0 10px;
}

.db-badge {
    background: var(--danger);
    color: var(--text-on-brand);
    border-radius: 999px;
    font-size: 11px;
    padding: 1px 8px;
    font-weight: 400;
}

.db-badge--w {
    background: var(--warning);
}

.db-badge--n {
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

/* ── Liste ───────────────────────────────────────────────── */
.db-li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}

    .db-li:last-of-type {
        border-bottom: none;
    }

.db-li-k {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-li-v {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.db-more {
    display: inline-block;
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    padding-top: 8px;
}

    .db-more:hover {
        text-decoration: underline;
    }

/* ── Son depo girişleri tablosu ──────────────────────────── */
.db-tbl-r {
    display: grid;
    grid-template-columns: 70px 90px 1fr 70px 110px;
    gap: 6px 10px;
    align-items: center;
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

    .db-tbl-r:last-of-type {
        border-bottom: none;
    }

.db-tbl-r--h {
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 6px;
}

.db-tbl-r > .db-num {
    text-align: right;
}

.db-tbl-r > .db-clip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Eşik düzenleme ──────────────────────────────────────── */
.db-thr {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--primary);
}

    .db-thr button {
        background: none;
        border: none;
        color: var(--primary);
        font-size: 12px;
        cursor: pointer;
        padding: 0;
    }

        .db-thr button:hover {
            text-decoration: underline;
        }

    .db-thr input {
        width: 62px;
        padding: 3px 6px;
        font-size: 12px;
        border: 1px solid var(--border-strong);
        border-radius: var(--r-xs);
        background: var(--surface-card);
        color: var(--text-primary);
    }

.db-thr--ro {
    color: var(--text-muted);
}

/* ── Boş durum — kart yerini korur ───────────────────────── */
.db-empty {
    font-size: 13px;
    color: var(--text-muted);
    padding: 18px 0;
    text-align: center;
}

/* ── Izgaralar ───────────────────────────────────────────── */
.db-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}
.db-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
    .db-grid-3 .db-tbl-r {
        grid-template-columns: 46px minmax(0, 1fr) 54px 68px;
        gap: 4px 8px;
        font-size: 12px;
    }

        .db-grid-3 .db-tbl-r > :nth-child(2) {
            display: none;
        }

        .db-grid-3 .db-tbl-r > :nth-child(3) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
.db-main > .db-grid-3 {
    grid-column: 1 / -1;
}
/* ── Renk yardımcıları ───────────────────────────────────── */
.db-d {
    color: var(--danger-fg);
}

.db-w {
    color: var(--warning-fg);
}

.db-s {
    color: var(--success-fg);
}

@media (max-width: 980px) {
    .db-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .db-grid-2,
    .db-grid-3 {
        grid-template-columns: 1fr;
    }

    .db-tbl-r {
        grid-template-columns: 60px 1fr 60px;
    }

        .db-tbl-r > .db-hide-sm {
            display: none;
        }
}
/* Solda atölye ve tedarikçi panelleri alt alta, sağda takvim */
.db-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.db-main-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0; /* ızgara çocuğunun varsayılanı şeridi taşırır */
}

/* Kartçıkları taşıyan tepsi: beyaz kartlar üstünde soluk zemin */
.db-panel {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 14px 16px;
    min-width: 0;
}

    .db-panel .db-sec-h {
        margin-bottom: 12px;
    }

/* Takvim listesi sayfalanıyor; yükseklik sabit kalsın diye alan ayrılıyor */
.db-cal-list {
    min-height: 150px;
}

.db-cal-list-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.db-cal-pg {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

    .db-cal-pg button {
        width: 22px;
        height: 22px;
        padding: 0;
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: var(--r-xs);
        color: var(--text-secondary);
        font-size: 12px;
        line-height: 1;
        cursor: pointer;
    }

        .db-cal-pg button:disabled {
            opacity: .35;
            cursor: default;
        }

@media (max-width: 1100px) {
    .db-main {
        grid-template-columns: 1fr;
    }
}
/* ── Anlaşma ilerleme çubuğu ─────────────────────────────── */
.db-bar {
    height: 4px;
    background: var(--surface-sunken);
    border-radius: 999px;
    overflow: hidden;
    margin: 4px 0 2px;
}

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

.db-bar-k {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* ── Takvim ──────────────────────────────────────────────── */
.db-cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.db-cal-title {
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 96px;
    text-align: center;
}

.db-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    vertical-align: middle;
    margin: 0 3px 0 8px;
}

.db-card-s > .db-dot:first-child {
    margin-left: 0;
}

.db-dot--del {
    background: var(--primary);
}

.db-dot--pay {
    background: var(--warning);
}

.db-dot--od {
    background: var(--danger);
}

.db-cal-dow,
.db-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.db-cal-dow {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding-bottom: 4px;
}

.db-cal-day {
    min-height: 44px;
    border-radius: var(--r-sm);
    padding: 4px 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--surface-raised);
    font-size: 12px;
    color: var(--text-primary);
}

    .db-cal-day[onclick] {
        cursor: pointer;
    }

        .db-cal-day[onclick]:hover {
            background: var(--surface-accent);
        }

.db-cal-day--out {
    background: transparent;
    color: var(--text-muted);
}

.db-cal-day--today .db-cal-n {
    color: var(--primary);
    font-weight: 600;
}

.db-cal-day--on {
    background: var(--surface-selected);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.db-cal-dots {
    display: flex;
    gap: 2px;
    min-height: 6px;
}

    .db-cal-dots .db-dot {
        margin: 0;
    }

.db-cal-list {
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.db-cal-list-h {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 0;
}

@media (max-width: 520px) {
    .db-cal-day {
        min-height: 36px;
        font-size: 11px;
    }
}
/* ── Modal ızgarasında hizalama ──────────────────────────────
   Sabit yükseklik verilmiyor. Izgara hücreleri zaten satırın en
   uzununa göre eşitleniyor; girdiye margin-top:auto verince
   girdiler satır tabanında kendiliğinden hizalanıyor. Etiket bir
   satır da sarsa iki satır da sarsa boşluk oluşmuyor.
   ------------------------------------------------------------ */
.vk-modal-grid .form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .vk-modal-grid .form-group > label {
        line-height: 1.35;
    }

    /* Girdi, etiket ile ipucu arasında sabit kalsın: üstteki boşluğu
   etiket, alttakini ipucu esnetir. Böylece bir sütunun ipucu iki
   satır sarsa da girdiler aynı hizada durur. */
    .vk-modal-grid .form-group > label {
        margin-bottom: auto;
    }

    .vk-modal-grid .form-group > .form-control {
        margin-top: 6px;
    }

    .vk-modal-grid .form-group > small {
        display: block;
        margin-top: 5px;
        margin-bottom: auto;
        line-height: 1.3;
        font-size: 11.5px;
    }

/* ============================================================
   32. SITE.CSS'TEN DEVRALINAN TEKİL SINIFLAR
   ============================================================ */

/* --- Sayfa başlığı --- */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.content-title h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.content-title p {
    color: var(--text-secondary);
    font-size: 14px;
}

.page-actions {
    display: flex;
    gap: 12px;
}

.action-buttons {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.tabs-container {
    margin-top: 20px;
}

/* --- Kenar çubuğu grupları --- */
.nav-group {
    display: flex;
    flex-direction: column;
}

.nav-group-header {
    display: flex;
    align-items: center;
}

.nav-group-main {
    flex: 1;
}

.nav-group-toggle {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .7;
    transition: transform .2s ease, opacity .2s ease;
}

    .nav-group-toggle:hover {
        opacity: 1;
    }

    .nav-group-toggle.open svg {
        transform: rotate(180deg);
    }

/* --- Slideover --- */
.slideover-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 40, 80, .5);
    z-index: 1049;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

    .slideover-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.slideover-panel {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    max-width: 100%;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform .3s ease;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

    .slideover-panel.open {
        transform: translateX(0);
    }

.slideover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: var(--sidebar-bg);
    color: #fff;
    flex-shrink: 0;
}

    .slideover-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: var(--primary-cream);
    }

.slideover-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    transition: background .2s;
}

    .slideover-close:hover {
        background: rgba(255, 255, 255, .1);
    }

.slideover-body {
    flex: 1;
    overflow-y: auto;
}

.slideover-section {
    border-bottom: 1px solid var(--border);
}

    .slideover-section:last-of-type {
        border-bottom: none;
    }

    .slideover-section h4 {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-heading);
        margin-bottom: 14px;
    }

.slideover-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* --- Kartçık şeridi --- */
.summary-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .summary-slider::-webkit-scrollbar {
        display: none;
    }

.slide-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-height: 160px;
    border-radius: var(--r-xl);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.slider-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.slider-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.slider-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--border-strong);
    cursor: pointer;
    transition: all .2s;
}

    .slider-dot.active {
        width: 18px;
        background: var(--text-secondary);
    }

.slider-arrow {
    border: none;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    transition: background .2s;
    flex: 0 0 auto;
}

    .slider-arrow:hover {
        background: var(--surface-selected);
    }

    .slider-arrow:disabled {
        opacity: .3;
        cursor: default;
    }

/* --- Akordeon --- */
.accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--surface-card);
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    background: var(--surface-card);
    transition: background .2s;
}

    .accordion-header:hover {
        background: var(--surface-raised);
    }

.accordion-toggle {
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    transition: transform .2s;
}

.accordion-content {
    display: none;
    padding: 0 20px 20px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-raised);
}

    .accordion-content h4 {
        margin-top: 16px;
        margin-bottom: 12px;
        font-size: 16px;
        color: var(--text-heading);
    }

/* --- Muhasebe görselleri --- */
.card-visual {
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
}

.check-visual {
    background: var(--surface-card);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

    .check-visual::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: var(--border-strong);
    }

/* --- Stok kartçığı --- */
.stock-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 14px;
}

/* --- Tekil --- */
.company-item-form {
    margin: 0;
}

.user-name {
    font-weight: 600;
    color: var(--text-primary);
}

.assortment-price-preview {
    font-size: 12px;
    color: var(--success-fg);
    margin-top: 4px;
    line-height: 1.5;
    min-height: 20px;
}

.mb-3 {
    margin-bottom: 16px;
}

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .content-header {
        flex-direction: column;
    }

    .action-buttons {
        flex-direction: column;
    }

    .slideover-panel {
        width: 100%;
    }
}
/* ============================================================
   33. KALAN BOŞLUK KAPATMA
   ============================================================ */
.tabs-nav {
    margin-bottom: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .tabs-nav::-webkit-scrollbar {
        display: none;
    }

.tab-button {
    text-decoration: none;
    white-space: nowrap;
}

.card {
    overflow: hidden;
    margin-bottom: 24px;
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 11px 14px;
    font-size: 13px;
    margin: 0;
}

    .card-header h2 {
        font-size: 14px;
        font-weight: 600;
        margin: 0 auto 0 0;
    }
.stat-card {
    padding: 20px;
    display: flex;
    align-items: center;
}

.stat-label {
    margin-bottom: 8px;
    letter-spacing: .5px;
}

.stat-value {
    font-size: 28px;
}

.page-header {
    font-weight: 700;
    color: var(--text-heading);
}

.badge {
    letter-spacing: .3px;
}

.empty-state {
    margin-bottom: 16px;
    font-size: 16px;
}

.empty-hint {
    padding: 4px 0;
    margin: 0;
}

.agreement-details {
    margin-bottom: 8px;
}

.agreement-info {
    font-size: 15px;
    color: var(--text-heading);
}

.line-row__value {
    flex: 1;
    font-size: 14px;
}

.line-row__remove {
    border-radius: var(--r-md);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

.modal {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.modal-content {
    animation: modalSlideIn .3s ease;
}

.modal-header {
    font-weight: 600;
    color: var(--text-heading);
}

.modal-footer {
    align-items: center;
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    transition: background .2s;
}

.slideover-panel {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    max-width: 100%;
    z-index: 1050;
    transition: transform .3s ease;
    flex-direction: column;
}

.slideover-body {
    flex: 1;
    overflow-y: auto;
}

.slideover-section {
    border-bottom: 1px solid var(--border);
}

.auth-page,
.company-selection-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-container,
.company-selection-container {
    width: 100%;
}

.auth-card,
.company-selection-card {
    animation: authSlideUp .5s ease;
}

.company-selection-header {
    font-weight: 700;
}

.company-list {
    display: grid;
}

.company-item {
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

.company-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.company-details {
    font-weight: 600;
}

.logout-link {
    text-decoration: none;
    font-weight: 600;
}

@keyframes authSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Pasif kullanıcı satırı ───────────────────────────── */
/* Silinmiş değil, giriş yapamayan hesap. Satır soluk ama
   okunur kalmalı — işlem butonları hâlâ kullanılabilir. */
.row-inactive td {
    opacity: .55;
}

.row-inactive:hover td {
    opacity: .85;
}

.badge-inactive {
    background: #f1f3f5;
    color: #868e96;
    border: 1px solid #dee2e6;
    margin-left: .4rem;
}
.badge-super {
    background: #fff4e6;
    color: #d9480f;
    border: 1px solid #ffd8a8;
    margin-left: .4rem;
}

.page-sub {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}
.nestro-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.nestro-kpis .stat-card { padding: 14px 16px; }
@media (max-width: 900px) {
    .nestro-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ai-page {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 160px);
}
.ai-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    align-items: stretch;
    flex: 1;
}
@media (max-width: 960px) {
    .ai-layout { grid-template-columns: 1fr; }
}
.ai-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.ai-head__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ai-title {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: var(--text-heading);
    letter-spacing: -.02em;
}
.ai-sub {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}
.ai-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    min-height: 520px;
    overflow: hidden;
}
.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface-raised);
}
.ai-bubble {
    max-width: 78%;
    padding: 12px 14px;
    border-radius: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
}
.ai-bubble--bot {
    align-self: flex-start;
    background: var(--surface-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
}
.ai-bubble--user {
    align-self: flex-end;
    background: var(--brand-500);
    color: var(--text-on-brand);
}
.ai-bubble__meta {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    opacity: .7;
}
.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.ai-chip {
    border: 1px solid var(--border);
    background: var(--surface-accent);
    color: var(--text-heading);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}
.ai-chip:hover { border-color: var(--brand-400); }
.ai-composer {
    display: flex;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid var(--border);
    background: var(--surface-card);
}
.ai-input {
    flex: 1;
    resize: none;
    min-height: 44px;
    max-height: 140px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    background: var(--surface-raised);
    color: var(--text-primary);
}
.ai-send { white-space: nowrap; }
.ai-bubble--bot { max-width: 100%; }
.ai-bubble__text p { margin: 0 0 8px; }
.ai-bubble__text p:last-child { margin-bottom: 0; }
.ai-h {
    margin: 14px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading);
}
.ai-hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 12px 0;
}
.ai-list {
    margin: 6px 0 10px 18px;
    padding: 0;
}
.ai-list li { margin: 4px 0; }
.ai-table-wrap {
    margin: 10px 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: auto;
    background: var(--surface-card);
    box-shadow: 0 1px 0 rgba(20, 40, 80, .04);
}
.ai-table {
    margin: 0;
    min-width: 480px;
}
.ai-table thead tr {
    background: var(--brand-900);
    color: var(--text-on-brand);
}
.ai-table th {
    color: var(--text-on-brand);
    border-bottom: 0;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}
.ai-table tbody tr:nth-child(even) { background: var(--surface-raised); }
.ai-table td:last-child,
.ai-table th:last-child { text-align: right; }
.ai-bubble--bot code {
    background: var(--surface-accent);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
}
.ai-memory {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    min-height: 280px;
    overflow: hidden;
}
.ai-memory__head {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
}
.ai-memory__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading);
}
.ai-memory__hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}
.ai-memory__list {
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-memory__empty {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}
.ai-memory__item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--surface-raised);
}
.ai-memory__item.is-pinned {
    border-color: var(--brand-400);
}
.ai-memory__meta {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.ai-memory__text {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-primary);
}
.ai-memory__actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.ai-memory__btn {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    padding: 0;
    cursor: pointer;
}
.ai-memory__btn:hover { color: var(--text-heading); }
.ai-memory__btn--danger:hover { color: #b42318; }
.ai-memory__form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border);
}
.ai-memory__input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 12px;
    background: var(--surface-raised);
    color: var(--text-primary);
}


/* Çekler tablosu — Tedarikçi/Atölye sütununu sabit tut */
#checksTable th:nth-child(4) {
    width: 96px;
    white-space: normal;
}

#checksTable td:nth-child(4) {
    max-width: 96px;
}

    #checksTable td:nth-child(4) .badge {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
#checksTable {
    table-layout: fixed;
}

    #checksTable th,
    #checksTable td {
        overflow-wrap: anywhere;
    }

.slideover-panel {
    display: flex;
    background: var(--surface-card);
    border-left: 1px solid var(--border);
}

/* Modal footer her zaman görünür kalsın */
.modal-content {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
}

.modal-footer {
    flex-shrink: 0;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}