/* styles.css - SPA Stil Dosyası (Yeniden Tasarım) */

/* Mobile-only line break helper */
br.mobile-break {
    display: none;
}

/* Base font-size increased for better readability */
html {
    font-size: 18px !important;
}

/* --- Temel Ayarlar ve Reset --- */
/* Modern bir sans-serif yığını kullanıyoruz */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 1rem; /* Daha küçük bir padding */
    background-color: #f8fafc; /* Tailwind bg-slate-50 */
    color: #1e293b; /* Tailwind text-slate-800 */
    font-size: 0.875rem; /* ~14px - Bir tık artırıldı */
    line-height: 1.4; /* Daha sıkı satır aralığı */
}

/* --- Uygulama Ana Konteyneri --- */
/* Merkezli, maksimum genişlikli ve gölgeli konteyner */
#app {
    max-width: 700px; /* Tailwind max-w-3xl (~1024px) - Daha dar */
    margin: 0 auto;
    background-color: #ffffff; /* Beyaz arka plan */
    padding: 1rem; /* İç boşluk */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Tailwind shadow-lg */
    border: 1px solid #e2e8f0; /* Tailwind border-slate-200 - Hafif bir çerçeve */
}

/* --- Başlık ve Buton Bölümü --- */
/* Flexbox ile başlık ve butonu hizalıyoruz */
.header-section {
    display: flex;
    justify-content: space-between; /* Başlık sola, buton sağa */
    align-items: center;
    margin-bottom: 1.25rem; /* Alt boşluk */
    padding-bottom: 0.75rem; /* Alt çizgi için iç boşluk */
    border-bottom: 1px solid #e2e8f0; /* Tailwind border-slate-200 */
}

/* Başlık stili */
.header-section p {
    font-size: 1.125rem; /* Tailwind text-lg (~18px) */
    font-weight: 600; /* Tailwind font-semibold */
    margin: 0;
    color: #0f172a; /* Tailwind text-slate-900 */
}

/* --- Mesajlar (Yükleme, Hata, Veri) --- */
/* Genel mesaj kutusu stili */
#loading, #error, #data {
    display: none;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    border-radius: 0.375rem; /* Tailwind rounded */
}

/* Yükleme mesajı */
#loading {
    background-color: #dbeafe; /* Tailwind bg-blue-50 */
    color: #1e40af; /* Tailwind text-blue-700 */
    text-align: center;
    border: 1px solid #bfdbfe; /* Tailwind border-blue-200 */
}

/* Hata mesajı */
#error {
    background-color: #fee2e2; /* Tailwind bg-red-50 */
    color: #b91c1c; /* Tailwind text-red-700 */
    border: 1px solid #fecaca; /* Tailwind border-red-200 */
}

/* Veri bölümü */
#data {
    background-color: #f8fafc; /* Tailwind bg-slate-50 */
    border: 1px solid #e2e8f0; /* Tailwind border-slate-200 */
    border-radius: 0.375rem; /* Tailwind rounded */
}

/* --- Şube ve Ürün Tabloları --- */
/* Her şube bölümü */
.branch-section {
    margin-bottom: 1.5rem; /* Şubeler arası boşluk */
    border: 1px solid #cbd5e1; /* Tailwind border-slate-300 */
    border-radius: 0.375rem; /* Tailwind rounded */
    overflow: hidden; /* Köşeleri düzgün kırmak için */
    background-color: #ffffff; /* Beyaz arka plan */
}

/* Şube başlığı */
.branch-header {
    background-color: #1e40af; /* Tailwind bg-blue-800 */
    color: white;
    padding: 0.625rem 0.875rem; /* Daha kompakt padding */
    font-size: 0.875rem; /* Tailwind text-sm (~14px) */
    font-weight: 600; /* Tailwind font-semibold */
    display: flex;
    align-items: center;
}

/* Şube checkbox'u */
.branch-header input {
    margin-right: 0.625rem; /* Checkbox ile yazı arasına boşluk */
    transform: scale(1.1); /* Biraz büyütmek */
}

/* Şube etiketi */
.branch-header label {
    cursor: pointer;
    flex-grow: 1; /* Etiketin kalan alanı kaplaması */
}

/* --- Tablo Stilleri --- */
/* Ürün tablosu */
.products-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem; /* Tailwind text-xs (~12px) - Kompakt */
}

/* Tablo hücreleri */
.products-table th,
.products-table td {
    padding: 0.4rem 0.5rem; /* Daha küçük padding */
    text-align: left;
    border-bottom: 1px solid #e2e8f0; /* Tailwind border-slate-200 */
    white-space: nowrap; /* Varsayılan olarak tek satır */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sütun genişlikleri (class-based) */
.products-table th.col-checkbox, .products-table td.col-checkbox { width: 4%; text-align: center; }
.products-table th.col-code, .products-table td.col-code { width: 10%; }
.products-table th.col-name, .products-table td.col-name {
    width: auto;
    min-width: 70px;
    max-width: 180px;
    white-space: normal;
    word-break: break-word;
}
.products-table th.col-stock, .products-table td.col-stock { width: 10%; text-align: right; }
.products-table th.col-sale, .products-table td.col-sale { width: 10%; text-align: right; }
.products-table th.col-ratio, .products-table td.col-ratio { width: 10%; text-align: right; }
.products-table th.col-sip, .products-table td.col-sip { width: 8%; text-align: right; font-weight: bold; color: #1e40af; }

/* Sip column styles */
.products-table th.sip-column,
.products-table td.sip-column {
    width: 8%;
    text-align: right;
    font-weight: bold;
    color: #1e40af; /* Main theme blue */
}

/* Tablo başlıkları */
.products-table thead th {
    background-color: #e0f2fe; /* Tailwind bg-sky-100 */
    font-weight: 600; /* Tailwind font-semibold */
    color: #0c4a6e; /* Tailwind text-sky-900 */
    text-align: left;
    position: sticky; /* Başlıklar sabit kalabilir (isteğe bağlı) */
    top: 0;
    z-index: 10;
}

/* Tablo satırları - Alternatif arka planlar */
.products-table tbody tr:nth-child(even) {
    background-color: #f1f5f9; /* Tailwind bg-slate-100 */
}

.products-table tbody tr:nth-child(odd) {
    background-color: #ffffff; /* Beyaz */
}

/* Başlıklar için: Sip., Stok, Satış ve Oran sütunlarını sağa hizala */
.products-table thead th:nth-child(n+4) {
    text-align: right;
}

/* Hücre içi hizalama: Sip, Stok, Satış ve Oran hücrelerini sağa hizala */
.products-table td:nth-child(n+4) {
    text-align: right;
}

/* Sip column styles */
.products-table th.sip-column,
.products-table td.sip-column {
    width: 8%;
    text-align: right;
    font-weight: bold;
    color: #1e40af; /* Main theme blue */
}

/* Pink highlight for non-matching products */
.product-row.pink-highlight {
    background-color: #ffebee !important; /* Pale pink background */
}
/* Pink highlight for non-matching order-detail products */
.order-product-row.pink-highlight,
.order-products-table tr.order-product-row.pink-highlight {
    background-color: rgba(255, 192, 203, 0.15) !important;
    border-radius: 4px;
}
.order-product-row.pink-highlight td,
.order-products-table tr.order-product-row.pink-highlight td {
    background-color: rgba(255, 192, 203, 0.15) !important;
}

/* Oran hücresi - Renkli arka plan */
/* JS tarafından dinamik olarak eklenen stil olduğu için burada sadece sınıf adı */
.ratio-cell {
    font-weight: 600; /* Tailwind font-semibold */
    /* JS tarafından gelen background-color korunacak */
}

/* Ürün checkbox'ı */
.product-row input[type="checkbox"] {
    margin: 0 auto;
    display: block;
    transform: scale(1.1); /* Biraz büyütmek */
}

/* --- Sipariş Butonu --- */
/* Buton stili */
#submit-btn {
    background-color: #16a34a; /* Tailwind bg-green-600 */
    color: white;
    padding: 0.5rem 1rem; /* Daha küçük padding */
    font-size: 0.8125rem; /* Kompakt yazı */
    font-weight: 500; /* Tailwind font-medium */
    border: none;
    border-radius: 0.375rem; /* Tailwind rounded */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out; /* Geçiş efekti */
}

#submit-btn:hover:not(:disabled) {
    background-color: #15803d; /* Tailwind hover:bg-green-700 */
}

#submit-btn:disabled {
    background-color: #94a3b8; /* Tailwind bg-slate-400 */
    cursor: not-allowed;
}

/* --- Profesyonel ve Minimalist Link Stili --- */
.edit-link {
    display: inline-block;
    font-size: 0.75rem; /* Tailwind text-xs (~12px) */
    font-weight: 400; /* Tailwind font-normal */
    color: #64748b; /* Tailwind text-slate-500 */
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    margin-bottom: 0.5rem; /* Header ile arasına boşluk */
}

.edit-link:hover,
.edit-link:focus {
    color: #334155; /* Tailwind text-slate-700 */
    border-bottom-color: #94a3b8; /* Tailwind border-slate-400 */
    cursor: pointer;
}

/* --- Şifre Doğrulama / Onay Bölümü --- */
/* Onay bölümü */
#password-prompt-section {
    margin: 1rem 0; /* Dikey boşluk */
    padding: 1rem;
    border: 1px solid #fbbf24; /* Tailwind border-amber-400 */
    border-radius: 0.375rem; /* Tailwind rounded */
    background-color: #fef3c7; /* Tailwind bg-amber-100 */
    color: #92400e; /* Tailwind text-amber-800 */
    font-size: 0.8125rem;
}

/* Onay özeti */
#password-prompt-summary {
    margin-bottom: 0.75rem;
    font-weight: 600; /* Tailwind font-semibold */
}

/* Butonlar konteyneri */
#password-buttons-container {
    display: flex;
    gap: 0.5rem; /* Butonlar arası boşluk */
    margin-top: 0.75rem;
    flex-wrap: wrap; /* Küçük ekranlarda alt satıra kayması */
}

/* Onay ve İptal butonları */
.password-btn {
    padding: 0.4rem 0.75rem; /* Daha küçük padding */
    border: none;
    border-radius: 0.375rem; /* Tailwind rounded */
    cursor: pointer;
    font-size: 0.75rem; /* Tailwind text-xs */
    font-weight: 500; /* Tailwind font-medium */
    transition: background-color 0.2s ease-in-out;
}

#send-order-btn-prompt {
    background-color: #16a34a; /* Tailwind bg-green-600 */
    color: white;
}

#send-order-btn-prompt:hover:not(:disabled) {
    background-color: #15803d; /* Tailwind hover:bg-green-700 */
}

#cancel-order-btn-prompt {
    background-color: #64748b; /* Tailwind bg-slate-500 */
    color: white;
}

#cancel-order-btn-prompt:hover {
    background-color: #475569; /* Tailwind hover:bg-slate-600 */
}

#send-order-btn-prompt:disabled,
#cancel-order-btn-prompt:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}


/* --- Responsive Ayarlar --- */
@media (max-width: 768px) {
    /* Show mobile-only line breaks */
    br.mobile-break {
        display: inline;
    }
    html { font-size: 16px !important; }
    body {
        padding: 0.5rem; /* Daha küçük padding */
    }

    #app {
        padding: 0.75rem; /* Daha küçük padding */
    }

    /* Başlık bölümü dikey hale gelir */
    .header-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem; /* Öğeler arası boşluk */
    }

    /* Buton tam genişlik */
    #submit-btn {
        width: 100%;
        margin-top: 0.25rem;
    }

    /* Tablo hücreleri daha kompakt */
    .products-table th,
    .products-table td {
        padding: 0.3rem 0.4rem;
        font-size: 0.6875rem; /* Daha küçük yazı */
    }

    /* Şube başlığı */
    .branch-header {
        font-size: 0.8125rem; /* Daha küçük yazı */
        padding: 0.5rem 0.75rem;
    }

    /* Onay bölümü */
    #password-prompt-section {
        padding: 0.75rem;
    }

    /* Onay butonları dikey hizalanır */
    #password-buttons-container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem; /* Dikey boşluk */
    }

    .password-btn {
        width: 100%; /* Butonlar tam genişlik */
    }

    /* Sütun genişlikleri mobil için ayarlanabilir */
    .products-table th:nth-child(1),
    .products-table td:nth-child(1) { width: 4%; } /* Checkbox */
    .products-table th:nth-child(2),
    .products-table td:nth-child(2) { display: none; } /* Ürün Kodu - Mobilde gizli */
    .products-table th:nth-child(3),
    .products-table td:nth-child(3) { min-width: 70px; max-width: 80px; } /* Ürün Adı - Layout zıplamasını önlemek için genişlik düşürüldü */
    
    /* Ürün adı hücresinin alt satıra kaymasını zorunlu kıl */
    .products-table td:nth-child(3) {
        white-space: normal;
    }
    .products-table th:nth-child(4),
    .products-table td:nth-child(4) { width: 10%; } /* Stok */
    .products-table th:nth-child(5),
    .products-table td:nth-child(5) { width: 10%; } /* Satış */
    .products-table th:nth-child(6),
    .products-table td:nth-child(6) { width: 10%; } /* Oran */

    /* Orders table mobile adjustments */
    .orders-table {
        width: 100%;
    }

    .orders-table th,
    .orders-table td {
        padding: 0.3rem 0.4rem;
        font-size: 0.6875rem;
    }

    .order-products-table th,
    .order-products-table td {
        padding: 0.2rem 0.3rem;
        font-size: 0.625rem;
    }
}

/* --- Latest Orders Styles --- */
.orders-section {
    margin-top: 0.5rem;
    padding: 0.25rem 1rem 0.75rem;
    background-color: #f1f5f9; /* Tailwind bg-slate-100 */
    border: 1px solid #cbd5e1; /* Soft theme border */
    border-radius: 0.375rem; /* Tailwind rounded */
    overflow: hidden;
}

.orders-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b; /* Tailwind text-slate-800 */
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    text-align: center;
}

.orders-table {
    width: 90% !important; /* Genişlik %70'e çıkarıldı ve override edilmesi engellendi */
    border-collapse: collapse;
    font-size: 0.875rem; /* Bir tık artırıldı */
    margin: 0 auto;
    border: 1px solid #cbd5e1; /* Soft theme border */
    border-radius: 0.375rem; /* Theme radius */
    overflow: hidden;
}

.orders-table th,
.orders-table td {
    padding: 0.4rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid #e2e8f0; /* Tailwind border-slate-200 */
}

.orders-table thead th {
    background-color: #e0f2fe; /* Tailwind bg-sky-100 */
    color: #0c4a6e; /* Tailwind text-sky-900 */
}



.order-details {
    display: none; /* Hidden by default */
    background-color: #f8fafc; /* Tailwind bg-slate-50 */
}

.order-products-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem; /* Bir tık artırıldı */
    border: 1px solid #cbd5e1; /* Soft theme border */
    border-radius: 0.375rem; /* Theme radius */
    overflow: hidden;
    margin-top: 0.5rem; /* Spacing above details table */
}

.order-products-table th,
.order-products-table td {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid #e2e8f0; /* Tailwind border-slate-200 */
    text-align: left;
}

.order-products-table td:nth-child(3) {
    text-align: right;
}

.order-products-table thead th {
    background-color: #e0f2fe; /* Tailwind bg-sky-100 */
    color: #0c4a6e; /* Tailwind text-sky-900 */
}

.order-products-table tbody tr:nth-child(even) {
    background-color: #f1f5f9; /* Tailwind bg-slate-100 */
}

.order-products-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.highlighted {
    font-weight: bold !important;
}

.highlighted td:nth-child(4) {
    border: 3px solid #065f46 !important;
    border-radius: 4px;
}

.orders-table tr.order-row {
    background-color: #f9f9f9;
}

/* Highlight selected order row */

/* Row border around each order and detail row */
.orders-table tr.order-row,
.order-products-table tr.order-product-row {
    border: 1px solid #e7e7e7;
    border-radius: 4px;
}

.orders-table tr.order-row.selected-order {
    background-color: rgba(67, 208, 255, 0.15) !important;
    border-radius: 4px;
}
.orders-table tr.order-row.selected-order td {
    background-color: rgba(67, 208, 255, 0.15) !important;
}