/* Bakım ikonu: kırmızı + esneme (wobble) */
#bakimWrap.bakim-anim .bi-shield-check {
    color: #ff4d4f; /* kırmızı */
    display: inline-block; /* transform için gerekli */
    transform-origin: 50% 85%; /* alt merkeze yakın */
    animation: bakimWobble 1.6s ease-in-out infinite;
}

@keyframes bakimWobble {
    0%,100% {
        transform: rotate(0deg) scale(1);
    }

    10% {
        transform: rotate(-10deg) scale(1.05);
    }

    20% {
        transform: rotate(10deg) scale(1.05);
    }

    30% {
        transform: rotate(-8deg) scale(1.03);
    }

    40% {
        transform: rotate(8deg) scale(1.03);
    }

    55% {
        transform: rotate(0deg) scale(1);
    }
}

/* Kullanıcı "gizle" dediyse icon animasyonu gereksiz */
#bakimWrap.is-hidden .bi-shield-check {
    animation: none !important;
}



/* =========================================================
   ADMIN CONSOLE (Offcanvas) - okunabilirlik
   ========================================================= */
#adminConsole.offcanvas {
    background: #14181f; /* koyu, net */
    color: rgba(255,255,255,.92);
}

#adminConsole .offcanvas-header {
    background: rgba(0,0,0,.12);
}

    #adminConsole .offcanvas-title,
    #adminConsole .offcanvas-header .small {
        color: rgba(255,255,255,.92) !important;
    }

/* Search input kontrast */
#adminConsole .input-group-text {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);
}

#adminConsole #consoleSearch {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.95);
}

    #adminConsole #consoleSearch::placeholder {
        color: rgba(255,255,255,.55);
    }

/* Accordion başlıkları */
#adminConsole .accordion-button {
    background: rgba(255,255,255,.02);
    color: rgba(255,255,255,.9);
    font-weight: 600;
}

    #adminConsole .accordion-button:not(.collapsed) {
        background: rgba(13,110,253,.12); /* bootstrap primary tint */
        color: rgba(255,255,255,.95);
    }

    #adminConsole .accordion-button:focus {
        box-shadow: none;
        border-color: rgba(255,255,255,.18);
    }

#adminConsole .accordion-item {
    border-color: rgba(255,255,255,.08);
}

/* Accordion ok/chevron rengi */
#adminConsole .accordion-button::after {
    filter: invert(1);
    opacity: .85;
}

/* Linkler (list-group) */
#adminConsole .list-group-item {
    background: transparent;
    border-color: rgba(255,255,255,.08);
    color: rgba(255,255,255,.82);
}

    #adminConsole .list-group-item i {
        opacity: .9;
    }

    #adminConsole .list-group-item:hover {
        background: rgba(255,255,255,.06);
        color: rgba(255,255,255,.95);
    }

    #adminConsole .list-group-item:active {
        background: rgba(13,110,253,.18);
    }

    #adminConsole .list-group-item.console-link.d-none {
        display: none !important;
    }

/* =========================================================
   DROPDOWN (Profil / Dil vs.) - dark menü okunabilirlik
   ========================================================= */
.dropdown-menu.dropdown-menu-dark,
.dropdown-menu-dark {
    background: #161a22;
    border: 1px solid rgba(255,255,255,.08);
}

    .dropdown-menu-dark .dropdown-header {
        color: rgba(255,255,255,.65);
    }

    .dropdown-menu-dark .dropdown-item {
        color: rgba(255,255,255,.86);
    }

        .dropdown-menu-dark .dropdown-item:hover,
        .dropdown-menu-dark .dropdown-item:focus {
            background: rgba(255,255,255,.06);
            color: rgba(255,255,255,.95);
        }

    .dropdown-menu-dark .dropdown-divider {
        border-top-color: rgba(255,255,255,.08);
    }

    /* Profil dropdown içindeki ikonlar biraz belirgin olsun */
    .dropdown-menu-dark .dropdown-item i {
        opacity: .95;
    }

/* =========================================================
   Eğer light tema açıkken de konsol düzgün olsun
   ========================================================= */
body.theme-light #adminConsole.offcanvas {
    background: #ffffff;
    color: rgba(0,0,0,.85);
}

body.theme-light #adminConsole .accordion-button,
body.theme-light #adminConsole .list-group-item {
    color: rgba(0,0,0,.82);
}

    body.theme-light #adminConsole .accordion-button::after {
        filter: none;
    }


/* =========================================================
   ADMIN CONSOLE (Offcanvas) - Bootstrap değişken override (NET ÇÖZÜM)
   ========================================================= */
#adminConsole {
    /* temel arka plan / yazı */
    --bs-body-bg: #14181f;
    --bs-body-color: rgba(255,255,255,.92);
    /* accordion */
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-bg: rgba(255,255,255,.03);
    --bs-accordion-btn-color: rgba(255,255,255,.92);
    --bs-accordion-active-bg: rgba(13,110,253,.14);
    --bs-accordion-active-color: rgba(255,255,255,.96);
    /* list-group */
    --bs-list-group-bg: transparent;
    --bs-list-group-color: rgba(255,255,255,.86);
    --bs-list-group-border-color: rgba(255,255,255,.08);
    --bs-list-group-action-hover-bg: rgba(255,255,255,.06);
    --bs-list-group-action-hover-color: rgba(255,255,255,.96);
}

    /* text-bg-dark kullansan bile arka planı sabitle */
    #adminConsole,
    #adminConsole.text-bg-dark {
        background: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
    }

        #adminConsole .offcanvas-header {
            background: rgba(0,0,0,.12) !important;
        }

        /* Accordion kesin uygula */
        #adminConsole .accordion-button {
            background-color: var(--bs-accordion-btn-bg) !important;
            color: var(--bs-accordion-btn-color) !important;
            font-weight: 600;
        }

            #adminConsole .accordion-button:not(.collapsed) {
                background-color: var(--bs-accordion-active-bg) !important;
                color: var(--bs-accordion-active-color) !important;
            }

        #adminConsole .accordion-collapse,
        #adminConsole .accordion-body {
            background: transparent !important;
        }

        /* Chevron görünür olsun */
        #adminConsole .accordion-button::after {
            filter: invert(1) !important;
            opacity: .85;
        }

        /* List-group kesin uygula */
        #adminConsole .list-group-item {
            background-color: var(--bs-list-group-bg) !important;
            color: var(--bs-list-group-color) !important;
            border-color: var(--bs-list-group-border-color) !important;
        }

            #adminConsole .list-group-item:hover,
            #adminConsole .list-group-item:focus {
                background-color: var(--bs-list-group-action-hover-bg) !important;
                color: var(--bs-list-group-action-hover-color) !important;
            }

        /* Search input */
        #adminConsole .input-group-text,
        #adminConsole #consoleSearch {
            background: rgba(255,255,255,.06) !important;
            border-color: rgba(255,255,255,.12) !important;
            color: rgba(255,255,255,.92) !important;
        }

            #adminConsole #consoleSearch::placeholder {
                color: rgba(255,255,255,.55) !important;
            }


.dropdown-menu.dropdown-menu-dark,
.dropdown-menu-dark {
    background: #161a22 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

    .dropdown-menu-dark .dropdown-item {
        color: rgba(255,255,255,.88) !important;
    }

        .dropdown-menu-dark .dropdown-item:hover {
            background: rgba(255,255,255,.06) !important;
            color: rgba(255,255,255,.96) !important;
        }


/* =========================================================
   FIX: AdminConsole içindeki menü satırları beyaz kalmasın
   (Bootstrap accordion + list-group variable override)
   ========================================================= */

/* Accordion değişkenlerini elemanın üstünde override et */
#adminConsole .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-bg: rgba(255,255,255,.03);
    --bs-accordion-btn-color: rgba(255,255,255,.92);
    --bs-accordion-active-bg: rgba(13,110,253,.14);
    --bs-accordion-active-color: rgba(255,255,255,.96);
}

/* Accordion item/body beyaz basıyorsa zorla kır */
#adminConsole .accordion-item,
#adminConsole .accordion-header,
#adminConsole .accordion-collapse,
#adminConsole .accordion-body {
    background: transparent !important;
}

/* List-group değişkenlerini elemanın üstünde override et */
#adminConsole .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: rgba(255,255,255,.86);
    --bs-list-group-border-color: rgba(255,255,255,.08);
    --bs-list-group-action-hover-bg: rgba(255,255,255,.06);
    --bs-list-group-action-hover-color: rgba(255,255,255,.96);
}

/* Menü satırı: beyaz arka planı net kır */
#adminConsole .list-group-item,
#adminConsole .list-group-item-action {
    background-color: rgba(255,255,255,.02) !important; /* istersen transparent yap */
    color: rgba(255,255,255,.86) !important;
    border-color: rgba(255,255,255,.08) !important;
}

    #adminConsole .list-group-item:hover,
    #adminConsole .list-group-item:focus {
        background-color: rgba(255,255,255,.06) !important;
        color: rgba(255,255,255,.96) !important;
    }

/* Light tema */
body.theme-light #adminConsole .list-group-item,
body.theme-light #adminConsole .list-group-item-action {
    background-color: rgba(0,0,0,.03) !important;
    color: rgba(0,0,0,.82) !important;
    border-color: rgba(0,0,0,.08) !important;
}

    body.theme-light #adminConsole .list-group-item:hover,
    body.theme-light #adminConsole .list-group-item:focus {
        background-color: rgba(0,0,0,.06) !important;
    }

/* =========================================================
   LIGHT THEME FIX: offcanvas + menüler gündüzde okunabilir olsun
   ========================================================= */

body.theme-light #adminConsole.offcanvas {
    background: #ffffff !important;
    color: rgba(0,0,0,.88) !important;
}

body.theme-light #adminConsole .offcanvas-title,
body.theme-light #adminConsole .offcanvas-header .small {
    color: rgba(0,0,0,.78) !important;
}

/* Search */
body.theme-light #adminConsole .input-group-text {
    background: rgba(0,0,0,.04) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: rgba(0,0,0,.65) !important;
}

body.theme-light #adminConsole #consoleSearch {
    background: rgba(0,0,0,.03) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: rgba(0,0,0,.85) !important;
}

    body.theme-light #adminConsole #consoleSearch::placeholder {
        color: rgba(0,0,0,.45) !important;
    }

/* Accordion variables + backgrounds */
body.theme-light #adminConsole .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-bg: rgba(0,0,0,.03);
    --bs-accordion-btn-color: rgba(0,0,0,.88);
    --bs-accordion-active-bg: rgba(13,110,253,.10);
    --bs-accordion-active-color: rgba(0,0,0,.92);
}

body.theme-light #adminConsole .accordion-item,
body.theme-light #adminConsole .accordion-header,
body.theme-light #adminConsole .accordion-collapse,
body.theme-light #adminConsole .accordion-body {
    background: transparent !important;
}

/* List-group variables + items */
body.theme-light #adminConsole .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: rgba(0,0,0,.86);
    --bs-list-group-border-color: rgba(0,0,0,.10);
    --bs-list-group-action-hover-bg: rgba(0,0,0,.05);
    --bs-list-group-action-hover-color: rgba(0,0,0,.92);
}

body.theme-light #adminConsole .list-group-item,
body.theme-light #adminConsole .list-group-item-action {
    background-color: rgba(0,0,0,.02) !important;
    color: rgba(0,0,0,.86) !important;
    border-color: rgba(0,0,0,.10) !important;
}

    body.theme-light #adminConsole .list-group-item:hover,
    body.theme-light #adminConsole .list-group-item:focus {
        background-color: rgba(0,0,0,.06) !important;
        color: rgba(0,0,0,.92) !important;
    }

/* Accordion chevron: light’ta invert kapat */
body.theme-light #adminConsole .accordion-button::after {
    filter: none !important;
    opacity: .75 !important;
}

body.theme-light .dropdown-menu:not(.dropdown-menu-dark) .dropdown-item {
    color: rgba(0,0,0,.85) !important;
}

    body.theme-light .dropdown-menu:not(.dropdown-menu-dark) .dropdown-item:hover {
        background: rgba(0,0,0,.05) !important;
    }




/* =========================================================
   ✅ MOBİL NAVBAR - Toparlayıcı kit (daha düzgün görünüm)
   ========================================================= */
@media (max-width: 991.98px) {

    /* Navbar üst satır (brand + hamburger) daha kompakt */
    .navbar-custom {
        padding: .5rem .75rem !important;
    }

        .navbar-custom .navbar-brand {
            font-size: 1.05rem !important;
            line-height: 1.1 !important;
            max-width: calc(100% - 56px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .navbar-custom .navbar-toggler {
            padding: .35rem .55rem !important;
            border-color: rgba(255,255,255,.12) !important;
        }

    /* Collapse alanını "kart" gibi yap */
    #navContent {
        margin-top: .5rem !important;
        padding: .55rem !important;
        background: rgba(0,0,0,.22) !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 14px !important;
        /* Menü uzunsa kaydır */
        max-height: calc(100vh - 72px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

        #navContent.show {
            box-shadow: 0 14px 34px rgba(0,0,0,.45) !important;
        }

        /* Menü grubu: dikey, tam genişlik */
        #navContent .navbar-nav,
        #navContent .navbar-nav.ms-auto {
            width: 100% !important;
            align-items: stretch !important;
            gap: .35rem !important;
        }

            #navContent .navbar-nav .nav-item {
                width: 100% !important;
            }

        /* Linkler: tam genişlik, ikon hizalı, “buton” gibi */
        #navContent .nav-link,
        #navContent .dropdown-toggle {
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: .6rem !important;
            padding: .60rem .75rem !important;
            border-radius: 12px !important;
            background: rgba(255,255,255,.03) !important;
            border: 1px solid rgba(255,255,255,.06) !important;
        }

            /* Aktif/hover hissi */
            #navContent .nav-link:hover,
            #navContent .dropdown-toggle:hover {
                background: rgba(255,255,255,.06) !important;
                border-color: rgba(255,255,255,.10) !important;
            }

            /* İkonlar: hepsi aynı hizada dursun */
            #navContent .nav-link i,
            #navContent .dropdown-toggle i {
                width: 1.25rem !important;
                text-align: center !important;
                opacity: .92;
                flex: 0 0 auto;
            }

            /* Sağ tarafa rozet/ikon itme (bildirim sayısı vb.) */
            #navContent .nav-link .badge,
            #navContent .dropdown-toggle .badge,
            #navContent .nav-link .sat-badge {
                margin-left: auto !important;
            }

        /* Mobilde d-none d-lg-inline gizlenen metinler menü açıkken görünsün */
        #navContent.show .d-none.d-lg-inline {
            display: inline !important;
        }

        /* Dropdown: mobilde "içeride" aç, tam genişlik */
        #navContent .dropdown-menu {
            position: static !important;
            float: none !important;
            width: 100% !important;
            margin: .25rem 0 0 0 !important;
            padding: .35rem !important;
            border-radius: 12px !important;
            border: 1px solid rgba(255,255,255,.08) !important;
            background: #161a22 !important;
        }

        #navContent .dropdown-item {
            display: flex !important;
            align-items: center !important;
            gap: .6rem !important;
            padding: .60rem .70rem !important;
            border-radius: 10px !important;
        }

            #navContent .dropdown-item:hover {
                background: rgba(255,255,255,.06) !important;
            }

        /* Input-group / select vs. varsa: tam genişlik */
        #navContent .input-group,
        #navContent .form-select,
        #navContent .form-control {
            width: 100% !important;
            max-width: 100% !important;
        }

        /* Tema buton grubu: 2 buton eşit bölünsün */
        #navContent .btn-group {
            width: 100% !important;
        }

            #navContent .btn-group .btn {
                flex: 1 1 auto !important;
            }
}

/* Bildirim dropdown'u telefonda taşmasın */
@media (max-width: 575.98px) {
    #bildirimWrap .dropdown-menu {
        width: calc(100vw - 1.25rem) !important;
        max-height: 65vh !important;
        overflow-y: auto !important;
    }
}

/* Bildirim dropdown'u küçük ekranda 360px taşmasın */
@media (max-width: 575.98px) {
    #bildirimWrap .dropdown-menu {
        width: calc(100vw - 1rem) !important;
        max-height: 65vh !important;
    }

    /* AdminConsole offcanvas telefonda tam ekran gibi */
    #adminConsole.offcanvas-end {
        width: 100vw !important;
    }
}


/* ✅ THEAD filtreleri: Light mode'da yazı görünürlüğü */
.theme-light #ticketsTable thead .form-control,
.theme-light #ticketsTable thead .form-select {
    background-color: rgba(13,110,253,.10) !important;
    color: #111 !important;
    border-color: #ced4da !important;
}

    .theme-light #ticketsTable thead .form-control::placeholder {
        color: #6c757d !important;
    }

/* ikonlu sol span'lar */
.theme-light #ticketsTable thead .input-group-text {
    background-color: #f8f9fa !important;
    color: #111 !important;
    border-color: #ced4da !important;
}

/* thead içindeki butonlar (sort vs) */
.theme-light #ticketsTable thead .btn,
.theme-light #ticketsTable thead .btn-outline-secondary {
    color: #111 !important;
    border-color: #ced4da !important;
}

/* Domain select dropdown option'ları da light'ta görünür olsun */
.theme-light #senderDomainPick option {
    background: #fff;
    color: #111;
}


@media (max-width: 991.98px) {

    /* Mobilde sound + theme nav-item'larını kart gibi aynı stile al */
    #navContent li.nav-item:has(#soundSelect),
    #navContent li.nav-item:has(#btnThemeDark),
    #navContent li.nav-item:has(#btnThemeLight) {
        width: 100% !important;
        padding: .55rem !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.03) !important;
        border: 1px solid rgba(255,255,255,.06) !important;
    }

        /* Mobilde sound input-group genişlesin (inline style 160px'i ez) */
        #navContent li.nav-item:has(#soundSelect) .input-group {
            width: 100% !important;
            max-width: 100% !important;
        }

        /* Mobilde tema grubu tam genişlik + butonlar eşit */
        #navContent li.nav-item:has(#btnThemeDark) .btn-group {
            width: 100% !important;
        }

            #navContent li.nav-item:has(#btnThemeDark) .btn-group .btn {
                flex: 1 1 auto !important;
            }

        /* Yükseklikleri ve hizayı eşitle */
        #navContent li.nav-item:has(#soundSelect) .input-group-text,
        #navContent li.nav-item:has(#soundSelect) .form-select,
        #navContent li.nav-item:has(#soundSelect) .btn,
        #navContent li.nav-item:has(#btnThemeDark) .btn {
            height: 34px !important;
            line-height: 1 !important;
        }

        /* "Tema Seçimi" label'ı düzgün dursun */
        #navContent li.nav-item:has(#btnThemeDark) > span {
            opacity: .85;
        }
}


@media (max-width: 991.98px) {

    /* Sound input-group asla alt satıra düşmesin */
    #navContent .nav-sound-group {
        width: 100% !important; /* mobilde 160px'i ez */
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important; /* ✅ kritik */
        align-items: stretch !important;
    }

        /* ikon + play butonu sabit kalsın */
        #navContent .nav-sound-group .input-group-text,
        #navContent .nav-sound-group .btn {
            flex: 0 0 auto !important;
            white-space: nowrap !important;
        }

        /* select kalan alanı alsın, taşarsa ellipsis */
        #navContent .nav-sound-group .form-select {
            flex: 1 1 auto !important;
            min-width: 0 !important; /* ✅ kritik (daralınca wrap yerine sıkışsın) */
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        /* hepsi aynı yükseklikte */
        #navContent .nav-sound-group .input-group-text,
        #navContent .nav-sound-group .form-select,
        #navContent .nav-sound-group .btn {
            height: 34px !important;
            line-height: 1 !important;
        }
}