/* Araç boya / değişen şeması.
   Şema hem site tarafında (ilan detayı) hem yönetim panelinde (ilan formu)
   kullanıldığı için stiller ayrı dosyada durur; iki layout da bu dosyayı yükler. */

/* ============================================================
   ARAÇ BOYA / DEĞİŞEN ŞEMASI
   Formda düzenlenebilir, ilan detayında salt okunur kullanılır.
   ============================================================ */
.damage-map {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
}

.damage-map__diagram {
    flex: 0 0 auto;
    /* Açılmış görünüm üç sütun geniş; dar kutuda parçalar okunmaz olur. */
    width: 340px;
    max-width: 100%;
}

.damage-map__diagram svg { width: 100%; height: auto; display: block; }

.damage-map__side { flex: 1 1 320px; min-width: 260px; }

/* --- Şema gövdesi --- */
.damage-map__body {
    fill: #fbfcfd;
    stroke: #d7dee7;
    stroke-width: 1.5;
}

.damage-map__glass { fill: #cfd8e3; }
.damage-map__decor { pointer-events: none; }

.damage-map__mirror { fill: #aab5c3; }

.damage-map__wheel {
    fill: #b6c0cc;
    stroke: #ffffff;
    stroke-width: 2;
    pointer-events: none;
}

/* Kapı camları yalnızca görsel ipucu; tıklama alttaki parçaya gitmeli. */
.damage-map__door-glass {
    fill: #ffffff;
    opacity: .55;
    pointer-events: none;
}

.damage-map__vent {
    fill: #ffffff;
    opacity: .7;
    pointer-events: none;
}

.damage-map__part {
    /* İşaretlenmemiş parça gövdeden ayırt edilebilecek kadar koyu olmalı;
       aksi hâlde şema tek parça gibi görünüyor. */
    fill: #d3dae3;
    stroke: #ffffff;
    stroke-width: 2.5;
    transition: fill .15s ease;
}

.damage-map--edit .damage-map__part { cursor: pointer; }

.damage-map--edit .damage-map__part:hover,
.damage-map--edit .damage-map__part:focus {
    stroke: var(--uy-brand);
    outline: none;
}

/* --- Durum renkleri (şema + rozet + select) --- */
.damage-map__part.is-none { fill: #d3dae3; }
.damage-map__part.is-original { fill: #2f9e6e; }
.damage-map__part.is-local { fill: #e8c14a; }
.damage-map__part.is-painted { fill: #e08b2b; }
.damage-map__part.is-replaced { fill: #d64f4f; }

.damage-map__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d3dae3;
    display: inline-block;
    flex: 0 0 auto;
}

.is-original > .damage-map__dot { background: #2f9e6e; }
.is-local > .damage-map__dot { background: #e8c14a; }
.is-painted > .damage-map__dot { background: #e08b2b; }
.is-replaced > .damage-map__dot { background: #d64f4f; }

/* --- Fırça (işaretleme durumu) düğmeleri --- */
.damage-map__brushes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .85rem;
}

.damage-map__brush-label {
    width: 100%;
    font-size: .82rem;
    color: var(--uy-muted);
    margin-bottom: .1rem;
}

.damage-map__brush {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border: 1px solid var(--uy-border);
    border-radius: 999px;
    background: #fff;
    font-size: .82rem;
    color: var(--uy-text);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.damage-map__brush:hover { border-color: var(--uy-brand-light); }

.damage-map__brush.is-active {
    border-color: var(--uy-brand);
    box-shadow: 0 0 0 2px rgba(15, 37, 64, .12);
    font-weight: 600;
}

/* --- Parça listesi (asıl form alanları) --- */
.damage-map__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .45rem .75rem;
}

.damage-map__row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.damage-map__row-label {
    flex: 1 1 auto;
    font-size: .84rem;
    color: var(--uy-text);
    margin: 0;
}

.damage-map__select {
    flex: 0 0 auto;
    width: 8.5rem;
    border-left-width: 4px;
}

.damage-map__select.is-none { border-left-color: #d3dae3; }
.damage-map__select.is-original { border-left-color: #2f9e6e; }
.damage-map__select.is-local { border-left-color: #e8c14a; }
.damage-map__select.is-painted { border-left-color: #e08b2b; }
.damage-map__select.is-replaced { border-left-color: #d64f4f; }

/* --- Detay sayfasındaki özet listesi --- */
.damage-map__legend { list-style: none; margin: 0; padding: 0; }

.damage-map__legend li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--uy-border);
    font-size: .9rem;
}

.damage-map__legend li:last-child { border-bottom: 0; }

.damage-map__legend-parts { color: var(--uy-muted); }

.vehicle-damage-block {
    padding-top: 1rem;
    border-top: 1px solid var(--uy-border);
}