/* ╔═══════════════════════════╗ */
/* ║ FILE: wwwroot/css/nav.css ║ */
/* ╚═══════════════════════════╝ */

/* Sidebar Navigation */
/* - Accordion menü desteği */
/* - Sidebar küçülünce accordion kapanır */


/* Google Fonts - Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ┌───────────────────────┐ */
/* │ Light Theme (Default) │ */
/* └───────────────────────┘ */
:root {
    /* Sidebar dimensions */
    --sidebar-collapsed: 54px;
    --sidebar-expanded: 240px;
    /* Light Theme Sidebar Colors */
    --sidebar-bg: #ffffff;
    --sidebar-border: #e2e8f0;
    --sidebar-text: #64748b;
    --sidebar-text-hover: #1e293b;
    --sidebar-active-bg: rgba(59, 130, 246, 0.1);
    --sidebar-active-text: #3b82f6;
    --sidebar-active-indicator: #3b82f6;
    --sidebar-hover-bg: #f1f5f9;
    --sidebar-section-text: #94a3b8;
    --sidebar-divider: #e2e8f0;
    --sidebar-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    /* Timer colors */
    --timer-bg: #f8fafc;
    --timer-text: #1e293b;
    --timer-input-bg: #ffffff;
    --timer-input-border: #e2e8f0;
    /* Page background */
    --page-bg: #f8fafc;
}

/* ┌────────────┐ */
/* │ Dark Theme │ */
/* └────────────┘ */
[data-bs-theme="dark"] {
    /* Sidebar dimensions remain the same */
    --sidebar-bg: #1e293b;
    --sidebar-border: #334155;
    --sidebar-text: #94a3b8;
    --sidebar-text-hover: #f1f5f9;
    --sidebar-active-bg: rgba(59, 130, 246, 0.15);
    --sidebar-active-text: #60a5fa;
    --sidebar-active-indicator: #3b82f6;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
    --sidebar-section-text: #64748b;
    --sidebar-divider: #334155;
    --sidebar-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    /* Timer colors dark */
    --timer-bg: #0f172a;
    --timer-text: #f1f5f9;
    --timer-input-bg: rgba(255, 255, 255, 0.1);
    --timer-input-border: #334155;
    /* Page background dark */
    --page-bg: #0f172a;
}

/* ┌────────────────────────┐ */
/* │ BODY & PAGE BACKGROUND │ */
/* └────────────────────────┘ */
body {
    background-color: var(--page-bg) !important;
    transition: background-color 0.3s ease;
}

/* ┌──────────────┐ */
/* │ SIDEBAR BASE │ */
/* └──────────────┘ */
/* Sidebar temel stilleri */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-collapsed);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

    /* Hover veya expanded state'te genişleyen sidebar */
    .sidebar:hover,
    .sidebar.expanded {
        width: var(--sidebar-expanded);
        box-shadow: var(--sidebar-shadow);
    }

/* ┌──────┐ */
/* │ LOGO │ */
/* └──────┘ */
/* Logo bölümü */
.sidebar-logo {
    height: 41px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    border-bottom: 1px solid var(--sidebar-divider);
    flex-shrink: 0;
}

    /* Logo linki */
    .sidebar-logo .logo-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        width: 100%;
    }

/* Logo ikonu */
.logo-mark {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
    
    /* Logo resmi */
    .logo-mark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* Logo metni */
.logo-text {
    margin-left: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--sidebar-text-hover);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
    background: linear-gradient(90deg, #00c8ff, #c93cff);
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hover veya expanded state'te logo metni görünür */
.sidebar:hover .logo-text,
.sidebar.expanded .logo-text,
.sidebar.mobile-open .logo-text {
    opacity: 1;
}

/* Logo metni içindeki vurgulu kısım */
.logo-text .highlight {
    color: var(--sidebar-active-text);
}

/* ┌────────────┐ */
/* │ NAVIGATION │ */
/* └────────────┘ */
/* Navigasyon bölümü */
.sidebar-nav {
    flex: 1;
    padding: 12px 8px;
    overflow-y: auto;
    overflow-x: hidden;
}
    /* Scrollbar gizleme (yalnızca yatay) */
    .sidebar-nav::-webkit-scrollbar {
        width: 4px;
    }

    /* Scrollbar track (arka plan) */
    .sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    /* Scrollbar thumb (kaydırıcı) */
    .sidebar-nav::-webkit-scrollbar-thumb {
        background: var(--sidebar-divider);
        border-radius: 4px;
    }

        /* Scrollbar thumb hover efekti */
        .sidebar-nav::-webkit-scrollbar-thumb:hover {
            background: var(--sidebar-text);
        }

/* Nav bölümleri */
.nav-section {
    margin-bottom: 16px;
}

/* Nav bölüm başlıkları */
.nav-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sidebar-section-text);
    padding: 8px 12px 6px;
    white-space: nowrap;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease 0.1s, height 0.2s ease;
}

/* Hover veya expanded state'te nav bölüm başlıkları görünür */
.sidebar:hover .nav-section-title,
.sidebar.expanded .nav-section-title,
.sidebar.mobile-open .nav-section-title {
    opacity: 1;
    height: auto;
}

/* ┌───────────┐ */
/* │ NAV ITEMS │ */
/* └───────────┘ */
/* Nav item'lar */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 2px 0;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.15s ease;
    white-space: nowrap;
    height: 38px;
}

    /* Hover efekti */
    .nav-item:hover {
        background: var(--sidebar-hover-bg);
        color: var(--sidebar-text-hover);
        text-decoration: none;
    }

    /* Aktif item stili */
    .nav-item.active {
        background: var(--sidebar-active-bg);
        color: var(--sidebar-active-text);
    }

        /* Aktif gösterge çizgisi */
        .nav-item.active::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 20px;
            background: var(--sidebar-active-indicator);
            border-radius: 0 3px 3px 0;
        }

    /* İkon container */
    .nav-item i {
        width: 38px;
        min-width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        transition: color 0.15s ease;
    }
    
    /* Aktif item ikonu */
    .nav-item.active i {
        color: var(--sidebar-active-text);
    }

/* Nav item text */
.nav-item-text {
    margin-left: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
}

/* Hover veya expanded state'te nav item text görünür */
.sidebar:hover .nav-item-text,
.sidebar.expanded .nav-item-text,
.sidebar.mobile-open .nav-item-text {
    opacity: 1;
}

/* Sub items (accordion içindeki) */
.nav-item-sub {
    height: 34px;
    margin-left: 8px;
    border-radius: 6px;
}
    
    /* Sub item hover efekti */
    .nav-item-sub i {
        width: 30px;
        min-width: 30px;
        height: 34px;
        font-size: 14px;
    }

    /* Sub item text */
    .nav-item-sub .nav-item-text {
        font-size: 12px;
    }

/* Divider */
.sidebar-divider {
    height: 1px;
    background: var(--sidebar-divider);
    margin: 8px 12px;
}

/* ┌────────────────┐ */
/* │ ACCORDION MENU │ */
/* └────────────────┘ */
/* Accordion menü container */
.nav-accordion {
    position: relative;
}

/* Accordion Toggle Button */
.nav-accordion-toggle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 2px 0;
    background: transparent;
    border: none;
    color: var(--sidebar-text);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    height: 38px;
    text-align: left;
}
    
    /* Hover efekti */
    .nav-accordion-toggle:hover {
        background: var(--sidebar-hover-bg);
        color: var(--sidebar-text-hover);
    }

    /* Aktif item stili */
    .nav-accordion-toggle.active,
    .nav-accordion-toggle.has-active {
        color: var(--sidebar-active-text);
    }

    /* Aktif gösterge çizgisi */
    .nav-accordion-toggle i:first-child {
        width: 38px;
        min-width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    /* Accordion toggle text */
    .nav-accordion-toggle .nav-item-text {
        margin-left: 4px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 500;
        flex: 1;
        opacity: 0;
        transition: opacity 0.2s ease 0.1s;
    }

/* Hover veya expanded state'te accordion toggle text görünür */
.sidebar:hover .nav-accordion-toggle .nav-item-text,
.sidebar.expanded .nav-accordion-toggle .nav-item-text,
.sidebar.mobile-open .nav-accordion-toggle .nav-item-text {
    opacity: 1;
}

/* Arrow icon */
.accordion-arrow {
    width: 24px !important;
    min-width: 24px !important;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease 0.1s;
    margin-right: 8px;
}

/* Hover veya expanded state'te accordion arrow görünür */
.sidebar:hover .accordion-arrow,
.sidebar.expanded .accordion-arrow,
.sidebar.mobile-open .accordion-arrow {
    opacity: 0.6;
}

/* Accordion açıkken arrow döner */
.nav-accordion-toggle.active .accordion-arrow {
    transform: rotate(180deg);
}

/* Accordion Content */
.nav-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
    
    /* Accordion açıkken max-height artırılır (içerik uzunluğuna göre ayarlanabilir) */
    .nav-accordion-content.open {
        max-height: 800px;
    }

/* Accordion içindeki başlıklar */
.accordion-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sidebar-section-text);
    padding: 10px 12px 4px 20px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Hover veya expanded state'te accordion section title görünür */
.sidebar:hover .accordion-section-title,
.sidebar.expanded .accordion-section-title,
.sidebar.mobile-open .accordion-section-title {
    opacity: 1;
    height: auto;
    padding: 12px 12px 4px;
}

/* Sidebar küçükken accordion durumu */
.sidebar:not(:hover):not(.expanded) .nav-accordion-content {
    max-height: 0 !important;
}

/* Sidebar küçükken accordion toggle arrow durumu */
.sidebar:not(:hover):not(.expanded) .nav-accordion-toggle.active .accordion-arrow {
    transform: rotate(0deg);
}

/* K23: Yönetim grup başlığı — tıklanamaz (accordion yerine) */
.nav-management-header {
    cursor: default;
    pointer-events: none;
    opacity: 0.75;
}

.nav-management-header i.bi-shield-shaded {
    color: #eab308;
}


/* ┌──────────────────┐ */
/* │ SVG BAYRAK ORTAK │ */
/* └──────────────────┘ */
/* SVG bayrak container */
.lang-flag-svg {
    width: 20px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

    /* SVG'nin container'ı doldurması için stil */
    .lang-flag-svg svg {
        width: 100%;
        height: 100%;
        display: block;
    }

/* ┌─────────────────┐ */
/* │ BOTTOM CONTROLS │ */
/* └─────────────────┘ */
/* Sidebar alt kontrol bölümü */
.sidebar-bottom-controls {
    padding: 6px 8px;
    border-top: 1px solid var(--sidebar-divider);
    position: relative;
}

/* ── Compact: sidebar kapalı → üst üste ikon ── */
.bottom-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Compact state'teki ikon butonları */
.bottom-icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--sidebar-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.15s ease;
}

    /* Hover efekti */
    .bottom-icon-btn:hover {
        background: var(--sidebar-hover-bg);
        color: var(--sidebar-text-hover);
    }

/* Dil butonu (compact state) */
.bottom-lang-trigger {
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
    
    /* Hover efekti */
    .bottom-lang-trigger:hover {
        background: var(--sidebar-hover-bg);
    }

    /* Compact state'teki dil butonu içindeki bayrak */
    .bottom-lang-trigger .lang-flag-svg {
        width: 24px;
        height: 16px;
    }

/* ── Expanded: sidebar açık → yan yana ikon + metin ── */
.bottom-expanded {
    display: none;
    align-items: center;
    gap: 8px;
}

/* Expanded state'teki ikon butonları */
.sidebar:hover .bottom-compact,
.sidebar.expanded .bottom-compact,
.sidebar.mobile-open .bottom-compact {
    display: none;
}

/* Hover veya expanded state'te bottom expanded görünür */
.sidebar:hover .bottom-expanded,
.sidebar.expanded .bottom-expanded,
.sidebar.mobile-open .bottom-expanded {
    display: flex;
}


/* ┌───────────────────────────────┐ */
/* │ THEME SLIDE TOGGLE (Güneş/Ay) │ */
/* └───────────────────────────────┘ */
/* Tema değiştirme slide toggle'ı */
.theme-slide-toggle {
    position: relative;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
}

/* Gerçek checkbox input (görünmez) */
.theme-slide-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Slide track (arka plan) */
.theme-slide-track {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: #e2e8f0;
    transition: background 0.3s ease;
}

/* Slide thumb (hareketli düğme) */
.theme-slide-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.3s ease, background 0.3s ease;
    font-size: 13px;
}

/* Dark mode aktif */
.theme-slide-input:checked ~ .theme-slide-track {
    background: #3b82f6;
}

/* Dark mode aktifken thumb'un konumu ve rengi */
.theme-slide-input:checked ~ .theme-slide-thumb {
    left: 23px;
    background: #1e293b;
    color: #fbbf24;
}

/* Light mode ikon */
.theme-slide-thumb .icon-sun {
    display: inline;
    color: #f59e0b;
    margin-top: 1px;
}

/* Dark mode ikon */
.theme-slide-thumb .icon-moon {
    display: none;
    color: #fbbf24;
}

/* Checkbox durumuna göre ikon gösterimi */
.theme-slide-input:checked ~ .theme-slide-thumb .icon-sun {
    display: none;
}

/* Checkbox durumuna göre ikon gösterimi */
.theme-slide-input:checked ~ .theme-slide-thumb .icon-moon {
    display: inline;
    margin-top: 1px;
}

/* Dil butonu */
.lang-select-btn {
    flex: 1;
    height: 28px;
    padding: 0 8px;
    background: var(--sidebar-hover-bg);
    border: none;
    border-radius: 6px;
    color: var(--sidebar-text);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
}
    
    /* Hover efekti */
    .lang-select-btn:hover {
        background: var(--sidebar-active-bg);
        color: var(--sidebar-text-hover);
    }

    /* Dil butonu içindeki bayrak */
    .lang-select-btn .lang-flag-svg {
        width: 18px;
        height: 12px;
    }

/* Dil butonu içindeki dil adı */
.lang-select-name {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dil butonu içindeki ok ikonu */
.lang-select-btn .bi-chevron-up {
    font-size: 10px;
    opacity: 0.5;
    transition: transform 0.2s ease;
}


/* ┌──────────────┐ */
/* │ DİL DROPDOWN │ */
/* └──────────────┘ */
/* Dil dropdown menüsü */
.lang-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 8px;
    right: 8px;
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-divider);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
    z-index: 1060;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
    
    /* Dropdown açıkken görünür */
    .lang-dropdown-menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

/* Dropdown içindeki dil seçenekleri */
.lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--sidebar-text);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
    cursor: pointer;
}

    /* Hover efekti */
    .lang-dropdown-item:hover {
        background: var(--sidebar-hover-bg);
        color: var(--sidebar-text-hover);
        text-decoration: none;
    }

    /* Aktif dil seçeneği */
    .lang-dropdown-item.active {
        background: var(--sidebar-active-bg);
        color: var(--sidebar-active-text);
    }

    /* Aktif dil seçeneği içindeki check ikonu */
    .lang-dropdown-item .bi-check2 {
        margin-left: auto;
        font-size: 14px;
    }

/* Dropdown içindeki dil adı */
.lang-item-name {
    flex: 1;
}


/* ┌───────┐ */
/* │ TIMER │ */
/* └───────┘ */
/* Timer bölümü */
.sidebar-timer {
    padding: 4px 8px;
    border-top: 1px solid var(--sidebar-divider);
    background: var(--timer-bg);
    transition: background-color 0.3s ease;
}

/* Compact state (sidebar kapalı) */
.timer-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
}

    /* Compact state'teki timer display */
    .timer-compact .timer-display {
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--timer-text);
    }

/* Expanded state (sidebar açık) */
.timer-expanded {
    display: none;
}

/* Hover veya expanded state'te timer compact gizlenir, timer expanded görünür */
.sidebar:hover .timer-compact,
.sidebar.expanded .timer-compact,
.sidebar.mobile-open .timer-compact {
    display: none;
}

/* Hover veya expanded state'te timer expanded görünür */
.sidebar:hover .timer-expanded,
.sidebar.expanded .timer-expanded,
.sidebar.mobile-open .timer-expanded {
    display: block;
}

/* Timer expanded içeriği */
.timer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* Timer başlığı */
.timer-title {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sidebar-section-text);
    display: flex;
    align-items: center;
    gap: 6px;
}
    
    /* Timer başlığı içindeki ikon */
    .timer-title i {
        font-size: 12px;
    }

/* Timer display (büyük saat göstergesi) */
.timer-display-large {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--timer-text);
    margin: 2px 0;
}

/* Timer kontrol butonları */
.timer-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Timer input (süre girişi) */
.timer-input {
    flex: 1;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--timer-input-border);
    border-radius: 6px;
    background: var(--timer-input-bg);
    color: var(--timer-text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}

    /* Number input'un spin button'larını gizle */
    .timer-input::-webkit-outer-spin-button,
    .timer-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* Timer kontrol butonları */
.timer-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
}

/* Start butonu */
.timer-btn-start {
    background: #22c55e;
    color: white;
}

    /* Start butonu hover efekti */
    .timer-btn-start:hover {
        background: #16a34a;
    }

/* Pause butonu */
.timer-btn-pause {
    background: #f59e0b;
    color: white;
}

    /* Pause butonu hover efekti */
    .timer-btn-pause:hover {
        background: #d97706;
    }

/* Stop butonu */
.timer-btn-stop {
    background: #ef4444;
    color: white;
}

    /* Stop butonu hover efekti */
    .timer-btn-stop:hover {
        background: #dc2626;
    }

/* Timer durumu göstergesi */
.timer-status {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: var(--sidebar-section-text);
    margin-top: 2px;
}

    /* Timer durumu renkleri */
    .timer-status.active {
        color: #22c55e;
    }

    /* Timer durumu renkleri */
    .timer-status.paused {
        color: #f59e0b;
    }

/* ┌──────────────┐ */
/* │ USER SECTION │ */
/* └──────────────┘ */
/* Kullanıcı bölümü */
.sidebar-user {
    padding: 12px 8px;
    border-top: 1px solid var(--sidebar-divider);
}

/* Compact state (sidebar kapalı) */
.user-compact {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Kullanıcı avatarı (compact state) */
.user-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease;
    text-decoration: none;
}

    /* Hover efekti */
    .user-avatar:hover {
        transform: scale(1.05);
    }

    /* Login avatar stili */
    .user-avatar.login-avatar {
        background: var(--sidebar-hover-bg);
        color: var(--sidebar-text);
    }

        /* Login avatar hover efekti */
        .user-avatar.login-avatar:hover {
            background: var(--sidebar-active-bg);
            color: var(--sidebar-active-text);
        }

/* Expanded state (sidebar açık) */
.user-expanded {
    display: none;
}

/* Hover veya expanded state'te user compact gizlenir, user expanded görünür */
.sidebar:hover .user-compact,
.sidebar.expanded .user-compact,
.sidebar.mobile-open .user-compact {
    display: none;
}

/* Hover veya expanded state'te user expanded görünür */
.sidebar:hover .user-expanded,
.sidebar.expanded .user-expanded,
.sidebar.mobile-open .user-expanded {
    display: block;
}

/* Kullanıcı bilgileri */
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

/* Hover efekti */
.user-details {
    flex: 1;
    min-width: 0;
}

/* Kullanıcı adı */
.user-name {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--sidebar-text-hover);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kullanıcı rolü veya ek bilgi */
.user-role {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--sidebar-section-text);
}

/* Kullanıcı aksiyonları (örneğin, profil, ayarlar, çıkış) */
.user-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

/* Kullanıcı aksiyon butonları */
.user-action-form {
    flex: 1;
    display: flex;
}

/* Kullanıcı aksiyon linkleri */
.user-action-btn {
    flex: 1;
    padding: 8px;
    background: var(--sidebar-hover-bg);
    border: none;
    border-radius: 6px;
    color: var(--sidebar-text);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    width: 100%;
}

    /* Hover efekti */
    .user-action-btn:hover {
        background: var(--sidebar-active-bg);
        color: var(--sidebar-text-hover);
    }

    /* Logout butonu özel stili */
    .user-action-btn.logout:hover {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

    /* Kullanıcı aksiyon butonu içindeki ikon */
    .user-action-btn .btn-text {
        display: inline;
    }

/* ┌─────────────────────┐ */
/* │ MAIN CONTENT OFFSET │ */
/* └─────────────────────┘ */
/* Main content offset */
.main-content,
main.flex-grow-1 {
    margin-left: var(--sidebar-collapsed);
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Footer offset */
footer.footer {
    margin-left: var(--sidebar-collapsed);
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ┌──────────────────────┐ */
/* │ COLD REFRESH OVERLAY │ */
/* └──────────────────────┘ */
/* Cold refresh overlay */
#cold-refresh-overlay {
    z-index: 1100 !important;
}

/* ┌─────────────────────┐ */
/* │ RESPONSIVE - MOBILE │ */
/* └─────────────────────┘ */
/* Mobile responsive styles */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-expanded);
    }

        /* Mobile'da sidebar açıldığında görünür hale gelir */
        .sidebar.mobile-open {
            transform: translateX(0);
        }

    /* Main content ve footer'ın margin-left'i kaldırılır */
    .main-content,
    main.flex-grow-1,
    footer.footer {
        margin-left: 0;
    }

    /* Mobile toggle button */
    .mobile-menu-toggle {
        display: flex !important;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 1040;
        width: 40px;
        height: 40px;
        background: var(--sidebar-bg);
        border: 1px solid var(--sidebar-border);
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--sidebar-text);
    }

        /* Mobile toggle hover efekti */
        .mobile-menu-toggle:hover {
            background: var(--sidebar-hover-bg);
            color: var(--sidebar-text-hover);
        }

    /* Overlay for mobile */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }

        /* Mobile'da sidebar açıldığında overlay görünür hale gelir */
        .sidebar-overlay.active {
            display: block;
        }
}

/* Desktop'ta mobile toggle ve overlay gizlenir */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none !important;
    }
    /* Desktop'ta overlay gizlenir */
    .sidebar-overlay {
        display: none !important;
    }
}

/* ┌─────────────────────────────┐ */
/* │ TOOLTIP FOR COLLAPSED ITEMS │ */
/* └─────────────────────────────┘ */
/* Sidebar küçükken (collapsed) nav item'lar ve accordion toggle için tooltip */
.sidebar:not(:hover):not(.expanded) .nav-item:not(.nav-item-sub),
.sidebar:not(:hover):not(.expanded) .nav-accordion-toggle {
    position: relative;
}

    /* Tooltip stili */
    .sidebar:not(:hover):not(.expanded) .nav-item:not(.nav-item-sub)::after,
    .sidebar:not(:hover):not(.expanded) .nav-accordion-toggle::after {
        content: attr(title);
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        padding: 6px 12px;
        background: var(--sidebar-text-hover);
        color: var(--sidebar-bg);
        font-size: 12px;
        font-weight: 500;
        border-radius: 6px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease, visibility 0.15s ease;
        z-index: 1060;
        pointer-events: none;
    }

    /* Hover efekti: tooltip görünür olur */
    .sidebar:not(:hover):not(.expanded) .nav-item:not(.nav-item-sub):hover::after,
    .sidebar:not(:hover):not(.expanded) .nav-accordion-toggle:hover::after {
        opacity: 1;
        visibility: visible;
    }

/* ┌────────────┐ */
/* │ ANIMATIONS │ */
/* └────────────┘ */
/* Nav item text için slide in animasyonu */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Hover veya expanded state'te nav item text'e animasyon uygulanır */
.sidebar:hover .nav-item-text,
.sidebar.expanded .nav-item-text,
.sidebar.mobile-open .nav-item-text {
    animation: slideIn 0.2s ease forwards;
}

/* ┌────────────────────┐ */
/* │ PAGE HEADER        │ */
/* └────────────────────┘ */
.vizora-page-header {
    background: var(--bs-body-bg, #fff);
    border-bottom: 1px solid var(--sidebar-border, #e2e8f0);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.page-icon-small {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    /*background: linear-gradient(135deg,#0d6efd22,#0d6efd44);*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #0d6efd;
}

.page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 40px;
    gap: 12px;
}

/* Breadcrumb sol taraf */
.page-header-left {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.page-header-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-root {
    color: var(--sidebar-text, #64748b);
    font-weight: 700;
    background: linear-gradient(90deg, #00c8ff, #c93cff);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-left: 5px;
}

.breadcrumb-sep {
    color: var(--sidebar-text, #64748b);
    font-size: 10px;
}

.breadcrumb-current {
    color: var(--sidebar-text-hover, #1e293b);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Butonlar sağ taraf */
.page-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.page-header-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--sidebar-border, #e2e8f0);
    border-radius: 6px;
    background: transparent;
    color: var(--sidebar-text, #64748b);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

    .page-header-btn i {
        font-size: 13px;
    }

    .page-header-btn:hover {
        background: var(--sidebar-active-bg, rgba(59,130,246,0.1));
        color: var(--sidebar-active-text, #3b82f6);
        border-color: var(--sidebar-active-text, #3b82f6);
    }

/* Mobil: buton etiketi gizle */
@media (max-width: 576px) {
    .page-header-btn-label {
        display: none;
    }

    .page-header-btn {
        padding: 5px 8px;
    }

    .page-header-inner {
        padding: 0 8px 0 52px; /* Hamburger buton için sol boşluk */
    }
}

/* 576px'ten büyük mobil */
@media (min-width: 577px) and (max-width: 768px) {
    .page-header-inner {
        padding: 0 12px 0 52px;
    }
}

/* Dark mode */
[data-bs-theme="dark"] .vizora-page-header {
    background: var(--bs-body-bg, #0f172a);
    border-bottom-color: var(--sidebar-border, #334155);
}








/* ╔══════════════════════════════════════════════════════════════════╗ */
/* ║  VİZORA — nav_additions_v2.css                                  ║ */
/* ║  Önceki nav_additions.css'in YERİNE GEÇİR (komple değiştir)   ║ */
/* ╚══════════════════════════════════════════════════════════════════╝ */

/* ┌─────────────────────────────────────────────────────────────────┐ */
/* │ 1. NAV ITEM İKONLARI — her sayfa için farklı renk              │ */
/* └─────────────────────────────────────────────────────────────────┘ */
/*
   Bootstrap Icons (bi-*) siyah/beyaz gelir.
   Her nav-item'a data-page attribute eklemeden CSS nth-child ya da
   aşağıdaki gibi doğrudan icon class hedefleme ile renklendiriyoruz.

   SideNav.cshtml'deki nav-item sırası:
     1. Dashboard   → bi-speedometer2
     2. Satış       → bi-bag-check
     3. Üretim      → bi-gear-wide-connected
     4. Zaman Çizelgesi → bi-body-text
     5. Sevkiyat    → bi-truck
     6. Brain       → bi-cpu
     7. Yönetim toggle → bi-shield-shaded
*/

/* İkon genel boyutu ve transition */
.nav-item i,
.nav-accordion-toggle i:first-child {
    transition: color 0.15s ease, filter 0.15s ease;
}

/* Dashboard — cyan (marka rengi) */
.nav-item:has(.bi-speedometer2) i,
.nav-item .bi-speedometer2 {
    color: #00b4d8;
}

/* Satış — yeşil */
.nav-item:has(.bi-bag-check) i,
.nav-item .bi-bag-check {
    color: #22c55e;
}

/* Üretim — turuncu */
.nav-item:has(.bi-gear-wide-connected) i,
.nav-item .bi-gear-wide-connected {
    color: #3b82f6;
}

/* Zaman Çizelgesi — mor */
.nav-item:has(.bi-body-text) i,
.nav-item .bi-body-text {
    color: #a855f7;
}

/* Sevkiyat — mavi */
.nav-item:has(.bi-truck) i,
.nav-item .bi-truck {
    
    color: #f59e0b;
}

/* Vizora Brain — pembe/magenta */
.nav-item:has(.bi-cpu) i,
.nav-item .bi-cpu {
    color: #ec4899;
}

/* Yönetim accordion toggle — sarı-altın */
.nav-accordion-toggle .bi-shield-shaded {
    color: #eab308;
}

/* Sub-item ikonları — daha soluk renk */
.nav-item-sub .bi-arrow-repeat,
.nav-item-sub .bi-arrow-clockwise {
    color: #64748b;
}

.nav-item-sub .bi-people {
    color: #60a5fa;
}

.nav-item-sub .bi-key {
    color: #a78bfa;
}

.nav-item-sub .bi-hourglass-split {
    color: #f87171;
}

.nav-item-sub .bi-translate {
    color: #34d399;
}

.nav-item-sub .bi-activity {
    color: #fb923c;
}

.nav-item-sub .bi-sliders {
    color: #94a3b8;
}

/* Hover'da ikonlar biraz daha parlak */
.nav-item:hover i {
    filter: brightness(1.2);
}

/* Aktif item'da ikon full parlak */
.nav-item.active i {
    filter: brightness(1.1) saturate(1.2);
}


/* ┌─────────────────────────────────────────────────────────────────┐ */
/* │ 2. AKTİF NAV ITEM — Vizora gradient indicator                  │ */
/* └─────────────────────────────────────────────────────────────────┘ */
.nav-item.active::before {
    background: linear-gradient(180deg, #00c8ff 0%, #c93cff 100%);
    width: 3px;
    height: 22px;
}

.nav-item-sub.active::before {
    height: 16px;
    background: linear-gradient(180deg, #00c8ff 0%, #c93cff 100%);
}

/* Aktif item arka planı */
.nav-item.active {
    background: linear-gradient(90deg, rgba(0,200,255,0.10) 0%, rgba(201,60,255,0.05) 100%);
}

[data-bs-theme="dark"] .nav-item.active {
    background: linear-gradient(90deg, rgba(0,200,255,0.12) 0%, rgba(201,60,255,0.06) 100%);
}

/* Aktif item metin */
.nav-item.active .nav-item-text {
    font-weight: 600;
}

/* Light temada aktif metin rengi */
:root .nav-item.active .nav-item-text,
html[data-bs-theme="light"] .nav-item.active .nav-item-text {
    color: #0284c7;
}

/* Dark temada aktif metin rengi */
[data-bs-theme="dark"] .nav-item.active .nav-item-text {
    color: #22d3ee;
}

/* Accordion toggle aktif */
.nav-accordion-toggle.active .nav-item-text,
.nav-accordion-toggle.has-active .nav-item-text {
    color: #0284c7;
}

[data-bs-theme="dark"] .nav-accordion-toggle.active .nav-item-text,
[data-bs-theme="dark"] .nav-accordion-toggle.has-active .nav-item-text {
    color: #22d3ee;
}


/* ┌─────────────────────────────────────────────────────────────────┐ */
/* │ NOT: :has() desteği                                            │ */
/* │ Chrome 105+, Firefox 121+, Safari 15.4+ destekler.            │ */
/* │ Daha eski tarayıcı desteği için aşağıdaki fallback kullanın:  │ */
/* └─────────────────────────────────────────────────────────────────┘ */
/*
   :has() çalışmıyorsa SideNav.cshtml'de her nav-item'a
   data-page="dashboard" gibi attribute ekleyip şu şekilde hedefleyin:

   .nav-item[data-page="dashboard"] i { color: #00b4d8; }
   .nav-item[data-page="order"] i     { color: #22c55e; }
   .nav-item[data-page="production"] i { color: #f59e0b; }
   .nav-item[data-page="timeline"] i  { color: #a855f7; }
   .nav-item[data-page="shipment"] i  { color: #3b82f6; }
   .nav-item[data-page="brain"] i     { color: #ec4899; }
*/