/**
 * ========================================
 * MODAL FIX - REBUILD FROM SCRATCH
 * ========================================
 * Solusi FINAL untuk blur modal
 * 
 * ROOT CAUSE:
 * - Inline filter:brightness() styles BLOCK all other CSS
 * - backdrop-filter cascade dari parent elements
 * 
 * SOLUTION:
 * - Force remove ALL filters (inline will be removed by JS)
 * - Use BRIGHT colors instead of filters
 * - Prevent backdrop-filter cascade
 */

/* ========================================
   STEP 1: REMOVE ALL FILTERS
   ======================================== */
.modal *,
.modal *[style],
.modal [style*="filter"] {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ========================================
   STEP 2: BACKDROP (NO BLUR - SOLID ONLY)
   ======================================== */
.modal-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
    z-index: 1050 !important;
}

/* ========================================
   STEP 3: MODAL ISOLATION
   ======================================== */
.modal {
    isolation: isolate !important;
    z-index: 1055 !important;
}

.modal-dialog {
    isolation: isolate !important;
}

.modal-content {
    isolation: isolate !important;
    transform: translateZ(0) !important;
}

/* ========================================
   CRITICAL FIX: REMOVE ALL FILTERS
   The inline filter:brightness() styles are causing blur
   We remove them and use BRIGHTER base colors instead
   ======================================== */
.modal *,
.modal *[style*="filter:"] {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Modal Background - MUCH BRIGHTER */
.modal-content {
    background: #3a4a70 !important; /* Brighter than #2a3555 */
    border: 3px solid #00BFFF !important;
    box-shadow: 0 0 60px rgba(0,191,255,0.8) !important;
}

.modal-body {
    background: #3a4a70 !important;
}

/* Modal Header - BRIGHTER */
.modal-header {
    background: rgba(0,191,255,0.25) !important; /* More opaque */
    border-color: rgba(0,191,255,0.8) !important;
}

.modal-title {
    color: #FFFFFF !important;
    text-shadow: 0 0 20px rgba(0,191,255,1), 0 0 10px rgba(255,255,255,0.8) !important;
    font-weight: 700 !important;
}

/* Modal Body */
.modal-body {
    background: #2a3555 !important;
}

/* Close Button - BRIGHTER */
.modal .btn-close,
.modal .btn-close-white {
    opacity: 1 !important;
}

/* Alert in Modal - BRIGHTER COLORS */
.modal .alert-info {
    background: rgba(0,191,255,0.35) !important; /* More opaque */
    border-color: #00BFFF !important;
    color: #FFFFFF !important;
}

/* Cards in Modal - BRIGHTER */
.modal .cyber-card {
    background: rgba(42, 53, 85, 0.8) !important; /* More opaque */
}

.modal .cyber-card-header {
    background: rgba(0,191,255,0.3) !important; /* More opaque */
}

/* Icons - BRIGHTER COLORS */
.modal i {
    opacity: 1 !important;
}

/* Text Elements - PURE WHITE */
.modal h5,
.modal h6,
.modal strong,
.modal p,
.modal span,
.modal div,
.modal td,
.modal th,
.modal small {
    color: #FFFFFF !important;
}

/* Tables - BRIGHTER BACKGROUNDS */
.modal thead {
    background: rgba(0,191,255,0.35) !important; /* More opaque */
}

.modal .table-dark {
    --bs-table-bg: rgba(42, 53, 85, 0.5) !important;
}

/* Badges - FULL OPACITY */
.modal .badge {
    opacity: 1 !important;
}

/* Footer - BRIGHTER */
.modal-footer {
    background: rgba(0,191,255,0.2) !important; /* More opaque */
    border-color: rgba(0,191,255,0.8) !important;
}

/* Progress Bars - ENHANCED GLOW */
.modal .progress {
    background: rgba(255,255,255,0.3) !important; /* Brighter background */
}

.modal .progress-bar {
    box-shadow: 0 0 20px currentColor !important; /* Stronger glow */
}

/* ========================================
   PREVENT BACKDROP-FILTER CASCADE
   ======================================== */
/* Remove backdrop-filter from elements that might interfere */
body:has(.modal.show) .demo-banner-sticky {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:has(.modal.show) .cyber-card::before {
    animation: none !important;
}

/* ========================================
   MOBILE OPTIMIZATION
   ======================================== */
@media (max-width: 768px) {
    .modal-content {
        margin: 1rem;
    }
    
    /* Slightly reduce brightness on mobile for battery */
    .modal * {
        filter: brightness(1.1) !important;
    }
    
    .modal-title,
    .modal th,
    .modal strong {
        filter: brightness(1.2) !important;
    }
}

/* ========================================
   LANDSCAPE MOBILE FIX
   ======================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .modal-dialog {
        margin: 0.5rem auto;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 0.75rem !important;
    }
}