/* ========================================================================= */
/* settings.css (NEW FILE for Settings Page Specific Styles) */
/* This file should be linked ONLY in settings.html for testing. */
/* ========================================================================= */

/* Genel page-layout ayarı (settings.html'deki body.forms-page-body'nin üzerine etki etmeyecek) */
.page-layout {
    display: flex;
    justify-content: center; /* Ortalamak için */
    align-items: flex-start; /* Üstten başlasın */
    padding: 30px; /* Sayfanın genel paddingi */
    gap: 30px; /* Bölümler arası boşluk */
    width: 100%;
    box-sizing: border-box;
    /* responsive ayarlarda max-width ve margin tekrar tanımlanacak */
    margin-top: calc(var(--header-height) + 20px); /* Header'ın altında başlasın */
}

/* Ana Settings Kutuları için Grid Düzeni */
.main-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 2x2 veya daha fazla kutu için esnek grid */
    gap: 25px; /* Kutular arası boşluk */
    width: 100%;
    max-width: 900px; /* Kutuların maksimum genişliği ve ortalaması için */
    margin: 0 auto; /* Ortalamak için */
    padding: 20px 0; /* İç boşluk */
}

/* Her bir ayar kartı (Types, Vendors, Accounts, Admin) */
.setting-card {
    background-color: var(--panel-bg); /* Genel panel arka planı */
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(var(--panel-blur));
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-light);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.setting-card:hover {
    transform: translateY(-5px); /* Hafif yukarı kalkma */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); /* Daha belirgin gölge */
    background-color: rgba(255, 255, 255, 0.2); /* Hafifçe parlama */
}

.setting-card i { /* Lucide ikonları için */
    width: 48px; /* Daha büyük ikonlar */
    height: 48px;
    color: var(--accent-green); /* İkon rengi (isteğe bağlı, genel renk de olabilir) */
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.setting-card:hover i {
    color: var(--primary-blue); /* Hover'da ikon rengi değişimi */
}

.setting-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-light);
}

.setting-card p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

/* =============================== */
/* Settings Modals (Overlay Forms) */
/* =============================== */

/* Modal Arka Planı ve Konumlandırma */
.settings-modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Daha koyu arka plan */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Navbar'dan yüksek olsun */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Modal Açıldığında */
.settings-modal-wrapper.visible {
    opacity: 1;
    visibility: visible;
}

/* Body üzerinde modal açıkken kaydırmayı engelleme */
body.modal-open {
    overflow: hidden;
}

/* Modal İçerik Kutusu */
.settings-modal-content {
    background-color: var(--panel-bg); /* Genel panel arka planı */
    padding: 20px; /* Padding azaltıldı, içeriğe daha fazla alan bırakmak için */
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5); /* Daha belirgin gölge */
    backdrop-filter: blur(var(--panel-blur)); /* Arka plan bulanıklığı */
    width: 95%; /* Daha geniş */
    max-width: 750px; /* Maksimum genişlik artırıldı (daha da genişletildi) */
    position: relative;
    color: var(--text-light);
    animation: modalSlideIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; /* Yeni animasyon */
    transform: translateY(-50px) scale(0.9); /* Başlangıç konumu ve boyutu */
    opacity: 0;
    max-height: 90vh; /* Ekran yüksekliğinin %90'ı kadar yükseklik */
    overflow-y: auto; /* Dikey kaydırma çubuğunu etkinleştir */
    display: flex; /* İçeriği dikey olarak düzenlemek için flexbox kullan */
    flex-direction: column; /* Öğeleri alt alta sırala */
}

/* Modal kapatma butonu */
.settings-modal-close-btn {
    position: sticky; /* Kapatma butonunu yukarıya sabitle */
    top: 0; /* En üste yapıştır */
    right: 0;
    font-size: 28px; /* Daha da küçültüldü */
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
    background-color: var(--panel-bg); /* Arka plan rengini modal ile aynı yap */
    padding: 0px 5px 5px 5px; /* Padding daha da ayarlandı */
    border-top-right-radius: 20px;
    z-index: 10; /* Diğer içeriklerin üzerinde kalmasını sağla */
    align-self: flex-end; /* Sağ üste hizala */
}

.settings-modal-close-btn:hover {
    color: var(--error-red);
}

/* Modal başlıkları */
.settings-modal-content h2 {
    font-size: 18px; /* Başlık boyutunu daha da küçültüldü */
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px; /* Alttan boşluğu daha da azaltıldı */
    color: var(--text-light);
    display: flex; /* İkon ve metni hizala */
    align-items: center;
    justify-content: center;
    gap: 5px; /* İkon ile metin arası boşluk daha da azaltıldı */
    position: sticky; /* Başlığı yukarıya sabitle */
    top: 0px; /* Kapatma butonunun hemen altında başlasın (kapatma butonunun paddingini dikkate al) */
    background-color: var(--panel-bg); /* Arka plan rengini modal ile aynı yap */
    padding: 5px 0; /* İçeriğin başlığın altından kaymasını sağlamak için padding azaltıldı */
    z-index: 9; /* Kapatma butonunun altında, diğer içeriklerin üstünde kalmasını sağla */
    width: 100%; /* Genişliğini ayarla */
}
.settings-modal-content h2 i { /* Başlık ikonları */
    width: 22px; /* İkon boyutu daha da küçültüldü */
    height: 22px; /* İkon boyutu daha da küçültüldü */
    color: var(--primary-blue); /* Varsayılan ikon rengi */
}
/* Özel başlık ikon renkleri */
#typeModalWrapper h2 i { color: var(--accent-green); }
#vendorModalWrapper h2 i { color: var(--primary-blue); }
#accountModalWrapper h2 i { color: var(--accent-green); }
#adminModalWrapper h2 i { color: var(--error-red); }
/* NEW: Reminder and Currency modal icon colors */
#reminderModalWrapper h2 i { color: var(--accent-green); } /* You can choose a different color */
#currencyModalWrapper h2 i { color: var(--primary-blue); } /* You can choose a different color */

        .account-form-grid, .vendor-form-grid {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }
.account-form-grid .form-group, .vendor-form-grid .form-group {
  flex: 1 1 calc(50% - 4px); /* gap: 8px için daha doğru hesaplama */
  min-width: 250px;
}
    
/* Form stilleri (Modal içindeki formlar) */
.settings-modal-content form {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Form elemanları arası boşluk daha da azaltıldı */
    flex-shrink: 0; /* Formun küçülmesini engelle */
    margin-bottom: 12px; /* Form ile sonraki bölüm başlığı arasına boşluk azaltıldı */
}

.settings-modal-content .form-group {
    margin-bottom: 0; /* form-group varsayılan margin'i sıfırlıyoruz */
    text-align: left;
    display: flex;
    flex-direction: column;
}

.settings-modal-content .form-group label {
    display: block;
    margin-bottom: 0px; /* Label ve input arası boşluk */
    font-size: 11px; /* Label font boyutu küçültüldü */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.settings-modal-content .form-group input[type="text"],
.settings-modal-content .form-group input[type="email"],
.settings-modal-content .form-group input[type="number"],
.settings-modal-content .form-group select {
    width: 100%;
    padding: 6px 8px; /* Padding daha da azaltıldı */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px; /* Radius daha da küçültüldü */
    font-size: 13px; /* Font boyutu küçültüldü */
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-light);
    outline: none;
    backdrop-filter: blur(5px);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.settings-modal-content .form-group input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.settings-modal-content .form-group input:focus,
.settings-modal-content .form-group select:focus {
    border-color: var(--primary-blue);
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.4);
}

/* Select ok ikonu */
.settings-modal-content .form-group select {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 6px center; /* İkon pozisyonu daha da ayarlandı */
    background-size: 16px; /* İkon boyutu daha da ayarlandı */
    padding-right: 20px; /* Ok için sağdan boşluk daha da ayarlandı */
}
/* Dropdown menülerindeki option renkleri */
.settings-modal-content .form-group select option {
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--text-light);
}
.settings-modal-content .form-group select option:checked {
    background-color: var(--primary-blue);
}

/* Required Indicator */
.required-indicator {
    color: var(--error-red);
    font-weight: 700;
    margin-left: 3px;
}

/* Form Submit Button */
.form-submit-button {
    background: linear-gradient(to right, var(--accent-green), var(--primary-blue));
    padding: 8px 15px; /* Padding azaltıldı */
    color: white;
    font-size: 14px; /* Font boyutu küçültüldü */
    border-radius: 14px; /* Radius küçültüldü */
    font-weight: 600;
    border: none;
    width: 100%;
    margin-top: 12px; /* Üstten boşluk azaltıldı */
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    flex-shrink: 0; /* Butonun küçülmesini engelle */
}

.form-submit-button:hover {
    background: linear-gradient(to right, var(--primary-blue), var(--accent-green));
    transform: scale(1.02);
}

/* Message Area */
.message-area {
    margin-top: 8px; /* Üst boşluk daha da azaltıldı */
    padding: 6px 10px; /* Padding daha da azaltıldı */
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    font-size: 12px; /* Font boyutu daha da küçültüldü */
    display: none;
    color: var(--text-light);
    flex-shrink: 0; /* Mesaj alanının küçülmesini engelle */
}
.message-area.success {
    background-color: rgba(0, 221, 146, 0.2);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}
.message-area.error {
    background-color: rgba(255, 75, 92, 0.2);
    color: var(--error-red);
    border: 1px solid var(--error-red);
}
.message-area.info {
    background-color: rgba(255, 212, 59, 0.2);
    color: #ffd43b;
    border: 1px solid #ffd43b;
}


/* Panel Section Header (Modal içindeki h3'ler için) */
.panel-section-header {
    font-size: 14px; /* Başlık font boyutunu daha da küçültüldü */
    font-weight: 600;
    color: var(--text-light);
    margin-top: 8px; /* Üstten boşluk daha da azaltıldı */
    margin-bottom: 4px; /* Alttan boşluk daha da azaltıldı */
    padding-bottom: 3px; /* Alt border paddingi daha da azaltıldı */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Başlığın küçülmesini engelle */
}

.panel-section-header .header-actions {
    display: flex;
    align-items: center;
    gap: 3px; /* Butonlar arası boşluk daha da azaltıldı */
}

/* Import Button */
.import-button {
    background-color: var(--primary-blue);
    color: white;
    padding: 4px 7px; /* Padding daha da azaltıldı */
    font-size: 11px; /* Font boyutu daha da küçültüldü */
    border-radius: 5px; /* Radius küçültüldü */
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 2px; /* İkon ile metin arası boşluk daha da azaltıldı */
}
.import-button:hover {
    background-color: color-mix(in srgb, var(--primary-blue) 80%, black 20%);
}
.import-button i {
    width: 12px; /* İkon boyutu daha da küçültüldü */
    height: 12px; /* İkon boyutu daha da küçültüldü */
}

/* Settings List (for Types) */
.settings-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Listeyi mevcut alanı dolduracak şekilde büyüt */
    overflow-y: auto; /* Liste içinde kaydırma çubuğunu etkinleştir */
    padding-right: 10px; /* Kaydırma çubuğu için sağdan boşluk bırak */
    min-height: 50px;
}
.settings-list li {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 6px 8px; /* Padding azaltıldı */
    border-radius: 6px; /* Radius küçültüldü */
    margin-bottom: 4px; /* Marjin azaltıldı */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px; /* Font boyutu küçültüldü */
    color: var(--text-light);
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}
.settings-list li:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.settings-list li:last-child {
    margin-bottom: 0;
}

.settings-list li .display-mode {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 4px; /* Boşluk azaltıldı */
}
.settings-list li .edit-mode {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 4px; /* Boşluk azaltıldı */
}
.settings-list li .edit-mode .edit-input-name,
.settings-list li .edit-mode .edit-select-kind {
    flex-grow: 1;
    padding: 3px 6px; /* Padding azaltıldı */
    border-radius: 5px; /* Radius küçültüldü */
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-light);
    font-size: 11px; /* Font boyutu küçültüldü */
    outline: none;
}
.settings-list li .edit-mode .edit-input-name:focus,
.settings-list li .edit-mode .edit-select-kind:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(0, 140, 255, 0.3);
}

/* Type Tags */
.type-tag {
    font-size: 0.55em; /* Boyut daha da küçültüldü */
    padding: 1px 4px; /* Padding azaltıldı */
    border-radius: 2px; /* Radius küçültüldü */
    margin-left: 4px; /* Marjin azaltıldı */
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
.type-tag.income {
    background-color: var(--accent-green);
}
.type-tag.expense {
    background-color: var(--danger-red);
}

/* Actions Cell Buttons (List and Table) */
.actions-cell {
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
    /* Vendor ve Account tablolarındaki edit butonu sorunu için düzeltme */
    /* display-mode ve edit-mode arasında geçiş yaparken butonların görünürlüğünü kontrol et */
    /* JavaScript tarafından yönetiliyor olmalı, ancak CSS'te varsayılan görünürlük önemlidir */
}
.actions-cell button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px; /* Font boyutu küçültüldü */
    width: auto;
    padding: 1px; /* Padding azaltıldı */
    margin: 0 0.5px; /* Marjin azaltıldı */
    display: inline-flex; /* Varsayılan olarak inline-flex */
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 3px; /* Radius küçültüldü */
}
.actions-cell button:hover {
    color: var(--text-light);
    background-color: rgba(255, 255, 255, 0.1);
}
.actions-cell button i {
    width: 14px; /* İkon boyutu küçültüldü */
    height: 14px; /* İkon boyutu küçültüldü */
}
/* Edit/Save/Cancel specific colors */
.actions-cell .edit-button:hover { color: var(--primary-blue); }
.actions-cell .save-edit-button:hover { color: var(--accent-green); }
.actions-cell .cancel-edit-button:hover { color: var(--error-red); }
.actions-cell .delete-button:hover { color: var(--danger-red); }

/* TABLOLARDAKİ GÖRÜNÜRLÜK SORUNU İÇİN EK KONTROLLER (Önemli!) */
/* display-mode ve edit-mode elementlerinin varsayılan ve geçişteki görünürlükleri */
.settings-table td .display-mode,
.settings-list li .display-mode {
    display: inline-block; /* Varsayılan olarak görünür */
}
.settings-table td .edit-mode,
.settings-list li .edit-mode {
    display: none; /* Varsayılan olarak gizli */
}

/* JavaScript "edit-mode" sınıfını eklediğinde bu kurallar aktifleşir */
/* Vendor ve Account tablolarındaki satırlar için: */
.settings-table tr.edit-mode .display-mode {
    display: none;
}
.settings-table tr.edit-mode .edit-mode {
    display: inline-block; /* Inline-block olarak göster */
}

/* Type listesi öğeleri için: */
.settings-list li.edit-mode-active .display-mode {
    display: none;
}
.settings-list li.edit-mode-active .edit-mode {
    display: flex; /* Types listesinde flex olarak kalmalı */
}


/* Settings Tables (for Vendors and Accounts) */
.table-responsive {
    overflow-x: auto;
    margin-top: 8px; /* Üst boşluk azaltıldı */
    flex-grow: 1; /* Tablo kapsayıcısının büyüyüp alanı doldurmasını sağla */
    display: flex;
    flex-direction: column;
    min-height: 100px;
    padding-right: 5px; /* Kaydırma çubuğu için sağdan boşluk bırakıldı */
}
.settings-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 10px; /* Font boyutu daha da küçültüldü */
    color: var(--text-light);
    flex-shrink: 0;
}
.settings-table th, .settings-table td {
    padding: 6px 8px; /* Padding azaltıldı */
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}
.settings-table th {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-light);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
}
.settings-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.15);
}
.settings-table td .display-text {
    display: block;
    padding: 0;
}

/* No data message for lists/tables */
.no-data-message {
    text-align: center;
    padding: 8px; /* Padding azaltıldı */
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-top: 6px; /* Marjin azaltıldı */
    font-size: 11px; /* Font boyutu küçültüldü */
}

/* Responsive Ayarlar - Main Settings Grid */
@media (max-width: 992px) {
    .main-settings-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        max-width: 800px;
    }
}

@media (max-width: 768px) {
    .settings-modal-content {
        max-width: 98%; /* Mobil ekranlarda daha da genişlemesi için */
        padding: 15px; /* Padding azaltıldı */
    }
    .settings-modal-content h2 {
        font-size: 18px; /* Mobil başlık boyutu */
        margin-bottom: 8px;
        gap: 5px;
        padding: 5px 0;
    }
    .settings-modal-content h2 i {
        width: 20px;
        height: 20px;
    }
    .settings-modal-close-btn {
        font-size: 26px;
        padding: 0px 5px 3px 3px;
    }
    .settings-modal-content .form-group input,
    .settings-modal-content .form-group select {
        padding: 6px 8px; /* Mobil form input padding */
        font-size: 13px;
    }
    .form-submit-button {
        font-size: 14px;
        padding: 8px 15px;
    }
    .panel-section-header {
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 5px;
        padding-bottom: 3px;
    }
    .import-button {
        font-size: 11px;
        padding: 4px 7px;
    }
    .settings-list li {
        font-size: 12px;
        padding: 6px 8px;
    }
    .actions-cell button {
        font-size: 12px;
        padding: 1px;
    }
    .actions-cell button i {
        width: 14px;
        height: 14px;
    }
    .settings-table th, .settings-table td {
        font-size: 10px;
        padding: 6px 8px;
    }
    .no-data-message {
        font-size: 11px;
        padding: 8px;
    }
}

@media (max-width: 500px) {
    .settings-modal-content h2 {
        font-size: 16px; /* En küçük mobil başlık */
        flex-direction: column;
        gap: 3px;
        padding: 5px 0;
    }
    .settings-modal-content h2 i {
        width: 18px;
        height: 18px;
    }
}

/* Animasyonlar */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }