/* style.css */

/* --- SILENT SECURITY CSS START (Added for security) --- */
body {
    /* Silent Security: Prevents selection/highlighting of text */
    user-select: none;
    -moz-user-select: none; 
    -webkit-user-select: none;
    -ms-user-select: none;
    
    /* Original Base styles */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6; /* Light gray background */
    color: #333;
}
/* --- SILENT SECURITY CSS END --- */

.page-section {
    /* FIX: Quiz और Result Sections को डिफ़ॉल्ट रूप से छिपाता है */
    display: none; 
    padding: 20px;
    box-sizing: border-box; 
}


/* --- 1. Login Section Styling --- */
/* FIX: Login Section अब Default रूप से दिखेगा */
#login-section {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh; 
    padding: 0;
}
#login-container {
    background-color: white; padding: 30px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); width: 100%; max-width: 380px; text-align: center;
}
#login-container h2 { 
    color: #1a73e8; margin-bottom: 25px; font-size: 1.8em;
}
input { 
    width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 1em; margin-bottom: 15px;
}
#login-form button[type="submit"] { 
    width: 100%; padding: 14px; border: none; border-radius: 6px; background-color: #1a73e8; color: white; font-size: 1.1em; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s; margin-top: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
#login-form button[type="submit"]:hover { 
    background-color: #155bb5; transform: translateY(-1px);
}
/* Dashboard Container: Card को सेंटर में दिखाने और बैकग्राउंड को साफ़ रखने के लिए */
#dashboard-section {
    /* स्क्रीन को कम से कम पूरी ऊंचाई दें */
    min-height: 100vh; 
    /* कंटेंट को सेंटर में लाने के लिए Flexbox */
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    padding: 20px;
    box-sizing: border-box;
    /* यदि आप चाहते हैं कि बैकग्राउंड हल्का ग्रे हो, तो इसे जोड़ें: */
    background-color: #f4f7f9; 
}

/* Card Styling: निर्देश बॉक्स */
.card {
    /* प्रोफेशनल लुक के लिए सफ़ेद बैकग्राउंड */
    background-color: #ffffff;
    max-width: 550px; 
    width: 100%;
    padding: 30px;
    border-radius: 12px;
    /* हल्का, आधुनिक शैडो */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
    text-align: left;
    margin-top: 40px; 
    
    /* सुनिश्चित करें कि कार्ड में मौजूद टेक्स्ट पढ़ने में आसान हो */
    color: #333;
}

/* Heading Style */
.card h2 {
    color: #007bff; /* नीला रंग */
    font-size: 1.8em;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
}

/* Instructions List Styling */
.card ul {
    list-style: none; /* डिफ़ॉल्ट बुलेट हटाएँ */
    padding: 0;
    margin-bottom: 30px;
}

.card ul li {
    padding: 8px 0;
    font-size: 1.05em;
    /* साफ़ बुलेट पॉइंट के लिए */
    position: relative;
    padding-left: 20px; 
}

/* Custom Bullet Point (साफ़ गोलाकार बुलेट) */
.card ul li::before {
    content: "•"; 
    color: #007bff; 
    font-weight: bold; 
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}

/* Paragraph Style (Instructions के ऊपर का टेक्स्ट) */
.card p {
    font-size: 1.05em;
    color: #555;
    margin-bottom: 20px;
}

/* Button Hover and Active effects (HTML में मौजूद inline style के अलावा) */
/* .main-btn क्लास का उपयोग करें जो आपके HTML में है */
.main-btn {
    width: 100%; /* बटन को फुल-विड्थ देने के लिए */
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.4); /* हल्का शैडो */
}

/* hover इफ़ेक्ट आपके HTML में inline सेट है, active इफ़ेक्ट को यहाँ जोड़ें */
.main-btn:active {
    transform: scale(0.98);
}



/* --- 2. Quiz Dashboard Styling --- */
#quiz-section {
    display: flex; 
    flex-direction: column;
    max-width: 700px; 
    margin: 10px auto; 
    padding: 0; 
    box-sizing: border-box;
}
#quiz-container {
    width: 100%;
}

/* Timer/User Header Bar (Separate Card) */
#quiz-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px; 
    margin-bottom: 20px; 
    background-color: #ffffff; 
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}
#timer-area { 
    color: #1a73e8; font-weight: bold; font-size: 1.1em; display: flex; align-items: center; gap: 5px;
}
#timer-area #timer-display { 
    color: #d93025; font-size: 1.2em; 
}
#user-display button { /* Logout Button */
    background-color: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 0.9em; font-weight: 600;
}

/* Question Card (#question-area) */
#question-area {
    background-color: #ffffff; 
    padding: 25px 30px; 
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    margin-bottom: 25px; 
}

/* Options Styling */
.options div {
    padding: 12px 15px; margin-bottom: 10px; border: 1px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.05em; color: #444;
}
.options div.selected {
    background-color: #e8f0fe; border-color: #1a73e8; font-weight: 600; color: #1a73e8; box-shadow: 0 1px 5px rgba(26, 115, 232, 0.2);
}

/* 💥 Navigation Buttons Container (Wrapper Logic - Next button fix) 💥 */
#navigation-inside-card {
    display: flex;
    justify-content: space-between; 
    align-items: left;
    flex-wrap: wrap; 
    
    margin-top: 30px; 
    padding-top: 15px;
    border-top: 1px dashed #e0e0e0;
    padding-left: 0; 
    padding-right: 0;
    gap: 10; 
}

/* नया Wrapper Style: ये दोनों wrappers बटन की जगह सुनिश्चित करेंगे */
.nav-btn-wrapper {
    width: 40%; 
    box-sizing: border-box; 
}
#prev-btn-wrapper {
    text-align: left; 
}
#next-btn-wrapper {
    text-align: right; 
}

/* Navigation Button Base Style (Previous/Next) */
.nav-button {
    width: 100%; 
    max-width: 170px; 
    padding: 12px 20px;
    border-radius: 6px;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
#navigation-inside-card .nav-button {
    background-color: #1a73e8; 
}


/* Question Numbers Card (#nav-panel) */
#nav-panel {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15); 
    text-align: center;
    margin-top: 20px; 
}
#question-index-container {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 20px; 
}

/* Round Question Number Button Design */
.nav-btn {
    width: 40px; height: 40px; border-radius: 50%; 
    border: 1px solid #c8c8c8; background-color: #f0f0f0; color: #555; font-weight: 600; font-size: 1.0em; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.nav-btn.attempted { background-color: #34a853; color: white; border-color: #2e8b46; }
.nav-btn.current { background-color: #1a73e8; color: white; border-color: #155bb5; font-size: 1.1em; transform: scale(1.05); box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3); }

/* EXAM ACTION BUTTON (Red/Green Swap) */
.exam-action-button {
    width: 100%; max-width: 300px; margin: 10px auto; padding: 14px 20px; border-radius: 6px; font-size: 1.1em; font-weight: 700; transition: background-color 0.3s ease, transform 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.2); display: block; 
}
#end-exam-btn { background-color: #d93025; } /* RED */
#submit-btn { background-color: #34a853; } /* GREEN */


/* --- 3. Result Section Styling --- */
#result-section { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 0; }
#result-container { background-color: white; padding: 30px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); width: 100%; max-width: 450px; text-align: center; }
.result-value.correct { color: #34a853; } 
.result-value.incorrect { color: #d93025; } 
.result-value.unanswered { color: #fccf00; }
/* --- Global Action Button Style (Your existing code) --- */
.action-btn { 
    padding: 12px 20px; 
    border-radius: 6px; 
    border: none; 
    color: white; 
    cursor: pointer; 
    font-size: 1em; 
    font-weight: 600; 
    transition: background-color 0.3s ease, transform 0.2s; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); 
    min-width: 180px; 
    margin: 5px; 
}

/* --- RESULT SECTION SPECIFIC BUTTON STYLES (NEW CODE) --- */

/* 1. PDF Report Button (Primary Blue) */
#pdf-report-btn {
    background-color: #007bff; /* Blue color for the main action */
    opacity: 1 !important; /* Force visibility, overriding any script setting */
}

#pdf-report-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-1px); /* Slight lift */
}

/* 2. Home/Login Button (Secondary Green) */
#home-login-btn {
    background-color: #28a745; /* Green color for the return action */
    opacity: 1 !important; /* Force visibility, overriding any script setting */
}

#home-login-btn:hover {
    background-color: #1e7e34; /* Darker green on hover */
    transform: translateY(-1px); /* Slight lift */
}

/* Ensure the result section buttons take up full width (as shown in your screenshot) */
#result-section .action-btn {
    width: 100%;
    margin-top: 15px; /* Increase space between buttons */
}


/* ------------------------------------------- */
/* --- CUSTOM MODAL STYLES (Non-blocking Confirmation) ADDED HERE --- */
/* ------------------------------------------- */
.custom-modal-backdrop {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.7); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 1000; /* Ensure it covers everything */
}
.custom-modal-content {
    background-color: white; 
    padding: 25px; 
    border-radius: 10px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
    max-width: 80%; 
    width: 350px; 
    text-align: center; 
    border: 2px solid #007bff;
}
#modal-message {
    margin-bottom: 25px; 
    font-size: 1.1em; 
    color: #333; 
    font-weight: 500;
}
.modal-yes-btn, .modal-no-btn {
    padding: 10px 25px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    font-size: 1em;
    font-weight: bold;
}
.modal-yes-btn {
    margin-right: 15px; 
    background-color: #28a745; 
    color: white; 
}
.modal-no-btn {
    background-color: #dc3545; 
    color: white; 
}


/* ------------------------------------------- */
/* --- Media Queries for Responsive Design --- */
/* ------------------------------------------- */

/* Mobile-First Design (max-width: 767px) */
@media (max-width: 767px) {
  .card {
        margin-top: 20px;
        padding: 20px;
        border-radius: 8px;
    }
    #dashboard-section {
        padding: 10px;
    }
    .main-btn {
        width: 60%; /* चौड़ाई को 100% से कम करके 80% करें */
        display: block; /* ब्लॉक एलिमेंट बनाएं */
        margin-left: auto; /* बाएँ से ऑटो मार्जिन */
        margin-right: auto; /* दाएँ से ऑटो मार्जिन */
        font-size: 1.1em !important; /* फॉन्ट साइज़ को थोड़ा कम करें (ज़रूरत हो तो) */
        padding: 12px 20px !important;
    }
    #navigation-inside-card {
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding-left: 0;
        padding-right: 0;
        gap: 0; 
    }
    .nav-btn-wrapper {
        width: 49%; 
    }
    .nav-button {
        width: 80%;
        max-width: none; 
    }
    #next-btn-wrapper {
      margin-left: auto;
    }
    #quiz-section {
        margin: 10px; 
        padding: 0;
    }
    #question-area {
        padding: 20px 15px;
    }
}


/* Desktop/Tablet Design (min-width: 768px) */
@media (min-width: 768px) {
    #question-area {
        padding: 30px 40px; 
    }
    #navigation-inside-card {
        flex-direction: row; 
        justify-content: space-between; 
        padding-left: 0; 
        padding-right: 0; 
    }
    .nav-btn-wrapper {
        width: auto; 
    }
    .nav-button {
        width: 170px; 
    }
    #quiz-section {
        max-width: 850px;
        margin: 30px auto;
        padding: 0;
    }
}