/* css/style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background-color: #f0f2f5;
    color: #333;
    font-size: 14px;
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-header {
    background-color: #0056b3; /* Koyu mavi */
    color: white;
    padding: 15px 25px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.app-header h1 {
    margin: 0;
    font-size: 1.8em;
}

.main-layout {
    display: flex;
    flex-grow: 1;
    padding: 15px;
    gap: 15px; /* Paneller arası boşluk */
}

.sidebar-left {
    width: 20%; /* Genişlik ayarlanabilir */
    min-width: 220px;
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow-y: auto; /* İçerik taşarsa scroll */
}
.sidebar-left h2, .sidebar-right h2 {
    font-size: 1.2em;
    color: #0056b3;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.content-main {
    flex-grow: 1;
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.sidebar-right {
    width: 25%; /* Genişlik ayarlanabilir */
    min-width: 280px;
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow-y: auto;
}

.filter-tabs button, .details-tabs button {
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    padding: 10px 15px;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 4px 4px 0 0;
    font-size: 0.95em;
    color: #495057;
}
.filter-tabs button.active, .details-tabs button.active {
    background-color: #007bff; /* Aktif sekme rengi */
    color: white;
    border-bottom: 1px solid #007bff;
}
.tab-content, .details-tab-content {
    display: none; /* Başlangıçta tüm sekmeler gizli */
    padding: 20px;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 4px 4px;
    animation: fadeIn 0.5s; /* Basit bir animasyon */
}
.tab-content.active, .details-tab-content.active {
    display: block; /* Aktif sekme görünür */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.filter-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Form grupları arası boşluk */
    margin-bottom: 15px;
}
.filter-form .form-group {
    flex: 1;
    min-width: 200px; /* Alanların minimum genişliği */
}
.filter-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 0.9em;
}
.filter-form input[type="number"], .filter-form select {
    width: calc(100% - 22px); /* Padding ve border için */
    padding: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.95em;
}
.filter-form select {
     width: 100%; /* Select için tam genişlik */
}
.filter-form .form-actions {
    text-align: right;
    margin-top: 20px;
}
.button-primary {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}
.button-primary:hover {
    background-color: #0056b3;
}

.details-panel {
    background-color: #fff;
    margin: 15px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.details-tabs button {
    font-size: 0.9em;
    padding: 8px 12px;
}

.loading-text, .placeholder-text {
    color: #6c757d;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

.app-footer {
    text-align: center;
    padding: 15px;
    background-color: #e9ecef;
    color: #6c757d;
    font-size: 0.9em;
    border-top: 1px solid #dee2e6;
}

/* Ürün grupları için basit stiller (ileride geliştirilecek) */
#product-groups-container ul {
    list-style-type: none;
    padding-left: 0;
}
#product-groups-container > ul > li { /* Ana Kategori */
    padding: 8px 0;
    font-weight: bold;
    cursor: pointer;
    color: #0056b3;
}
#product-groups-container > ul > li > ul { /* Alt Modeller */
    padding-left: 20px;
    font-weight: normal;
    display: none; /* Başlangıçta gizli */
}
#product-groups-container > ul > li > ul > li {
    padding: 5px 0;
    cursor: default;
    color: #333;
}
#product-groups-container > ul > li > ul > li:hover {
    background-color: #f0f8ff;
}


/* css/style.css içine EKLENECEK stiller */

/* ... mevcut stilleriniz ... */

.filter-form .form-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #e0e0e0;
}
.filter-form .form-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.filter-form .input-with-select {
    display: flex;
    align-items: center;
}
.filter-form .input-with-select input[type="number"] {
    flex-grow: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0; /* Altındaki select ile hizalamak için */
}
.filter-form .input-with-select select {
    width: auto; /* Otomatik genişlik */
    min-width: 70px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none; /* Input ile birleşik görünüm */
    margin-bottom: 0;
    height: 37px; /* Input yüksekliği ile eşitlemek için (padding'e bağlı) */
}
.filter-form .input-group {
    display: flex;
    align-items: center;
}
.filter-form .input-group input[type="number"] {
    margin-bottom: 0;
}

.radio-label {
    margin-right: 15px;
    font-weight: normal;
}
.radio-label input[type="radio"] {
    margin-right: 5px;
    vertical-align: middle;
}


.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.85em; /* Biraz daha küçük font */
}
.results-table th, .results-table td {
    border: 1px solid #e0e0e0;
    padding: 8px 10px;
    text-align: left;
    vertical-align: middle;
}
.results-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    white-space: nowrap; /* Başlıklar tek satırda kalsın */
}
.results-table tbody tr:nth-child(even) {
    background-color: #fdfdfd;
}
.results-table tbody tr:hover {
    background-color: #e9f5ff; /* Üzerine gelince hafif mavi */
    cursor: pointer;
}
.results-table tbody tr.selected-row {
    background-color: #cce5ff; /* Seçili satır rengi */
    font-weight: bold;
}
.results-table td {
    white-space: nowrap; /* İçerik taşarsa ... ile gösterilebilir veya nowrap */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px; /* Hücre içeriği çok uzarsa */
}
.results-table td:first-child, .results-table th:first-child { /* Sıra no için daha dar */
    max-width: 40px;
    text-align: center;
}
/* css/style.css (EK OLARAK VEYA MEVCUTSA KONTROL EDİN) */
#detail-performans, 
#detail-guc-verim { 
    position: relative;
    min-height: 350px; /* Minimum yükseklik */
    height: 55vh;      /* Dinamik yükseklik, ayarlanabilir */
}

/* css/style.css içine EKLENECEK stiller */

/* ... mevcut stilleriniz ... */

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Esnek sütunlar */
    gap: 10px 20px; /* Satır ve sütun arası boşluk */
    margin-top: 15px;
}
.detail-grid p {
    margin: 5px 0;
    padding: 5px;
    background-color: #f8f9fa;
    border-left: 3px solid #007bff;
}
.detail-grid p strong {
    color: #343a40;
}

.results-table tbody tr.selected-row { /* Bunu zaten eklemiştik, kontrol */
    background-color: #d1ecf1 !important; /* Açık mavi, !important ile hover'ı ezebilir */
    font-weight: bold;
}
.model-icon { /* Sol paneldeki model ikonları için stil */
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: middle;
    border: 1px solid #eee;
}

/* css/style.css */

/* ... mevcut body, app-container, app-header, main-layout, sidebar-left, content-main, sidebar-right, 
       filter-tabs, tab-content, filter-form vb. stilleriniz aynı kalıyor ... */

.details-panel {
    background-color: #fff;
    margin: 0 15px 15px 15px; /* Üst boşluğu main-layout'tan alır, yan ve alt boşluk */
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    /* display: none; JS ile kontrol edilecek */
}

.details-tabs-wrapper { /* YENİ VEYA GÜNCELLENMİŞ */
    width: 100%;
    margin-bottom: 15px; 
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0; /* Butonlar çizgiye yakın olsun */
}
.details-tabs { /* YENİ VEYA GÜNCELLENMİŞ */
    text-align: left; 
    margin-bottom: -1px; /* Butonların alt border'ı ana border ile birleşsin */
}
.details-tabs button { /* Mevcut stil güncellenebilir */
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: none; /* Alt border'ı kaldır */
    padding: 10px 15px;
    cursor: pointer;
    margin-right: 2px; /* Sekmeler arası hafif boşluk */
    border-radius: 4px 4px 0 0;
    font-size: 0.95em;
    color: #495057;
    position: relative;
    bottom: -1px; /* Ana border ile hizalamak için */
}
.details-tabs button.active { /* Mevcut stil güncellenebilir */
    background-color: #fff; /* Aktif sekme arkaplanı */
    color: #007bff;
    border-bottom: 1px solid #fff; /* Altındaki ana border'ı kes */
    font-weight: bold;
}

.details-tab-content { /* Mevcut stil güncellenebilir */
    display: none; 
    padding: 20px;
    border: 1px solid #dee2e6; /* Sekme butonlarının altındaki çizgiyle birleşir */
    border-top: none; /* Üst border'ı kaldır (tab wrapper'dan gelecek) */
    animation: fadeIn 0.5s; 
    width: 100%; /* Tam genişlik kaplasın */
    box-sizing: border-box; /* Padding ve border içeri dahil */
    background-color: #fff;
}
.details-tab-content.active {
    display: block; 
}

/* Performans grafiği ve bilgi kutusu için yeni wrapper */
.performance-content-wrapper { /* YENİ */
    display: flex;
    flex-direction: row; /* Yan yana */
    flex-wrap: wrap;    /* Küçük ekranlarda alt alta */
    gap: 20px;          /* Aralarındaki boşluk */
}

.chart-area { /* YENİ */
    flex: 3; /* Grafik alanı daha geniş olsun */
    min-width: 300px; /* Grafiğin minimum genişliği */
    /* Yükseklik chart-canvas-container ile veriliyor */
}

.chart-canvas-container { /* JS'de oluşturduğumuz sarmalayıcı için */
    position: relative;
    height: 400px; /* Grafiğin yüksekliği, ayarlanabilir */
    width: 100%;
}

.working-point-info-container { /* YENİ veya GÜNCELLENMİŞ */
    flex: 1; /* Bilgi kutusu kalan alanı kullansın veya sabit genişlik */
    min-width: 280px; /* Bilgi kutusunun minimum genişliği */
    max-width: 320px; /* Maksimum genişlik */
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
    font-size: 0.9em;
    align-self: flex-start; /* Üstte hizalı kalsın */
}
.working-point-info-container h4 {
    margin-top: 0;
    font-size: 1.1em;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}
.working-point-info-container .info-grid p {
    margin: 6px 0;
    display: flex;
    justify-content: space-between;
    font-size: 0.95em;
}
.working-point-info-container .info-grid p strong {
    color: #495057;
    margin-right: 5px;
}
.working-point-info-container .user-input-wp {
    margin-top:15px; 
    border-top:1px solid #e0e0e0; 
    padding-top:15px;
}
.working-point-info-container .user-input-wp label {
    font-size: 0.9em;
    margin-bottom: 3px;
    display: block; /* Inputların altına gelsin */
}
.working-point-info-container .user-input-wp input[type="number"] {
    padding: 6px 8px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 80px; /* Daha küçük inputlar */
    margin-bottom: 5px;
}
.working-point-info-container .user-input-wp button {
    padding: 6px 12px;
    font-size: 0.9em;
}

/* ... (diğer mevcut .app-footer vb. stilleriniz) ... */
/* css/style.css dosyasının sonuna eklenecek */

#detail-performans, 
#detail-guc-verim, 
#detail-akustik { /* Diğer grafik tablarınız için de geçerli olabilir */
    position: relative; /* Chart.js responsive davranışı için genellikle gereklidir */
    min-height: 400px;  /* Grafiğin en az bu kadar yüksekliği olsun */
    height: 60vh;       /* Ekran yüksekliğinin %60'ı kadar (ayarlayabilirsiniz) */
    padding-bottom: 20px; /* Alt boşluk */
}

/* Canvas elementinin kendisi için (opsiyonel, Chart.js genellikle halleder) */
#detail-performans canvas,
#detail-guc-verim canvas,
#detail-akustik canvas {
    width: 100% !important; /* Ebeveynine göre genişle */
    height: 100% !important; /* Ebeveynine göre yüksel */
}


/* css/style.css içine EKLENECEK stiller */

/* ... mevcut stilleriniz ... */

.details-panel {
    /* ... mevcut .details-panel stilleriniz ... */
    /* display: flex; zaten eklenmiş olmalı */
    /* flex-wrap: wrap; zaten eklenmiş olmalı */
    /* gap: 15px; zaten eklenmiş olmalı */
}

.details-tabs-wrapper {
    width: 100%; /* Tam genişlik */
    order: 3; /* Grafik ve bilgi kutusundan sonra gelmesi için (eğer flex ise) */
    margin-top: 15px; /* Üstündeki elemanlarla boşluk */
    border-top: 1px solid #dee2e6; /* Ayırıcı çizgi */
    padding-top: 10px;
}
.details-tabs {
    text-align: center; /* Butonları ortala */
}

/* .details-tab-content için (eğer yoksa) genel bir stil */
.details-tab-content {
    width: 100%; /* Tam genişlik kaplasın */
    /* ... mevcut .details-tab-content stilleriniz ... */
}