/*
 * TamRapor panel stilleri.
 *
 * Filament'in CSS'i hazır derlenmiş gelir; bu yüzden Tailwind'in bazı
 * yardımcı sınıfları (mb-*, mt-*, ms-auto gibi) panelde karşılık bulmaz.
 * Kendi görünümlerimizde kullandığımız boşluk ve düzen sınıfları burada tanımlıdır.
 */

/* --- Genel boşluklar --- */
.tr-ust-bosluk-xs { margin-top: 0.25rem; }
.tr-ust-bosluk-sm { margin-top: 0.5rem; }
.tr-ust-bosluk { margin-top: 0.75rem; }
.tr-ust-bosluk-lg { margin-top: 1.5rem; }
.tr-alt-bosluk { margin-bottom: 1.5rem; }

/* --- Renk açıklama şeridi (harita üstü) --- */
.tr-lejant {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: rgb(249 250 251);
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.dark .tr-lejant { background-color: rgba(255, 255, 255, 0.05); }

.tr-lejant-oge { display: inline-flex; align-items: center; gap: 0.5rem; }
.tr-lejant-sag { margin-inline-start: auto; }

/* --- Renk noktası --- */
.tr-nokta {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* --- Yanıp sönme (devam eden ziyaret) --- */
@keyframes tr-nabiz {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); opacity: 1; }
    70%  { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); opacity: 0.6; }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); opacity: 1; }
}

.tr-yanip-sonen { animation: tr-nabiz 1.4s infinite; }

/* --- Harita işaretleri --- */
.tr-harita-nokta {
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    border: 2px solid #fff;
    box-sizing: border-box;
}

.tr-harita-nokta.tr-aktif { animation: tr-nabiz 1.4s infinite; }

/* Harita panelin açılır menülerinin üstüne çıkmasın. */
.leaflet-container { z-index: 0; }

/* --- Ziyaret listesi --- */
.tr-liste { list-style: none; margin: 0; padding: 0; }

.tr-liste > li {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgb(229 231 235);
}

.dark .tr-liste > li { border-top-color: rgba(255, 255, 255, 0.1); }
.tr-liste > li:first-child { border-top: 0; }

.tr-liste-govde { min-width: 0; flex: 1 1 auto; }

.tr-liste-baslik {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

/* --- Arama sonuç tabloları --- */
.tr-tablo-sarmal { overflow-x: auto; }

.tr-tablo { width: 100%; font-size: 0.875rem; border-collapse: collapse; }

.tr-tablo thead tr { border-bottom: 1px solid rgb(229 231 235); }
.dark .tr-tablo thead tr { border-bottom-color: rgba(255, 255, 255, 0.1); }

.tr-tablo th {
    text-align: start;
    font-weight: 500;
    padding: 0.5rem 1rem 0.5rem 0;
    color: rgb(107 114 128);
    white-space: nowrap;
}

.dark .tr-tablo th { color: rgb(156 163 175); }

.tr-tablo tbody tr { border-top: 1px solid rgb(229 231 235); }
.dark .tr-tablo tbody tr { border-top-color: rgba(255, 255, 255, 0.1); }
.tr-tablo tbody tr:first-child { border-top: 0; }

.tr-tablo td { padding: 0.5rem 1rem 0.5rem 0; vertical-align: top; }
.tr-tablo td:last-child, .tr-tablo th:last-child { padding-right: 0; text-align: end; }

/* --- Seçilebilir etiketler (rakip / ürün) --- */
.tr-etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.tr-etiket {
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    background-color: #fff;
    color: rgb(3 7 18);
    box-shadow: inset 0 0 0 1px rgba(3, 7, 18, 0.1);
    transition: background-color .15s;
    cursor: pointer;
}

.tr-etiket:hover { background-color: rgb(249 250 251); }

.dark .tr-etiket {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.dark .tr-etiket:hover { background-color: rgba(255, 255, 255, 0.1); }

.tr-etiket-secili,
.dark .tr-etiket-secili {
    background-color: rgb(217 119 6);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgb(217 119 6);
}

.tr-etiket-sayi { opacity: 0.6; }

/* --- Boş durum --- */
.tr-bos-durum {
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: rgb(107 114 128);
}

.dark .tr-bos-durum { color: rgb(156 163 175); }

.tr-bos-kutu {
    padding: 2.5rem 0;
    text-align: center;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    background-color: rgb(249 250 251);
    color: rgb(107 114 128);
}

.dark .tr-bos-kutu {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgb(156 163 175);
}

/* --- Arama kutusu --- */
.tr-arama-kutusu {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 1rem;
    background-color: #fff;
    color: rgb(3 7 18);
    box-shadow: inset 0 0 0 1px rgba(3, 7, 18, 0.1);
}

.tr-arama-kutusu::placeholder { color: rgb(156 163 175); }
.tr-arama-kutusu:focus { outline: 0; box-shadow: inset 0 0 0 2px rgb(217 119 6); }

.dark .tr-arama-kutusu {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* =========================================================================
 * Panel görünüm rötuşları
 *
 * Filament'in kendi stilleri üzerine ince bir katman. Amaç: kutuları biraz
 * daha yumuşatmak, gölge yerine ince kenar kullanmak ve sayı kartlarını
 * öne çıkarmak. Bilinçli olarak az sayıda kural var — Filament sürüm
 * yükselttiğinde kırılacak yüzey küçük kalsın diye.
 * ====================================================================== */

:root {
    --tr-yuvarlak: 0.875rem;
    --tr-kenar: rgb(231 227 222);      /* stone-200 */
    --tr-kenar-koyu: rgb(255 255 255 / 0.10);
}

/* --- Bölüm ve kutular --- */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    border-radius: var(--tr-yuvarlak);
    border: 1px solid var(--tr-kenar);
    box-shadow: none;
}

.dark .fi-section,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn {
    border-color: var(--tr-kenar-koyu);
}

/* --- Sayı kartları: panelin ilk bakışta okunan yeri --- */
.fi-wi-stats-overview-stat {
    padding: 1.15rem 1.25rem;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.fi-wi-stats-overview-stat:hover {
    border-color: rgb(194 98 10 / 0.45);
}

.fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    font-weight: 700;
}

.fi-wi-stats-overview-stat-label {
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* --- Tablolar --- */
/* Rakam sütunları alt alta hizalansın; miktar ve tutar okunurluğu için. */
.fi-ta-table td,
.fi-ta-table th {
    font-variant-numeric: tabular-nums;
}

.fi-ta-header-cell {
    letter-spacing: 0.02em;
    text-transform: none;
}

.fi-ta-row:hover {
    background-color: rgb(194 98 10 / 0.04);
}

.dark .fi-ta-row:hover {
    background-color: rgb(255 255 255 / 0.03);
}

/* --- Kenar çubuğu --- */
.fi-sidebar-nav-groups {
    gap: 0.35rem;
}

.fi-sidebar-item-button {
    border-radius: 0.625rem;
}

/* --- Düğmeler ve rozetler --- */
.fi-btn {
    border-radius: 0.625rem;
    font-weight: 600;
}

.fi-badge {
    border-radius: 0.5rem;
    font-weight: 600;
}

/* --- Giriş ekranı: markanın ilk göründüğü yer --- */
.fi-simple-main {
    border-radius: 1.125rem;
    border: 1px solid var(--tr-kenar);
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 12px 32px rgb(28 25 23 / 0.06);
}

.dark .fi-simple-main {
    border-color: var(--tr-kenar-koyu);
    box-shadow: none;
}

/* --- Satır işlemleri ---
 * "Düzenle" her satırda tekrar ettiği için marka rengiyle yazılınca tablonun
 * sağ kenarı turuncu bir sütuna dönüşüyor ve göz oraya kayıyor. Nötr dururlar,
 * üzerine gelince renklenirler.
 *
 * Filament hem etiketi hem ikonu Tailwind sınıfıyla (text-custom-600) boyadığı
 * için ikisi de hedefleniyor; yalnızca yazıyı soldurmak ikonu turuncu bırakır. */
.fi-ta-actions .fi-ac-link-action span,
.fi-ta-actions .fi-ac-link-action .fi-link-icon {
    color: rgb(120 113 108);          /* stone-500 */
    transition: color 0.12s ease;
}

.fi-ta-actions .fi-ac-link-action:hover span,
.fi-ta-actions .fi-ac-link-action:hover .fi-link-icon {
    color: rgb(194 98 10);
}

.dark .fi-ta-actions .fi-ac-link-action span,
.dark .fi-ta-actions .fi-ac-link-action .fi-link-icon {
    color: rgb(168 162 158);          /* stone-400 */
}

.dark .fi-ta-actions .fi-ac-link-action:hover span,
.dark .fi-ta-actions .fi-ac-link-action:hover .fi-link-icon {
    color: rgb(232 145 60);
}