/* Tam şeffaf ana gövde - Pencere yuvarlatmaları appContainer'a verilecek */
body { 
    font-family: 'Inter', sans-serif; 
    margin: 0; padding: 0; 
    background-color: transparent; 
    height: 100vh; 
    box-sizing: border-box; 
    overflow: hidden; 
    color: #1e293b;
}

/* ANA UYGULAMA ÇERÇEVESİ (Premium Görünüm) */
#appContainer {
    background-color: #f8fafc;
    height: 100vh;
    border-radius: 14px; /* Şık yuvarlak köşeler */
    border: 1px solid rgba(0,0,0,0.15); /* Pürüzsüz çok ince bir sınır */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden;
}

/* LED Stilleri (Ana Başlığa Taşındı) */
.led { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.led.orange { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.led.red { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
.led.green { background: #10b981; box-shadow: 0 0 8px #10b981; }

/* Scrollbar (Kaydırma Çubuğu) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

/* Paneller ve Modallar */
.glass-panel { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
.glass-modal { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.glass-input { background: #f8fafc; border: 1px solid #cbd5e1; color: #1e293b; transition: all 0.2s ease; }
.glass-input:focus { background: #ffffff; border-color: #3b82f6; outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
.force-upper { text-transform: uppercase; }

/* Animasyonlar ve Katmanlar */
.modal-overlay { opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(5px); }
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-content { transform: scale(0.97) translateY(10px); opacity: 0; transition: all 0.3s ease; }
.modal-content.show { transform: scale(1) translateY(0); opacity: 1; }
.fade-out { opacity: 0 !important; transition: opacity 0.4s ease; pointer-events: none; }
@keyframes fadeInCustom { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-fadeIn { animation: fadeInCustom 0.3s ease-out forwards; }

/* Timeline (İzin Çizelgesi) */
.tl-row-header { position: sticky; top: 0; z-index: 30; background: #f8fafc; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.tl-name { position: sticky; left: 0; z-index: 20; min-width: 170px; max-width: 170px; padding: 0 10px; font-weight: 600; font-size: 12px; border-right: 1px solid #cbd5e1; background: #ffffff; display:flex; align-items:center; }
.tl-name-header { z-index: 40 !important; background: #f1f5f9; }
.tl-cell { min-width: 44px; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; text-align: center; cursor: default; }
.tl-row { display: flex; align-items: stretch; border-bottom: 1px solid #f1f5f9; }
.weekend { background-color: #f8fafc; }

.izin-y { background-color: #ffe4e6; color: #be123c; border: 1px solid #fda4af; }
.izin-r { background-color: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.izin-i { background-color: #fef9c3; color: #a16207; border: 1px solid #fde047; }
.izin-s { background-color: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; }

/* Tooltip & Switch & Toast & Spinner */
#global-tooltip { position: fixed; display: none; z-index: 999999; pointer-events: none; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(4px); color: white; padding: 12px 16px; border-radius: 10px; font-size: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); line-height: 1.4; max-width: 250px; border: 1px solid #334155; transition: opacity 0.2s ease; opacity: 0; }
.row-hover { transition: all 0.2s ease; }
.row-hover:hover { background-color: #f8fafc; box-shadow: inset 4px 0 0 0 #2563eb; }

.toggle-checkbox { left: 0; transition: transform 0.3s ease; }
.toggle-checkbox:checked { transform: translateX(100%); border-color: #2563eb; }
.toggle-checkbox:checked + .toggle-label { background-color: #2563eb; }

#toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 999999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { padding: 12px 20px; border-radius: 8px; color: white; font-weight: 600; font-size: 13px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); opacity: 0; transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-success { background: #10b981; border: 1px solid #059669; }
.toast-error { background: #ef4444; border: 1px solid #b91c1c; }

#spinner-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); z-index: 9999999; display: none; align-items: center; justify-content: center; flex-direction: column; color: #1e293b; border-radius: 12px; }
.loader { border: 4px solid #e2e8f0; border-top: 4px solid #2563eb; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin-bottom: 15px;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.zoomable-img { cursor: zoom-in; transition: transform 0.2s; }
.zoomable-img:hover { transform: scale(1.05); }