:root {
    /* === YappCari Brand Colors === */
    --yappcari-primary-dark: #35445a; /* Koyu mavi-gri */
    --yappcari-primary: #2353e8; /* Parlak canlı mavi */
    --yappcari-secondry: #dceafc; /* Parlak canlı mavi */
    /* === YappCari Primary Variations === */
    --yappcari-primary-light: #0084d1;
    --yappcari-primary-lighter: #e0f2fe;
    --yappcari-brand-light: #4c73f0;
    --yappcari-brand-lighter: #7a97f5;
    --yappcari-brand-dark: #1b40b6;
    --yappcari-brand-darker: #142f84;
    --yappcari-brand-darkerblue: #324158;
    /* === YappCari Neutral Colors === */
    --yappcari-white: #ffffff;
    --yappcari-black: #000000;
    --yappcari-gray-100: #f7f9fc;
    --yappcari-gray-200: #edf0f7;
    --yappcari-gray-300: #dce2ef;
    --yappcari-gray-400: #b7bed1;
    --yappcari-gray-500: #8a92a7;
    --yappcari-gray-600: #5d667a;
    --yappcari-gray-700: #3a4150;
    --yappcari-gray-800: #1f2430;
    --yappcari-gray-900: #13161d;
    /* === YappCari Feedback === */
    --yappcari-success: #28c76f;
    --yappcari-warning: #ff9f43;
    --yappcari-danger: #ea5455;
    --yappcari-danger-light: #fee4e6;
    /* === YappCari Button Colors === */

    --yappcari-green-button: #19835b;
    --yappcari-purple-button: #6f42c1;
    --yappcari-greenlight-button: #ecfdf5;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif !important;
}
.yappcari-
.page-sidebar-wrapper {
    background: #fff !important;
}

.yappcari-menu {
    padding: 10px 10px !important;
    background: #ffffff !important;
    /*width: 260px !important;*/
    border-right: 1px solid #f0f0f0 !important;
    font-family: "Inter", "Segoe UI", sans-serif !important;
}

    .yappcari-menu > li {
        margin: 0px 0 !important;
    }

    .yappcari-menu .nav-link {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: transparent !important;
        border-radius: 8px !important;
        padding: 10px 14px !important;
        /* Updated color: #111 -> #3c4a60 */
        color: var(--yappcari-primary) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        transition: 0.2s all !important;
    }

        .yappcari-menu .nav-link:hover {
            background: var(--yappcari-secondry) !important;
            /* Updated color: #dbeafe -> #2353e8 */
            color: var(--yappcari-primary) !important;
        }

        .yappcari-menu .nav-item.active > .nav-link,
        .yappcari-menu .nav-item.start > .nav-link,
        .yappcari-menu .nav-link.active {
            background: var(--yappcari-secondry) !important;
            /* Updated color: #dbeafe -> #2353e8 */
            color: var(--yappcari-primary) !important;
            /*
            background: #e5f0ff !important;
            color: #0062e0 !important;*/
            font-weight: 600 !important;
        }

    .yappcari-menu .yanMenuIcon,
    .yappcari-menu i {
        width: 18px !important;
        min-width: 18px !important;
        text-align: center !important;
        font-size: 16px !important;
        color: #333 !important;
    }

    .yappcari-menu .sub-menu {
        padding-left: 30px !important;
        margin-top: 6px !important;
    }

        .yappcari-menu .sub-menu .nav-link {
            padding: 8px 14px !important;
            font-size: 13px !important;
            /* Updated color: #555 -> #3c4a60 */
            color: #3c4a60 !important;
        }

            .yappcari-menu .sub-menu .nav-link:hover {
                background: var(--yappcari-primary) !important;
                /* Updated color: #0055c7 -> #2353e8 */
                color: #2353e8 !important;
                text-decoration: none !important;
            }
body {
    background-color: white;
}
.page-sidebar {
    background: #fff !important;
    min-height: 20px !important;
}

.page-sidebar-menu > li > a {
    border: none !important;
    min-height: 0px !important;

}
.page-sidebar-menu > li > a >.arrow:before {    
    margin-top:0px !important;
}

.yappcari-menu::-webkit-scrollbar {
    width: 6px !important;
}

.yappcari-menu::-webkit-scrollbar-thumb {
    background: #d1d1d1 !important;
    border-radius: 20px !important;
}

.yappcari-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
.yappcari-sidebar-title {
    color: var(--yappcari-gray-600) !important;
    text-decoration: none !important;
    letter-spacing: 0px !important;
}

.yappcari-sidebar-group-title {
    font-size: 12px !important;
    font-weight: 750 !important;
    color: var(--yappcari-gray-600) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top:10px !important;
    
}

.yappcari-sidebar-group-line {
    width: 100% !important;
    height: 1px !important;
    background: #e5e7eb !important;
    margin: 0 0 10px 0 !important;
}

/* Genel Sıfırlamalar ve Temel Ayarlar */
body {
    font-family: Arial, sans-serif !important;
    background-color: #f0f2f5 !important;
    margin: 0 !important;
    color: #333 !important;
}

.yappcari-dashboard-container {
    
    margin: 0 auto !important;
    padding: 20px !important;
}

/* Kartlar ve Bölümler için Ortak Stil */
.yappcari-card-box {
    background-color: #fff !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    margin-bottom: 20px !important;
}

/* Başlık */
.yappcari-dashboard-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

.yappcari-dashboard-title {
    font-size: 2.5rem !important;
    font-weight: bold !important;
    margin: 0 !important;
}

.yappcari-current-date {
    color: #666 !important;
    font-size: 1.0rem !important;
}

.yappcari-header-right {
    display: flex !important;
    align-items: center !important;
}
.yappcari-action-button-inputs {
    padding: 10px 20px !important;
    border: 1px solid #ccc !important;
    border-radius: 12px !important;
    font-weight: bold !important;
    margin-left: 10px !important;
}
.yappcari-action-button {
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    margin-left: 10px !important;
}

.yappcari-action-button-hover {
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    margin-left: 10px !important;
    color: var(--yappcari-gray-800) !important;
    text-decoration:none !important;
}
    .yappcari-action-button-hover:hover,
    .yappcari-action-button-hover.active {
        background-color: var(--yappcari-green-button) !important;
        color: var(--yappcari-gray-100) !important;
    }

.yappcari-primary {
    background-color: #007bff !important; /* Mavi Buton */
    color: white !important;
}

.yappcari-user-info {
    padding: 5px !important;
    border-left: 1px solid #ccc !important;
}

/* 1. Özet Kartlar */
.yappcari-summary-cards {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.yappcari-card {
    flex: 1 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

    .yappcari-card p {
        margin: 0 0 10px 0 !important;
        color: #666 !important;
        font-size: 1.0rem !important;
    }

    .yappcari-card .yappcari-value {
        font-size: 2.0rem !important;
        font-weight: bold !important;
    }

    .yappcari-card.yappcari-blue {
        background-color: #e6f7ff !important;
        color: #007bff !important;
    }

    .yappcari-card.yappcari-green {
        background-color: #e6ffe6 !important;
        color: #28a745 !important;
    }

    .yappcari-card.yappcari-light-yellow {
        background-color: #fffbe6 !important;
        color: #ffc107 !important;
    }
    .yappcari-card.yappcari-light-orange {
        background-color: #fffbea !important;
        color: #bd5513 !important;
    }

/* 2. Varlıklar ve Borçlar */
.yappcari-assets-liabilities-section .yappcari-totals {
    display: flex !important;
    margin-bottom: 20px !important;
}

.yappcari-total-asset, .yappcari-total-liability {
    flex: 1 !important;
    padding: 15px !important;
    border-radius: 8px !important;
    text-align: center !important;
}

.yappcari-total-asset {
    background-color: #e6f7ff !important;
    margin-right: 10px !important;
}

.yappcari-total-liability {
    background-color: #fff0f0 !important;
    margin-left: 10px !important;
}

.yappcari-total-value {
    font-size: 2.0rem !important;
    font-weight: bold !important;
}

.yappcari-green-text {
    color: #28a745 !important;
}
.yappcari-blue-text {
    color: #007bff !important;
}
.yappcari-red-text {
    color: #dc3545 !important;
}

.yappcari-assets-liabilities-section .yappcari-details {
    display: flex !important;
}

.yappcari-detail-group {
    flex: 1 !important;
    padding:10px;
}

.yappcari-detail-item {
    display: flex !important;
    justify-content: space-between !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid #eee !important;
}

    .yappcari-detail-item:last-child {
        border-bottom: none !important;
    }

.yappcari-detail-group h3 {
    font-size: 1.5rem !important;
    color: #666 !important;
    margin-bottom: 10px !important;
}

/* 3. ve 4. Tablolar */
.yappcari-data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 15px !important;
}

    .yappcari-data-table th, .yappcari-data-table td {
        padding: 12px 15px !important;
        text-align: left !important;
        border-bottom: 1px solid #eee !important;
        border-radius: 8px !important;
    }

    .yappcari-data-table th {
        background-color: #f8f9fa !important;
        font-weight: bold !important;
        color: #555 !important;
        font-size: 1.2rem !important;
    }

.yappcari-action-btn {
    background-color: #007bff !important;
    color: white !important;
    padding: 5px 10px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
}

/* Durum Etiketleri */
.yappcari-status-tag {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    display: inline-block !important;
}

    .yappcari-status-tag.yappcari-red {
        background-color: #f8d7da !important;
        color: #721c24 !important;
    }

    .yappcari-status-tag.yappcari-blue {
        background-color: #d1ecf1 !important;
        color: #0c5460 !important;
    }

.yappcari-kdv-chart-section {
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.yappcari-chart-container {
    position: relative;
    height: 300px; /* Grafik yüksekliği */
    width: 100%;
}

.yappcari-chart-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    font-family: sans-serif;
    font-size: 14px;
}

.yappcari-legend-item::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 3px; /* Karemsi yuvarlak */
}

.yappcari-gelen-kdv::before {
    background-color: #28a745;
}

.yappcari-giden-kdv::before {
    background-color: #fd7e14;
}
/* Görseldeki turuncu tonu */
/* ======================================= */
/* 📱 MEDIA QUERIES (Mobil Uyumlu Tasarım) */
/* ======================================= */

@media (max-width: 992px) {
    /* Tablet ve küçük ekranlar için */
    .yappcari-dashboard-container {
        padding: 10px !important;
    }

    /* 1. Özet Kartlar */
    /* 992px altında kartları 2x2 veya 1x1 yapalım */
    .yappcari-summary-cards {
        flex-wrap: wrap !important;
    }

    .yappcari-card {
        flex-basis: calc(50% - 10px) !important; /* İki kart yan yana */
        margin-bottom: 15px !important;
    }

    /* 2. Varlıklar ve Borçlar */
    .yappcari-assets-liabilities-section .yappcari-details {
        flex-direction: column !important; /* Detay gruplarını alt alta yığ */
    }

    .yappcari-detail-group {
        margin-bottom: 15px !important;
    }
}

@media (max-width: 600px) {
    /* Telefonlar için */

    /* Başlık */
    .yappcari-dashboard-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .yappcari-header-left {
        margin-bottom: 10px !important;
    }

    .yappcari-header-right {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .yappcari-user-info {
        border-left: none !important;
        padding-left: 0 !important;
    }

    .yappcari-action-button {
        flex-grow: 1 !important;
        margin-right: 10px !important;
    }

    /* 1. Özet Kartlar */
    /* Tek sütunda alt alta yığ */
    .yappcari-card {
        flex-basis: 100% !important;
    }

    /* 2. Varlıklar ve Borçlar - Toplamlar */
    .yappcari-assets-liabilities-section .yappcari-totals {
        flex-direction: column !important; /* Varlık ve Borç toplamlarını alt alta yığ */
    }

    .yappcari-total-asset, .yappcari-total-liability {
        margin: 0 0 10px 0 !important;
    }

    /* 3. ve 4. Tablolar */
    /* Tabloların mobil cihazlarda yatay kaydırılabilir olmasını sağla */
    .yappcari-invoices-section,
    .yappcari-data-section,
    .yappcari-expense-table,
    .yappcari-upcoming-payments-section {
        overflow-x: auto !important;
    }

    .yappcari-data-table {
        min-width: 600px !important; /* Tablonun sığması için minimum genişlik */
    }
}

/* ======================================= */
/* 🆕 YENİ HESAPLAR DASHBOARD STILLERİ     */
/* ======================================= */

.yappcari-accounts-header {
    display: flex !important;
    justify-content: flex-end !important;
    margin-bottom: 10px !important;
}

.yappcari-show-inactive-btn {
    background: none !important;
    border: none !important;
    color: #007bff !important;
    cursor: pointer !important;
    font-size: 1.5rem !important;
    padding: 5px !important;
}

/* Ana Grid Yapısı (2 Sütun) */
.yappcari-account-groups-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

.yappcari-account-group {
    padding: 15px !important;
}

.yappcari-group-title {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    padding-bottom: 5px !important;
    border-bottom: 1px solid #eee !important;
}

    .yappcari-group-title h2 {
        font-size: 1.6rem !important;
        font-weight: 500 !important;
        color: #333 !important;
        margin: 0 !important;
    }

.yappcari-icon-add {
    color: white !important;
    background-color: #28a745 !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    text-align: center !important;
    line-height: 18px !important;
    font-size: 1.6rem !important;
    font-weight: bold !important;
    margin-left: 10px !important;
    cursor: pointer !important;
}

.yappcari-total-amount {
    margin-left: auto !important;
    font-weight: bold !important;
    color: #666 !important;
    font-size: 1.6rem !important;
}

.yappcari-integration-button {
    background-color: #e0f7fa !important;
    color: #007bff !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 1.2rem !important;
    margin-left: 10px !important;
    cursor: pointer !important;
}


/* Hesap Kartları (Mini Card) */
.yappcari-account-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.yappcari-mini-card {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 1.4rem !important;
    flex-grow: 1 !important;
    min-width: calc(50% - 5px) !important; /* İki kart yan yana */
    box-sizing: border-box !important;
    color: #333 !important;
}

    .yappcari-mini-card .yappcari-amount {
        font-weight: bold !important;
        margin-left: 10px !important;
    }

/* Renkler (Arka plan ve Metin) */
.yappcari-blue-bg {
    background-color: #e6f7ff !important;
}

.yappcari-green-bg {
    background-color: #e6ffe6 !important;
}

.yappcari-red-bg {
    background-color: #fff0f6 !important;
}

.yappcari-yellow-bg {
    background-color: #fffbe6 !important;
}

.yappcari-white-bg {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #333 !important;
}
.yappcari-dark-bg {
    background-color: #333 !important;
    border: 1px solid #333 !important;
    color: #f8f9fa !important;
}

/* Şirket Ortakları Hesabı Layout'u (Beyaz Kartlar) */
.yappcari-partners-layout {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

.yappcari-partner-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 4px !important;
    border: 1px solid #ccc !important; /* Hafif bir çerçeve */
    background-color: #fff !important;
    font-size: 1.4rem !important;
    color: #333 !important;
}

    .yappcari-partner-item .yappcari-amount {
        font-weight: bold !important;
    }

/* ======================================= */
/* 📱 MOBİL UYUMLULUK EKLEMESİ (Sadece Yeni Bölüm) */
/* ======================================= */

@media (max-width: 992px) {
    /* Ana Grid'i Tek Sütuna İndir */
    .yappcari-account-groups-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    /* Mini Kartları Tek Sütuna İndir */
    .yappcari-mini-card {
        min-width: 100% !important;
    }

    /* Ortak Kartlarını Tek Sütuna İndir */
    .yappcari-partners-layout {
        grid-template-columns: 1fr !important;
    }
}

/* ======================================= */
/* 🆕 MODAL (PENCERE) STILLERİ - CLASS TEMELLİ */
/* ======================================= */

.yappcari-hidden {
    display: none !important;
}

/* Modal Arkaplanı (Backdrop) */
.yappcari-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000 !important;
}

/* Modal İçeriği */
.yappcari-modal-content {
    background-color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    width: 70% !important;
    max-width: 600px !important;
    max-height: 80% !important;
    overflow: hidden !important;
}

/* Modal Başlık (Header) */
.yappcari-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 20px !important;
    color: white !important;
}

.yappcari-modal-green-bg {
    background-color: /*#28a745*/ var(--yappcari-green-button) !important;
}

.yappcari-modal-header h2 {
    margin: 0 !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
}

.yappcari-modal-close-btn {
    cursor: pointer !important;
    font-size: 1.8rem !important;
    line-height: 1 !important;
    font-weight: normal !important;
}

/* Modal Body */
.yappcari-modal-body {
    padding: 25px 30px !important;
}
.yappcari-modal-content .yappcari-modal-body {
    /* Kaydırmayı mümkün kıl */
    overflow-y: auto;
    /* Max yüksekliği belirle: Görünüm yüksekliğinin (viewport height) %80'ini geçmesin */
    /* Böylece modal header ve footer için yer kalır */
    max-height: 65vh;
    /* Mobil cihazlarda iyi bir kaydırma deneyimi için (opsiyonel) */
    -webkit-overflow-scrolling: touch;
}

/* Modalı ortalamak için modal container'a daha fazla esneklik */
.yappcari-modal-container {
    /* Modalın kendisinin ortalanabilmesi ve kaydırma yapılabilmesi için */
    align-items: center;
    /* Gerekirse, tüm modal container'ın kendisi de kayabilir (tarayıcı penceresi çok küçükse) */
    overflow-y: auto;
}
/* Form Satırları */
.yappcari-form-row {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 15px !important;
}

.yappcari-form-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

    /* Label'lar */
    .yappcari-form-group label {
        font-size: 1.1rem !important;
        color: #666 !important;
        margin-bottom: 5px !important;
        font-weight: bold !important;
    }

/* Input ve Select Alanları */
.yappcari-input-field {
    padding: 6px 8px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 1.2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Input ve Select Alanları */
.yappcari-input-field-btn {
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 1.2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Renk Seçici Alanı */
.yappcari-form-section {
    margin-top: 20px !important;
}

.yappcari-color-picker {
    display: flex !important;
    gap: 15px !important;
}

/* Renk Seçenekleri */
.yappcari-color-option {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}
    .yappcari-color-option::-webkit-color-swatch-wrapper {
        padding: 0 !important; /* İçteki tüm boşluğu sıfırlar, kareliği bitirir */
    }
    .yappcari-color-option::-webkit-color-swatch {
        border: 2px solid #ddd; /* Şık bir sınır çizgisi */
        border-radius: 50%; /* Tam yuvarlak yapar */
        box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
    }

    /* 3. Firefox için aynı işlemi uygula */
    .yappcari-color-option::-moz-color-swatch {
        border: 2px solid #ddd;
        border-radius: 50%;
        box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
    }

/* Seçiliyken (yappcari-selected) etrafına bir halka ekleyelim */
.yappcari-selected {
    outline: 2px solid #3498db;
    outline-offset: 3px;
    border-radius: 50%;
}
/* Renkler (Sadece arka plan rengi için ayrı class'lar) */
.yappcari-blue-color {
    background-color: #007bff !important;
}

.yappcari-green-color {
    background-color: #28a745 !important;
}

.yappcari-red-color {
    background-color: #dc3545 !important;
}

.yappcari-yellow-color {
    background-color: #ffc107 !important;
}

.yappcari-purple-color {
    background-color: #6f42c1 !important;
}

/* Seçili Renk */
.yappcari-color-option.yappcari-selected {
    box-shadow: 0 0 0 4px #ccc !important;
}

/* Modal Footer (Butonlar) */
.yappcari-modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 15px 30px !important;
    border-top: 1px solid #eee !important;
    background-color: #f8f9fa !important;
}

.yappcari-btn {
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    margin-left: 10px !important;
}

.yappcari-btn-cancel {
    background-color: #ffc107 !important;
    color: #333 !important;
}
.yappcari-btn-cancel-white {
    background-color: #eee !important;
    color: #222 !important;
}

.yappcari-btn-save {
    background-color: var(--yappcari-green-button) !important;
    color: white !important;
}
.yappcari-btn-save-purple {
    background-color: var(--yappcari-purple-button) !important;
    color: white !important;
}

/* 📱 MOBİL UYUMLULUK EKLEMESİ (Modal) */
@media (max-width: 600px) {
    .yappcari-modal-content {
        max-width: 95% !important;
        margin: 10px !important;
    }

    .yappcari-form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
}
/* ======================================= */
/* 🆕 KREDİLER BÖLÜMÜNE ÖZEL MİNİMAL CSS  */
/* ======================================= */

/* Kredi başlık bölümü için flex yönünü tersine çevirme (sadece bu bölümde) */
.yappcari-credits-header {
    /* Mevcut .yappcari-dashboard-header stilini kullanıyoruz. 
       Gerektiğinde butonun sağa gitmesi için bu sınıfı özelleştirebiliriz. 
       Şu anki header yapınız zaten sağda buton barındırıyordu. */
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #eee !important; /* Görseldeki ayracı ekleyelim */
}


/* Yeni tablolar için, genel .yappcari-data-table stilini kullanıyoruz.
   Bu sayede tüm tablo stilleri (başlık, hücreler, border) korunur. */

/* ======================================= */
/* 🆕 KREDİ MODALI İPUCU METNİ             */
/* ======================================= */

.yappcari-form-hint {
    font-size: 1rem !important;
    color: #dc3545 !important; /* Kırmızı renk */
    margin-top: 5px !important;
    padding-left: 2px !important;
}

/* Textarea görünümünü ayarlayalım */
#credit-notes {
    resize: vertical !important;
    min-height: 80px !important;
}

/* ======================================= */
/* 🆕 ÇEK / SENETLER BÖLÜMÜNE ÖZEL MİNİMAL CSS */
/* ======================================= */

/* Sekme Navigasyonu (Çekler/Senetler) */
.yappcari-tab-navigation {
    display: flex !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #eee !important;
}

.yappcari-tab-btn {
    background: none !important;
    border: 1px solid #ccc !important;
    border-radius: 16px !important;
    padding: 6px 15px !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
    color: #333 !important;
    transition: background-color 0.2s !important;
}

    .yappcari-tab-btn:hover {
        background-color: #f0f0f0 !important;
    }

    /* Aktif Sekme */
    .yappcari-tab-btn.yappcari-tab-active {
        background-color: var(--yappcari-purple-button) !important; /* Mor renk */
        border-color: var(--yappcari-purple-button) !important;
        color: white !important;
    }

/* Yeni Kayıt Butonu (Mor renk) */
.yappcari-action-button.yappcari-purple {
    background-color: var(--yappcari-purple-button) !important; /* Mor Buton */
    color: white !important;
    padding: 8px 15px !important;
    font-size: 1.5rem !important;
}

/* Durum Etiketleri (Badge) */
.yappcari-status-badge {
    display: inline-block !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-align: center !important;
}
.yappcari-status-badge-black {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 16px !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    text-align: center !important;
}
.yappcari-yellow-badge {
    background-color: #fffbe6 !important;
    color: #ffc107 !important;
    border: 1px solid #ffc107 !important;
}

.yappcari-paid-badge {
    background-color: #e6ffe6 !important;
    color: #28a745 !important;
    border: 1px solid #28a745 !important;
   
}
.yappcari-red-badge {
    background-color: #ffecee !important;
    color: #e54747 !important;
    border: 1px solid #ca1729 !important;
}
.yappcari-info-badge {
    background-color: #e7f1ff !important;
    color: #0d6efd !important;
    border: 1px solid #0d6efd !important;
}
.yappcari-soft-purple-badge {
    background-color: #faf5ff !important;
    color: #805ad5 !important;
    border: 1px solid #e9d8fd !important;
}

/* Nötr / Gri */
.yappcari-secondary-badge {
    background-color: #f1f1f1 !important;
    color: #6c757d !important;
    border: 1px solid #6c757d !important;
}
/* ======================================= */
/* 🆕 ÇEK / SENET MODALI BAŞLIK RENGİ       */
/* ======================================= */

.yappcari-modal-purple-bg {
    background-color: var(--yappcari-purple-button) !important; /* Mor renk */
}

/* Modal form gruplarının mobil uyumlulukta yan yana kalmasını engellemek için */
.yappcari-form-empty {
    /* Boş bir alan mobil cihazlarda gereksiz yer kaplamasın */
    visibility: hidden !important;
    height: 0 !important;
}

/* ======================================= */
/* 🆕 MÜŞTERİLER SAYFASI ÖZEL CSS         */
/* ======================================= */

/* Üst Kontrol Çubuğu (Arama + Butonlar) */
.yappcari-header-controls {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

.yappcari-search-bar {
    flex-grow: 1 !important;
    max-width: 400px !important; /* Arama alanını sınırlayalım */
    margin-right: 20px !important;
}

.yappcari-large-search {
    width: 100% !important;
}

.yappcari-control-buttons {
    display: flex !important;
    gap: 10px !important;

    flex-wrap: wrap !important; /* Butonların alta geçmesini sağlar */
    margin-bottom: 15px; /* Alt satırla tablo arasında boşluk bırakır */
}

/* Sayfa Yerleşimi (Sol: Tablo + Kartlar, Sağ: Hakedişler) */
.yappcari-layout-grid-2-1 {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important; /* Sol panel 2 birim, Sağ panel 1 birim */
    gap: 20px !important;
}

/* Özet Kartlar Kapsayıcısı */
.yappcari-summary-cards {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.yappcari-summary-card {
    flex: 1 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

    .yappcari-summary-card p {
        margin: 0 0 5px 0 !important;
        font-size: 0.9rem !important;
        opacity: 0.8 !important;
    }

.yappcari-summary-amount {
    font-size: 1.5rem !important;
    font-weight: bold !important;
}

/* Renkler (Önceki dashboard görsellerinden türetildi) */
.yappcari-bg-blue {
    background-color: #3b82f6 !important;
}
.yappcari-bg-blue-light {
    background-color: #e6f7ff !important;
    color: var(--yappcari-primary) !important;
}
/* Toplam Alacak Mavi */
.yappcari-bg-green-light {
    background-color: #d1fae5 !important;
    color: #059669 !important;
}
/* Toplam Tahsilat Yeşil Açık */
.yappcari-bg-red-light {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}
.yappcari-bg-orange-light {
    background-color: #fffbea !important;
    color: #bd5513 !important;
}
/* Kalan Alacak Kırmızı Açık */
.yappcari-negative-value {
    color: #dc2626 !important;
    font-weight: bold !important;
}
/* Negatif değer */

/* Güncel Hakedişler (Sağ Panel) */
.yappcari-right-panel h3 {
    font-size: 1.1rem !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-weight: 600 !important;
}

.yappcari-hak-card {
    padding: 15px !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    position: relative !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.yappcari-bg-light-green {
    background-color: #ecfdf5 !important;
    border-left: 5px solid #10b981 !important; /* Yeşil çizgi */
}

.yappcari-hak-card h4 {
    margin: 0 0 5px 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.yappcari-hak-card p {
    margin: 0 0 10px 0 !important;
    font-size: 0.85rem !important;
    color: #6b7280 !important;
}

.yappcari-hak-amount {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    color: #10b981 !important;
}

.yappcari-hak-card .yappcari-status-badge {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
}

/* 📱 Mobil Uyumluluk */
@media (max-width: 900px) {
    .yappcari-layout-grid-2-1 {
        grid-template-columns: 1fr !important; /* Tek sütuna düşür */
    }

    .yappcari-header-controls {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .yappcari-search-bar {
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }

    .yappcari-control-buttons {
        justify-content: flex-start !important;
    }

    .yappcari-summary-cards {
        flex-direction: column !important; /* Kartları alt alta yığ */
    }
}

/* ======================================= */
/* 🆕 DROPDOWN MENÜ STİLLERİ (Fatura İşlem) */
/* ======================================= */

/* Kapsayıcı (Buton ve Menü aynı hizada) */
.yappcari-action-dropdown-container {
    position: relative !important;
    display: inline-block !important;
}

/* İşlem butonu (Hali hazırda .yappcari-action-btn stilini kullanıyor) */
.yappcari-dropdown-toggle {
    /* + simgesi için genişlik ve yükseklik ayarı */
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 2rem !important;
    line-height: 28px !important;
    text-align: center !important;
    font-weight: normal !important;
}

/* Dropdown Menüsü */
.yappcari-dropdown-menu {
    position: absolute !important;
    right: 0 !important; /* Butona göre sağa hizala */
    top: 100% !important; /* Butonun hemen altına yerleştir */
    min-width: 150px !important;
    background-color: white !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    z-index: 50 !important; /* Diğer elementlerin üstünde görünmesi için */
    padding: 5px 0 !important;
    margin-top: 5px !important;
}

/* Dropdown Menü İçindeki Öğeler */
.yappcari-dropdown-item {
    display: block !important;
    padding: 8px 15px !important;
    text-decoration: none !important;
    color: #333 !important;
    font-size: 1.2rem !important;
    transition: background-color 0.2s !important;
}

    .yappcari-dropdown-item:hover {
        background-color: #f0f0f0 !important;
        color: #007bff !important; /* Hover rengini mavi yapalım */
    }


/* ======================================= */
/* 🆕 GİDER YÖNETİMİ ÖZEL CSS              */
/* ======================================= */

/* Mavi Durum Etiketi (Onaylanmış/Açık için) */
.yappcari-status-badge.yappcari-blue-badge {
    background-color: var(--yappcari-secondry) !important; /* Açık mavi */
    color: var(--yappcari-primary) !important; /* Koyu mavi metin */
    border: 1px solid var(--yappcari-primary) !important;
}

/* Tablo Başlıklarının Tekrar Kullanımı (Zaten mevcut) */
/* .yappcari-data-table stili tüm tablolar için yeterlidir. */

@media (max-width: 600px) {
    .yappcari-form-row {
        flex-direction: column !important;
        gap: 15px !important;
    }

        .yappcari-form-row .yappcari-form-group {
            flex: 100% !important;
        }

    .yappcari-control-buttons {
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-direction: column;
    }

    /*    .yappcari-control-buttons .yappcari-action-button {
            width: 100%;
        }*/

    .yappcari-modal .yappcari-modal-body {
        overflow-y: auto;
        max-height: 80vh;
        -webkit-overflow-scrolling: touch;
    }

    .yappcari-modal-container {
        align-items: center;
        overflow-y: auto;
    }

    .yappcari-fatura-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .yappcari-fatura-details {
        width: 100%;
        margin-bottom: 15px;
    }

    .yappcari-fatura-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .yappcari-fatura-details .yappcari-info-row {
        flex-direction: column !important;
        gap: 5px !important;
    }

    .yappcari-fatura-actions button {
        flex-grow: 1;
    }

    .yappcari-fixed-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

        .yappcari-fixed-footer > div {
            width: 100%;
            margin-bottom: 10px;
            flex-direction: column !important;
            gap: 5px !important;
        }

        .yappcari-fixed-footer span {
            font-size: 1rem !important;
        }
}
.yappcari-kasa-header {
    background-color: var(--yappcari-brand-darkerblue) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: 8px 8px 0px 0px !important;
}
.yappcari-item-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.yappcari-bar-bg {
    background: #e9ecef !important;
    height: 6px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}

.yappcari-bar-fill {
    height: 100% !important;
    width: 0% !important;
    transition: width 0.5s ease-in-out !important;
}

.asset-fill {
    background-color: #3498db !important;
}
/* Mavi Varlık */
.liability-fill {
    background-color: #e74c3c !important;
}
/* Kırmızı Borç */

/* Ana Kapsayıcı: İki grubu uçlara iter */
.yappcari-toolbar-container {
    display: flex !important;
    justify-content: space-between; /* Birini sola, diğerini sağa yaslar */
    align-items: center; /* Dikeyde ortalar */
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
    width: 100%;
}

/* Sağdaki tüm elemanları (tarih, ara, butonlar) yan yana dizer */
.yappcari-right-group {
    display: flex !important;
    align-items: center;
    gap: 15px;
}

/* Butonların kendi içindeki boşluğu */
.yappcari-button-wrapper {
    display: flex;
    gap: 8px;
}

/* Mobil uyumluluk: Ekran daraldığında her şey merkeze gelsin istersen */
@media (max-width: 768px) {
    .yappcari-toolbar-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .yappcari-right-group {
        width: 100%;
        
    flex-wrap: wrap;
    }
}