/* ========================================
   SIMPLE ELEGANT HISTORY MODAL STYLING  
   Consistent with Welcome Modal Design
   ======================================== */

/* ===== OVERRIDE GLOBAL POPUP STYLES FOR HISTORY ===== */
#popup-container-history {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(5px) !important;
}

#popup-container-history .popup-body {
    background: #008B8B !important;
    border: 2px solid #FFD700 !important;
    border-radius: 15px !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8) !important;
    max-width: 750px !important;
    width: 90% !important;
    position: relative !important;
}

#popup-container-history .popup-body:before {
    display: none !important;
}

/* ===== HISTORY MODAL MAIN CONTAINER ===== */
.history-modal {
    background: #008B8B !important;
    border: 2px solid #FFD700 !important;
    border-radius: 15px !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8) !important;
    max-width: 750px !important;
    width: 90% !important;
    position: relative !important;
}

/* ===== CLOSE BUTTON ===== */
#popup-container-history .popup-close {
    position: absolute !important;
    top: -15px !important;
    right: -15px !important;
    background: #FFD700 !important;
    color: #000 !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    text-align: center !important;
    font-size: 20px !important;
    cursor: pointer !important;
    border: 2px solid #FFF !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#popup-container-history .popup-close:hover {
    background: #FFA500 !important;
    transform: scale(1.1) rotate(90deg) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
}

.history-modal .popup-close {
    position: absolute !important;
    top: -15px !important;
    right: -15px !important;
    background: #FFD700 !important;
    color: #000 !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    text-align: center !important;
    font-size: 20px !important;
    cursor: pointer !important;
    border: 2px solid #FFF !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.history-modal .popup-close:hover {
    background: #FFA500 !important;
    transform: scale(1.1) rotate(90deg) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
}

/* ===== HEADER STYLING ===== */
#popup-container-history .popup-header {
    background: #008B8B !important;
    border-bottom: 2px solid #FFD700 !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 15px 15px 0 0 !important;
}

#popup-container-history .popup-header:before,
#popup-container-history .popup-header:after {
    display: none !important;
}

.history-header {
    background: #008B8B !important;
    border-bottom: 2px solid #FFD700 !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 15px 15px 0 0 !important;
}

#popup-container-history h6,
#popup-container-history .history-title {
    color: #FFD700 !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 24px !important;
    font-weight: bold !important;
    margin: 0 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
}

.history-title {
    color: #FFD700 !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 24px !important;
    font-weight: bold !important;
    margin: 0 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
}

/* ===== CONTENT AREA ===== */
#popup-container-history .history-content {
    padding: 20px !important;
    background: #008B8B !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    border-radius: 0 0 15px 15px !important;
}

.history-content {
    padding: 20px !important;
    background: #008B8B !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    border-radius: 0 0 15px 15px !important;
}

/* ===== TABLE STYLING ===== */
#popup-container-history .history-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

.history-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

#popup-container-history .history-table thead tr {
    background: rgba(255, 215, 0, 0.2) !important;
    border-bottom: 2px solid #FFD700 !important;
}

.history-table thead tr {
    background: rgba(255, 215, 0, 0.2) !important;
    border-bottom: 2px solid #FFD700 !important;
}

#popup-container-history .history-table th {
    padding: 15px 20px !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 16px !important;
    color: #FFD700 !important;
    text-align: center !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}

.history-table th {
    padding: 15px 20px !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 16px !important;
    color: #FFD700 !important;
    text-align: center !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}

#popup-container-history .history-table tbody tr {
    border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.history-table tbody tr {
    border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

#popup-container-history .history-table tbody tr:hover {
    background: rgba(255, 215, 0, 0.1) !important;
}

.history-table tbody tr:hover {
    background: rgba(255, 215, 0, 0.1) !important;
}

#popup-container-history .history-table td {
    padding: 15px 20px !important;
    font-size: 15px !important;
    color: #FFFFFF !important;
    text-align: center !important;
    font-weight: 500 !important;
}

.history-table td {
    padding: 15px 20px !important;
    font-size: 15px !important;
    color: #FFFFFF !important;
    text-align: center !important;
    font-weight: 500 !important;
}

#popup-container-history .history-table td:first-child {
    width: 15% !important;
    font-weight: bold !important;
    color: #FFD700 !important;
}

.history-table td:first-child {
    width: 15% !important;
    font-weight: bold !important;
    color: #FFD700 !important;
}

#popup-container-history .history-table td:nth-child(2) {
    width: 50% !important;
    text-align: left !important;
}

.history-table td:nth-child(2) {
    width: 50% !important;
    text-align: left !important;
}

#popup-container-history .history-table td:last-child {
    width: 35% !important;
    font-weight: bold !important;
    color: #90EE90 !important;
}

.history-table td:last-child {
    width: 35% !important;
    font-weight: bold !important;
    color: #90EE90 !important;
}

/* ===== SCROLLBAR ===== */
#popup-container-history .history-content::-webkit-scrollbar {
    width: 8px !important;
}

#popup-container-history .history-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
}

#popup-container-history .history-content::-webkit-scrollbar-thumb {
    background: #FFD700 !important;
    border-radius: 4px !important;
}

#popup-container-history .history-content::-webkit-scrollbar-thumb:hover {
    background: #FFA500 !important;
}

.history-content::-webkit-scrollbar {
    width: 8px !important;
}

.history-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
}

.history-content::-webkit-scrollbar-thumb {
    background: #FFD700 !important;
    border-radius: 4px !important;
}

.history-content::-webkit-scrollbar-thumb:hover {
    background: #FFA500 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .history-modal {
        width: 95% !important;
    }
    
    .history-title {
        font-size: 20px !important;
    }
    
    .history-table th,
    .history-table td {
        padding: 10px 8px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .history-title {
        font-size: 18px !important;
    }
    
    .history-table th,
    .history-table td {
        padding: 8px 5px !important;
        font-size: 12px !important;
    }
}