/* DURMAN YAPI TEKLİF OLUŞTURMA ARACI - PREMIUM CSS */

/* 1. DEĞİŞKENLER VE TEMA SİSTEMİ */
:root {
    /* Genel Tipografi */
    --font-heading: 'Outfit', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Gündüz Teması (Default) */
    --bg-app: #f1f5f9;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --border-color: #e2e8f0;
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    
    --primary-color: #8b1d1d;
    --primary-hover: #701616;
    --primary-glow: rgba(139, 29, 29, 0.15);
    
    --accent-color: #9bbb59; /* Orijinal Durman Yapı Yeşili */
    --accent-hover: #86a34d;
    
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 20px rgba(139, 29, 29, 0.05);
    
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    
    /* Teklif Dokümanı Sabit Renkleri (Görseldeki şablona sadık kalmak için tema dışıdır) */
    --doc-bg: #ffffff;
    --doc-text-main: #000000;
    --doc-text-secondary: #333333;
    --doc-border: #808080;
    --doc-header-bg: #9bbb59; /* Durman Yeşili */
    --doc-accent-red: #8b1d1d;
}

/* Karanlık Tema */
[data-theme="dark"] {
    --bg-app: #424242;
    --bg-sidebar: #4c4c4c;
    --bg-card: #545454;
    --border-color: #636363;
    --border-strong: #787878;
    
    --text-primary: #ffffff;
    --text-secondary: #e2e8f0;
    --text-muted: #b8c2cc;
    
    --primary-color: #b03030;
    --primary-hover: #d23f3f;
    --primary-glow: rgba(176, 48, 48, 0.25);
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 25px rgba(176, 48, 48, 0.1);
}

/* 2. SIFIRLAMALAR & TEMEL STİLLER */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-app);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.5;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Scrollbar Özelleştirme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* 3. UYGULAMA DÜZENİ */
.app-container {
    display: grid;
    grid-template-columns: 380px 1fr;
    grid-template-rows: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 4. SOL PANEL (SIDEBAR) */
.sidebar {
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 10;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    min-height: 0;
    max-height: 100%;
}

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

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

.brand-logo {
    flex-shrink: 0;
}

.brand-text h1 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    line-height: 1.1;
}

.brand-text span {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Tab Yapısı */
.tabs {
    display: flex;
    padding: 12px 20px 0 20px;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
}

.tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 10px 4px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.tab-btn i {
    width: 14px;
    height: 14px;
}

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

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

/* Tab İçerik Alanı */
.tab-content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    min-height: 0;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* KARTLAR */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card.edit-mode-active {
    background-color: rgba(155, 187, 89, 0.22) !important;
    border-color: rgba(155, 187, 89, 0.7) !important;
    box-shadow: 0 0 18px rgba(155, 187, 89, 0.2) !important;
}

.card-collapsible-content {
    max-height: 1000px;
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1), opacity 0.25s ease, margin-top 0.3s ease;
}

.collapsible-card.collapsed .card-collapsible-content {
    max-height: 0;
    opacity: 0;
    margin-top: 0 !important;
    pointer-events: none;
}

.collapsible-card.collapsed .collapse-icon {
    transform: rotate(180deg);
}

.card h3 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.card h3 i {
    color: var(--primary-color);
    width: 16px;
    height: 16px;
}

.card-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

/* FORM ELEMENTLERİ */
.form-group {
    margin-bottom: 12px;
    position: relative;
}

.form-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

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

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 8px 12px;
    background-color: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    outline: none;
    transition: all 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

textarea {
    resize: vertical;
    min-height: 80px;
}

.section-subtitle {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    margin: 15px 0 10px 0;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.section-subtitle i {
    color: var(--primary-color);
    width: 14px;
    height: 14px;
}

/* SÜRÜKLE BIRAK YÜKLEME ALANI */
.upload-area {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
    background-color: var(--bg-app);
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
    transition: all 0.2s ease;
}

.upload-area:hover,
.upload-area.dragover {
    border-color: var(--primary-color);
    background-color: var(--primary-glow);
}

.file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-icon {
    width: 32px;
    height: 32px;
    color: var(--primary-color);
    margin-bottom: 8px;
    opacity: 0.8;
}

.upload-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.upload-text span {
    color: var(--primary-color);
    font-weight: 700;
}

.file-info {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Fotoğraf Önizleme */
.preview-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.preview-canvas-container canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.btn-remove-img {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(239, 68, 68, 0.9);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 10;
    transition: all 0.2s ease;
}

.btn-remove-img:hover {
    background-color: rgb(239, 68, 68);
    transform: scale(1.1);
}

.btn-remove-img i {
    width: 14px;
    height: 14px;
}

.text-input-area {
    margin-bottom: 15px;
}

.text-input-area label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--text-secondary);
}

/* API Bilgilendirme Kutusu */
.card-alert {
    display: flex;
    gap: 12px;
    border-left: 4px solid var(--warning-color);
    background-color: rgba(245, 158, 11, 0.05);
}

.alert-icon {
    color: var(--warning-color);
    flex-shrink: 0;
}

.alert-icon i {
    width: 20px;
    height: 20px;
}

.alert-body h4 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.alert-body p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.btn-outline {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-outline:hover {
    border-color: var(--text-secondary);
    background-color: var(--bg-app);
}

/* HAP BUTONLAR VE LİNKLER */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn i {
    width: 16px;
    height: 16px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(139, 29, 29, 0.2);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--bg-app);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background-color: var(--border-color);
}

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

.btn-sm {
    padding: 5px 10px;
    font-size: 0.75rem;
}

.btn-icon {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background-color: var(--bg-app);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.btn-icon i {
    width: 16px;
    height: 16px;
}

/* TASLAKLAR LİSTESİ */
.drafts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 350px;
    overflow-y: auto;
}

.empty-drafts {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}

.empty-drafts i {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    opacity: 0.5;
}

.empty-drafts p {
    font-size: 0.75rem;
}

.draft-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-app);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.draft-item:hover {
    border-color: var(--primary-color);
    transform: translateX(2px);
}

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

.draft-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    display: flex;
    gap: 10px;
}

.draft-actions {
    display: flex;
    gap: 4px;
}

.btn-delete-draft {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.btn-delete-draft:hover {
    opacity: 1;
    background-color: rgba(239, 68, 68, 0.1);
}

.btn-delete-draft i {
    width: 14px;
    height: 14px;
}


/* 5. SAĞ PANEL: CANLI ÖNİZLEME ALANI */
.preview-area {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Toolbar */
.preview-toolbar {
    background-color: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    flex-shrink: 0;
    z-index: 5;
    box-shadow: var(--shadow-sm);
}

.preview-status {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-status i {
    width: 16px;
    height: 16px;
    color: var(--success-color);
}

.toolbar-actions {
    display: flex;
    gap: 8px;
}

/* Doküman Kaydırma ve Çevre Kapsayıcı */
.document-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* ASIL A4 BELGE ŞABLONU (21cm x 29.7cm) */
.document {
    background-color: var(--doc-bg);
    color: var(--doc-text-main);
    width: 210mm;
    min-height: 297mm;
    padding: 20mm 15mm;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    font-size: 12pt;
    line-height: 1.4;
    transition: box-shadow 0.3s ease;
}

[data-theme="dark"] .document {
    /* Karanlık modda bile önizleme gerçek beyaz A4 kağıt gibi görünmelidir */
    border-color: #475569;
}

/* Antetli Başlık Yapısı */
.doc-header {
    display: grid;
    grid-template-columns: 240px 1fr 180px;
    align-items: center;
    margin-bottom: 8mm;
    padding-bottom: 4mm;
    border-bottom: 1px solid var(--doc-border);
}

.doc-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.doc-brand-text h2 {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 900;
    color: #333333;
    line-height: 0.9;
    letter-spacing: 0.5px;
}

.doc-brand-text h3 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #555555;
    letter-spacing: 2px;
}

.doc-title-container {
    text-align: center;
}

.doc-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: #000000;
    letter-spacing: 1px;
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.doc-meta {
    text-align: right;
    font-size: 9.5pt;
    color: var(--doc-text-secondary);
}

.doc-date {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--doc-header-bg) !important; /* Yeşil arka plan */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color: #ffffff !important; /* Beyaz yazı */
    font-weight: 700; /* Bold */
    border-radius: 20px; /* Yuvarlak oval köşeler (Badge) */
    margin-bottom: 5px;
    font-size: 9.5pt;
}

.doc-validity {
    font-size: 8.5pt;
    font-style: italic;
}

/* Müşteri Hitap */
.doc-client {
    font-weight: 600;
    margin-bottom: 6mm;
    font-size: 12.5pt;
}

.editable-field {
    outline: none;
    border-bottom: 1px dashed transparent;
    padding: 1px 4px;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.editable-field:hover {
    background-color: rgba(155, 187, 89, 0.15);
    border-bottom-color: var(--accent-color);
}

.editable-field:focus {
    background-color: rgba(155, 187, 89, 0.25);
    border-bottom-color: var(--primary-color);
}

/* DOKÜMAN MALZEME TABLOSU */
.doc-table-container {
    flex: 1;
    margin-bottom: 6mm;
}

.doc-table {
    width: 100%;
    border-collapse: separate; /* Yuvarlak köşelerin çalışabilmesi için separate yapıyoruz */
    border-spacing: 0 5px; /* Satırlar arasında hafif boşluk bırakarak oval köşeleri belirginleştirir */
    font-size: 10.5pt;
}

.doc-table th,
.doc-table td {
    border: none !important; /* Tablo sınırlarını gösterme */
    padding: 6px 12px;
    vertical-align: middle;
}

.doc-table th {
    background-color: var(--doc-header-bg) !important; /* Baskıda renk çıkması için */
    color: #ffffff !important; /* Başlık metni beyaz */
    font-weight: 700; /* Bold */
    text-align: left;
    height: 34px;
}

/* ÜST BAŞLIK YEŞİL VE DÖRT KÖŞESİ DAHA OVAL (16px) */
.doc-table thead th:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}
.doc-table thead th:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* BİR SATIR BEYAZ BİR SATIR HAFİF GRİ (Arka plan rengini td elemanlarına uygulayarak ovalliğin görünmesini sağlıyoruz) */
.doc-table tbody tr:nth-child(even) td {
    background-color: #f4f6f8 !important; /* Hafif gri */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.doc-table tbody tr:nth-child(odd) td {
    background-color: #ffffff !important; /* Beyaz */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* GRİ SATIRLARIN DÖRT KÖŞESİ BELİRGİN OVAL (12px) */
.doc-table tbody tr:nth-child(even) td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.doc-table tbody tr:nth-child(even) td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* EN SAĞDAKİ COL-ACTIONS NO-PRINT SÜTUNU BASKIDA VE RESİM ÜRETİLİRKEN GİZLENDİĞİ İÇİN,
   BASKIDA VEYA JPG ÇIKTISINDA EN SAĞ SÜTUN COL-TOTAL OLUR.
   O YÜZDEN COL-TOTAL'A DA SAĞ YUVARLAK KÖŞE VERİLİR. */
@media print {
    .doc-table thead th.col-total {
        border-top-right-radius: 16px !important;
        border-bottom-right-radius: 16px !important;
    }
    .doc-table tbody tr:nth-child(even) td.col-total {
        border-top-right-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }
}

.is-generating-image .doc-table thead th.col-total {
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

.is-generating-image .doc-table tbody tr:nth-child(even) td.col-total {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Sütun Genişlikleri */
.col-name { width: auto; min-width: 180px; }
.col-code { width: 10%; text-align: center; }
.col-qty { width: 8%; text-align: right; }
.col-unit { width: 10%; text-align: center; }
.col-price { width: 15%; text-align: right; }
.col-total { width: 18%; text-align: right; }
.col-actions { width: 40px; text-align: center; }

.doc-table td input {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-align: inherit;
    outline: none;
}

.doc-table td input:focus {
    background-color: rgba(155, 187, 89, 0.2);
    box-shadow: none;
}

.doc-table td.col-qty,
.doc-table td.col-unit,
.doc-table td.col-price,
.doc-table td.col-total {
    text-align: right;
}

.doc-table td.col-code,
.doc-table td.col-unit {
    text-align: center;
}

.doc-table tbody tr:hover {
    background-color: rgba(155, 187, 89, 0.05);
}

.btn-row-action {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--danger-color);
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.2s ease;
}

.doc-table tr:hover .btn-row-action {
    opacity: 0.7;
}

.btn-row-action:hover {
    opacity: 1 !important;
    background-color: rgba(239, 68, 68, 0.1);
}

.btn-row-action i {
    width: 14px;
    height: 14px;
}

/* Tablo Alt Bilgileri */
.doc-footer-summary {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    margin-top: auto; /* Sayfanın en altına doğru iter */
    padding-top: 4mm;
    border-top: 1px dashed var(--doc-border);
    margin-bottom: 6mm;
}

/* Sol Yetkili & Banka Bilgileri */
.signer-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 4mm;
}

.signer-name {
    font-weight: 700;
    font-size: 11pt;
}

.signer-phone,
.signer-vd {
    font-size: 10pt;
    color: var(--doc-text-secondary);
}

.bank-details {
    display: flex;
    flex-direction: column;
    font-size: 9.5pt;
    border-left: 3px solid var(--accent-color);
    padding-left: 8px;
}

.iban-number {
    font-weight: 700;
    font-family: monospace;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}

.bank-names {
    display: flex;
    gap: 15px;
    color: var(--doc-text-secondary);
}

/* Sağ Toplamlar Tablosu */
.summary-table {
    width: 100%;
    border-collapse: separate; /* Oval köşeler için ayırıyoruz */
    border-spacing: 0 4px;
    font-size: 11pt;
}

.summary-table td {
    padding: 4px 8px;
    border: none !important; /* Çizgileri tamamen gizle */
}

.summary-table td.text-right {
    text-align: right;
    font-weight: 700;
}

.summary-table tr.grand-total-row {
    font-size: 12pt;
    font-weight: 800;
    color: #ffffff !important; /* Beyaz yazı */
}

.summary-table tr.grand-total-row td {
    padding: 8px 12px;
    background-color: var(--doc-header-bg) !important; /* Yeşil arka plan */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color: #ffffff !important; /* Beyaz yazı */
    font-weight: 800; /* Bold */
    border: none !important;
}

/* GENEL TOPLAM BARININ DÖRT KÖŞESİ OVAL (12px) */
.summary-table tr.grand-total-row td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.summary-table tr.grand-total-row td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

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

/* Alt İletişim Bilgileri */
.doc-footer {
    text-align: center;
    border-top: 1px solid var(--doc-border);
    padding-top: 3mm;
    font-size: 9pt;
    color: var(--doc-text-secondary);
}

.doc-footer-contact {
    display: flex;
    justify-content: center;
    gap: 30px;
    font-weight: 700;
    margin-bottom: 1mm;
}

.doc-footer-address {
    font-style: italic;
}


/* 6. MODAL DIŞ GÖRÜNÜMÜ */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-backdrop.active {
    display: flex;
    opacity: 1;
}

.modal {
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 500px;
    max-width: 90%;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-backdrop.active .modal {
    transform: scale(1);
}

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

.modal-header h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.modal-header h3 i {
    color: var(--primary-color);
}

.modal-close-btn {
    border: none;
    background: none;
    cursor: pointer;
}

.modal-body {
    padding: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.modal-body p {
    margin-bottom: 15px;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon input {
    padding-right: 40px;
}

.btn-icon-inside {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
}

.btn-icon-inside:hover {
    color: var(--text-primary);
}

.input-help {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 5px;
    line-height: 1.3;
}

.alert-info-box {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background-color: var(--bg-app);
    border-left: 3px solid var(--primary-color);
    margin-top: 15px;
}

.alert-info-box i {
    color: var(--primary-color);
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.alert-info-box p {
    font-size: 0.75rem;
    margin: 0;
    color: var(--text-secondary);
}

.alert-info-box a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.alert-info-box a:hover {
    text-decoration: underline;
}

.api-key-status {
    font-size: 0.75rem;
    margin-top: 8px;
    font-weight: 600;
}

.api-key-status.success { color: var(--success-color); }
.api-key-status.error { color: var(--danger-color); }

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-app);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}


/* 7. BASKI SİSTEMİ (PDF OLUŞTURMA İÇİN KRİTİK ALAN) */
@media print {
    /* Tüm tarayıcı arayüzü ve butonları gizle */
    .sidebar,
    .preview-toolbar,
    .no-print,
    .col-actions,
    .btn-row-action {
        display: none !important;
    }
    
    /* Sayfa Ayarları */
    @page {
        size: A4 portrait;
        margin: 0; /* Tarayıcı üst/alt yazılarını kaldırmak için */
    }
    
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .app-container {
        display: block !important;
        height: auto !important;
        width: 100% !important;
    }

    .preview-area {
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }

    .document-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .document {
        width: 100% !important; /* Sayfa genişliğini tam doldurarak kenar boşluklarını sıfırlar */
        max-width: 100% !important;
        box-sizing: border-box !important;
        height: 297mm !important; /* Tam A4 yüksekliği */
        min-height: 297mm !important;
        padding: 20mm 15mm !important; /* İç dolgu kenarlık boşluğunu korur */
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        position: relative !important;
        page-break-after: avoid;
        page-break-before: avoid;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        transform: none !important;
        transform-origin: initial !important;
    }

    /* Tablo th arka plan renginin baskıda zorla çıkmasını sağla */
    .doc-table th {
        background-color: var(--doc-header-bg) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color: #ffffff !important; /* Beyaz metin */
    }

    /* Genel Toplam hücresel boyama ve yazı rengi (Oval baskı için) */
    .summary-table tr.grand-total-row td {
        background-color: var(--doc-header-bg) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color: #ffffff !important; /* Beyaz metin */
    }

    /* Düzenlenebilir alanların alt kesik çizgilerini kaldır */
    .editable-field {
        border-bottom: none !important;
        padding: 0 !important;
        background-color: transparent !important;
    }

    /* Girdilerin sınırlarını ve arka planlarını kaldır */
    .doc-table td input {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* 8. MOBİL VE RESPONSIVE UYUMLULUK */
@media (max-width: 1024px) {
    .app-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        overflow: auto;
    }

    .sidebar {
        height: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        overflow: visible;
    }

    .preview-area {
        height: auto;
    }

    .document-wrapper {
        padding: 15px;
        overflow-x: auto;
    }

    .document {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .document {
        /* Dinamik mobil ölçeklendirme JS motoru tarafından yönetilir */
    }
}

/* YÜKLENEN ÖZEL LOGO STİLİ */
.brand-logo-custom {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* JPG RESİM OLUŞTURURKEN DÜZENLEME ÖGELERİNİ GİZLE */
.is-generating-image .editable-field {
    border-bottom: none !important;
    background-color: transparent !important;
}
.is-generating-image .doc-table td input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.is-generating-image .col-actions, 
.is-generating-image .btn-row-action,
.is-generating-image .row-add-item-action,
.is-generating-image .btn-save-price-catalog,
.is-generating-image .no-print {
    display: none !important;
}
.is-generating-image {
    box-shadow: none !important;
    border: none !important;
}

/* Geçici görsel metin stili (kesilmeyi önler) */
.temp-print-text {
    display: inline-block;
    width: 100%;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-align: inherit;
    vertical-align: middle;
    padding: 2px 0;
}

/* Chrome, Safari, Edge ve Opera için number input yukarı/aşağı oklarını (spinners) göster */
.doc-table td input[type=number]::-webkit-outer-spin-button,
.doc-table td input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: auto;
    margin: 0 2px;
}

/* Firefox için number input oklarını göster */
.doc-table td input[type=number] {
    -moz-appearance: number-input;
}

/* ========================================================
   YENİ PREMIUM EKLEMELER: KATALOG, GLASSMORPHISM & SPINNER
   ======================================================== */

/* Hızlı Ürün Kataloğu Stilleri */
.catalog-card {
    border-left: 4px solid var(--accent-color) !important;
}

.catalog-items::-webkit-scrollbar {
    width: 4px;
}
.catalog-items::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}
.catalog-items::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.catalog-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background-color: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.catalog-item:hover {
    border-color: var(--primary-color);
    background-color: var(--bg-card);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--primary-glow);
}

.catalog-item-info {
    flex: 1;
    min-width: 0;
    padding-right: 8px;
}

.catalog-item-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalog-item-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.catalog-item-add {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.catalog-item:hover .catalog-item-add {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

/* Modaller için Premium Glassmorphism (Cam Efekti) Güncellemeleri */
.modal-backdrop {
    background-color: rgba(9, 13, 22, 0.45) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
}

.modal {
    background-color: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.18) !important;
}

[data-theme="dark"] .modal {
    background-color: rgba(76, 76, 76, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45) !important;
}

.modal-header {
    background-color: rgba(255, 255, 255, 0.3);
}

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

.modal-footer {
    background-color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .modal-footer {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* CSS Yükleme Spinner Animasyonu */
.spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
}

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

/* Hover glow ve Premium Buton Mikro-animasyonları */
.btn {
    position: relative;
    overflow: hidden;
}

.btn:active {
    transform: scale(0.97) !important;
}

.tab-btn {
    position: relative;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: all 0.25s ease;
    transform: translateX(-50%);
}

.tab-btn:hover::after,
.tab-btn.active::after {
    width: 80%;
}


/* ========================================================
   OTOMATİK TAMAMLAMA (AUTOCOMPLETE) STİLLERİ
   ======================================================== */

.doc-table td {
    position: relative; /* Öneri listesinin düzgün hizalanması için */
}

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    width: 100%;
    min-width: 280px;
    max-height: 220px;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    display: none;
    flex-direction: column;
    padding: 4px 0;
    box-sizing: border-box;
    transition: opacity 0.15s ease;
}

[data-theme="dark"] .autocomplete-suggestions {
    background-color: rgba(76, 76, 76, 0.98);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.45);
}

.autocomplete-suggestion {
    padding: 8px 12px;
    font-size: 0.76rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    transition: background-color 0.15s ease, color 0.15s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
}

[data-theme="dark"] .autocomplete-suggestion {
    border-bottom-color: rgba(255, 255, 255, 0.02);
}

.autocomplete-suggestion:last-child {
    border-bottom: none;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.highlighted {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.autocomplete-suggestion-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.autocomplete-suggestion-code {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--primary-color);
}

.autocomplete-suggestion:hover .autocomplete-suggestion-code,
.autocomplete-suggestion.highlighted .autocomplete-suggestion-code {
    color: #ffffff;
}

.autocomplete-suggestion-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.autocomplete-suggestion:hover .autocomplete-suggestion-name,
.autocomplete-suggestion.highlighted .autocomplete-suggestion-name {
    color: rgba(255, 255, 255, 0.8);
}

.autocomplete-suggestion-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    margin-left: 10px;
}

.autocomplete-suggestion-price {
    font-weight: 700;
    color: var(--text-primary);
}

.autocomplete-suggestion:hover .autocomplete-suggestion-price,
.autocomplete-suggestion.highlighted .autocomplete-suggestion-price {
    color: #ffffff;
}

.autocomplete-suggestion-unit {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.autocomplete-suggestion:hover .autocomplete-suggestion-unit,
.autocomplete-suggestion.highlighted .autocomplete-suggestion-unit {
    color: rgba(255, 255, 255, 0.7);
}

.save-new-product-btn:hover {
    background-color: var(--success-color) !important;
    color: #ffffff !important;
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}
.new-product-item {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.new-product-item:hover {
    border-color: var(--warning-color) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
}

/* ==========================================================================
   20. PREMIUM NAVBAR STİLLERİ
   ========================================================================== */
body.has-navbar .app-container {
    height: calc(100vh - 64px);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    height: 64px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: all 0.3s ease;
}

[data-theme="dark"] .navbar {
    background: rgba(76, 76, 76, 0.92);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar-brand svg {
    flex-shrink: 0;
}

.navbar-brand h1 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    line-height: 1.1;
}

.navbar-brand span {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    display: block;
}

.navbar-menu {
    display: flex;
    gap: 15px;
}

.navbar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.navbar-item i {
    width: 16px;
    height: 16px;
}

.navbar-item:hover {
    color: var(--primary-color);
    background: rgba(139, 29, 29, 0.04);
}

[data-theme="dark"] .navbar-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--primary-hover);
}

/* Custom Navigation Menu Brands (Distinctive Branding Colors) */

/* 1. Müşteriler (Yellow/Gold) */
.navbar-item[href="index.html"]:hover {
    color: #eab308 !important;
    background: rgba(234, 179, 8, 0.08) !important;
}
.navbar-item[href="index.html"].active {
    color: #ffffff !important;
    background: #eab308 !important;
    box-shadow: 0 4px 10px rgba(234, 179, 8, 0.25) !important;
}

/* 2. Teklifler (Cyan/Turquoise) */
.navbar-item[href="teklifler.html"]:hover, .navbar-item[href="teklif_olustur.html"]:hover {
    color: #06b6d4 !important;
    background: rgba(6, 182, 212, 0.08) !important;
}
.navbar-item[href="teklifler.html"].active, .navbar-item[href="teklif_olustur.html"].active {
    color: #ffffff !important;
    background: #06b6d4 !important;
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.25) !important;
}

/* 3. Stoklar (Blue) */
.navbar-item[href="urunler.html"]:hover {
    color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.08) !important;
}
.navbar-item[href="urunler.html"].active {
    color: #ffffff !important;
    background: #3b82f6 !important;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25) !important;
}

/* 4. Faturalar (Orange) */
.navbar-item[href="faturalar.html"]:hover, .navbar-item[href="fatura.html"]:hover {
    color: #f97316 !important;
    background: rgba(249, 115, 22, 0.08) !important;
}
.navbar-item[href="faturalar.html"].active, .navbar-item[href="fatura.html"].active {
    color: #ffffff !important;
    background: #f97316 !important;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.25) !important;
}

/* 5. Tahsilatlar (Light Green) */
.navbar-item[href="tahsilatlar.html"]:hover {
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.08) !important;
}
.navbar-item[href="tahsilatlar.html"].active {
    color: #ffffff !important;
    background: #10b981 !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25) !important;
}

/* 6. Raporlar (Magenta/Purple) */
.navbar-item[href="raporlar.html"]:hover {
    color: #d946ef !important;
    background: rgba(217, 70, 239, 0.08) !important;
}
.navbar-item[href="raporlar.html"].active {
    color: #ffffff !important;
    background: #d946ef !important;
    box-shadow: 0 4px 10px rgba(217, 70, 239, 0.25) !important;
}

/* 7. İşlemler (Red/Crimson) */
.navbar-item[href="islemler.html"]:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.08) !important;
}
.navbar-item[href="islemler.html"].active {
    color: #ffffff !important;
    background: #ef4444 !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25) !important;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ==========================================================================
   21. ÜRÜN YÖNETİM SAYFASI STİLLERİ
   ========================================================================== */
.product-manager-container {
    display: grid;
    grid-template-columns: 380px 1fr;
    grid-template-rows: 100%;
    height: calc(100vh - 64px);
    overflow: hidden;
}

.product-table-wrapper {
    background-color: var(--bg-card);
    border-left: 1px solid var(--border-color);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

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

.product-search-box {
    display: flex;
    gap: 10px;
    flex: 1;
    max-width: 450px;
}

.product-search-box input {
    font-weight: 500;
}

.product-table-container {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-sidebar);
}

.manage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.manage-table th {
    background-color: var(--bg-app);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 700;
    padding: 14px 18px;
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 5;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.manage-table td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

.manage-table tr:hover td {
    background-color: rgba(139, 29, 29, 0.02);
}

[data-theme="dark"] .manage-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.01);
}

.inline-edit-input {
    width: 100% !important;
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--bg-app) !important;
    border: 1px solid var(--border-color) !important;
    font-weight: 600;
}

.inline-edit-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px var(--primary-glow) !important;
    background-color: var(--bg-sidebar) !important;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
    margin-top: 15px;
}

.pagination-info {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-page-numbers {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pagination-page-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-card);
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-page-btn:hover {
    color: var(--primary-color);
    border-color: rgb(var(--primary-rgb) / 0.28);
    background: var(--primary-soft);
}

.pagination-page-btn.active {
    color: #ffffff;
    border-color: var(--primary-color);
    background: var(--primary-color);
    box-shadow: 0 5px 13px rgb(var(--primary-rgb) / 0.22);
}

.pagination-ellipsis {
    min-width: 18px;
    text-align: center;
    color: var(--text-muted);
    font-weight: 800;
}

/* Premium Badges */
.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-unit {
    background-color: rgba(155, 187, 89, 0.12);
    color: #6a8235;
}

[data-theme="dark"] .badge-unit {
    background-color: rgba(155, 187, 89, 0.22);
    color: #a7c569;
}

/* Action Buttons */
.btn-table-action {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-sidebar);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-table-action:hover {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--primary-glow);
}

.btn-table-action.btn-delete:hover {
    background: var(--danger-color);
    color: #ffffff;
    border-color: var(--danger-color);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2);
}

.btn-table-action i {
    width: 14px;
    height: 14px;
}

/* Export/Import triggers */
.import-export-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Toast Notification */
.toast-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1050;
    pointer-events: none;
}

.toast-notification {
    pointer-events: auto;
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    font-size: 0.88rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-left: 4px solid var(--primary-color);
}

[data-theme="dark"] .toast-notification {
    background: rgba(76, 76, 76, 0.98);
    border-left: 4px solid var(--primary-color);
}

.toast-notification.show {
    transform: translateY(0);
    opacity: 1;
}

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

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

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

.toast-notification i {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   22. MOBİL VE TABLET UYUMLULUK DÜZENLEMELERİ (RESPONSIVE)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Ana Yerleşim Düzenlemeleri */
    .product-manager-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto !important;
        overflow: auto;
    }
    
    body.has-navbar .app-container,
    body.has-navbar .product-manager-container {
        height: auto !important;
    }
    
    .product-table-wrapper {
        height: auto;
        overflow: visible;
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding: 18px;
    }
    
    .product-table-container {
        overflow-x: auto !important; /* Mobil ve tabletlerde taşmayı önlemek için yatay kaydırma */
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-md);
        margin-bottom: 10px;
    }
    
    .product-table-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .product-search-box {
        max-width: 100%;
    }
    
    .product-table-header .toolbar-actions {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .product-table-header .toolbar-actions button {
        flex: 1;
        justify-content: center;
    }
    
    /* Üst Navigasyon Barı (Mobil Uyumlu) */
    .navbar {
        padding: 10px 20px;
        height: auto;
        min-height: 64px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .navbar-menu {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 8px;
        gap: 8px;
    }
    
    .navbar-item {
        padding: 8px 12px;
        font-size: 0.8rem;
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    /* Mobil Tablo Hücre ve Girdi Küçültmeleri */
    .manage-table th, 
    .manage-table td {
        padding: 8px 10px;
        font-size: 0.78rem;
    }
    
    .inline-edit-input {
        padding: 5px 8px !important;
        font-size: 0.78rem !important;
    }
    
    /* Mobil Sayfalama (Pagination) */
    .pagination {
        flex-direction: column;
        gap: 12px;
        align-items: center;
        text-align: center;
        padding-top: 15px;
    }
    
    .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    
    .pagination-controls select {
        width: 100%;
        margin-bottom: 4px;
    }
}

/* ==========================================
   PREMIUM APP FOOTER DESIGN
   ========================================== */
.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-sidebar);
    border-top: 1px solid var(--border-color);
    padding: 0 30px;
    height: 46px;
    box-sizing: border-box;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-family: var(--font-main);
    z-index: 100;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.app-footer .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.app-footer .footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-footer .footer-brand-text {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.app-footer .footer-title {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

.app-footer .footer-subtitle {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

.app-footer .footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.app-footer .footer-copyright {
    color: var(--text-muted);
}

.app-footer .footer-divider {
    color: var(--border-color);
}

.app-footer .footer-status {
    color: var(--success-color);
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: rgba(16, 185, 129, 0.05);
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid rgba(16, 185, 129, 0.1);
    font-size: 0.72rem;
}

/* Adjust main layout containers on desktop when footer is active */
@media (min-width: 1025px) {
    body.has-navbar .app-container {
        height: calc(100vh - 64px - 46px) !important;
    }
    .product-manager-container {
        height: calc(100vh - 64px - 46px) !important;
    }
}

@media (max-width: 768px) {
    .app-footer {
        height: auto;
        padding: 15px 20px;
    }
    .app-footer .footer-content {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        gap: 10px;
    }
    .app-footer .footer-left {
        justify-content: center;
    }
    .app-footer .footer-brand-text {
        flex-direction: column;
        gap: 4px;
    }
    .app-footer .footer-right {
        flex-direction: column;
        gap: 6px;
    }
    .app-footer .footer-divider {
        display: none;
    }

    /* ==========================================================================
       MOBILE RESPONSIVE OVERHAUL (ADDITIONS)
       ========================================================================== */

    /* 1. Swipeable / Scrollable Top Menus (No Wrapping, App-Like Layout) */
    .navbar {
        padding: 8px 15px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }
    .navbar-brand {
        flex: 1 !important;
    }
    .navbar-actions {
        order: 2 !important;
        margin-left: auto !important;
    }
    .navbar-menu {
        order: 3 !important;
        width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px 0 !important;
        margin-top: 5px !important;
        gap: 6px !important;
        -ms-overflow-style: none !important; /* IE and Edge */
        scrollbar-width: none !important;    /* Firefox */
    }
    .navbar-menu::-webkit-scrollbar {
        display: none !important; /* Hide scrollbar for Chrome, Safari and Opera */
    }
    .navbar-item {
        flex: 0 0 auto !important;
        padding: 6px 12px !important;
        font-size: 0.76rem !important;
        display: inline-flex !important;
    }

    /* 2. Global KPI and Balance Cards Dikey Çökertme */
    .bakiye-card-container, 
    .tahsilat-kpi-container,
    .kpi-container {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .bakiye-card,
    .tahsilat-kpi-card,
    .kpi-box {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* 3. Rapor Sayfası Grid ve Kart Revizyonu */
    .rapor-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .rapor-card {
        grid-column: auto !important;
        padding: 15px !important;
    }
    .chart-placeholder {
        min-height: 220px !important;
        overflow-x: auto !important;
    }

    /* 4. Tablolar İçin Taşmasız Yatay Scroll Desteği */
    .ekstre-container,
    .doc-table-container {
        overflow-x: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
    }
    .ekstre-table,
    .doc-table {
        min-width: 680px !important; /* Tablo hücrelerinin sıkışmasını önler, akıcı kaydırma sunar */
        width: 100% !important;
    }

    /* Müşteriler ve Stoklar Tabloları - Kesinlikle Yatay Kaydırma Yok, Ekrana Tam Sığma */
    body.page-customers .product-table-container,
    body.page-products .product-table-container {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
    }
    body.page-customers .manage-table,
    body.page-products .manage-table {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Stoklar Sayfası Tablo Hücrelerini Mobilde Daha Kompakt Yaparak Tam Sığdırma */
    body.page-products .manage-table th, 
    body.page-products .manage-table td {
        padding: 6px 4px !important;
        font-size: 0.72rem !important;
    }

    /* 5. Modal Grids & Form Rows Çökertme */
    .modal {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
    }
    .modal-body {
        padding: 15px !important;
    }
    
    /* Inline form gridlerini dikey sıralamaya zorla */
    .modal-body div[style*="display: grid;"],
    .modal-body div[style*="display: grid"],
    .modal-body div[style*="grid-template-columns"],
    .modal-body .form-row {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* Fatura ve teklif formu inline grid düzeltmeleri */
    .form-row[style*="grid-template-columns"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr"],
    #success-quick-actions {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* 6. Form Elemanları ve Margin İyileştirmeleri */
    .sidebar {
        padding: 15px !important;
    }
    .form-group {
        margin-bottom: 12px !important;
    }
    .btn {
        padding: 8px 14px !important;
        font-size: 0.82rem !important;
    }

    /* 7. Mobil Tablo Sütun Sadeleştirme Overrides (Ferah ve Taşmasız Tasarım) */
    
    /* Müşteriler Sayfası (Kategori ve Telefon Sütunlarını Gizle, Net Bakiye Görünsün) */
    body.page-customers .manage-table th:nth-child(3),
    body.page-customers .manage-table td:nth-child(3),
    body.page-customers .manage-table th:nth-child(4),
    body.page-customers .manage-table td:nth-child(4) {
        display: none !important;
    }

    /* Stoklar Sayfası (Kategori ve Ölçü Birimi Sütunlarını Gizle) */
    body.page-products .manage-table th:nth-child(3),
    body.page-products .manage-table td:nth-child(3),
    body.page-products .manage-table th:nth-child(5),
    body.page-products .manage-table td:nth-child(5) {
        display: none !important;
    }

    /* Teklifler Sayfası (Teklif No, Tarih ve Kalem Sayısını Gizle) */
    body.page-proposals .manage-table th:nth-child(1),
    body.page-proposals .manage-table td:nth-child(1),
    body.page-proposals .manage-table th:nth-child(3),
    body.page-proposals .manage-table td:nth-child(3),
    body.page-proposals .manage-table th:nth-child(4),
    body.page-proposals .manage-table td:nth-child(4) {
        display: none !important;
    }
    body.page-proposals .manage-table {
        min-width: 100% !important; /* 4 sütun kaldığı için ekrana tam sığdır */
    }

    /* Faturalar Sayfası - Mobilde Vade, Ayrı Tarih ve Fatura Tipi sütunlarını gizle */
    /* Col1=expand, Col4=tip, Col5=tarih, Col6=vade gizlenir; Col2=FatNo, Col3=Cari, Col7=Tutar, Col8=İşlem görünür */
    body.page-invoices .manage-table th:nth-child(1),
    body.page-invoices .manage-table td:nth-child(1),
    body.page-invoices .manage-table th:nth-child(4),
    body.page-invoices .manage-table td:nth-child(4),
    body.page-invoices .manage-table th:nth-child(5),
    body.page-invoices .manage-table td:nth-child(5),
    body.page-invoices .manage-table th:nth-child(6),
    body.page-invoices .manage-table td:nth-child(6) {
        display: none !important;
    }
    /* Detay satırı (colspan=8 içeren) tüm hücreyi geri getir */
    body.page-invoices .manage-table tr.invoice-detail-row td {
        display: table-cell !important;
    }
    body.page-invoices .manage-table {
        min-width: 100% !important;
    }

    /* Tahsilatlar Sayfası (Makbuz No, Ödeme Yöntemi ve Açıklamayı Gizle) */
    body.page-payments .manage-table th:nth-child(1),
    body.page-payments .manage-table td:nth-child(1),
    body.page-payments .manage-table th:nth-child(4),
    body.page-payments .manage-table td:nth-child(4),
    body.page-payments .manage-table th:nth-child(5),
    body.page-payments .manage-table td:nth-child(5) {
        display: none !important;
    }
    body.page-payments .manage-table {
        min-width: 100% !important; /* 4 sütun kaldığı için ekrana tam sığdır */
    }

    /* Cari Hesap Ekstresi Tablosu - Mobilde Fatura No ve Açıklama gizle, Tutar ve Bakiye (Net) göster */
    .ekstre-table th:first-child,
    .ekstre-table td:first-child {
        width: 22px !important;
        min-width: 22px !important;
        max-width: 24px !important;
        padding: 4px 1px !important;
        text-align: center !important;
    }
    .ekstre-table .ekstre-expand-btn {
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .ekstre-table .ekstre-expand-btn svg {
        width: 12px !important;
        height: 12px !important;
    }
    .ekstre-table th:nth-child(4),
    .ekstre-table td:nth-child(4),
    .ekstre-table th:nth-child(5),
    .ekstre-table td:nth-child(5) {
        display: none !important;
    }
    .ekstre-table th:nth-child(6),
    .ekstre-table td:nth-child(6) {
        display: table-cell !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
    .ekstre-table th:nth-child(7),
    .ekstre-table td:nth-child(7) {
        display: table-cell !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
    .ekstre-table {
        min-width: 100% !important;
        width: 100% !important;
    }

    /* Mobil toolbar taşma önleyici stil kuralları */
    .product-table-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .product-table-header .toolbar-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
        margin: 0 !important;
    }
    .product-table-header .toolbar-actions div,
    .product-table-header .toolbar-actions span,
    .product-table-header .toolbar-actions button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* Mobil filtrelerin (index.html 4-Bölmeli Yapı) Dikey Çökertilmesi */
    .filters-grid-container {
        grid-template-columns: 1fr !important; /* Mobilde 4'lü yapıyı dikey sıralayarak ekrana tam sığdır */
        gap: 8px !important;
        width: 100% !important;
    }

    /* Mobilde A4 Belge (Teklif/Fatura) Canlı Önizleme Tam Ekrana Sığdırma ve Kaydırmama */
    .document-wrapper {
        overflow-x: hidden !important; /* Asla yatay kaydırma yapma */
        justify-content: center !important; /* Ölçeklenen A4 şablonunu ortala */
        padding: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .document {
        min-width: 210mm !important; /* A4 oranını koru (JS scale() tarafından sığdırılır) */
        margin: 0 auto !important;
        box-shadow: none !important;
    }

    /* Teklif/Fatura Araç Çubuğu (Malzeme Ekle, Listeyi Temizle vb.) Mobilde 2 Sütunlu Grid */
    .preview-toolbar {
        height: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    .preview-status {
        text-align: center !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
    }
    .toolbar-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .toolbar-actions .btn,
    .toolbar-actions button {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 4px !important;
        font-size: 0.76rem !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .toolbar-actions #print-btn {
        grid-column: span 2 !important; /* Yazdır/PDF Kaydet butonu en altta tam genişlik kaplasın */
    }
}

/* Document Color Themes for Proposals and Invoices */
.document {
    --doc-header-bg: #9bbb59; /* Default durman green */
}
.document[data-color-theme="blue"] {
    --doc-header-bg: #3b82f6 !important; /* Premium Blue */
}
.document[data-color-theme="orange"] {
    --doc-header-bg: #f97316 !important; /* Premium Orange */
}
.document[data-color-theme="green"] {
    --doc-header-bg: #9bbb59 !important; /* Premium Green */
}

/* Mobil Uyumlu Ekranlar için Cari Detay & Kart Düzenlemeleri */
@media (max-width: 768px) {
    /* Mobilde Müşteri Kartındaki telefon, e-posta, vergi, adres, açılış bakiyesi ve notları gizle */
    .customer-info-fields {
        display: none !important;
    }
}

/* ==========================================================================
   25. VISUAL REFRESH V3
   Mevcut yerlesimleri ve belge sablonlarini degistirmeden ortak gorunumu yeniler.
   ========================================================================== */
@media screen {
    :root {
        --bg-app: #f4f6fa;
        --bg-sidebar: #ffffff;
        --bg-card: #ffffff;
        --border-color: #dfe4ec;
        --border-strong: #cdd4df;
        --text-primary: #172033;
        --text-secondary: #556176;
        --text-muted: #8b96a9;
        --primary-color: #8f2030;
        --primary-hover: #741824;
        --primary-glow: rgba(143, 32, 48, 0.14);
        --accent-color: #9dbb58;
        --accent-hover: #87a447;
        --success-color: #169b6b;
        --warning-color: #e29a22;
        --danger-color: #dc4455;
        --shadow-sm: 0 2px 8px rgba(28, 39, 60, 0.05);
        --shadow-md: 0 10px 28px rgba(28, 39, 60, 0.08);
        --shadow-lg: 0 22px 55px rgba(28, 39, 60, 0.13);
        --shadow-glow: 0 14px 38px rgba(143, 32, 48, 0.12);
        --radius-sm: 9px;
        --radius-md: 14px;
        --radius-lg: 22px;
    }

    [data-theme="dark"] {
        --bg-app: #424242;
        --bg-sidebar: #4c4c4c;
        --bg-card: #545454;
        --border-color: #636363;
        --border-strong: #787878;
        --text-primary: #ffffff;
        --text-secondary: #e2e8f0;
        --text-muted: #b8c2cc;
        --primary-color: #d15a68;
        --primary-hover: #e87380;
        --primary-glow: rgba(209, 90, 104, 0.2);
        --accent-color: #adca68;
        --shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.28);
        --shadow-lg: 0 26px 65px rgba(0, 0, 0, 0.38);
    }

    body {
        background-color: var(--bg-app);
        background-image:
            radial-gradient(circle at 8% 2%, rgba(157, 187, 88, 0.1), transparent 28rem),
            radial-gradient(circle at 92% 8%, rgba(143, 32, 48, 0.08), transparent 30rem);
        background-attachment: fixed;
    }

    [data-theme="dark"] body {
        background-image:
            radial-gradient(circle at 8% 2%, rgba(173, 202, 104, 0.08), transparent 28rem),
            radial-gradient(circle at 92% 8%, rgba(209, 90, 104, 0.1), transparent 30rem);
    }

    ::selection {
        color: #ffffff;
        background: var(--primary-color);
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--border-strong), var(--text-muted));
        border: 2px solid transparent;
        background-clip: padding-box;
    }

    /* Eski onbellekli bir arayuzden gelse bile hesaplama baglantisi menude gorunmez. */
    .navbar-menu a[href="sove_hesaplama.html"],
    .mobile-menu-drawer a[href="sove_hesaplama.html"],
    #global-fab-menu button[onclick*="sove-hesapla"] {
        display: none !important;
    }

    .navbar {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.9));
        border-bottom-color: rgba(143, 32, 48, 0.12);
        box-shadow: 0 8px 30px rgba(28, 39, 60, 0.07);
    }

    [data-theme="dark"] .navbar {
        background: linear-gradient(90deg, rgba(76, 76, 76, 0.97), rgba(76, 76, 76, 0.92));
        border-bottom-color: rgba(209, 90, 104, 0.18);
    }

    .navbar::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 2px;
        pointer-events: none;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color), transparent 78%);
        opacity: 0.72;
    }

    .navbar-brand .brand-logo,
    .sidebar .brand-logo {
        filter: drop-shadow(0 5px 8px rgba(143, 32, 48, 0.16));
    }

    .navbar-menu {
        gap: 6px;
        padding: 5px;
        border: 1px solid rgba(205, 212, 223, 0.72);
        border-radius: 15px;
        background: rgba(244, 246, 250, 0.72);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    [data-theme="dark"] .navbar-menu {
        border-color: var(--border-color);
        background: rgba(60, 60, 60, 0.6);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .navbar .navbar-menu .navbar-item {
        position: relative;
        overflow: hidden;
        border: 1px solid transparent;
    }

    .navbar .navbar-menu .navbar-item:hover {
        color: var(--primary-color) !important;
        border-color: rgba(143, 32, 48, 0.12) !important;
        background: rgba(143, 32, 48, 0.07) !important;
        transform: translateY(-1px);
    }

    .navbar .navbar-menu .navbar-item.active {
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
        background: linear-gradient(135deg, #9d2a3a, #781824) !important;
        box-shadow: 0 7px 18px rgba(143, 32, 48, 0.25) !important;
    }

    .navbar-actions .btn-icon,
    #nav-settings-btn,
    #nav-menu-toggle {
        border-color: var(--border-color) !important;
        background: linear-gradient(180deg, var(--bg-sidebar), var(--bg-app)) !important;
        box-shadow: var(--shadow-sm);
    }

    .navbar-actions .btn-icon:hover,
    #nav-settings-btn:hover,
    #nav-menu-toggle:hover {
        color: var(--primary-color) !important;
        border-color: rgba(143, 32, 48, 0.28) !important;
        box-shadow: 0 8px 18px var(--primary-glow);
        transform: translateY(-1px);
    }

    .sidebar,
    .settings-sidebar {
        background: linear-gradient(180deg, var(--bg-sidebar), color-mix(in srgb, var(--bg-sidebar) 94%, var(--bg-app)));
        border-color: var(--border-color);
        box-shadow: 8px 0 30px rgba(28, 39, 60, 0.05);
    }

    .sidebar-header {
        background: linear-gradient(135deg, rgba(143, 32, 48, 0.045), rgba(157, 187, 88, 0.055));
    }

    .card,
    .bakiye-card,
    .tahsilat-kpi-card,
    .kpi-box,
    .rapor-card,
    .metric-card {
        position: relative;
        border-color: rgba(205, 212, 223, 0.88);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 252, 0.94));
        box-shadow: var(--shadow-sm);
    }

    [data-theme="dark"] .card,
    [data-theme="dark"] .bakiye-card,
    [data-theme="dark"] .tahsilat-kpi-card,
    [data-theme="dark"] .kpi-box,
    [data-theme="dark"] .rapor-card,
    [data-theme="dark"] .metric-card {
        border-color: var(--border-color);
        background: linear-gradient(145deg, rgba(84, 84, 84, 0.98), rgba(76, 76, 76, 0.96));
    }

    .card:hover,
    .bakiye-card:hover,
    .tahsilat-kpi-card:hover,
    .kpi-box:hover,
    .rapor-card:hover,
    .metric-card:hover {
        border-color: rgba(143, 32, 48, 0.2);
        box-shadow: var(--shadow-md);
    }

    .card h3 i,
    .rapor-card h3 i {
        color: var(--primary-color);
        filter: drop-shadow(0 4px 6px var(--primary-glow));
    }

    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        border-color: var(--border-color);
        background: color-mix(in srgb, var(--bg-sidebar) 88%, var(--bg-app));
        box-shadow: inset 0 1px 2px rgba(28, 39, 60, 0.035);
    }

    input:hover,
    select:hover,
    textarea:hover {
        border-color: var(--border-strong);
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--primary-color);
        background: var(--bg-sidebar);
        box-shadow: 0 0 0 4px var(--primary-glow), 0 7px 18px rgba(28, 39, 60, 0.06);
    }

    .btn {
        border: 1px solid transparent;
        box-shadow: 0 4px 12px rgba(28, 39, 60, 0.07);
    }

    .btn-primary {
        border-color: rgba(116, 24, 36, 0.5);
        background: linear-gradient(135deg, #9e2b3b, #781824);
        box-shadow: 0 8px 18px rgba(143, 32, 48, 0.22);
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #ab3546, #69131e);
        box-shadow: 0 11px 24px rgba(143, 32, 48, 0.28);
    }

    .btn-secondary,
    .btn-outline {
        border-color: var(--border-color);
        background: linear-gradient(180deg, var(--bg-sidebar), var(--bg-app));
    }

    .btn-secondary:hover,
    .btn-outline:hover {
        color: var(--primary-color);
        border-color: rgba(143, 32, 48, 0.26);
        background: var(--bg-sidebar);
        box-shadow: 0 8px 18px var(--primary-glow);
    }

    .product-table-wrapper {
        border-left-color: transparent;
        background: transparent;
    }

    .product-table-container,
    .ekstre-container,
    .doc-table-container {
        border-color: var(--border-color);
        background: var(--bg-sidebar);
        box-shadow: var(--shadow-md);
    }

    .manage-table th {
        color: var(--text-secondary);
        border-bottom-color: var(--border-strong);
        background: linear-gradient(180deg, color-mix(in srgb, var(--bg-app) 88%, #ffffff), var(--bg-app));
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    }

    .manage-table td {
        border-bottom-color: color-mix(in srgb, var(--border-color) 72%, transparent);
    }

    .manage-table tbody tr:nth-child(even) td {
        background: rgba(124, 139, 164, 0.025);
    }

    .manage-table tr:hover td {
        background: rgba(143, 32, 48, 0.045);
    }

    .btn-table-action {
        border-color: var(--border-color);
        background: linear-gradient(180deg, var(--bg-sidebar), var(--bg-app));
        box-shadow: var(--shadow-sm);
    }

    .badge {
        border: 1px solid rgba(157, 187, 88, 0.25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
    }

    .modal-backdrop {
        background: rgba(11, 17, 32, 0.58);
        backdrop-filter: blur(9px);
    }

    .modal {
        border-color: color-mix(in srgb, var(--primary-color) 18%, var(--border-color));
        background: var(--bg-sidebar);
        box-shadow: var(--shadow-lg);
    }

    .modal-header {
        background: linear-gradient(135deg, rgba(143, 32, 48, 0.055), rgba(157, 187, 88, 0.065));
    }

    .modal-footer {
        background: color-mix(in srgb, var(--bg-app) 88%, var(--bg-sidebar));
    }

    .mobile-menu-drawer {
        border-right-color: rgba(143, 32, 48, 0.16) !important;
        background: linear-gradient(180deg, var(--bg-sidebar), color-mix(in srgb, var(--bg-sidebar) 92%, var(--bg-app))) !important;
        box-shadow: 18px 0 55px rgba(11, 17, 32, 0.2) !important;
    }

    .mobile-menu-item.active {
        color: var(--primary-color) !important;
        border-color: rgba(143, 32, 48, 0.18) !important;
        background: linear-gradient(90deg, var(--primary-glow), rgba(157, 187, 88, 0.08)) !important;
    }

    #global-fab-menu {
        border-color: rgba(143, 32, 48, 0.16) !important;
        background: color-mix(in srgb, var(--bg-sidebar) 92%, transparent) !important;
        box-shadow: var(--shadow-lg) !important;
    }

    #global-fab-btn {
        background: linear-gradient(135deg, var(--success-color), #0c7d55) !important;
        box-shadow: 0 10px 25px rgba(22, 155, 107, 0.32) !important;
    }

    .bulk-category-picker {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        max-height: 180px;
        overflow-y: auto;
        padding: 9px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background: color-mix(in srgb, var(--bg-app) 72%, var(--bg-sidebar));
    }

    .bulk-category-option {
        display: flex;
        align-items: center;
        min-width: 0;
        cursor: pointer;
    }

    .bulk-category-option input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .bulk-category-option span {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        min-height: 34px;
        padding: 7px 9px;
        overflow: hidden;
        color: var(--text-secondary);
        font-size: 0.76rem;
        font-weight: 700;
        line-height: 1.2;
        text-overflow: ellipsis;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-sidebar);
        transition: all 0.18s ease;
    }

    .bulk-category-option span i {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .bulk-category-option:hover span {
        color: var(--primary-color);
        border-color: rgba(143, 32, 48, 0.25);
        transform: translateY(-1px);
    }

    .bulk-category-option input:checked + span {
        color: #ffffff;
        border-color: var(--primary-color);
        background: linear-gradient(135deg, #9d2a3a, #781824);
        box-shadow: 0 6px 14px rgba(143, 32, 48, 0.2);
    }

    .bulk-category-option-all {
        grid-column: 1 / -1;
    }

    .bulk-category-summary {
        display: block;
        margin-top: 6px;
        color: var(--text-muted);
        font-size: 0.7rem;
        font-weight: 700;
    }

    :focus-visible {
        outline: 3px solid color-mix(in srgb, var(--primary-color) 38%, transparent);
        outline-offset: 2px;
    }
}

/* ==========================================================================
   26. REFERENCE UI V4 + USER ACCENT THEMES
   Referans paneldeki ferah, kart tabanli tasarim ve 10 kullanici renk paleti.
   ========================================================================== */
@media screen {
    :root,
    [data-accent="crimson"] {
        --primary-color: #c71931;
        --primary-hover: #a70f27;
        --primary-rgb: 199 25 49;
        --primary-soft: #fff0f2;
        --accent-color: #ef4056;
        --accent-hover: #d82c43;
    }

    [data-accent="sapphire"] {
        --primary-color: #2563eb;
        --primary-hover: #1d4ed8;
        --primary-rgb: 37 99 235;
        --primary-soft: #eff6ff;
        --accent-color: #60a5fa;
        --accent-hover: #3b82f6;
    }

    [data-accent="emerald"] {
        --primary-color: #059669;
        --primary-hover: #047857;
        --primary-rgb: 5 150 105;
        --primary-soft: #ecfdf5;
        --accent-color: #34d399;
        --accent-hover: #10b981;
    }

    [data-accent="violet"] {
        --primary-color: #7c3aed;
        --primary-hover: #6d28d9;
        --primary-rgb: 124 58 237;
        --primary-soft: #f5f3ff;
        --accent-color: #a78bfa;
        --accent-hover: #8b5cf6;
    }

    [data-accent="amber"] {
        --primary-color: #d97706;
        --primary-hover: #b45309;
        --primary-rgb: 217 119 6;
        --primary-soft: #fffbeb;
        --accent-color: #f59e0b;
        --accent-hover: #d97706;
    }

    [data-accent="teal"] {
        --primary-color: #0f8f8f;
        --primary-hover: #0f766e;
        --primary-rgb: 15 143 143;
        --primary-soft: #f0fdfa;
        --accent-color: #2dd4bf;
        --accent-hover: #14b8a6;
    }

    [data-accent="rose"] {
        --primary-color: #db2777;
        --primary-hover: #be185d;
        --primary-rgb: 219 39 119;
        --primary-soft: #fdf2f8;
        --accent-color: #f472b6;
        --accent-hover: #ec4899;
    }

    [data-accent="indigo"] {
        --primary-color: #4f46e5;
        --primary-hover: #4338ca;
        --primary-rgb: 79 70 229;
        --primary-soft: #eef2ff;
        --accent-color: #818cf8;
        --accent-hover: #6366f1;
    }

    [data-accent="graphite"] {
        --primary-color: #475569;
        --primary-hover: #334155;
        --primary-rgb: 71 85 105;
        --primary-soft: #f1f5f9;
        --accent-color: #94a3b8;
        --accent-hover: #64748b;
    }

    [data-accent="copper"] {
        --primary-color: #b45309;
        --primary-hover: #92400e;
        --primary-rgb: 180 83 9;
        --primary-soft: #fff7ed;
        --accent-color: #ea8a3a;
        --accent-hover: #c96b21;
    }

    :root {
        --bg-app: #f7f8fc;
        --bg-sidebar: #ffffff;
        --bg-card: #ffffff;
        --border-color: #e5e9f2;
        --border-strong: #d8deea;
        --text-primary: #151c32;
        --text-secondary: #4c5874;
        --text-muted: #8a95aa;
        --primary-glow: rgb(var(--primary-rgb) / 0.14);
        --shadow-sm: 0 3px 12px rgba(31, 42, 68, 0.055);
        --shadow-md: 0 10px 28px rgba(31, 42, 68, 0.085);
        --shadow-lg: 0 22px 55px rgba(31, 42, 68, 0.13);
        --radius-sm: 10px;
        --radius-md: 14px;
        --radius-lg: 20px;
    }

    [data-theme="dark"] {
        --bg-app: #424242;
        --bg-sidebar: #4c4c4c;
        --bg-card: #545454;
        --border-color: #636363;
        --border-strong: #787878;
        --text-primary: #ffffff;
        --text-secondary: #e2e8f0;
        --text-muted: #b8c2cc;
        --primary-soft: rgb(var(--primary-rgb) / 0.18);
    }

    body {
        background:
            radial-gradient(circle at 72% 12%, rgb(var(--primary-rgb) / 0.045), transparent 25rem),
            linear-gradient(135deg, #fbfcfe 0%, var(--bg-app) 52%, #f6f7fb 100%);
    }

    [data-theme="dark"] body {
        background:
            radial-gradient(circle at 72% 12%, rgb(var(--primary-rgb) / 0.11), transparent 28rem),
            linear-gradient(135deg, #464646 0%, var(--bg-app) 58%, #404040 100%);
    }

    body.has-navbar .app-container,
    .product-manager-container {
        height: calc(100vh - 72px);
    }

    .navbar {
        height: 72px;
        padding: 0 30px;
        background: rgb(255 255 255 / 0.94);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 4px 22px rgba(31, 42, 68, 0.055);
        backdrop-filter: blur(18px);
    }

    [data-theme="dark"] .navbar {
        background: rgb(76 76 76 / 0.94);
    }

    .navbar::after {
        display: none;
    }

    .navbar-brand {
        min-width: 245px;
    }

    .navbar-brand .brand-logo {
        width: 36px !important;
        height: 36px !important;
        filter: drop-shadow(0 6px 9px rgb(var(--primary-rgb) / 0.2));
    }

    .navbar-brand h1 {
        font-size: 1rem !important;
        letter-spacing: 0.015em;
    }

    .navbar-brand span {
        margin-top: 3px;
        font-size: 0.64rem !important;
    }

    .navbar-menu {
        min-height: 50px;
        gap: 4px;
        padding: 6px;
        border: 1px solid #eef1f6;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 10px 28px rgba(31, 42, 68, 0.09);
    }

    [data-theme="dark"] .navbar-menu {
        border-color: var(--border-color);
        background: #3f3f3f;
    }

    .navbar .navbar-menu .navbar-item {
        min-height: 38px;
        padding: 8px 14px;
        color: #34405e;
        border-radius: 9px;
        font-size: 0.82rem;
        font-weight: 700;
    }

    [data-theme="dark"] .navbar .navbar-menu .navbar-item {
        color: var(--text-secondary);
    }

    .navbar .navbar-menu .navbar-item:hover {
        color: var(--primary-color) !important;
        border-color: transparent !important;
        background: var(--primary-soft) !important;
        box-shadow: none !important;
    }

    .navbar .navbar-menu .navbar-item.active {
        color: #ffffff !important;
        border-color: transparent !important;
        background: linear-gradient(145deg, color-mix(in srgb, var(--primary-color) 86%, #ffffff), var(--primary-hover)) !important;
        box-shadow: 0 7px 17px rgb(var(--primary-rgb) / 0.28) !important;
    }

    .navbar-actions {
        min-width: 150px;
        justify-content: flex-end;
        gap: 9px;
    }

    .navbar-actions .btn-icon,
    #nav-settings-btn,
    #nav-menu-toggle,
    #global-logout-btn {
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        color: #36415d !important;
        border: 1px solid #edf0f5 !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        box-shadow: 0 6px 16px rgba(31, 42, 68, 0.07) !important;
    }

    [data-theme="dark"] .navbar-actions .btn-icon,
    [data-theme="dark"] #nav-settings-btn,
    [data-theme="dark"] #nav-menu-toggle,
    [data-theme="dark"] #global-logout-btn {
        color: var(--text-secondary) !important;
        border-color: var(--border-color) !important;
        background: var(--bg-card) !important;
    }

    .navbar-actions .btn-icon:hover,
    #nav-settings-btn:hover,
    #nav-menu-toggle:hover {
        color: var(--primary-color) !important;
        border-color: rgb(var(--primary-rgb) / 0.18) !important;
        background: var(--primary-soft) !important;
        transform: translateY(-2px);
    }

    #global-logout-btn {
        color: var(--danger-color) !important;
    }

    .sidebar,
    .settings-sidebar {
        border-color: var(--border-color);
        background:
            radial-gradient(circle at 50% 88%, rgb(var(--primary-rgb) / 0.045), transparent 14rem),
            var(--bg-sidebar);
        box-shadow: 7px 0 25px rgba(31, 42, 68, 0.045);
    }

    .tab-content-wrapper {
        padding: 20px 16px !important;
    }

    .sidebar .card {
        padding: 17px 18px;
        border: 1px solid #edf0f5;
        border-left: 1px solid #edf0f5 !important;
        border-radius: 13px;
        background: var(--bg-card);
        box-shadow: 0 7px 20px rgba(31, 42, 68, 0.075);
    }

    .sidebar .card:hover {
        border-color: rgb(var(--primary-rgb) / 0.2);
        box-shadow: 0 12px 27px rgba(31, 42, 68, 0.105);
        transform: translateY(-1px);
    }

    .sidebar .card h3 {
        min-height: 38px;
        gap: 12px !important;
        margin-bottom: 1px;
    }

    .sidebar .card h3 > svg,
    .sidebar .card h3 > i {
        width: 34px !important;
        height: 34px !important;
        padding: 8px;
        color: var(--primary-color) !important;
        border-radius: 10px;
        background: var(--primary-soft);
        filter: drop-shadow(0 5px 8px rgb(var(--primary-rgb) / 0.13));
    }

    .sidebar .card .card-desc {
        padding-left: 46px;
        color: var(--text-secondary) !important;
        line-height: 1.55;
    }

    .product-table-wrapper {
        padding: 26px 30px 18px;
        background: transparent;
    }

    .bakiye-card-container,
    .tahsilat-kpi-container,
    .kpi-container {
        gap: 20px !important;
        margin-bottom: 20px !important;
    }

    .bakiye-card,
    .tahsilat-kpi-card,
    .kpi-box {
        min-height: 102px;
        padding: 18px 20px !important;
        border: 1px solid #edf0f6;
        border-radius: 13px;
        background: linear-gradient(135deg, #ffffff 60%, rgb(var(--primary-rgb) / 0.025));
        box-shadow: 0 8px 24px rgba(31, 42, 68, 0.075);
    }

    [data-theme="dark"] .bakiye-card,
    [data-theme="dark"] .tahsilat-kpi-card,
    [data-theme="dark"] .kpi-box {
        border-color: var(--border-color);
        background: linear-gradient(135deg, var(--bg-card), rgb(var(--primary-rgb) / 0.07));
    }

    .bakiye-icon-wrapper,
    .tahsilat-kpi-icon,
    .kpi-box > i {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    }

    .bakiye-info span,
    .tahsilat-kpi-info span,
    .kpi-box span {
        color: #72809b !important;
        font-size: 0.69rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.055em !important;
    }

    .bakiye-info h3,
    .tahsilat-kpi-info h3,
    .kpi-box h2 {
        margin-top: 5px !important;
        color: var(--text-primary) !important;
        font-size: 1.22rem !important;
        font-weight: 850 !important;
    }

    .product-table-header {
        min-height: 52px;
        margin-bottom: 17px;
        padding: 0;
    }

    .product-search-box input,
    .product-search-box select,
    .product-table-header select,
    .product-table-header .btn,
    .toolbar-actions .btn {
        min-height: 42px;
    }

    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        color: var(--text-primary);
        border: 1px solid #e2e7f0;
        border-radius: 9px;
        background: #ffffff;
        box-shadow: 0 3px 10px rgba(31, 42, 68, 0.025);
    }

    [data-theme="dark"] input,
    [data-theme="dark"] select,
    [data-theme="dark"] textarea {
        border-color: var(--border-color);
        background: #3c3c3c;
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: rgb(var(--primary-rgb) / 0.45);
        box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.1), 0 6px 16px rgba(31, 42, 68, 0.05);
    }

    .btn {
        min-height: 38px;
        border-radius: 9px;
        font-weight: 750;
    }

    .btn-primary {
        color: #ffffff;
        border-color: transparent;
        background: linear-gradient(145deg, color-mix(in srgb, var(--primary-color) 88%, #ffffff), var(--primary-hover));
        box-shadow: 0 7px 17px rgb(var(--primary-rgb) / 0.24);
    }

    .btn-primary:hover {
        background: linear-gradient(145deg, var(--primary-color), var(--primary-hover));
        box-shadow: 0 10px 23px rgb(var(--primary-rgb) / 0.3);
    }

    .invoice-action-edit,
    .invoice-action-edit:hover,
    .invoice-action-edit:focus-visible {
        color: #ffffff !important;
        border: 1px solid #d97706 !important;
        background: linear-gradient(145deg, #f59e0b, #d97706) !important;
        box-shadow: 0 6px 14px rgba(217, 119, 6, 0.22);
    }

    .invoice-action-return,
    .invoice-action-return:hover,
    .invoice-action-return:focus-visible {
        color: #ffffff !important;
        border: 1px solid #9333ea !important;
        background: linear-gradient(145deg, #a855f7, #9333ea) !important;
        box-shadow: 0 6px 14px rgba(147, 51, 234, 0.22);
    }

    .invoice-action-copy,
    .invoice-action-copy:hover,
    .invoice-action-copy:focus-visible {
        color: #ffffff !important;
        border: 1px solid #0891b2 !important;
        background: linear-gradient(145deg, #06b6d4, #0891b2) !important;
        box-shadow: 0 6px 14px rgba(8, 145, 178, 0.22);
    }

    .invoice-action-cancel,
    .invoice-action-cancel:hover,
    .invoice-action-cancel:focus-visible {
        color: #ffffff !important;
        border: 1px solid #dc2626 !important;
        background: linear-gradient(145deg, #ef4444, #dc2626) !important;
        box-shadow: 0 6px 14px rgba(220, 38, 38, 0.2);
    }

    .invoice-action-edit:hover,
    .invoice-action-return:hover,
    .invoice-action-copy:hover,
    .invoice-action-cancel:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

    #btn-teklif-olustur-link.btn-teklif-mavi,
    #btn-teklif-olustur-link.btn-teklif-mavi:hover,
    #btn-teklif-olustur-link.btn-teklif-mavi:focus-visible {
        color: #ffffff !important;
        border: 1px solid #2563eb !important;
        background: linear-gradient(145deg, #3b82f6, #2563eb) !important;
        box-shadow: 0 6px 15px rgba(37, 99, 235, 0.22) !important;
    }

    .cari-card-reset-btn,
    .cari-card-reset-btn:hover,
    .cari-card-reset-btn:focus-visible {
        color: #9a3412 !important;
        border: 1px solid #fdba74 !important;
        background: linear-gradient(145deg, #fff7ed, #ffedd5) !important;
        box-shadow: 0 5px 13px rgba(234, 88, 12, 0.1);
    }

    .cari-card-delete-btn,
    .cari-card-delete-btn:hover,
    .cari-card-delete-btn:focus-visible {
        color: #ffffff !important;
        border: 1px solid #dc2626 !important;
        background: linear-gradient(145deg, #ef4444, #dc2626) !important;
        box-shadow: 0 6px 15px rgba(220, 38, 38, 0.2);
    }

    .users-table-wrap {
        overflow-x: auto !important;
    }

    .users-management-table {
        min-width: 690px;
    }

    .user-action-group {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }

    .user-action-btn {
        min-width: 78px;
        min-height: 32px !important;
        padding: 6px 10px !important;
        gap: 5px !important;
        border-radius: 8px !important;
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        box-shadow: 0 4px 10px rgba(31, 42, 68, 0.07);
    }

    .user-action-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    .user-action-edit,
    .user-action-edit:hover,
    .user-action-edit:focus-visible {
        color: #ffffff !important;
        border: 1px solid #2563eb !important;
        background: linear-gradient(145deg, #3b82f6, #2563eb) !important;
    }

    .user-action-delete,
    .user-action-delete:hover,
    .user-action-delete:focus-visible {
        color: #ffffff !important;
        border: 1px solid #dc2626 !important;
        background: linear-gradient(145deg, #ef4444, #dc2626) !important;
    }

    .product-table-container,
    .ekstre-container {
        border: 1px solid #e9edf4;
        border-radius: 13px;
        box-shadow: 0 10px 28px rgba(31, 42, 68, 0.085);
    }

    .manage-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .manage-table th {
        height: 46px;
        padding: 12px 16px;
        color: #56627d;
        border-bottom: 1px solid #dfe5ef;
        background: #fafbfe;
        box-shadow: none;
        font-size: 0.76rem;
    }

    [data-theme="dark"] .manage-table th {
        color: var(--text-secondary);
        border-bottom-color: var(--border-color);
        background: #3f3f3f;
    }

    .manage-table td {
        padding: 5px 10px;
        border-bottom: 1px solid #eef1f6;
        background: var(--bg-card);
    }

    [data-theme="dark"] .manage-table td {
        border-bottom-color: var(--border-color);
    }

    .manage-table tbody tr:nth-child(even) td {
        background: #fcfcfe;
    }

    [data-theme="dark"] .manage-table tbody tr:nth-child(even) td {
        background: #4a4a4a;
    }

    .manage-table tr:hover td {
        background: var(--primary-soft);
    }

    .inline-edit-input {
        min-height: 34px;
        padding: 6px 10px !important;
        border-color: #e3e8f1 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 7px rgba(31, 42, 68, 0.025);
    }

    [data-theme="dark"] .inline-edit-input {
        color: var(--text-primary);
        border-color: var(--border-color) !important;
        background: #3c3c3c !important;
    }

    .product-code-link {
        color: var(--primary-color) !important;
        text-decoration: none !important;
    }

    .btn-table-action {
        width: 34px;
        height: 34px;
        color: #43506c;
        border-color: #e5eaf2;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 3px 9px rgba(31, 42, 68, 0.035);
    }

    .btn-table-action:hover {
        color: var(--primary-color);
        border-color: rgb(var(--primary-rgb) / 0.18);
        background: var(--primary-soft);
        box-shadow: 0 6px 13px rgb(var(--primary-rgb) / 0.12);
    }

    .pagination {
        min-height: 58px;
        border-top-color: var(--border-color);
    }

    #global-fab-btn {
        background: linear-gradient(145deg, color-mix(in srgb, var(--primary-color) 88%, #ffffff), var(--primary-hover)) !important;
        box-shadow: 0 10px 25px rgb(var(--primary-rgb) / 0.3) !important;
    }

    #global-fab-menu {
        border-color: #e8ecf3 !important;
        background: rgb(255 255 255 / 0.96) !important;
    }

    [data-theme="dark"] #global-fab-menu {
        border-color: var(--border-color) !important;
        background: rgb(76 76 76 / 0.96) !important;
    }

    .settings-container {
        gap: 22px;
        padding: 24px;
        background: transparent;
    }

    .settings-sidebar,
    .settings-content-card {
        border: 1px solid #e9edf4;
        border-radius: 14px;
        box-shadow: 0 9px 27px rgba(31, 42, 68, 0.075);
    }

    .settings-nav-btn.active {
        color: var(--primary-color) !important;
        border-color: rgb(var(--primary-rgb) / 0.16) !important;
        background: var(--primary-soft) !important;
    }

    .settings-section-heading {
        padding-bottom: 15px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--border-color);
    }

    .settings-section-heading h2 {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0;
        color: var(--text-primary);
        font-family: var(--font-heading);
        font-size: 1.3rem;
        font-weight: 800;
    }

    .settings-section-heading h2 svg {
        color: var(--primary-color);
    }

    .settings-section-heading p {
        margin-top: 5px;
        color: var(--text-muted);
        font-size: 0.77rem;
    }

    .appearance-preview {
        margin-bottom: 22px;
        overflow: hidden;
        color: var(--text-primary);
        border: 1px solid #e5eaf2;
        border-radius: 14px;
        background:
            radial-gradient(circle at 88% 15%, rgb(var(--primary-rgb) / 0.13), transparent 15rem),
            #f9fafe;
        box-shadow: 0 10px 26px rgba(31, 42, 68, 0.07);
    }

    [data-theme="dark"] .appearance-preview {
        border-color: var(--border-color);
        background:
            radial-gradient(circle at 88% 15%, rgb(var(--primary-rgb) / 0.18), transparent 15rem),
            #444444;
    }

    .appearance-preview-nav {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--border-color);
        background: rgb(255 255 255 / 0.78);
    }

    [data-theme="dark"] .appearance-preview-nav {
        background: rgb(76 76 76 / 0.85);
    }

    .appearance-preview-logo {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        color: var(--primary-color);
        border-radius: 11px;
        background: var(--primary-soft);
    }

    .appearance-preview-nav div {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .appearance-preview-nav strong {
        font-size: 0.88rem;
    }

    .appearance-preview-nav small {
        color: var(--text-muted);
        font-size: 0.7rem;
    }

    .appearance-preview-active {
        padding: 9px 14px;
        color: #ffffff;
        border-radius: 9px;
        background: var(--primary-color);
        box-shadow: 0 6px 15px rgb(var(--primary-rgb) / 0.25);
        font-size: 0.72rem;
        font-weight: 800;
    }

    .appearance-preview-content {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 12px;
        padding: 18px;
    }

    .appearance-preview-kpi {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 14px;
        border: 1px solid var(--border-color);
        border-radius: 11px;
        background: var(--bg-card);
    }

    .appearance-preview-kpi span {
        color: var(--text-muted);
        font-size: 0.64rem;
        font-weight: 800;
    }

    .appearance-preview-kpi strong {
        font-size: 1rem;
    }

    .appearance-preview-content button {
        align-self: center;
        min-height: 40px;
        padding: 0 18px;
        color: #ffffff;
        border: 0;
        border-radius: 9px;
        background: var(--primary-color);
        font-weight: 800;
    }

    .theme-color-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .theme-color-option {
        display: grid;
        grid-template-columns: 46px 1fr 22px;
        align-items: center;
        gap: 12px;
        min-height: 70px;
        padding: 11px 14px;
        text-align: left;
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background: var(--bg-card);
        box-shadow: 0 5px 16px rgba(31, 42, 68, 0.05);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .theme-color-option:hover {
        border-color: rgb(var(--primary-rgb) / 0.24);
        box-shadow: 0 9px 22px rgba(31, 42, 68, 0.09);
        transform: translateY(-2px);
    }

    .theme-color-option.selected {
        border-color: var(--primary-color);
        background: var(--primary-soft);
        box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.09), 0 9px 22px rgb(var(--primary-rgb) / 0.11);
    }

    .theme-swatch {
        width: 42px;
        height: 42px;
        border: 5px solid rgb(255 255 255 / 0.88);
        border-radius: 50%;
        background: var(--swatch);
        box-shadow: 0 0 0 1px rgba(31, 42, 68, 0.08), 0 6px 13px color-mix(in srgb, var(--swatch) 25%, transparent);
    }

    .theme-color-option > span:nth-child(2) {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 3px;
    }

    .theme-color-option strong {
        font-size: 0.82rem;
    }

    .theme-color-option small {
        color: var(--text-muted);
        font-size: 0.69rem;
    }

    .theme-color-option > svg {
        width: 18px;
        height: 18px;
        color: var(--primary-color);
        opacity: 0;
    }

    .theme-color-option.selected > svg {
        opacity: 1;
    }

    .appearance-save-btn {
        width: 100%;
        min-height: 46px;
        margin-top: 18px;
    }

    body.login-page-body {
        background:
            radial-gradient(circle at 12% 88%, rgb(var(--primary-rgb) / 0.45), transparent 34rem),
            radial-gradient(circle at 18% 12%, rgb(var(--primary-rgb) / 0.12), transparent 28rem),
            linear-gradient(135deg, #f7f1f2 0%, #5b5b62 52%, #090f1d 100%) !important;
    }

    .login-logo-container {
        color: var(--primary-color);
        border-color: rgb(var(--primary-rgb) / 0.28) !important;
        background: rgb(var(--primary-rgb) / 0.09) !important;
    }

    .btn-login-submit {
        background: linear-gradient(145deg, color-mix(in srgb, var(--primary-color) 88%, #ffffff), var(--primary-hover)) !important;
        box-shadow: 0 8px 20px rgb(var(--primary-rgb) / 0.3) !important;
    }
}

@media screen and (max-width: 1180px) {
    .navbar-brand {
        min-width: auto;
    }

    .navbar-actions {
        min-width: auto;
    }

    .navbar .navbar-menu .navbar-item {
        padding-inline: 10px;
    }
}

@media screen and (max-width: 768px) {
    .theme-color-grid,
    .appearance-preview-content {
        grid-template-columns: 1fr;
    }

    .appearance-preview-active {
        display: none;
    }
}

.btn.statement-download-btn {
    color: #ffffff !important;
    border-color: #2563eb !important;
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.22) !important;
}

.btn.statement-download-btn:hover {
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}

.api-secret-input {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    letter-spacing: 0.04em;
}

.api-secret-input.masked {
    -webkit-text-security: disc;
}

/* Alphabet Filter Button Styles */
.alphabet-btn {
    padding: 5px 9px;
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.alphabet-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.alphabet-btn.active {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 3px 8px var(--primary-glow);
}

/* ============================================================
   (+) HIZLI KDV & İSKONTO POPOVER STİLLERİ
   ============================================================ */
#quick-addon-btn {
    user-select: none;
    touch-action: manipulation;
}

#quick-addon-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

#quick-addon-btn:active {
    transform: scale(0.95);
}

#quick-addon-dropdown {
    animation: quickAddonFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

@keyframes quickAddonFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#quick-addon-dropdown .quick-addon-item:hover {
    background: var(--primary-color, #ea580c) !important;
    color: #ffffff !important;
    border-color: var(--primary-color, #ea580c) !important;
}

#quick-apply-percent-btn,
#quick-apply-amount-btn {
    user-select: none;
    touch-action: manipulation;
    transition: all 0.15s ease;
}

#quick-apply-percent-btn:hover,
#quick-apply-amount-btn:hover {
    background: #15803d !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}

#quick-apply-percent-btn:active,
#quick-apply-amount-btn:active {
    transform: scale(0.96);
}

#quick-discount-percent-val:focus,
#quick-discount-amount-val:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2) !important;
    outline: none;
}

/* ==========================================================================
   NAVBAR HESAPLAMA & DIŞ ARAÇLAR AÇILIR MENÜSÜ (DROPDOWN)
   ========================================================================== */
.nav-calc-dropdown-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.nav-calc-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-sidebar);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-calc-dropdown-container:hover .nav-calc-btn,
.nav-calc-dropdown-container.active .nav-calc-btn {
    background: var(--primary-glow) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.nav-calc-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 290px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 8px;
    z-index: 100005;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.25s ease 0.45s, transform 0.25s ease 0.45s, visibility 0.25s ease 0.45s;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Kesintisiz Hover Geçiş Köprüleri (Fare aşağı inerken menünün kapanmasını engeller) */
.nav-calc-dropdown-container::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -30px;
    right: -30px;
    height: 18px;
    background: transparent;
    z-index: 100004;
}

.nav-calc-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -30px;
    right: -30px;
    height: 18px;
    background: transparent;
    display: block;
}

.nav-calc-dropdown-container:hover .nav-calc-dropdown-menu,
.nav-calc-dropdown-container.active .nav-calc-dropdown-menu,
.nav-calc-dropdown-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
}

.nav-calc-dropdown-header {
    padding: 6px 10px 8px 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 6px;
}

.nav-calc-header-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.nav-calc-dropdown-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-calc-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm, 8px);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.nav-calc-dropdown-item:hover {
    background: var(--bg-app);
    border-color: var(--border-color);
    transform: translateX(3px);
}

.nav-calc-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.nav-calc-dropdown-item:hover .nav-calc-item-icon {
    transform: scale(1.08);
}

.nav-calc-item-icon i,
.nav-calc-item-icon svg {
    width: 16px;
    height: 16px;
}

.nav-calc-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.nav-calc-item-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
}

.nav-calc-item-desc {
    font-size: 0.70rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.nav-calc-item-ext {
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    opacity: 0.6;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.2s;
}

.nav-calc-dropdown-item:hover .nav-calc-item-ext {
    opacity: 1;
    color: var(--primary-color);
    transform: translate(2px, -2px);
}

@media (max-width: 768px) {
    .nav-calc-dropdown-menu {
        position: fixed !important;
        top: 60px !important;
        right: 12px !important;
        left: auto !important;
        width: min(300px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        transform-origin: top right !important;
        z-index: 999999 !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border-color) !important;
    }
}

/* Cari Detay İşlem Türü Rozetleri ve Renkleri */
.ekstre-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}
.ekstre-badge i, .ekstre-badge svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
}
.ekstre-badge-satis, .ekstre-type-satis {
    background: rgba(21, 128, 61, 0.12) !important;
    color: #15803d !important; /* Satış Faturası: Koyu Yeşil */
    border: 1px solid rgba(21, 128, 61, 0.3) !important;
    font-weight: 800 !important;
}
.ekstre-badge-alis, .ekstre-type-alis {
    background: rgba(234, 88, 12, 0.12) !important;
    color: #ea580c !important; /* Alış Faturası: Turuncu */
    border: 1px solid rgba(234, 88, 12, 0.3) !important;
    font-weight: 800 !important;
}
.ekstre-badge-iade, .ekstre-type-iade {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #2563eb !important; /* İade Faturası: Mavi */
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
    font-weight: 800 !important;
}
.ekstre-badge-tahsilat, .ekstre-type-tahsilat {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important; /* Tahsilat: Canlı Yeşil */
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    font-weight: 800 !important;
}
.ekstre-badge-odeme, .ekstre-type-odeme {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important; /* Ödeme: Kırmızı */
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    font-weight: 800 !important;
}
.ekstre-badge-open, .ekstre-type-open {
    background: rgba(217, 119, 6, 0.12) !important;
    color: #d97706 !important; /* Açılış Bakiyesi: Amber */
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
    font-weight: 800 !important;
}

.ekstre-row-satis { border-left: 3.5px solid #15803d !important; }
.ekstre-row-alis { border-left: 3.5px solid #ea580c !important; }
.ekstre-row-iade { border-left: 3.5px solid #2563eb !important; }
.ekstre-row-tahsilat { border-left: 3.5px solid #10b981 !important; }
.ekstre-row-odeme { border-left: 3.5px solid #ef4444 !important; }
.ekstre-row-open { border-left: 3.5px solid #d97706 !important; }

.tutar-satis { color: #15803d !important; font-weight: 800 !important; }
.tutar-alis { color: #ea580c !important; font-weight: 800 !important; }
.tutar-iade { color: #2563eb !important; font-weight: 800 !important; }
.tutar-tahsilat { color: #10b981 !important; font-weight: 800 !important; }
.tutar-odeme { color: #ef4444 !important; font-weight: 800 !important; }
.tutar-open { color: #d97706 !important; font-weight: 800 !important; }

.ekstre-balance-plus {
    color: var(--text-primary, #0f172a) !important;
    font-weight: 700 !important;
}
.ekstre-balance-minus {
    color: var(--text-primary, #0f172a) !important;
    font-weight: 700 !important;
}

/* AI AUDIT & SPINNER STYLES */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

#pane-ai-audit .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#pane-ai-audit .card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
#ai-report-content h1,
#ai-report-content h2,
#ai-report-content h3,
#ai-report-content h4 {
    font-family: var(--font-heading, inherit);
}

/* ==========================================================================
   FİYAT LİSTESİ MODALI VE BASKI STİLLERİ (DY KODLU ÜRÜNLER)
   ========================================================================== */
.price-list-modal-dialog {
    max-width: 1180px !important;
    width: 95vw !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3) !important;
}

.price-list-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.price-list-controls-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border-color);
}

.price-list-control-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.discount-input-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-discount-buttons {
    display: flex;
    gap: 4px;
}

.btn-quick-disc {
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-quick-disc:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-quick-disc.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 2px 6px var(--primary-glow);
}

.price-list-category-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 20px;
    overflow-x: auto;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.pl-cat-pill {
    padding: 4px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-app);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pl-cat-pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pl-cat-pill.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

.price-list-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: var(--bg-card);
}

/* Antet / Üst Bilgi */
.price-list-print-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.pl-header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.price-list-logo {
    max-height: 52px;
    width: auto;
    object-fit: contain;
}

.pl-header-brand .header-brand-info h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.pl-header-brand .header-brand-info .company-subtext {
    margin: 2px 0 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.pl-header-meta-box {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pl-header-meta-box .doc-badge {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 0.5px;
}

.pl-header-meta-box .doc-meta-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pl-header-meta-box .doc-meta-row .meta-val {
    font-weight: 700;
    color: var(--text-primary);
}

/* Kategori Blokları */
.pl-category-section {
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-card);
    page-break-inside: avoid;
    break-inside: avoid;
}

.pl-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #1e293b;
    color: #f8fafc;
    font-weight: 700;
    font-size: 0.84rem;
}

[data-theme="dark"] .pl-category-header {
    background: #3f3f3f;
    border-bottom: 1px solid #636363;
}

.pl-category-header .cat-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pl-category-header .cat-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* İki Sıralı / İki Kolonlu Yan Yana Düzen */
.pl-category-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 6px;
    align-items: start;
}

@media (max-width: 860px) {
    .pl-category-two-cols {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.pl-subcol {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card);
}

/* Fiyat Listesi Tablosu (Minimal & Derli Toplu) */
.pl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
    line-height: 1.25;
}

.pl-table thead th {
    background: rgba(var(--primary-rgb), 0.07);
    color: var(--text-secondary);
    font-weight: 700;
    padding: 5px 6px;
    border-bottom: 1.5px solid var(--border-color);
    border-top: none;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pl-table tbody td {
    padding: 3.5px 6px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--text-primary);
}

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

.pl-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.pl-table tbody tr:hover {
    background: rgba(var(--primary-rgb), 0.04);
}

.pl-col-code {
    width: 58px;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
}

.pl-col-name {
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

.pl-col-unit-badge {
    display: inline-block;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    margin-left: 3px;
}

.pl-dim-badge {
    display: inline-block;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 4px;
}

.pl-col-list-price {
    width: 65px;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-decoration: line-through;
    white-space: nowrap;
}

.pl-col-sale-price {
    width: 75px;
    text-align: right;
    font-weight: 800;
    color: #16a34a;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Alt Bilgi & Dipnot */
.price-list-print-footer {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.price-list-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

/* JPG GÖRSEL ÇIKTISI DURUMU */
.is-generating-image {
    background: #ffffff !important;
    color: #000000 !important;
    width: 1060px !important;
    max-width: 1060px !important;
    padding: 24px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.is-generating-image .pl-category-section {
    border: 1px solid #cbd5e1 !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
}

.is-generating-image .pl-category-header {
    background: #1e293b !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
}

.is-generating-image .pl-category-two-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.is-generating-image .pl-subcol {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
}

.is-generating-image .pl-table th {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.is-generating-image .pl-table td {
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.is-generating-image .pl-table tbody tr:nth-child(even) {
    background: #f8fafc !important;
}

.is-generating-image .pl-col-sale-price {
    color: #15803d !important;
    font-weight: 800 !important;
}

/* BASKI KONTROLÜ (@media print) */
@media print {
    body.is-printing-price-list {
        background: #ffffff !important;
        color: #000000 !important;
    }

    body.is-printing-price-list .sidebar,
    body.is-printing-price-list .app-header,
    body.is-printing-price-list .app-footer,
    body.is-printing-price-list .main-content,
    body.is-printing-price-list #unsaved-warning-modal,
    body.is-printing-price-list #product-detail-modal,
    body.is-printing-price-list .no-print {
        display: none !important;
    }

    body.is-printing-price-list #price-list-modal {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 99999 !important;
    }

    body.is-printing-price-list .price-list-modal-dialog {
        max-width: 100% !important;
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        box-shadow: none !important;
        border: none !important;
        background: #ffffff !important;
        overflow: visible !important;
    }

    body.is-printing-price-list .price-list-modal-body {
        padding: 0 !important;
        overflow: visible !important;
        background: #ffffff !important;
    }

    body.is-printing-price-list .pl-category-section {
        border: 1px solid #cbd5e1 !important;
        margin-bottom: 14px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    body.is-printing-price-list .pl-category-header {
        background: #1e293b !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body.is-printing-price-list .pl-category-two-cols {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    body.is-printing-price-list .pl-subcol {
        border: 1px solid #cbd5e1 !important;
    }

    body.is-printing-price-list .pl-table th {
        background: #f1f5f9 !important;
        color: #000000 !important;
        border-color: #cbd5e1 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body.is-printing-price-list .pl-table td {
        border-color: #cbd5e1 !important;
        color: #000000 !important;
    }

    body.is-printing-price-list .pl-col-sale-price {
        color: #15803d !important;
        font-weight: 800 !important;
    }
}

/* ==========================================================================
   TEKLİFLER SAYFASI DETAY GÖRME BUTONU VE DETAY SATIRI
   ========================================================================== */
.proposal-expand-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    color: var(--primary-color, #8b1d1d);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.proposal-expand-btn:hover {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: var(--primary-color);
}

.proposal-expand-btn.active {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.proposal-expand-btn .expand-icon {
    transition: transform 0.25s ease;
}

.proposal-detail-row {
    transition: all 0.2s ease;
}

.proposal-detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}