/* User Management Sayfası Özel Stilleri - Global CSS Override */

/* Table Sorting Styles */
th.sortable {
    cursor: pointer !important;
    user-select: none !important;
    /* Match Account Management: no hover/selected visuals */
    transition: none !important;
}

th.sortable:hover {
    /* Requirement: no hover indicator */
    background-color: transparent !important;
}

body.dark-mode th.sortable:hover {
    background-color: transparent !important;
}

th.sortable.sort-active {
    /* Requirement: no selected header styling */
    background-color: transparent !important;
    font-weight: inherit !important;
}

body.dark-mode th.sortable.sort-active {
    background-color: transparent !important;
}

/* Hide sort icons entirely (match Account Management) */
.sort-icon, .sort-asc, .sort-desc {
    display: none !important;
}

/* Modal backdrop fix - prevent stuck overlays */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal-backdrop.show {
    opacity: 0.5 !important;
}

/* Force remove any stuck modal states */
body:not(.modal-open) .modal-backdrop {
    display: none !important;
    opacity: 0 !important;
}

/* Modal backdrop tamamen devre dışı - Kendi backdrop'ımızı kullanacağız */
.modal-backdrop {
    display: none !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

.modal-backdrop.show {
    display: none !important;
    opacity: 0 !important;
}

.modal-backdrop:not(.show) {
    display: none !important;
    opacity: 0 !important;
}

/* Kendi backdrop'ımız */
.custom-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 1040 !important;
    display: none !important;
}

/* Modal z-index backdrop'tan YÜKSEK olmalı - SADECE user management modalları */
#editUserModal.modal,
#addUserModal.modal,
#deleteUserModal.modal {
    z-index: 1050 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Modal dialog ve content en yüksek z-index - SADECE user management modalları */
#editUserModal .modal-dialog,
#addUserModal .modal-dialog,
#deleteUserModal .modal-dialog {
    z-index: 1055 !important;
}

/* Modal content z-index - SADECE user management modalları */
#editUserModal .modal-content,
#addUserModal .modal-content,
#deleteUserModal .modal-content {
    z-index: 1060 !important;
    position: relative !important;
}


/* Modal dialog - Main content area'nın içinde konumlanmalı - SADECE user management modalları */
#editUserModal.modal.show,
#addUserModal.modal.show,
#deleteUserModal.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* User management modalları için varsayılan genişlik */
#editUserModal .modal-dialog,
#addUserModal .modal-dialog,
#deleteUserModal .modal-dialog {
    position: relative !important;
    margin: 1.75rem auto !important;
    width: auto !important;
    max-width: 500px !important;
    z-index: 1055 !important;
}

/* Large modal için */
#editUserModal .modal-dialog.modal-lg,
#addUserModal .modal-dialog.modal-lg {
    max-width: 800px !important;
}

/* Desktop'ta sidebar açıkken modal main-content area'da - SADECE user management modalları */
@media (min-width: 1200px) {
    #editUserModal.modal.show,
    #addUserModal.modal.show,
    #deleteUserModal.modal.show {
        padding-left: 300px !important; /* Sidebar width kadar padding */
    }
    
    /* Sidebar kapalıyken padding yok */
    body.sidebar-hidden #editUserModal.modal.show,
    body.sidebar-hidden #addUserModal.modal.show,
    body.sidebar-hidden #deleteUserModal.modal.show {
        padding-left: 0 !important;
    }
}

/* Tablet ve mobile'da padding yok */
@media (max-width: 1199.98px) {
    #editUserModal.modal.show,
    #addUserModal.modal.show,
    #deleteUserModal.modal.show {
        padding-left: 0 !important;
    }
}

/* Modal animation hızlandırma - SADECE user management modalları */
#editUserModal.modal.fade .modal-dialog,
#addUserModal.modal.fade .modal-dialog,
#deleteUserModal.modal.fade .modal-dialog {
    transition: transform 0.15s ease-out !important;
}

#editUserModal.modal.show .modal-dialog,
#addUserModal.modal.show .modal-dialog,
#deleteUserModal.modal.show .modal-dialog {
    transform: none !important;
}

/* Password validation styles - Bootstrap override kaldırıldı */

/* Modal form improvements - User Search Input stillerini uygula */
.modal-body .form-control.user-search-input {
    border: 1px solid var(--border-color, #dee2e6) !important;
    background-color: var(--bg-primary, #ffffff) !important;
    color: var(--text-primary, #000000) !important;
    border-radius: 4px !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1.1rem !important;
    height: 38px !important;
    transition: border-color 0.15s ease-in-out !important;
}

.modal-body .form-control.user-search-input:focus {
    border-color: var(--primary, #f8f9fa) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Dark mode modal form stilleri */
body.dark-mode .modal-body .form-control.user-search-input {
    background-color: var(--bg-tertiary, #2d2d2d) !important;
    color: var(--text-primary, #ffffff) !important;
    border-color: var(--border-color, #444) !important;
}

body.dark-mode .modal-body .form-control.user-search-input:focus {
    background-color: var(--bg-tertiary, #2d2d2d) !important;
    border-color: var(--primary, #f8f9fa) !important;
    color: var(--text-primary, #ffffff) !important;
    box-shadow: none !important;
}

.modal-body .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Bootstrap validation stillerini override et */
.modal-body .form-control.user-search-input.is-valid {
    border-color: #198754 !important;
    box-shadow: none !important;
}

.modal-body .form-control.user-search-input.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: none !important;
}

/* Clickable Badge Styles - Modern Badge Toggle UX */
.form-switch-container {
    margin-top: 0.5rem;
}

.form-switch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 24px;
    cursor: pointer;
}

.form-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.form-switch-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #ced4da, #adb5bd);
    transition: .4s;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    font-size: 9px;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.form-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.7);
}

.form-switch input:checked + .form-switch-slider {
    background: linear-gradient(135deg, #198754, #20c997);
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
}

.form-switch input:checked + .form-switch-slider:before {
    transform: translateX(56px);
}

.form-switch-label-left,
.form-switch-label-right {
    color: white;
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-switch input:checked + .form-switch-slider .form-switch-label-left {
    opacity: 0.7;
}

.form-switch input:not(:checked) + .form-switch-slider .form-switch-label-right {
    opacity: 0.7;
}

/* Dark mode toggle switch */
body.dark-mode .form-switch-slider {
    background: linear-gradient(135deg, #495057, #6c757d);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

body.dark-mode .form-switch input:checked + .form-switch-slider {
    background: linear-gradient(135deg, #20c997, #25d366);
    box-shadow: 0 2px 8px rgba(32, 201, 151, 0.4);
}

body.dark-mode .form-switch-slider:before {
    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Form switch hover effects */
.form-switch:hover .form-switch-slider {
    opacity: 0.9;
    transform: scale(1.02);
}

.form-switch:hover .form-switch-slider:before {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Success switch hover effects */
.form-switch:hover input:checked + .form-switch-slider {
    background: linear-gradient(135deg, #157347, #1ca085);
    box-shadow: 0 3px 12px rgba(25, 135, 84, 0.5);
    transform: scale(1.02);
}

body.dark-mode .form-switch:hover input:checked + .form-switch-slider {
    background: linear-gradient(135deg, #1ca085, #22e373);
    box-shadow: 0 3px 12px rgba(32, 201, 151, 0.6);
    transform: scale(1.02);
}

/* Sort dropdown styles removed - now using table header sorting */

/* User role dropdowns artık custom dropdown kullanıyor - eski CSS'ler silindi */

/* Platform role row hizalama */
.platform-role-row {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.platform-label {
    min-width: 150px !important;
    flex-shrink: 0 !important;
}

.role-dropdown-container {
    flex: 1 !important;
    max-width: 150px !important;
}

/* Mobile responsive - Kart görünümü */
@media (max-width: 768px) {
    .desktop-table {
        display: none !important;
    }
    
    .mobile-cards {
        display: block !important;
    }
    
    .mobile-user-card {
        background: var(--bg-primary, #ffffff) !important;
        border: 1px solid var(--border-color, #dee2e6) !important;
        border-radius: 8px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    .mobile-user-card:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-1px) !important;
    }
    
    .mobile-card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: 8px !important;
    }
    
    .mobile-card-name {
        font-weight: 600 !important;
        font-size: 1.1rem !important;
        color: var(--text-primary, #000000) !important;
        margin: 0 !important;
    }
    
    .mobile-card-email {
        font-size: 0.9rem !important;
        color: var(--text-secondary, #6c757d) !important;
        margin: 2px 0 8px 0 !important;
    }
    
    .mobile-card-info {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 0.85rem !important;
    }
    
    .mobile-card-platforms {
        color: var(--text-secondary, #6c757d) !important;
    }
    
    .mobile-card-actions {
        display: flex !important;
    }
    
    /* Mobile Product Cards - 2x5 Grid Layout */
    .mobile-product-card {
        background: var(--bg-primary, #ffffff) !important;
        border: 1px solid var(--border-color, #dee2e6) !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        padding: 10px !important;
        margin-bottom: 8px !important;
        transition: all 0.2s ease !important;
        position: relative !important;
        min-height: 80px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        z-index: 1 !important;
    }
    
    .mobile-product-card:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    }
    
    .mobile-product-header {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 8px !important;
    }
    
    .mobile-product-header i {
        font-size: 1rem !important;
        margin-right: 6px !important;
        color: var(--text-primary, #000000) !important;
    }
    
    .mobile-product-header span {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: var(--text-primary, #000000) !important;
    }
    
    .mobile-product-role {
        flex: 1 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .mobile-product-role-toggle {
        width: 100% !important;
        padding: 0.2rem 1.2rem 0.2rem 0.4rem !important;
        font-size: 1rem !important;
        height: 28px !important;
        border-radius: 3px !important;
    }
    
    .mobile-product-action {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex: 1 !important;
        padding: 0.2rem 0 !important;
    }
    
    .mobile-activate-btn {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.6rem !important;
        white-space: nowrap !important;
        border-radius: 3px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.2 !important;
        min-height: 28px !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }
    
    /* Bootstrap btn override for mobile activate buttons */
    .mobile-activate-btn.btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
    
    /* Mobile product card - tek stil */
    
    /* Mobile dropdown z-index */
    .mobile-product-card.dropdown-open {
        z-index: 1000 !important;
    }
    
    .mobile-product-card .custom-dropdown-menu {
        z-index: 1001 !important;
    }
    
    /* Dark Mode Mobile Product Cards */
    body.dark-mode .mobile-product-card {
        background: var(--bg-tertiary, #2d2d2d) !important;
        border-color: var(--border-color, #444) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }
    
    body.dark-mode .mobile-product-card:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    }
    
    body.dark-mode .mobile-product-header i,
    body.dark-mode .mobile-product-header span {
        color: var(--text-primary, #ffffff) !important;
    }
    
    
    .mobile-product-actions {
        gap: 8px !important;
    }
    
    .mobile-card-details {
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--border-color, #dee2e6) !important;
        display: none !important;
    }
    
    .mobile-card-details.show {
        display: block !important;
    }
    
    .mobile-platform-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }
    
    .mobile-platform-label {
        flex-shrink: 0 !important;
        min-width: 120px !important;
        font-size: 0.9rem !important;
    }
    
    .mobile-role-dropdown .custom-dropdown-toggle {
        flex: 1 !important;
        max-width: 120px !important;
    }
}

/* Dark mode mobil kartlar */
body.dark-mode .mobile-user-card {
    background: var(--bg-primary, #0d0d0d) !important;
    border-color: var(--border-color, #444) !important;
    color: var(--text-primary, #ffffff) !important;
}

body.dark-mode .mobile-card-name {
    color: var(--text-primary, #ffffff) !important;
}

body.dark-mode .mobile-card-email {
    color: var(--text-secondary, #cccccc) !important;
}

body.dark-mode .mobile-card-platforms {
    color: var(--text-secondary, #cccccc) !important;
}

body.dark-mode .mobile-card-details {
    border-color: var(--border-color, #444) !important;
}

/* Mobil dropdown'lar artık desktop ile aynı custom dropdown kullanıyor */

/* Expanded row stilleri */
.user-details-row {
    background-color: var(--bg-secondary, #f8f9fa) !important;
    border-top: 1px solid var(--border-color, #dee2e6) !important;
}

body.dark-mode .user-details-row {
    background-color: var(--bg-tertiary, #2d2d2d) !important;
    border-top-color: var(--border-color, #444) !important;
}

/* Stats section stilleri */
.user-stats {
    font-size: 0.9rem !important;
    color: var(--text-secondary, #f8f9fa) !important;
}

body.dark-mode .user-stats {
    color: var(--text-secondary, #adb5bd) !important;
}

/* Action buttons için özel stil */
.user-action-btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 4px !important;
    margin-right: 0.25rem !important;
}

/* Tablo hover efekti */
.user-table-row:hover {
    background-color: var(--hover-bg, rgba(0, 0, 0, 0.05)) !important;
    cursor: pointer !important;
}

body.dark-mode .user-table-row:hover {
    background-color: var(--hover-bg, rgba(255, 255, 255, 0.05)) !important;
}

/* Sort dropdown styles removed - now using table header sorting */

/* Search input stilleri - projenin standart form stillerine uygun */
.user-search-input,
#userSearch {
    border: 1px solid var(--border-color, #dee2e6) !important;
    background-color: var(--bg-primary, #ffffff) !important;
    color: var(--text-primary, #000000) !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1.1rem !important;
    height: 38px !important;
}

body.dark-mode .user-search-input,
body.dark-mode #userSearch {
    background-color: var(--bg-tertiary, #2d2d2d) !important;
    color: var(--text-primary, #ffffff) !important;
    border-color: var(--border-color, #444) !important;
}

.user-search-input:focus,
#userSearch:focus {
    border-color: var(--primary, #f8f9fa) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

body.dark-mode .user-search-input:focus,
body.dark-mode #userSearch:focus {
    background-color: var(--bg-tertiary, #2d2d2d) !important;
    border-color: var(--primary, #f8f9fa) !important;
    color: var(--text-primary, #ffffff) !important;
    box-shadow: none !important;
}

/* Input group icon stilleri */
.input-group-text {
    background-color: var(--bg-secondary, #f8f9fa) !important;
    border-color: var(--border-color, #dee2e6) !important;
    color: var(--text-secondary, #f8f9fa) !important;
}

body.dark-mode .input-group-text {
    background-color: var(--bg-tertiary, #2d2d2d) !important;
    border-color: var(--border-color, #444) !important;
    color: var(--text-secondary, #adb5bd) !important;
}

/* Platform ve rol filter dropdown'ları için özel stiller - Bootstrap override */
.user-platform-filter.form-select,
.user-role-filter.form-select,
#platformFilter.form-select, 
#roleFilter.form-select {
    border: 1px solid var(--border-color, #dee2e6) !important;
    background-color: var(--bg-primary, #ffffff) !important;
    color: var(--text-primary, #000000) !important;
    font-size: 1.1rem !important;
    height: 38px !important;
    border-radius: 4px !important;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    box-sizing: border-box !important;
}

body.dark-mode .user-platform-filter.form-select,
body.dark-mode .user-role-filter.form-select,
body.dark-mode #platformFilter.form-select, 
body.dark-mode #roleFilter.form-select {
    background-color: var(--bg-tertiary, #2d2d2d) !important;
    color: var(--text-primary, #ffffff) !important;
    border-color: var(--border-color, #444) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Filter dropdown focus states - Mavi box-shadow kaldırıldı */
.user-platform-filter.form-select:focus,
.user-role-filter.form-select:focus,
#platformFilter.form-select:focus,
#roleFilter.form-select:focus {
    border-color: var(--primary, #f8f9fa) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

body.dark-mode .user-platform-filter.form-select:focus,
body.dark-mode .user-role-filter.form-select:focus,
body.dark-mode #platformFilter.form-select:focus,
body.dark-mode #roleFilter.form-select:focus {
    border-color: var(--primary, #f8f9fa) !important;
    box-shadow: none !important;
}

/* Custom Dropdown Stilleri - Bootstrap'tan Tamamen Bağımsız */
.custom-dropdown {
    position: relative !important;
    width: 100% !important;
    z-index: 100 !important;
}

/* Filter dropdown'larının layout'u bozmaması için özel kurallar */
.user-platform-dropdown .custom-dropdown-menu,
.user-role-dropdown .custom-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1005 !important;
    margin-top: 2px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.custom-dropdown-toggle {
    width: 100% !important;
    padding: 0.25rem 2rem 0.25rem 0.5rem !important;
    border: 1px solid var(--border-color, #dee2e6) !important;
    border-radius: 4px !important;
    background-color: var(--bg-primary, #ffffff) !important;
    color: var(--text-primary, #000000) !important;
    font-size: 1rem !important;
    height: 32px !important;
    text-align: left !important;
    cursor: pointer !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.15s ease-in-out !important;
    box-sizing: border-box !important;
}

.custom-dropdown-toggle:hover {
    background-color: #f8f9fa !important;
    border-color: var(--border-color, #adb5bd) !important;
}

.custom-dropdown-toggle:focus {
    background-color: #f8f9fa !important;
    border-color: var(--border-color, #adb5bd) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.dropdown-arrow {
    font-size: 12px !important;
    transition: transform 0.15s ease-in-out !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.custom-dropdown.open .dropdown-arrow {
    transform: translateY(-50%) rotate(180deg) !important;
}

.custom-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1001 !important;
    background-color: var(--bg-primary, #ffffff) !important;
    border: 1px solid var(--border-color, #dee2e6) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    max-height: 300px !important;
    min-height: 40px !important;
    overflow-y: auto !important;
    display: none !important;
    margin-top: 2px !important;
    width: auto !important;
    min-width: 100% !important;
}

.custom-dropdown.open .custom-dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.custom-dropdown.open {
    z-index: 1000 !important;
}

.custom-dropdown-item {
    padding: 0.5rem 0.75rem !important;
    cursor: pointer !important;
    color: var(--text-primary, #000000) !important;
    font-size: 1rem !important;
    border-bottom: none !important;
    transition: background-color 0.15s ease-in-out !important;
}

.custom-dropdown-item:hover {
    background-color: var(--hover-bg, rgba(0, 0, 0, 0.05)) !important;
}

.custom-dropdown .custom-dropdown-item.selected {
    background-color: #e9ecef !important;
    color: #ffffff !important;
}

/* Daha spesifik selector - Bootstrap override için */
.custom-dropdown-menu .custom-dropdown-item.selected {
    background-color: #e9ecef !important;
    color: #ffffff !important;
}

.custom-dropdown-item.sub-item {
    padding-left: 1.5rem !important;
    font-size: 1rem !important;
    color: var(--text-secondary, #f8f9fa) !important;
}

/* Dark Mode Custom Dropdown */
body.dark-mode .custom-dropdown-toggle {
    background-color: var(--bg-tertiary, #2d2d2d) !important;
    color: var(--text-primary, #ffffff) !important;
    border-color: var(--border-color, #444) !important;
}

body.dark-mode .custom-dropdown-toggle:hover {
    background-color: #1f1f1f !important;
    border-color: var(--border-color, #666) !important;
}

body.dark-mode .custom-dropdown-toggle:focus {
    background-color: #1f1f1f !important;
    border-color: var(--border-color, #666) !important;
    box-shadow: none !important;
}

body.dark-mode .custom-dropdown-menu {
    background-color: var(--bg-tertiary, #2d2d2d) !important;
    border-color: var(--border-color, #444) !important;
}

body.dark-mode .custom-dropdown-item {
    color: var(--text-primary, #ffffff) !important;
    border-bottom: none !important;
}

body.dark-mode .custom-dropdown-item:hover {
    background-color: var(--hover-bg, rgba(255, 255, 255, 0.1)) !important;
}

body.dark-mode .custom-dropdown .custom-dropdown-item.selected {
    background-color: var(--primary, #1f1f1f) !important;
    color: #ffffff !important;
}

/* Dark mode - Daha spesifik selector */
body.dark-mode .custom-dropdown-menu .custom-dropdown-item.selected {
    background-color: var(--primary, #1f1f1f) !important;
    color: #ffffff !important;
}

/* Logo Dark/Light Mode Toggle */
.logo-default {
    display: inline !important;
}

.logo-dark {
    display: none !important;
}

body.dark-mode .logo-default {
    display: none !important;
}

body.dark-mode .logo-dark {
    display: inline !important;
}

body.dark-mode .custom-dropdown-item.sub-item {
    color: var(--text-secondary, #adb5bd) !important;
}

/* Form labels için özel stil */
.form-label {
    color: var(--text-primary, #000000) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
}

body.dark-mode .form-label {
    color: var(--text-primary, #ffffff) !important;
}

/* Card stilleri */
.card {
    border: 1px solid var(--border-color, #dee2e6) !important;
    background-color: var(--bg-primary, #ffffff) !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
}

.card-body {
    overflow: visible !important;
}

/* Filter card özel z-index - dropdown'lar için - ARTIK GEREKSİZ */

/* Container ve row overflow kontrolü */
.container, .row, .col-12, .col-md-4, .col, .col-md-8 {
    overflow: visible !important;
}

/* Bootstrap tüm grid sisteminin overflow kontrolü */
[class*="col-"] {
    overflow: visible !important;
}

/* Bootstrap container sınıflarının overflow kontrolü */
.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
    overflow: visible !important;
}

/* Product Card Styles - Index sayfası kart stillerinden adapte edildi */
.product-card {
    background: var(--bg-primary, #ffffff) !important;
    border: 1px solid var(--border-color, #dee2e6) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    z-index: 1 !important;
}

.product-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.product-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

.product-header i {
    font-size: 1.2rem !important;
    margin-right: 8px !important;
    color: var(--text-primary, #000000) !important;
}

    .product-header h6 {
        margin: 0 !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: var(--text-primary, #000000) !important;
    }

.product-role {
    flex: 1 !important;
    position: relative !important;
    z-index: 10 !important;
}

.product-role-toggle {
    width: 100% !important;
    padding: 0.25rem 1.5rem 0.25rem 0.5rem !important;
    font-size: 1rem !important;
    height: 32px !important;
    border-radius: 4px !important;
}

.product-action {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 !important;
}

.activate-product-btn {
    white-space: nowrap !important;
    border-radius: 4px !important;
}

/* Product card - tek stil */

/* Dark Mode Product Cards */
body.dark-mode .product-card {
    background: var(--bg-tertiary, #2d2d2d) !important;
    border-color: var(--border-color, #444) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .product-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .product-header i,
body.dark-mode .product-header h6 {
    color: var(--text-primary, #ffffff) !important;
}


/* Dropdown'ların tablonun üstünde kalması için basit z-index */

.card {
    z-index: 1 !important;
    overflow: visible !important;
    background-color: var(--bg-primary, #ffffff) !important;
}

/* Product card dropdown açık olduğunda z-index artırma */
.product-card:has(.custom-dropdown.open) {
    z-index: 1000 !important;
}

/* Alternatif - CSS :has desteklenmiyorsa JavaScript ile eklenecek */
.product-card.dropdown-open {
    z-index: 1000 !important;
}

/* Product dropdown menü z-index */
.product-card .custom-dropdown-menu {
    z-index: 1001 !important;
}

.card-body {
    overflow: visible !important;
}

/* Dark mode card stilleri */
body.dark-mode .card {
    background-color: #0d0d0d !important;
    border-color: var(--border-color, #444) !important;
    color: var(--text-primary, #ffffff) !important;
}

/* User Management başlık stilleri */
h2 {
    font-size: 1.6rem !important;
}

/* Açıklama yazısı dark mode */
body.dark-mode p {
    color: #ffffff !important;
}

/* Add User Button font size */
.btn-sm {
    font-size: 1rem !important;
}

/* Add User Button light mode text color */
.btn.btn-light {
    color: #000000 !important;
}

.btn.btn-light i {
    color: #000000 !important;
}

/* Add User Button dark mode text color */
body.dark-mode .btn.btn-light {
    color: #ffffff !important;
}

body.dark-mode .btn.btn-light i {
    color: #ffffff !important;
}

/* Mobile search input fix - prevent wrapping */
@media (max-width: 768px) {
    .input-group {
        flex-wrap: nowrap !important;
    }
    
    .input-group-text {
        flex-shrink: 0 !important;
        min-width: 40px !important;
        width: 40px !important;
        padding: 0.375rem 0.5rem !important;
    }
    
    .input-group .form-control {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

/* User action buttons icon centering */
.user-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    margin-right: 5px !important;
    border: 1px solid #dee2e6 !important;
    background-color: transparent !important;
    color: #000000 !important;
}

.user-action-btn:hover {
    background-color: #f8f9fa !important;
    border-color: #adb5bd !important;
}

.user-action-btn:last-child {
    margin-right: 0 !important;
}

.user-action-btn i {
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;
}

/* Dark mode user action buttons */
body.dark-mode .user-action-btn {
    border-color: #495057 !important;
    color: #ffffff !important;
}

body.dark-mode .user-action-btn:hover {
    background-color: #495057 !important;
    border-color: #f8f9fa !important;
}

/* Action buttons container - prevent wrapping */
td .user-action-btn {
    white-space: nowrap !important;
}

/* Table cell for actions - prevent wrapping */
.table td:last-child {
    white-space: nowrap !important;
    min-width: 80px !important;
}

/* Table stilleri */
.table {
    color: var(--text-primary, #000000) !important;
    position: relative !important;
    z-index: 0 !important;
    background-color: transparent !important;
}

body.dark-mode .table {
    color: #ffffff !important;
    background-color: #0d0d0d !important;
}

.table-light {
    background-color: var(--bg-secondary, #f8f9fa) !important;
    color: var(--text-primary, #000000) !important;
}

body.dark-mode .table-light {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
}

/* Tablo satırları dark mode */
body.dark-mode .table tbody tr {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
}

body.dark-mode .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

/* Tablo tbody dark mode */
body.dark-mode .table tbody {
    background-color: #0d0d0d !important;
}

/* Tablo başlıkları dark mode */
body.dark-mode .table thead th {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    border-color: var(--border-color, #444) !important;
}

/* Tablo hücreleri dark mode */
body.dark-mode .table td {
    color: #ffffff !important;
    border-color: var(--border-color, #444) !important;
    background-color: #0d0d0d !important;
}

/* Kullanıcı adı ve email dark mode - özel olarak beyaz */
body.dark-mode .table td:first-child {
    color: #ffffff !important;
}

body.dark-mode .table td:first-child * {
    color: #ffffff !important;
}

/* Badge'ler font size ve dark mode */
.badge {
    font-size: 0.7rem !important;
}

body.dark-mode .badge {
    color: #ffffff !important;
}

body.dark-mode .badge.bg-success {
    background-color: #198754 !important;
    color: #000000 !important;
}

body.dark-mode .badge.bg-secondary {
    background-color: #1f1f1f !important;
    color: #ffffff !important;
}

/* Tablo içindeki tüm elementler dark mode */
body.dark-mode .table td * {
    color: #ffffff !important;
}

/* Platform isimleri dark mode */
body.dark-mode .table td strong {
    color: #ffffff !important;
}

/* Platform rolleri dark mode */
body.dark-mode .table td small {
    color: #cccccc !important;
}

/* Kullanıcı email'i (ilk sütundaki small) dark mode - beyaz */
body.dark-mode .table td:first-child small {
    color: #ffffff !important;
}

/* Table container z-index kontrolü */
.table-responsive {
    position: relative !important;
    z-index: 0 !important;
}

/* Dashboard scroll container z-index kontrolü */
.dashboard-scroll-container {
    position: relative !important;
    z-index: 0 !important;
}

/* Exception for dropdown menus - they need higher z-index */
.custom-dropdown-menu.dashboard-scroll-container {
    z-index: 1001 !important;
}

/* Role dropdown containers need proper z-index for user role dropdowns */
.role-dropdown-container.dashboard-scroll-container {
    z-index: 1000 !important;
}

.role-dropdown-container .custom-dropdown.open {
    z-index: 1002 !important;
}





/* Modal stilleri */
.modal-content {
    background-color: var(--bg-primary, #ffffff) !important;
    border: 1px solid var(--border-color, #dee2e6) !important;
}

body.dark-mode .modal-content {
    background-color: var(--bg-secondary, #1a1a1a) !important;
    border-color: var(--border-color, #444) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-color, #dee2e6) !important;
}

body.dark-mode .modal-header {
    border-bottom-color: var(--border-color, #444) !important;
}

.modal-footer {
    border-top: 1px solid var(--border-color, #dee2e6) !important;
}

body.dark-mode .modal-footer {
    border-top-color: var(--border-color, #444) !important;
}

/* Modal form stilleri */
.modal .form-control {
    border: 1px solid var(--border-color, #dee2e6) !important;
    background-color: var(--bg-primary, #ffffff) !important;
    color: var(--text-primary, #000000) !important;
}

body.dark-mode .modal .form-control {
    background-color: var(--bg-tertiary, #2d2d2d) !important;
    color: var(--text-primary, #ffffff) !important;
    border-color: var(--border-color, #444) !important;
}

body.dark-mode .modal .form-control:focus {
    background-color: var(--bg-tertiary, #2d2d2d) !important;
    border-color: var(--primary, #1f1f1f) !important;
    color: var(--text-primary, #ffffff) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Clickable Badge Styles - Compact Badge Toggle UX */
.clickable-badge {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    user-select: none !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

.clickable-badge i {
    font-size: 0.7rem !important;
}

.clickable-badge:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}

.clickable-badge:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
}

/* Status Badge Styles */
.user-status-badge.bg-success {
    background: linear-gradient(135deg, #198754, #20c997) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(25, 135, 84, 0.2) !important;
}

.user-status-badge.bg-warning {
    background: linear-gradient(135deg, #fd7e14, #ffc107) !important;
    color: #212529 !important;
    box-shadow: 0 1px 4px rgba(253, 126, 20, 0.2) !important;
}

/* Login Permission Badge Styles */
.login-permission-badge.bg-success {
    background: linear-gradient(135deg, #7db1ff, #6f42c1) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(13, 110, 253, 0.2) !important;
}

.login-permission-badge.bg-warning {
    background: linear-gradient(135deg, #dc3545, #fd7e14) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(220, 53, 69, 0.2) !important;
}

/* Dark Mode Badge Styles */
body.dark-mode .user-status-badge.bg-success {
    background: linear-gradient(135deg, #20c997, #25d366) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 5px rgba(32, 201, 151, 0.25) !important;
}

body.dark-mode .user-status-badge.bg-warning {
    background: linear-gradient(135deg, #ffc107, #fd7e14) !important;
    color: #212529 !important;
    box-shadow: 0 1px 5px rgba(255, 193, 7, 0.25) !important;
}

body.dark-mode .login-permission-badge.bg-success {
    background: linear-gradient(135deg, #0dcaf0, #6f42c1) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 5px rgba(13, 202, 240, 0.25) !important;
}

body.dark-mode .login-permission-badge.bg-warning {
    background: linear-gradient(135deg, #dc3545, #e74c3c) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 5px rgba(220, 53, 69, 0.25) !important;
}

/* Badge Hover Effects */
.user-status-badge.bg-success:hover {
    background: linear-gradient(135deg, #157347, #1ca085) !important;
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3) !important;
}

.user-status-badge.bg-warning:hover {
    background: linear-gradient(135deg, #e68900, #ffcd39) !important;
    box-shadow: 0 2px 8px rgba(253, 126, 20, 0.3) !important;
}

.login-permission-badge.bg-success:hover {
    background: linear-gradient(135deg, #0b5ed7, #6639ba) !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3) !important;
}

.login-permission-badge.bg-warning:hover {
    background: linear-gradient(135deg, #bb2d3b, #e68900) !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
}

/* Dark Mode Hover Effects */
body.dark-mode .user-status-badge.bg-success:hover {
    background: linear-gradient(135deg, #22d69f, #28e06b) !important;
    box-shadow: 0 2px 10px rgba(32, 201, 151, 0.35) !important;
}

body.dark-mode .user-status-badge.bg-warning:hover {
    background: linear-gradient(135deg, #ffcd39, #ffb347) !important;
    box-shadow: 0 2px 10px rgba(255, 193, 7, 0.35) !important;
}

body.dark-mode .login-permission-badge.bg-success:hover {
    background: linear-gradient(135deg, #39d7f0, #8654d3) !important;
    box-shadow: 0 2px 10px rgba(13, 202, 240, 0.35) !important;
}

body.dark-mode .login-permission-badge.bg-warning:hover {
    background: linear-gradient(135deg, #e74c3c, #f39c12) !important;
    box-shadow: 0 2px 10px rgba(220, 53, 69, 0.35) !important;
}

/* Custom Alert Styles - White Text for All Alert Types */
.alert {
    color: #ffffff !important;
    border: none !important;
    font-weight: 500 !important;
}

.alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

.alert-success {
    background: linear-gradient(135deg, #198754, #20c997) !important;
    color: #ffffff !important;
}

.alert-danger {
    background: linear-gradient(135deg, #dc3545, #e74c3c) !important;
    color: #ffffff !important;
}

.alert-warning {
    background: linear-gradient(135deg, #fd7e14, #ffc107) !important;
    color: #ffffff !important;
}

.alert-info {
    background: linear-gradient(135deg, #0dcaf0, #6f42c1) !important;
    color: #ffffff !important;
}

/* Dark mode alert compatibility */
body.dark-mode .alert-success {
    background: linear-gradient(135deg, #20c997, #25d366) !important;
}

body.dark-mode .alert-danger {
    background: linear-gradient(135deg, #dc3545, #e74c3c) !important;
}

body.dark-mode .alert-warning {
    background: linear-gradient(135deg, #ffc107, #fd7e14) !important;
}

body.dark-mode .alert-info {
    background: linear-gradient(135deg, #0dcaf0, #17a2b8) !important;
}