/* Grid Styles */
.q-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 12px; 
}

/* Explicit rectangular dimensions (wider than tall) */
.q-node { 
    width: 100%; 
    height: 38px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    font-size: 1.1rem;
    cursor: pointer; 
    color: white; 
    user-select: none;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out;
}

.status-badge { 
    display: inline-block; 
    margin-right: 5px; 
    vertical-align: middle; 
}

/* Rectangular dimensions for legend items */
.legend-badge {
    width: 48px;
    height: 28px;
}

/* Active Border for Grid */
.current-q-node {
    border: 3px solid #000 !important;
    z-index: 2; 
}

/* =========================================
   Status Colors & Custom Rectangular Shapes
========================================= */

/* Standard Rectangle with thin black border */
.status-not-visited { 
    background-color: #ffffff; 
    color: #495057; 
    border-radius: 4px; 
    border: 1px solid #000 !important; 
} 

/* Bottom Arc on a rectangle */
.status-not-answered { 
    background-color: #dc3545; 
    color: white; 
    border-radius: 0 0 50px 50px; 
} 

/* Top Arc on a rectangle */
.status-answered { 
    background-color: #198754; 
    color: white; 
    border-radius: 50px 50px 0 0; 
} 

/* Fully rounded Pill shape */
.status-marked { 
    background-color: #0dcaf0; 
    color: white; 
    border-radius: 50px; 
} 

/* Fully rounded Pill shape with checkmark */
.status-marked-answered { 
    background-color: #0dcaf0; 
    color: white; 
    border-radius: 50px; 
    position: relative; 
} 

/* The green SVG check overlay adjusted for the pill shape */
.status-marked-answered::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background-color: #198754; 
    border-radius: 50%;
    border: 2px solid white; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E");
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
}

/* =========================================
   CUSTOM EXAM COLORS
========================================= */
.color-correct { color: #10b981 !important; } 
.color-wrong { color: #ef4444 !important; }   
.color-warning { color: #f59e0b !important; } 


#tabs-container{
    width:100%;
    display:flex;
    overflow-x:auto;
    border-bottom:1px solid #dee2e6;
    background:#f8f9fa;
}

#tabs-container .subject-tab{
    padding:14px 24px;
    cursor:pointer;
    background:#f8f9fa;
    color:#495057;
    font-weight:700;
    white-space:nowrap;
    border-right:1px solid #dee2e6;
    transition:0.2s;
}

#tabs-container .subject-tab:last-child{
    border-right:none;
}

#tabs-container .subject-tab.active{
    background:#0d6efd;
    color:#fff;
}

#tabs-container .subject-tab:hover{
    background:#e9ecef;
}

#tabs-container .subject-tab.active:hover{
    background:#0d6efd;
}

#tabs-container .nav-tabs{
    margin-bottom:0 !important;
}

#q-grid-container {
    background-color: #fff;
}

/* Custom Zoom-In Modal Animation (Snappy Version) */
.modal.fade.modal-zoom {
    transition-duration: 0.1s; 
}

.modal.fade.modal-zoom .modal-dialog {
    transform: scale(0.85); 
    transition: transform 0.1s ease-out; 
}

.modal.fade.modal-zoom.show .modal-dialog {
    transform: scale(1);
}


/* =========================================
   RESULT SCREEN DONUT CHART
========================================= */
.result-donut-chart {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    background: #e9ecef; /* Fallback */
}

.result-donut-inner {
    width: 120px;
    height: 120px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.result-donut-marks {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: #212529;
}

.result-donut-label {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
    font-weight: bold;
}

.legend-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 8px;
}


/* Modal Tabs Dynamic Active State */
.custom-modal-tab {
    background-color: #f8f9fa !important; /* Light grey background */
    color: #6c757d !important; /* Secondary grey text */
    border-top: none !important;
    border-bottom: none !important;
    border-color: #dee2e6 !important;
}

.custom-modal-tab.active {
    background-color: #0d6efd !important; /* Primary blue background */
    color: #ffffff !important; /* White text */
}