/* panel-style.css */

/* --- Genel Panel Sıfırlamaları ve Ayarları --- */
.custom-panel-body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* Standart WP benzeri font */
    background-color: #f0f2f5; /* Panelin genel arka plan rengi (açık gri) */
    color: #333;
    line-height: 1.6;
}

.panel-wrapper {
    max-width: 1200px; /* Panel içeriğinin maksimum genişliği */
    margin: 0 auto; /* Sayfayı ortala */
    padding: 0 15px; /* Kenarlara boşluk */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Footer'ı en alta yapıştırmak için */
}

/* --- Panel Header --- */
.panel-header {
    background-color: #ffffff; /* Beyaz header arka planı */
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 30px; /* Header ile içerik arası boşluk */
}

.panel-header-inner {
    display: flex;
    justify-content: space-between; /* Logo sola, nav sağa */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.panel-logo a {
    text-decoration: none;
    font-size: 1.8em;
    font-weight: bold;
    color: #2271b1; /* WordPress mavisi veya kendi renginiz */
}

.panel-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.panel-nav li {
    margin-left: 20px;
}

.panel-nav a {
    text-decoration: none;
    color: #555;
    font-size: 0.95em;
}

.panel-nav a:hover {
    color: #2271b1;
}

/* --- Panel İçerik Alanı --- */
.panel-content {
    flex-grow: 1; /* Footer'ı aşağı itmek için */
}

.panel-content-inner {
    background-color: #ffffff; /* İçerik alanı arka planı beyaz */
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Dashboard Karşılama Mesajı --- */
.dashboard-welcome {
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 1px dashed #eee;
    padding-bottom: 20px;
}
.dashboard-welcome h1 {
    margin-top: 0;
    font-size: 1.8em;
    font-weight: 600;
    color: #444;
}

/* --- Dashboard Kutuları Konteyneri --- */
.dashboard-container {
    display: flex;
    flex-wrap: wrap; /* Ekran küçülünce alt satıra geç */
    gap: 30px; /* Kutular arası boşluk */
    justify-content: center; /* Kutuları ortala */
}

/* --- Genel Dashboard Kutusu Stilleri --- */
.dashboard-box {
    flex: 1; /* Eşit genişlikte dağıl */
    min-width: 280px; /* Minimum genişlik */
    max-width: 350px; /* Maksimum genişlik */
    padding: 25px;
    border-radius: 8px;
    color: #fff; /* Kutu içi yazı rengi (beyaz deneyelim) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Yazıya hafif gölge */
    display: flex;
    flex-direction: column; /* Başlık ve listeyi alt alta sırala */
}

.dashboard-box-title {
    font-size: 1.4em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Başlık altı çizgisi */
    display: flex; /* İkon ve yazıyı yan yana getir */
    align-items: center;
}

.dashboard-box-title .dashicons {
    margin-right: 10px; /* İkon ile yazı arası boşluk */
    font-size: 1.3em; /* İkon boyutu */
}


.dashboard-box-links {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: auto; /* Linkleri kutunun altına it (eğer kutu yükseklikleri farklı olursa) */
}

.dashboard-box-links li {
    margin-bottom: 10px;
}

.dashboard-box-links a {
    color: #fff; /* Link rengi beyaz */
    text-decoration: none;
    display: block; /* Tüm satırı kapla */
    padding: 5px 0;
    border-bottom: 1px solid transparent; /* Hover için yer tutucu */
    transition: border-bottom 0.2s ease;
}

.dashboard-box-links a:hover {
    border-bottom: 1px solid rgba(255, 255, 255, 0.7); /* Hover'da alt çizgi */
}

/* --- Özel Kutu Renkleri --- */
.customer-management { background-color: #a8d8a8; } /* Yeşil */
.inventory-management { background-color: #aa96b4; } /* Mor */
.workplan-management { background-color: #a8d8d8; } /* Mavi/Yeşil */

/* --- Panel Footer --- */
.panel-footer {
    margin-top: 40px; /* İçerikle footer arası boşluk */
    padding: 20px 0;
    text-align: center;
    color: #777;
    font-size: 0.9em;
    border-top: 1px solid #e0e0e0;
}

/* --- Basit Mobil Uyumluluk --- */
@media (max-width: 768px) {
    .panel-header-inner {
        flex-direction: column; /* Header içeriğini alt alta getir */
        text-align: center;
    }
    .panel-nav ul {
        margin-top: 15px;
        justify-content: center; /* Menüyü ortala */
    }
    .panel-nav li {
        margin: 0 10px; /* Mobil menü boşluğunu azalt */
    }
    .dashboard-container {
        flex-direction: column; /* Kutuları alt alta diz */
        align-items: center; /* Ortala */
        gap: 20px; /* Boşluğu azalt */
    }
    .dashboard-box {
        width: 90%; /* Genişliği artır */
        max-width: none; /* Maksimum genişliği kaldır */
        min-width: 0; /* Minimum genişliği kaldır */
    }
     .panel-content-inner {
        padding: 20px;
    }
}

/* Sayfa Başlığı ve Arama Formu Alanı */
.panel-page-header {
    display: flex;
    justify-content: space-between; /* Başlık sola, form sağa */
    align-items: center;
    flex-wrap: wrap; /* Küçük ekranda alt alta */
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.panel-page-header h1 {
    margin: 0;
    font-size: 1.6em;
}

/* Arama Formu */
.musteri-arama-form {
    display: flex;
    gap: 5px; /* Elemanlar arası boşluk */
    align-items: center;
}

.musteri-arama-form input[type="search"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 200px; /* Minimum genişlik */
}

.musteri-arama-form button {
    padding: 8px 15px;
    background-color: #2271b1; /* WP Mavisi */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    white-space: nowrap;
}
.musteri-arama-form button:hover {
    background-color: #1b5a8d;
}
.musteri-arama-form .clear-search {
    font-size: 0.85em;
    color: #cc0000;
    text-decoration: none;
    margin-left: 5px;
}
.musteri-arama-form .clear-search:hover {
    text-decoration: underline;
}


/* Durum Mesajları */
.panel-notice {
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    border-left-width: 4px;
    border-left-style: solid;
}
.panel-notice-success {
    background-color: #e7f7e8;
    border-color: #228b22; /* ForestGreen */
    color: #1a6a1a;
}
.panel-notice-error {
    background-color: #fdecea;
    border-color: #dc3545; /* Red */
    color: #a71d2a;
}

/* Genel Panel Tablo Stilleri */
.panel-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 0px solid #e0e0e0; /* Dış çerçeve */
}

.panel-table th,
.panel-table td {
    padding: 12px 10px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e0e0e0;
}

.panel-table thead th {
    background-color: #f8f9fa; /* Açık gri başlık */
    font-weight: 600;
    white-space: nowrap;
    border-bottom-width: 2px; /* Başlık altını daha belirgin yap */
}

.panel-table tbody tr:nth-child(even) {
     background-color: #fdfdfd; /* Hafif zebra deseni */
}
.panel-table tbody tr:hover {
    background-color: #f1f1f1; /* Hover efekti */
}

/* İşlem Sütunu */
.panel-table th.actions-header,
.panel-table td.actions {
    text-align: right;
    white-space: nowrap;
    width: 100px; /* İşlem sütunu genişliği */
}

.panel-table td.actions a {
    margin: 0 5px; /* İkonlar arası boşluk */
    color: #0073aa;
    text-decoration: none;
    display: inline-block; /* Hizalama için */
    vertical-align: middle; /* Dikey ortalama */
}
.panel-table td.actions a.delete-link {
    color: #dc3545;
}
.panel-table td.actions a:hover {
    opacity: 0.7;
}
/* Font Awesome ikonları için boyut ayarı (isteğe bağlı) */
.panel-table td.actions i.fa-solid {
    font-size: 1.1em; /* İkon boyutunu ayarla */
    /* vertical-align: middle; zaten a etiketinde var ama burada da olabilir */
}

/* Diğer sütunlardaki ikonlar için (Örnek: SPT, TKLF) */
.panel-table td .fa-solid {
     font-size: 1.1em;
     color: #777; /* İkon rengi */
     vertical-align: middle;
}

/* panel-style.css */

/* --- Genel Panel Form Stilleri --- */
.panel-form .form-group {
    margin-bottom: 20px; /* Form grupları arası boşluk */
}

.panel-form label {
    display: block; /* Etiketi üste al */
    margin-bottom: 8px; /* Etiket ile input arası boşluk */
    font-weight: 600;
    font-size: 0.9em;
    color: #555;
}

.panel-form .form-control {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 1em;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    box-sizing: border-box; /* Padding ve border genişliğe dahil olsun */
}

.panel-form textarea.form-control {
    min-height: 80px; /* Textarea minimum yüksekliği */
    resize: vertical; /* Sadece dikeyde boyutlandırma */
}

.panel-form select.form-control {
    /* Select için görünüm iyileştirmesi (tarayıcıya göre değişir) */
     appearance: none; /* Varsayılan oku kaldır */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* Basit ok ikonu */
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem; /* Ok için yer aç */
}


.panel-form .form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 0 .2rem rgba(0,123,255,.25);
}

/* --- Genel Panel Buton Stilleri --- */
.panel-button {
    display: inline-block;
    font-weight: 600;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: #007bff; /* Mavi (Primary) */
    border: 1px solid #007bff;
    padding: 10px 20px;
    font-size: 1em;
    line-height: 1.5;
    border-radius: 4px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-decoration: none; /* Link olarak kullanılırsa */
}
.panel-button:hover {
    color: #fff;
    background-color: #0056b3;
    border-color: #0056b3;
}
.panel-button:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.5);
}

/* Farklı Renk Butonlar (Örnek) */
.panel-button.button-primary {
    background-color: #28a745; /* Yeşil */
    border-color: #28a745;
}
.panel-button.button-primary:hover {
    background-color: #1e7e34;
    border-color: #1c7430;
}
/* Submit butonu grubu */
.form-submit-group {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Buton içindeki ikon */
.panel-button .fa-solid {
    margin-right: 8px;
}

/* --- Panel Bildirim/Mesaj Kutuları --- */
.panel-notice {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    border-left-width: 5px;
    border-left-style: solid;
    font-size: 0.95em;
}
.panel-notice-success {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}
.panel-notice-error {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

/* panel-style.css */

/* --- Teklif Oluştur Sayfası Stilleri --- */
.panel-create-offer .panel-content-inner h1 {
    text-align: center; /* Başlığı ortala */
    margin-bottom: 30px;
}

.offer-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Esnek sütunlar */
    gap: 25px 20px; /* Satır ve sütun boşlukları */
    margin-bottom: 30px;
}

.offer-items-grid .form-group {
    margin-bottom: 0; /* Grid boşluğu yeterli */
}

/* Dropdown item stili */
.offer-item-dropdown label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600; /* Kategori adları kalın */
    font-size: 0.9em;
}
.offer-item-dropdown select.form-control {
    /* Zaten genel form stilleri uygulanıyor */
}

/* Checkbox item stili */
.offer-item-checkbox label {
    display: flex; /* Checkbox ve yazıyı yan yana hizala */
    align-items: center;
    font-weight: 600;
    font-size: 0.9em;
    background-color: #f8f9fa; /* Checkbox arka planı */
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    height: 100%; /* Grid hücresini doldur */
    box-sizing: border-box;
}
.offer-item-checkbox input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
    transform: scale(1.2); /* Checkbox'ı biraz büyüt */
    cursor: pointer;
}

.offer-submit-group {
    text-align: center; /* Butonu ortala */
    padding-top: 30px;
    margin-top: 20px;
    border-top: 1px solid #eee;
}
.offer-submit-group .panel-button .fa-solid {
    margin-left: 8px; /* İkonu sağa al */
}

/* ==========================================================================
   Teklif Son Sayfası (panel-offer-final) Stilleri
   ========================================================================== */

.panel-offer-final .panel-content-inner h1 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.8em; /* Sayfa başlığı boyutu */
}

/* --- Üst Bilgi Alanı (Müşteri/Temsilci) --- */
.offer-header-info {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px; /* Sekmelerle arasını aç */
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
    line-height: 1.5;
}
.offer-header-info .customer-info { text-align: left; }
.offer-header-info .rep-info { text-align: right; }
.offer-header-info strong { font-weight: 600; } /* Kalın yazılar */

/* --- Görünüm Sekmeleri --- */
.offer-view-tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0; /* Tablo ile arasını aç */
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #dee2e6; /* Sekmelerin altındaki ana çizgi */
}
.offer-view-tabs li {
    margin-bottom: -2px; /* Aktif sekmenin border'ını ana çizgiyle birleştirmek için */
}
.offer-view-tabs li a {
    display: block;
    padding: 10px 25px; /* Sekme boyutları */
    text-decoration: none;
    color: #007bff; /* Pasif sekme rengi */
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    font-weight: 600;
    font-size: 0.95em;
    transition: background-color 0.2s ease, color 0.2s ease; /* Yumuşak geçiş */
}
/* Aktif ve Hover Stilleri */
.offer-view-tabs li.active a, /* Aktif sekme */
.offer-view-tabs li:not(.active) a:hover { /* Aktif olmayan sekme üzerine gelince */
    color: #495057; /* Koyu renk */
    background-color: #fff; /* İçerik alanı rengi */
    border-color: #dee2e6 #dee2e6 #fff; /* Kenarlıklar (alt kenarlık görünmez) */
}
/* Sadece aktif olmayan için farklı hover (isteğe bağlı) */
.offer-view-tabs li:not(.active) a:hover {
     background-color: #e9ecef; /* Hafif gri hover */
     border-color: #dee2e6 #dee2e6 transparent; /* Alt border yine görünmez */
}

/* --- Teklif Detayları Tablosu --- */
.offer-details-table { /* .panel-table stillerini de alır */
    margin-bottom: 30px;
    border: 1px solid #dee2e6; /* Dış çerçeveyi biraz daha belirgin yapalım */
}
.offer-details-table th,
.offer-details-table td {
     padding: 10px 12px; /* Hücre içi boşlukları biraz artıralım */
     border-bottom: 1px solid #e9ecef; /* Daha açık ara çizgiler */
}
.offer-details-table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 0.9em; /* Başlıkları biraz küçült */
    color: #495057;
    border-bottom-width: 2px;
    border-bottom-color: #dee2e6;
}
.offer-details-table tbody td {
    font-size: 0.95em;
    color: #333;
}
.offer-details-table tbody tr:nth-child(even) {
     background-color: transparent; /* Zebra desenini kaldıralım, sadelik için */
}
.offer-details-table tbody tr:hover {
    background-color: #f8f9fa; /* Hover rengi */
}

/* --- Miktar Sütunu --- */
.quantity-cell {
    display: flex;
    align-items: center;
    justify-content: right; /* Varsayılan olarak ortalı kalsın */
    gap: 5px;
}
.quantity-cell input.item-quantity {
    width: 50px;
    padding: 6px 5px;
    font-size: 0.95em;
    text-align: center;
    border: 1px solid #ced4da;
    border-radius: 4px;
    -moz-appearance: textfield;
}
.quantity-cell input.item-quantity::-webkit-outer-spin-button,
.quantity-cell input.item-quantity::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.quantity-cell button.qty-change {
    background: #f1f3f5;
    border: 1px solid #ced4da;
    color: #495057;
    cursor: pointer;
    padding: 5px 9px;
    font-weight: bold;
    border-radius: 4px;
    line-height: 1;
    transition: background-color 0.15s ease-in-out;
}
.quantity-cell button.qty-change:hover { background: #e9ecef; }
.quantity-cell button.qty-change:active { background: #dee2e6; }

/* --- Toplamlar Bölümü --- */
.offer-details-table tfoot td {
    font-weight: 600; /* Biraz daha kalın */
    font-size: 1em;
    border-top: 2px solid #dee2e6;
}
.offer-details-table .total-row td {
    padding-top: 12px;
    padding-bottom: 12px;
}
#grand-total, #taksitli-total, #pesin-total {
    /* Özel stil gerekirse */
}

/* --- Not/İskonto Butonu --- */
.offer-actions {
    text-align: left;
    margin-top: 10px; /* Tabloya biraz daha yakın */
}
.offer-actions .panel-button {
     padding: 8px 15px; /* Buton boyutu */
     background-color: #6c757d; /* Gri tonu */
     border-color: #6c757d;
}
.offer-actions .panel-button:hover {
    background-color: #5a6268;
    border-color: #545b62;
}


/* --- Müşteri Görünümünde Miktar Sütunu Ayarlaması (Sağa Yaslama) --- */

/* Miktar Başlığını Sağa Yasla */
body.view-musteri .offer-details-table thead th:nth-child(2) { /* thead içindeki 2. th (Miktar) */
    text-align: right;  /* Başlık metnini sağa yasla */
    padding-right: 15px; /* Sağdan biraz boşluk bırak */
    justify-content: flex-end;
    /* padding-left: 10px; */ /* Sol padding'i kaldırabiliriz */
    /* width: auto; */
}

/* Miktar Hücresinin İçeriğini Sağa Yasla */
body.view-musteri .offer-details-table tbody td:nth-child(2) { /* tbody içindeki 2. td (Miktar hücresi) */
    text-align: right; /* Hücre içeriğini (yani .quantity-cell div'ini) sağa yasla */
    padding-right: 15px; /* Sağdan biraz boşluk bırak */
    /* padding-left: 10px; */ /* Sol padding'i kaldırabiliriz */
}

/* Miktar hücresi içindeki -, input, + grubunu (flex container) sağa yasla */
/* Not: td'ye text-align: right verdiğimiz için bu kurala gerek kalmayabilir */
/* ama flex yapısını korumak için justify-content'i de ayarlayalım */
body.view-musteri .quantity-cell {
    justify-content: flex-end; /* Flex item'ları container'ın sağına yasla */
    /* display: inline-flex; */ /* Gerekirse hücre içinde sağa yaslanması için, ama text-align:right yeterli olmalı */
}

/* --- Önceki Görünüm Modu Gizleme Kuralları Aynen Kalmalı --- */
/* Usta Görünümü */
body.view-usta th.col-unit-price,
body.view-usta td.col-unit-price,
body.view-usta th.col-row-total,
body.view-usta td.col-row-total,
body.view-usta tr.col-grand-total {
    display: none;
}
/* Müşteri Görünümü */
body.view-musteri th.col-unit-price,
body.view-musteri td.col-unit-price,
body.view-musteri th.col-row-total,
body.view-musteri td.col-row-total {
     display: none;
}


/* ========================================================================== */