/* Add here all your CSS customizations */

/* Header arkaplan rengi */
.header {
    background-color: #FF5722 !important;
}

/* Logo container arkaplan rengi */
.header .logo-container {
    background-color: #FF5722 !important;
    background-image: none !important;
    border: none !important;
}

/* Logo boyutu */
.header .logo img {
    max-height: 50px !important;
    height: auto !important;
    width: auto !important;
}

/* Stat Card - Tıklanabilir özet kartları */
.stat-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: scale(1.02);
}

.stat-card.active {
    transform: scale(1.03);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* =============================================
   HEADER CUSTOMIZATIONS - DESKTOP
   ============================================= */

/* Kullanıcı yetki yazısı - beyaz ve kalın */
.header #userbox .profile-info .role {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Search form genişliği - Desktop */
.header .search {
    width: 300px;
}

.header .search .form-control {
    border-radius: 20px 0 0 20px !important;
    height: 38px;
}

.header .search .btn {
    border-radius: 0 20px 20px 0 !important;
    height: 38px;
}

/* Separator rengi - Desktop */
.header .separator {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* =============================================
   MOBILE BOTTOM NAVIGATION
   ============================================= */

/* Mobilde hamburger menü ve header-right gizle */
@media only screen and (max-width: 767px) {
    .header .toggle-sidebar-left {
        display: none !important;
    }

    .header .header-right {
        display: none !important;
    }

    /* Sidebar gizle */
    .sidebar-left {
        display: none !important;
    }

    /* Inner wrapper - sidebar olmadığı için tam genişlik */
    /* Fixed logo-container (60px) altına itir */
    .inner-wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-top: 60px !important;
    }

    /* Content body için padding (alt: nav bar için) */
    .content-body {
        padding-top: 15px !important;
        padding-bottom: 70px !important;
    }

    /* Body scroll lock when menu open */
    body.mobile-menu-open {
        overflow: hidden !important;
    }
}

/* Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    border-top: 1px solid #e0e0e0;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    text-decoration: none;
    color: #666;
    font-size: 11px;
    position: relative;
    transition: color 0.2s ease;
}

.mobile-nav-item i {
    font-size: 22px;
    margin-bottom: 2px;
}

.mobile-nav-item span {
    font-weight: 500;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    color: #FF5722;
    text-decoration: none;
}

.mobile-nav-item.active i {
    transform: scale(1.1);
}

/* Mobile Nav Badge */
.mobile-nav-badge {
    position: absolute;
    top: 5px;
    right: calc(50% - 20px);
    background: #dc3545;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* =============================================
   MOBILE MORE MENU (Diğer)
   ============================================= */
.mobile-more-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.3s, opacity 0.3s ease;
}

.mobile-more-menu.active {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.mobile-more-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.mobile-more-content {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.mobile-more-menu.active .mobile-more-content {
    transform: translateY(0);
}

.mobile-more-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 16px;
}

.mobile-more-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.mobile-more-body {
    padding: 10px 0;
}

.mobile-more-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    transition: background 0.2s ease;
}

.mobile-more-item:hover {
    background: #FF5722;
    text-decoration: none;
    color: #fff;
}

.mobile-more-item:hover i {
    color: #fff;
}

.mobile-more-item i {
    font-size: 20px;
    margin-right: 12px;
    width: 24px;
    text-align: center;
    color: #666;
}

.mobile-more-item.text-danger i {
    color: #dc3545;
}

.mobile-more-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 10px 20px;
}

/* =============================================
   MOBILE SEARCH MODAL
   ============================================= */
.mobile-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.3s, opacity 0.3s ease;
}

.mobile-search-modal.active {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.mobile-search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.mobile-search-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.mobile-search-modal.active .mobile-search-content {
    transform: translateY(0);
}

.mobile-search-header {
    padding: 10px 15px;
    background: #FF5722;
}

.mobile-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-search-form .form-control {
    flex: 1;
    height: 44px;
    border-radius: 22px;
    border: none;
    padding: 0 20px;
    font-size: 16px;
}

.mobile-search-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.mobile-search-results {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}

.mobile-search-results .search-result-item,
.mobile-search-results .list-group-item {
    padding: 12px 15px;
    border-left: none;
    border-right: none;
}

/* =============================================
   SWEETALERT2 Z-INDEX FIX
   Bootstrap modal üzerinde görünmesi için
   ============================================= */
.swal2-container {
    z-index: 2000 !important;
}

/* =============================================
   DASHBOARD CAROUSEL - RESPONSIVE
   ============================================= */
#announcementCarousel .carousel-item img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 0 0 0.25rem 0.25rem;
}

@media only screen and (max-width: 767px) {
    #announcementCarousel .carousel-item img {
        max-height: none;
    }
}

/* =============================================
   SIDEBAR - Hover ve Aktif Renk
   ============================================= */
/* Üst seviye menü hover */
ul.nav-main > li > a:hover,
ul.nav-main > li > a:focus {
    background-color: #FF5722 !important;
    color: #fff !important;
}

/* Üst seviye aktif menü */
ul.nav-main > li.nav-active > a {
    background-color: #FF5722 !important;
    box-shadow: none !important;
    color: #fff !important;
}

ul.nav-main > li.nav-active > a:hover {
    color: #fff !important;
}

/* Açılmış alt menü parent */
ul.nav-main > li.nav-expanded > a {
    background-color: #FF5722 !important;
    color: #fff !important;
}

/* Alt menü hover */
ul.nav-main li .nav-children li a:hover,
ul.nav-main li .nav-children li a:focus {
    background-color: #FF5722 !important;
    color: #fff !important;
}

/* Alt menü aktif */
ul.nav-main li .nav-children li.nav-active > a {
    color: #FF5722 !important;
}

/* =============================================
   PRODUCT CARD - Ürün Kartları
   ============================================= */
.product-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e9ecef;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}
.product-card .card-body {
    padding: 1rem;
}
.product-card .card-title {
    font-size: 0.85rem;
    line-height: 1.3;
    min-height: 3.9rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.product-card-img {
    transition: none;
}
.product-card .badge {
    font-size: 0.7rem;
}
@media (max-width: 576px) {
    .product-card .card-body {
        padding: 0.75rem;
    }
    .product-card-img {
        height: 120px !important;
    }
}