.otp-input-center {
  display: block !important;
  margin: 20px auto !important;
  width: 260px !important;
  height: 60px !important;
  letter-spacing: 8px !important;
  font-size: 1.6rem !important;
  text-align: center !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: #333 !important;
  padding-left: 8px !important; /* letter-spacing kaymasını dengelemek için */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  outline: none !important;
  transition: border-color 0.3s ease;
}

.otp-input-center:focus {
  border-color: #b4a8e8 !important;
  box-shadow: 0 0 0 3px rgba(89, 59, 219, 0.1) !important;
}

.otp-input-center::placeholder {
  color: #ced4da !important;
  letter-spacing: normal !important; /* Placeholder'da harf boşluğu olmasın */
}
/* Pasif opsiyonların görünümü */
option:disabled {
    color: #adb5bd !important;
    background-color: #f8f9fa;
    font-style: italic;
}

.option-passive {
  font-style: italic;
  color: #9aa0a6;
}

/* 1. Şirket İsmi - Moda Göre Renk Değişimi */
.user_company_name {
    /* Bootstrap'in standart yazı rengini kullanır, dark modda otomatik açılır */
    color: var(--vz-body-color); 
    font-weight: 600;
}

/* 2. Dinamik Yuvarlak Avatar */
.company-avatar-placeholder {
    width: 65px;
    height: 65px;
    /* Gradient her iki modda da şık durur ancak parlaklığı ayarlanabilir */
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); 
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.4rem;
    
    /* Dinamik Gölge: Light modda hafif, Dark modda daha koyu ve derin */
    box-shadow: 0 4px 15px var(--vz-shadow-rgb); 
    
    /* Dinamik Kenarlık (Stroke): Moda göre rengi değişen border değişkeni */
    border: 3px solid var(--vz-border-color);
    
    transition: all 0.3s ease; /* Mod geçişlerinde yumuşak geçiş yapar */
}

/* Hover Efekti (Opsiyonel) */
.company-avatar-placeholder:hover {
    transform: scale(1.05);
    /* Üzerine gelince parlamayı moda göre artırır */
    box-shadow: 0 6px 20px var(--vz-shadow-rgb);
    border-color: var(--vz-primary);
}



/* Avatar Preview Zoom Animasyonu */
.modal.fade#avatar-preview-modal .modal-dialog {
    transform: scale(0.1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal.show#avatar-preview-modal .modal-dialog {
    transform: scale(1);
}

/* Arka planı biraz daha koyulaştırmak isterseniz */
#avatar-preview-modal {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Avatar boyutu */
/* Avatar boyutu */
/* Avatar boyutu */
/* Avatar boyutu */
/* Avatar boyutu */
/* Avatar boyutu */
/* Avatar boyutu */








/* Avatar boyutu */
/* Avatar boyutu */
/* Avatar boyutu */
/* Avatar boyutu */
/* Avatar boyutu */
/* Avatar boyutu */
/* Avatar boyutu */
/* Avatar boyutu */
/* 1. Önizleme Modalını En Üste Zorla */
/* Sihirbaz modalı genelde 1050 civarıdır, bunu 1100 yaparak hemen üstüne alıyoruz */









/* Yazı Kapsayıcısı */
/* Yazı Kapsayıcısı */
/* Yazı Kapsayıcısı */
/* Yazı Kapsayıcısı */
/* Yazı Kapsayıcısı */
/* Yazı Kapsayıcısı */
/* Yazı Kapsayıcısı */
/* Yazı Kapsayıcısı */
/* Yazı Kapsayıcısı */
/* Yazı Kapsayıcısı */
/* Yazı Kapsayıcısı */
/* Yazı Kapsayıcısı */
.brand-overlay-container {
    width: 80%;            /* Sağdan soldan pay bırakır, butonlara çarpmaz */
    max-width: 1200px;
    text-align: center;
    pointer-events: none;  /* Alttaki butonlara tıklamayı engellemez */
    z-index: 1;
}

/* Dinamik ve Responsive Metin */
.brand-text {
    font-size: clamp(2rem, 8vw, 5rem); /* Minimum 2rem, ekran genişliğine göre %8, max 5rem */
    font-weight: 900;
    color: rgba(255, 255, 255, 0.15); /* Arka planda şık bir doku gibi durması için */
    text-transform: uppercase;
    margin: 0;
    padding: 0 20px;
    
    /* Taşma Ayarları */
    white-space: nowrap;      /* Satır atlamasın */
    overflow: hidden;         /* Taşan kısmı gizle */
    text-overflow: ellipsis;  /* Sığmazsa "..." ekle */
    
    /* Küçük bir gölge ile derinlik katabiliriz */
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
/* Üstteki butonların olduğu kısım */
.overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* Arka planı tamamen temizle */
}

/* BAŞLANGIÇ AKTİF ÜYELİK CSS */
/* Aktif Üyelik - Karemsi Tasarım */
.status-green {
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px !important; /* İstediğin karemsi köşe */
    background-color: rgba(47, 179, 68, 0.1) !important;
    color: #2fb344 !important;
    border: 1px solid rgba(47, 179, 68, 0.25) !important;
}

/* Tik İşareti */
.status-check-animated {
    width: 14px; 
    height: 10px;
    margin-right: 8px;
    position: relative;
    display: inline-block;
}

.status-check-animated::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 6px;
    border-left: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(-45deg);
    
    /* İSTEDİĞİN AKICI ANİMASYON BURADA */
    animation: pencil-tick-fluid 5s ease-in-out infinite;
    clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* Başlangıçta tamamen kapalı */
}

@keyframes pencil-tick-fluid {
    0% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* Başlangıç: Nokta kadar */
        opacity: 0;
    }
    5% {
        opacity: 1;
        clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%); /* Kalem dokundu, aşağı iniyor */
    }
    20% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Köşeyi döndü ve sağa uzandı */
        opacity: 1;
    }
    90% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Bekleme süresi */
        opacity: 1;
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 0; /* Silinip başa dönme */
    }
}
/* BİTİŞ AKTİF ÜYELİK CSS */

/* BAŞLANGIÇ PASİF ÜYELİK CSS */
/* --- ORTAK DURUM ETİKETLERİ (Görseldeki gibi daha karemsi ve büyük) --- */
.status-red, .status-green, .admin-badge {
    padding: 6px 14px; /* Boyut büyütüldü */
    display: inline-flex;
    align-items: center;
    font-size: 13px;    /* Yazı daha okunaklı yapıldı */
    font-weight: 700;
    border-radius: 6px !important; /* Ovallik azaltıldı (Karemsi modern köşe) */
    transition: all 0.3s ease;
    line-height: 1.2;
}

/* Pasif Üyelik Özel Renk (Dark/Light Uyumlu) */
.status-red {
    background-color: rgba(224, 49, 49, 0.1) !important;
    color: #e03131 !important;
    border: 1px solid rgba(224, 49, 49, 0.25) !important;
}

/* Aktif Üyelik Özel Renk (Dark/Light Uyumlu) */
.status-green {
    background-color: rgba(47, 179, 68, 0.1) !important;
    color: #2fb344 !important;
    border: 1px solid rgba(47, 179, 68, 0.25) !important;
}

/* Yönetici Rozeti Özel Renk (Dark/Light Uyumlu) */
.admin-badge {
    background-color: rgba(128, 128, 128, 0.1) !important;
    color: currentColor !important;
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- X İŞARETİ (PASİF) --- */
.status-cross-animated {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    position: relative;
    display: inline-block;
}

.status-cross-animated::before,
.status-cross-animated::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 2.5px; /* Çizgi kalınlığı görseldeki gibi belirgin */
    background-color: currentColor;
    border-radius: 1px;
    animation: pencil-cross-repeat 5s ease-in-out infinite;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

.status-cross-animated::before { transform: translateY(-50%) rotate(45deg); }
.status-cross-animated::after { transform: translateY(-50%) rotate(-45deg); animation-delay: 0.4s; }

/* --- TİK İŞARETİ (AKTİF) --- */
.status-check-animated {
    width: 14px;
    height: 10px;
    margin-right: 8px;
    position: relative;
    display: inline-block;
}

.status-check-animated::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 6px;
    border-left: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(-45deg);
    animation: pencil-tick-repeat 5s ease-in-out infinite;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

/* --- ANİMASYONLAR --- */
@keyframes pencil-cross-repeat {
    0% { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); opacity: 0; }
    5% { opacity: 1; }
    15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
    90% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 0; }
}

@keyframes pencil-tick-repeat {
    0% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); opacity: 0; }
    5% { opacity: 1; }
    20% { clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%); opacity: 1; }
    90% { clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%); opacity: 1; }
    100% { clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%); opacity: 0; }
}
/* BİTİŞ PASİF ÜYELİK CSS */


.marker-container {
    background: transparent;
    border: none;
}

.custom-map-marker {
    width: 32px;
    height: 32px;
    border-radius: 50% 50% 50% 0; /* Damla formu */
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.custom-map-marker i {
    transform: rotate(45deg); /* İkonu dik tutar */
    font-size: 16px;
}


/* Karanlık temada mor rengin sönük kalmaması için */
.bg-blue-lt {
    background-color: rgba(73, 70, 238, 0.15) !important; /* Soft mor arka plan */
    color: #441eee !important; /* Canlı mor metin */
}

  
  /* Badge genel ayarları (Eğer Bootstrap sınıfları yetersiz kalırsa) */
  .badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
  }
/* Yönetici Etiketi İçin Özel Animasyon */


/* Yönetici Etiketi - Minimalist ve Kibar Versiyon */
.admin-badge {
  padding: 4px 10px; /* İç boşluklar daraltıldı */
  display: inline-flex;
  align-items: center;
  font-size: 11px;   /* Yazı boyutu küçültüldü */
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 50px !important;
  
  /* Temaya göre değişen hafif arka plan ve çerçeve */
  background-color: rgba(128, 128, 128, 0.1) !important;
  border: 1px solid rgba(128, 128, 128, 0.25) !important;
  color: currentColor !important;
  
  transition: all 0.3s ease;
  line-height: 1; /* Satır yüksekliği sabitlendi */
}

/* Küçültülmüş Nokta ve Radar */
.admin-dot {
  width: 7px;        /* Nokta boyutu küçültüldü */
  height: 7px;
  background-color: currentColor; 
  border-radius: 50%;
  margin-right: 6px; /* Yazı ile mesafe daraltıldı */
  display: inline-block;
  position: relative;
}

.admin-dot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: currentColor;
  animation: admin-pulse-small 2s infinite ease-out;
}

@keyframes admin-pulse-small {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.8); /* Yayılma mesafesi küçültüldü */
    opacity: 0;
  }
}

/* Sadece HATA (Error) ikonlu toastların barını kırmızı yap */
.swal2-toast.swal2-icon-error .swal2-timer-progress-bar {
    background: #d33 !important;
}

/* Sadece UYARI (Warning) ikonlu toastların barını turuncu/sarı yap */
.swal2-toast.swal2-icon-warning .swal2-timer-progress-bar {
    background: #f8bb86 !important;
}

/* --- PAKET TİPİ ROZETİ KESİN ÇÖZÜM --- */
.custom-package-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    
    /* Light Mode İçin (Varsayılan) */
    background-color: rgba(114, 94, 195, 0.15) !important; 
    color: #6139b5 !important; 
    border: 1px solid rgba(114, 94, 195, 0.3) !important;
    
    /* Metnin kaybolmaması için ek tedbir */
    min-width: 100px;
    justify-content: center;
    line-height: 1.5 !important;
}

/* Dark Mode Desteği (Bootstrap veya Temanıza Göre) */
[data-bs-theme="dark"] .custom-package-badge,
.theme-dark .custom-package-badge {
    background-color: rgba(209, 191, 255, 0.2) !important;
    color: #d1bfff !important; 
    border: 1px solid rgba(209, 191, 255, 0.4) !important;
}






canvas {
  display: block;
  cursor: crosshair;
}
#map { height: 300px; width: 100%;  }

#main-map, #map {
  z-index: 1 !important;
}

/* Eğer harita üzerindeki kontroller (zoom butonları vb.) kaybolursa onları tekrar öne alalım */
.leaflet-control-container {
  z-index: 1000 !important;
}

/* Navigasyon menüsünün her zaman en üstte olduğundan emin olalım */
.nav-pills, .navbar-menu, .topbar {
  z-index: 1001 !important; /* Bootstrap standart z-index değerlerine uyum sağlar */
}
/* Harita üzerindeki isim etiketi */
.map-location-label {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transform: translateX(-50%); /* Tam Yatay Orta */
  display: inline-block;
  pointer-events: none;
}
/* Zoom uzaklaştığında isimleri gizle (Görüşü temiz tutar) */
.hide-labels .map-location-label { display: none; }

/* İkon Seçici Tasarımı */
.icon-selector-wrapper .btn-check:checked + .btn {
  border-color: #4b38b3 !important;
  background-color: rgba(75, 56, 179, 0.1);
}

.icon-option {
  transition: all 0.2s ease;
}
.icon-option:hover {
  background-color: #f3f3f9;
  border-color: #4b38b3 !important;
  color: #4b38b3;
}


/* Sidebar linklerinde metin imleci oluşmasını engelle */
.location-menu-link {
  user-select: none; /* Metnin seçilmesini engeller */
  cursor: pointer !important; /* Her zaman el işareti (tıklama) imleci gösterir */
}
/* İkon gridindeki elemanların seçilmesini engelle */
#icon-grid-inner {
  user-select: none; /* Metin seçimini engeller */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* İkon kutuları için imleci el işareti yap ve tıklama hissini güçlendir */
.icon-item {
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-item:active {
  transform: scale(0.9); /* Tıklayınca hafifçe içe çöksün (buton hissi) */
  background-color: rgba(0,0,0,0.05);
}

/* Aktif veya engellenmiş butonlarda metin seçmeyi engelle */
.nav-link.disabled {
  cursor: not-allowed !important;
}

#map {
  cursor: crosshair !important;
}

/* Eğer marker üzerindeyken el işareti (pointer) gelmeye devam etsin istersen */
.leaflet-marker-icon, .leaflet-interactive {
  cursor: pointer !important;
}

.location-menu-link {
    display: block;
    padding: 10px 15px;
    color: #495057;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s;
    margin-bottom: 5px;
}

/* Sidebar Aktif Durumu (Mor) */
.location-menu-link.active {
    background-color: #593bdb;
    color: #fff !important;
}

/* Sidebar Hover (Üzerine Gelince) */
.location-menu-link:hover:not(.active) {
    background-color: rgba(89, 59, 219, 0.1);
    color: #593bdb;
}

/* Yeni Lokasyon Ekle Butonu Özel Stili */
.new-loc-btn {
    text-align: center;
}

.limit-reached-btn {
    text-align: center;
}

/* Tablo satırlarındaki tüm arka plan değişimlerini yumuşatır */
#worker-ajax-table tbody tr {
    transition: background-color 1.5s ease !important;
}

/* Temanın td boyamalarını geçersiz kılar ki tr rengi görünsün */
#worker-ajax-table tbody tr td {
    background-color: transparent !important;
}
/* Hover durumunda alt bilginin gizlenmesini engelle */
/* Alt bilgi barının her zaman örtü katmanının üzerinde kalmasını sağlar */
.gallery-box .p-2.bg-light {
    position: relative; 
    z-index: 2; 
}

/* Örtü katmanının metinlerin altına girmesi için z-index verelim */
.gallery-box::before {
    z-index: 1;
}

/* Resim ve butonların da etkilenmemesi için konteynırı öne alalım */
.gallery-container {
    z-index: 2;
}

.dz-preview-img-container {
    height: 80px !important;    /* Sabit yükseklik */
    width: 100% !important;      /* Genişlik tam */
    background-color: #f8f9fa;   /* Arka plan gri */
    display: flex !important;    /* Esnek kutu yapısı */
    align-items: center !important;  /* DİKEYDE ORTALAR */
    justify-content: center !important; /* YATAYDA ORTALAR */
    overflow: hidden;
    border-radius: 4px;
}

.dz-preview-img-container img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain !important; /* Resmin tamamını gösterir */
}

.custom-display-none { display: none;}
.custom-text-align-center { text-align:center;}
.custom-text-align-right { text-align:right;}
.custom-date-input { text-align:center; pointer-events:none; }
.custom-height-252 { height: 252px; }
.custom-height-600 { height: 600px; }
.custom-height-400 { height: 400px; }
.custom-max-height-260 { max-height: 260px; }
.custom-min-height-350 { min-height: 350px; }
.custom-crosshair { cursor:pointer; }
.custom-width-height-120 { width:120px;height:120px }
.custom-text-align-center-mouse-leave{ text-align: center; pointer-events: none; }
.custom-text-align-center{ text-align: center;}
.custom-text-font-bold{ font-weight: bold;}

.custom-text-color-red-weight-bold { color:red; font-weight:bold; }
.custom-border-radius-05 { border-radius:5px; }
.custom-margin-top-02 { margin-top:2%; }
.custom-width-yuz-30 { width: 30%; }
.custom-width-yuz-10 { width: 10%; }
.custom-width-180 { width: 180px; }
.custom-width-height-120 { width:120px; height:120px; }
.custom-width-height-120 lord-icon { width:120px; height:120px; display:block; margin:0 auto; }


.custom-overflow-y { overflow-y: auto; }
.custom-z-index { z-index: 9999; }
.custom-clear-both { clear: both; }
.custom-float-right { float: right; }
.custom-margin-right { margin: right; }

.custom-color-red { color:red; }

.ts-wrapper.disabled .ts-control .item {
    background-color: #695eef !important; /* Görseldeki mor tonu */
    color: #fff !important;
    opacity: 1 !important;
}

.ts-dropdown .active {
  background-color: #4b38b3 !important;
  color: white !important;
}

.ts-wrapper .item {
  background-color: #4b38b3 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 2px 10px !important;
  font-size: 0.875rem;
  box-shadow: 0 3px 3px rgba(56, 65, 74, 0.1) !important;
}

.upload-disabled-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Dropzone'un üstünde olmalı */
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0); /* Tamamen şeffaf ama orada */
}

/* View modundayken dropzone'u soluklaştır */
.view-mode-active .dropzone {
    opacity: 0.6;
    background-color: #f8f9fa !important;
}

/* View modundayken silme butonlarını gizle */
.view-mode-active [data-dz-remove] {
    display: none !important;
}

/* Kutuya hover olunca ikon ve metni etkile */
.dropzone:hover .dz-message i {
  color: #405189 !important; /* İkonun rengini kurumsal renginize çekebilirsiniz */
  transform: scale(1.1);      /* İkonu %10 büyütür */
  transition: all 0.3s ease;
}

.dropzone:hover .dz-message h4 {
  color: #333 !important;    /* Metni biraz daha koyulaştırır */
  transition: all 0.3s ease;
}

#dropzone-previews-health_uploads { /* senin containerId değerin */
  max-height: 400px; /* Yaklaşık 2-3 sıra evrak gösterir */
  overflow-y: auto;  /* Fazlası gelince içten scroll çıkar */
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* Sürükleme esnasında (dosya kutunun üzerindeyken) efekt */
.dropzone.dz-drag-hover {
  background-color: rgba(64, 81, 137, 0.05) !important; /* Hafif bir arka plan rengi */
  border-color: #405189 !important; /* Kenarlıkları belirginleştirir */
}
.save-button {
  position: absolute;
  padding: 8px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: none;
}
.move-cursor {
  cursor: move;
}

.bg-soft-success {
  background-color: rgba(69, 203, 133, 0.18) !important;
}

.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Arkaplanı karartmak için */
  display: none; /* Varsayılan olarak gizli */
  justify-content: center;
  align-items: center;
  z-index: 1055;
}

.custom-modal-dialog {
  width: 400px; /* Modalın genişliği */
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
}


.custom-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.custom-modal-body {
  padding: 15px;
}

.custom-modal-footer {
  padding: 15px;
}

.modal-canvas {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Arkaplanı karartmak için */
  justify-content: center;
  align-items: center;
  z-index: 1050;
}

.terminal-box{
  background:#0b0e14; color:#e6edf3;
  font: 12px/1.4 Consolas, 'SFMono-Regular', Menlo, Monaco, monospace;
  height: 340px; overflow:auto; padding:10px; margin:0;
  border-radius: 8px; border:1px solid #1f2633;
  white-space: pre-wrap; word-wrap: break-word;
}
.term-line{display:block}
.term-line .tag{color:#6ee7b7}
.term-line .warn{color:#facc15}
.term-line .err{color:#f87171}
.term-dim{opacity:.7}



/* SHIFT-GRIDS deki style */
.modal.show ~ #day-menu,
  .modal.show ~ #bulk-menu {
    display: none !important;
  }

  /* PERSONEL başlık & ayraç */
  .my-personnel-divider {
    background: #8b3a0a;
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 2px;
    margin-bottom: 4px;
  }

  .my-personnel-separator {
    background-color: #8b4513;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 3px;
    margin-top: 6px;
    margin-bottom: 4px;
    pointer-events: none;
  }

  /* PERSONEL SATIRI – dış div */
  .my-personnel-row {
    width: 100% !important;
    margin: 0 !important;
  }

  /* ORTAK WRAPPER – tüm eventler */
  .my-event-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
  }

  /* NORMAL VARDİYA KARTLARI (gruplar) */
  .my-event-wrapper:not(.my-personnel-row) {
    display: flex;
    flex-direction: column;
    padding: 2px 4px;
  }

  /* PERSONEL SATIRI: kırmızı + sarı yan yana */
  .my-event-wrapper.my-personnel-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0 !important;
  }

  /* Kırmızı sil butonu */
  .my-event-delete {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: #dc3545;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    z-index: 2;
    flex: 0 0 32px;
  }

  .my-event-wrapper:hover .my-event-delete {
    transform: translateX(0);
  }

  /* GRUP KARTI İÇERİĞİ (eski görünüm) */
  .my-event-main {
    position: relative;
    z-index: 1;
    padding: 4px 8px;
  }

  .my-event-title {
    font-weight: bold;
    color: #fff;
  }

  .my-event-badge {
    font-size: 11px;
    margin-left: 4px;
    opacity: 0.8;
  }

  .my-event-time {
    font-size: 11px;
    color: #e0e0e0;
    margin-top: 2px; /* saat alta yapışmasın */
  }

  /* PERSONEL satırının sarı alanı – ikon + isim YATAY */
  .my-personnel-row-inner {
    flex: 1 1 auto;
    width: 100% !important;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background-color: #f4a100 !important;
    color: #000 !important;
    border-radius: 3px;
    box-sizing: border-box;
  }

  .my-personnel-row-inner i {
    font-size: 18px;
    color: #ffffff !important;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* PERSONEL metin bloğu */
  .my-personnel-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  .my-personnel-top {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .my-personnel-name {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
  }

  .my-personnel-badge {
    font-size: 11px;
    color: #ffffff;
    opacity: 0.9;
  }

  .my-personnel-time {
    font-size: 11px;
    opacity: 0.9;
    color: #ffffff;
  }

  /* GRUP BAŞLIĞINA İKON – sadece yeni eklenen kısım */
  .my-event-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .my-event-title-row i {
    font-size: 18px;
    color: #ffffff;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .my-event-title-text {
    font-weight: bold;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
  }

  /* Popover içinde tam genişlik */
  .fc-popover .fc-daygrid-event-harness,
  .fc-popover .fc-daygrid-event {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .fc-daygrid-dot-event {
    padding-left: 0 !important;
  }

  .fc-daygrid-dot-event .fc-daygrid-event-dot {
    display: none !important;
  }

  .shift-scroll {
    max-height: 450px;
    overflow-y: auto;
    padding-right: 5px;
  }

  .fc-selected-day {
    box-shadow: 0 0 0 2px #0d6efd inset;
    border-radius: 6px;
  }

  .fc-range-selected {
    box-shadow: 0 0 0 2px #0d6efd inset;
    border-radius: 6px;
    background-color: rgba(13, 110, 253, 0.08);
  }

  #calendar,
  #calendar * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .fc-more-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .employee-item.selected,
  .employee-item.selected:hover,
  .employee-item.selected:active,
  .employee-item.selected:focus,
  .employee-item.selected:focus-within {
    background-color: #fff8d1 !important;
  }
/* END */
/* SHIFT-GROUPS STYLE */
 /* Kart içindeki link sürüklenmesin (ghost çıkmasın) */
.shift-group-card a,
.employee-card a {
  -webkit-user-drag: none;
  user-drag: none;
}

/* İstersen yazı seçilmesini de engeller (tıklama hissi daha iyi olur) */
.shift-group-card a,
.employee-card a,
.shift-group-card,
.employee-card {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}


    .group-header-card .card-title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-header-card .flex-grow-1{
  min-width: 0;
}

    /* Ortak boyut: hem RGB tetikleyici hem hazır renkler için */
.shift-color-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    padding: 0;
    display: inline-block;
}

/* Colorpicker div’inin default kenarlığını vs. temizleyelim */
.classic-colorpicker.shift-color-circle {
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.15);
    cursor: pointer;
}

/* Hazır renk butonlarının temel hali */
.shift-color-dot {
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.15);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Hover efekti */
.shift-color-dot:hover,
.classic-colorpicker.shift-color-circle:hover {
    transform: scale(1.20);
}

/* Seçili (active) olduğunda halka efekti */
.shift-color-dot.active,
.classic-colorpicker.shift-color-circle.active {
    transform: scale(1.25);
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px rgba(59,130,246,0.8); /* tema rengine göre ayarlayabilirsin */
}

/* Seçili satır (bizim sarımız) */
.employee-item.selected,
.employee-item.selected:hover,
.employee-item.selected:active,
.employee-item.selected:focus,
.employee-item.selected:focus-within {
    background-color: #fff8d1 !important;  /* yumuşak sarı */
}

/* Tıklanınca Bootstrap'in verdiği gri focus/active rengini iptal et */
.employee-item:active,
.employee-item:focus,
.employee-item:focus-within {
    background-color: transparent !important;
    outline: none !important;
}

.avatar-leader-glow {
    box-shadow: 0 0 10px 4px rgba(255, 215, 0, 0.6);
}

/* Kartların arasındaki boşluğu kaldır */
.group-header-card {
    margin-bottom: 2px !important;
}

.group-content-wrapper .card {
    margin-top: 2px !important;
}

/* Her grup kolonunun altına boşluk ver, iç kartlara dokunma */
.shift-group-col {
    margin-bottom: 1.5rem;  /* istersen 2rem yaparsın */
}

/* END */
/* Profil Alanı Konteyner */
.profile-dropzone {
    width: 120px;
    height: 120px;
    border-radius: 50% !important;
    min-height: auto !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border: 2px dashed #ced4da;
    transition: all 0.3s ease;
    background-color: #f3f3f9;
}


.profile-dropzone .dz-message {
    margin: 0 !important;
    text-align: center;
}

/* Fotoğraf yüklendiğinde Dropzone'un kendi preview listesini profil modunda gizle */
#profile-dz .dz-preview {
    display: none !important;
}

/* Genel Dropzone Hover Efekti */
.profile-dropzone:hover, 
#dropzone:hover {
    border-color: #405189;
}

#dropzone {
    border: 2px dashed #ced4da;
    transition: all 0.3s ease;
}

.pulse-animation { animation: pulse-red 2s infinite; }
    @keyframes pulse-red { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

/* Modal içindeki kapsayıcıyı hizala */
#modal_value_pre {
    padding: 0 !important;
    border: none !important; /* Dıştaki gereksiz border'ı kaldırır */
    background: transparent !important;
}

/* Badge'lerin içindeki uzun metinleri zorla alt satıra indir */
#modal_value_pre .badge {
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word !important;
    word-break: break-all !important;
    text-align: left;
}

/* Scrollbar tasarımı */
#modal_value_pre > div::-webkit-scrollbar {
    width: 5px;
}
#modal_value_pre > div::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 10px;
}

#view_raw {
    white-space: pre-wrap; /* Satır sonlarında alt satıra geçer */
    word-wrap: break-word;
    background-color: #1e1e1e; /* Terminal siyahı */
    color: #4af626; /* Matrix yeşili veya istediğin bir renk */
    padding: 15px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
}

.ribbon-two-warning span {
    background-color: #f7b84b !important; /* Bootstrap Warning rengi */
    color: #fff !important;
}
.ribbon-two-warning:before, .ribbon-two-warning:after {
    border-color: #f7b84b transparent transparent !important;
}

.copy-btn {
    opacity: 1;
    transition: all 0.2s;
    line-height: 1;
}

.copy-container:hover .copy-btn {
    opacity: 1;
    color: #405189 !important; /* Temanın ana rengine göre güncelleyebilirsin */
}

.copy-btn:hover {
    transform: scale(1.2);
}