/* ==========================================
   CHAMBOLI PORTAL: UNIVERSAL RESPONSIVEL CSS
   ========================================== */

/* --- 1. Global Reset & Fluid Typography --- */
:root {
    --primary-blue: #001e46;
    --accent-blue: #008cff;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

/* Adjust root font size on smaller viewports to scale margins/paddings relatively */
@media (max-width: 576px) {
    html {
        font-size: 14px; 
    }
}

/* --- 2. Navigation & Header Fixes --- */
@media (max-width: 480px) {
    nav {
        padding: 10px 4% !important;
        min-height: 75px !important;
    }
    .logo {
        font-size: 20px !important;
    }
    .nav-links {
        top: 75px !important;
    }
}

/* Ensure links wrap nicely and don't break containers on medium-small devices */
@media (max-width: 360px) {
    .nav-links a {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

/* --- 3. Hero & Landing Elements --- */
@media (max-width: 768px) {
    .hero-section {
        margin: 40px auto 20px auto !important;
        padding: 15px !important;
    }
    .hero-section h1 {
        font-size: clamp(28px, 7vw, 40px) !important;
        line-height: 1.2;
    }
    .hero-section p {
        font-size: 16px !important;
        margin-bottom: 25px !important;
    }
}

/* --- 4. Responsive Grid & Cards (index.html) --- */
@media (max-width: 576px) {
    .grid-container {
        grid-template-columns: 1fr !important; /* Force single column on mobile */
        gap: 20px !important;
        padding: 0 15px !important;
    }
    .portal-card {
        padding: 25px 20px !important;
        border-radius: 16px !important;
    }
    .card-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 24px !important;
    }
}

/* --- 5. Dashboard / Profiles (profile.html) --- */
@media (max-width: 576px) {
    .profile-container {
        padding: 25px 15px !important;
        width: 92% !important;
        margin: 30px auto !important;
        border-radius: 16px !important;
    }
    .profile-card {
        padding: 15px !important;
        margin-bottom: 20px !important;
    }
    .profile-item {
        flex-direction: column !important; /* Stack keys above values on small screens */
        align-items: flex-start !important;
        gap: 6px;
        padding: 10px 0 !important;
    }
    .profile-label {
        font-size: 11px !important;
    }
    .profile-value {
        font-size: 15px !important;
    }
    h2 {
        font-size: 22px !important;
    }
}

/* --- 6. Mobile Table Transformation (results.html) --- */
@media (max-width: 600px) {
    /* Destructure standard table layout */
    table, thead, tbody, th, td, tr {
        display: block !important;
        width: 100% !important;
    }

    /* Hide the column headers visually but keep readable for screen readers */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid #e2e8f0;
        margin-bottom: 15px;
        border-radius: 12px;
        background: #f8fafc;
        padding: 8px 12px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }

    td {
        border: none !important;
        border-bottom: 1px dashed #e2e8f0 !important;
        position: relative;
        padding: 12px 0 12px 45% !important; /* Push text to the right to make space for labels */
        text-align: right !important;
    }

    td:last-child {
        border-bottom: none !important;
    }

    /* Generate mobile pseudo-headers dynamically */
    td::before {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 40%;
        text-align: left;
        font-weight: 700;
        color: #1e293b;
        font-size: 13px;
        text-transform: uppercase;
    }

    /* Target specific table column elements */
    td:nth-of-type(1)::before { content: "Test:"; }
    td:nth-of-type(2)::before { content: "Subject:"; }
    td:nth-of-type(3)::before { content: "Mark:"; }

    .results-container {
        padding: 25px 15px !important;
        width: 92% !important;
        margin: 30px auto !important;
    }
}

/* --- 7. Footer Optimization --- */
@media (max-width: 576px) {
    footer {
        padding: 20px 5% !important;
    }
    .footer-content {
        flex-direction: column !important;
        text-align: center;
        gap: 12px !important;
    }
    .read-saver-bar {
        width: 100%;
        justify-content: center;
        font-size: 11px !important;
    }
}