/**
 * BORDRO TUTORIAL - ÖZEL STILLER
 * Timeline ve personel kartları için özel highlight stilleri
 */

/* ==================== TIMELINE HIGHLIGHT ==================== */

/* Timeline grid vurgulaması */
.tutorial-timeline-highlight {
    position: relative !important;
    z-index: 10001 !important;
    box-shadow: 0 0 0 5px rgba(75, 107, 251, 0.8) !important;
    border-radius: 8px !important;
    background: inherit !important;
    animation: timeline-pulse 2s infinite;
}

@keyframes timeline-pulse {
    0%, 100% {
        box-shadow: 0 0 0 5px rgba(75, 107, 251, 0.8);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(75, 107, 251, 1);
    }
}

/* Timeline cell animasyonu */
.tutorial-timeline-cell-highlight {
    animation: pulse-cell 1.5s infinite;
    position: relative;
    transform: none !important;
}

@keyframes pulse-cell {
    0%, 100% { 
        background-color: rgba(75, 107, 251, 0.1);
    }
    50% { 
        background-color: rgba(75, 107, 251, 0.25);
    }
}

/* Timeline satır ayırıcı göstergesi */
.timeline-grid::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: linear-gradient(to right, 
        transparent, 
        rgba(75, 107, 251, 0.3) 10%, 
        rgba(75, 107, 251, 0.3) 90%, 
        transparent
    );
    pointer-events: none;
}

/* ==================== PERSONEL KARTI HIGHLIGHT ==================== */

/* Personel kartı vurgulaması */
.tutorial-card-highlight {
    position: relative !important;
    z-index: 10001 !important;
    box-shadow: 0 0 0 4px rgba(75, 107, 251, 0.7) !important;
    border-radius: 12px !important;
    background: inherit !important;
    transition: all 0.3s ease !important;
}

.tutorial-card-highlight::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 12px;
    border: 2px solid rgba(75, 107, 251, 0.5);
    pointer-events: none;
    animation: card-glow 2s infinite;
}

@keyframes card-glow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.01);
    }
}

/* ==================== FIRMA BÄ°LGÄ°LERÄ° HIGHLIGHT ==================== */

/* Firma bilgileri kartı için özel */
.tutorial-firma-highlight {
    position: relative !important;
    z-index: 10001 !important;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.6) !important;
    border-radius: 12px !important;
    background: inherit !important;
}

/* ==================== BUTON HIGHLIGHT ==================== */

/* Personel Ekle butonu için özel */
.tutorial-btn-highlight {
    position: relative !important;
    z-index: 10001 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.6) !important;
    border-radius: 8px !important;
    animation: btn-bounce 1s infinite;
}

@keyframes btn-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* ==================== EXPORT BUTONLARI HIGHLIGHT ==================== */

.tutorial-export-highlight {
    position: relative !important;
    z-index: 10001 !important;
    border-radius: 8px !important;
    background: rgba(75, 107, 251, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(75, 107, 251, 0.5) !important;
}

/* ==================== MOBÄ°L UYUM ==================== */

@media (max-width: 768px) {
    /* Timeline daha büyük highlight mobilde */
    .tutorial-timeline-highlight {
        box-shadow: 0 0 0 8px rgba(75, 107, 251, 0.8) !important;
    }
    
    /* Personel kartı daha ince highlight mobilde */
    .tutorial-card-highlight {
        box-shadow: 0 0 0 3px rgba(75, 107, 251, 0.7) !important;
    }
    
    /* Timeline cell daha belirgin mobilde */
    .tutorial-timeline-cell-highlight {
        animation: pulse-cell-mobile 1s infinite;
    }
    
    @keyframes pulse-cell-mobile {
        0%, 100% { 
            background-color: rgba(75, 107, 251, 0.15); 
        }
        50% { 
            background-color: rgba(75, 107, 251, 0.4); 
        }
    }
}

/* ==================== TUTORIAL FAB BUTTON (BORDRO) ==================== */

/* Bordro sayfası için tutorial butonu */
.bordro-tutorial-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    animation: bordro-pulse 2s infinite;
}

@keyframes bordro-pulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 4px 12px rgba(75, 107, 251, 0.3); 
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 6px 20px rgba(75, 107, 251, 0.5); 
    }
}

.bordro-tutorial-fab:hover {
    animation: none;
    transform: scale(1.1) rotate(-10deg);
}

/* Mobilde FAB boyutunu ve konumunu küçült */
@media (max-width: 768px) {
    .bordro-tutorial-fab { bottom: 12px; right: 12px; }
    .bordro-tutorial-fab.btn-circle { width: 44px; height: 44px; min-height: 44px; }
    .bordro-tutorial-fab i { font-size: 16px; }
}

/* ==================== DEMO BUTTON ==================== */

/* Demo butonu için özel stil */
.demo-btn-highlight {
    animation: demo-glow 1.5s infinite;
}

@keyframes demo-glow {
    0%, 100% {
        box-shadow: 0 0 0 rgba(251, 146, 60, 0);
    }
    50% {
        box-shadow: 0 0 15px rgba(251, 146, 60, 0.6);
    }
}

/* ==================== TIMELINE ROW LABELS ==================== */

/* Timeline satır başlıkları için ipucu */
.timeline-grid-wrapper::before {
    content: 'Ocak - Haziran';
    position: absolute;
    left: -100px;
    top: 25%;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s;
}

.timeline-grid-wrapper::after {
    content: 'Temmuz - Aralık';
    position: absolute;
    left: -100px;
    bottom: 25%;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s;
}

.tutorial-highlight .timeline-grid-wrapper::before,
.tutorial-highlight .timeline-grid-wrapper::after {
    opacity: 1;
}

/* ==================== Z-INDEX HİYERARŞİSİ - MAKSİMUM ÜSTÜNLÜK ==================== */

/* Tutorial sisteminin z-index hiyerarşisi - En yüksek değerler */
.tutorial-overlay {
    z-index: 2147483645 !important;
    position: fixed !important;
}

.tutorial-highlight,
.tutorial-timeline-highlight,
.tutorial-card-highlight,
.tutorial-firma-highlight,
.tutorial-btn-highlight,
.tutorial-export-highlight,
.tutorial-form-highlight,
.tutorial-table-highlight {
    z-index: 2147483646 !important;
    position: relative !important;
    isolation: isolate !important;
}

.tutorial-popover {
    z-index: 2147483647 !important;
    max-width: 280px;
    position: fixed !important;
    pointer-events: auto !important;
    will-change: transform !important;
    isolation: isolate !important;
}

/* Herhangi bir stacking context altında kalmayı önlemek için */
.tutorial-highlight {
    position: relative !important;
    z-index: 2147483646 !important;
    transform: none !important;
    isolation: isolate !important;
}

/* ==================== DRIVER.JS POPUP OVERRIDES ==================== */
.driver-popover {
    position: fixed !important;
    z-index: 2147483647 !important; /* En üst */
    pointer-events: auto !important;
}
.driver-overlay,
.driver-backdrop {
    position: fixed !important;
    z-index: 2147483646 !important; /* Popover'dan bir düşük */
}

/* Tutorial aktifken olası clipping'i engelle */
.driver-active .card,
.driver-active .modal,
.driver-active .modal-box,
.driver-active #main-content,
.driver-active #emptyState {
    overflow: visible !important;
}

/* EmptyState kartlarında clipping sorununu kesin olarak kaldır */
#emptyState .card {
    overflow: visible !important;
    position: relative !important;
    z-index: 0 !important;
}
#emptyState .card .card-body {
    overflow: visible !important;
}

/* EmptyState kapsayıcıları clipping yapmasın */
#emptyState .max-w-5xl,
#emptyState .grid {
    overflow: visible !important;
    position: relative !important;
}

/* Ana content alan da clipping yapmasın */
#main-content {
    overflow: visible !important;
}

#emptyState {
    overflow: visible !important;
}

/* Tutorial aktif olunca tüm overflow'ları kapat */
.driver-active #main-content,
.driver-active #emptyState,
.driver-active #emptyState .max-w-5xl,
.driver-active #emptyState .grid,
.driver-active #emptyState .card,
.driver-active #emptyState .card-body {
    overflow: visible !important;
    transform: none !important;
}

/* Tutorial popover daima en üstte */
.driver-active .tutorial-popover {
    z-index: 2147483647 !important;
}
.tutorial-popover.right,
.tutorial-popover[data-position="right"] {
    transform: translate(8px, -50%) !important;
}

/* Modal'ların tutorial altında kalmaması için */
dialog[open] {
    z-index: 9997 !important;
}