@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

* {
    box-sizing: border-box;
}

:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(255, 255, 255, 0.18);
    --text-main: #2d3748;
    --text-light: #718096;
    --bg-body: #f7fafc;
    --success: #48bb78;
    --danger: #f56565;
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

body {
    font-family: 'Outfit', sans-serif;
    background: #e0eafc;
    /* fallback */
    background: -webkit-linear-gradient(to right, #cfdef3, #e0eafc);
    background: linear-gradient(to right, #cfdef3, #e0eafc);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

/* Animations */
/* Watermark */
body::before {
    content: "PORTÁL SOVA";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 10vw;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.03);
    /* Very subtle grey */
    pointer-events: none;
    z-index: -2;
    white-space: nowrap;
}

/* Logo Watermarks - Corners */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/logo.png'), url('../assets/images/logo.png');
    background-repeat: no-repeat, no-repeat;
    background-position: 2% 95%, 98% 5%;
    /* Bottom-Left and Top-Right for variety, or edges */
    background-size: 150px, 150px;
    opacity: 0.05;
    /* Very subtle */
    z-index: -2;
    pointer-events: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.container {
    flex: 1;
    width: 90%;
    max-width: 1200px;
    margin: 40px auto;
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    animation: fadeIn 0.8s ease-out;
}

header {
    background: var(--primary-gradient);
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

header h1 {
    margin: 0;
    font-weight: 700;
    font-size: 1.5rem;
}

nav a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    margin-left: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 8px 16px;
    border-radius: 20px;
}

nav a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: translateY(-2px);
}

/* Login Page Specific */
.login-container {
    background: white;
    padding: 40px;
    border-radius: 24px;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 400px;
    text-align: center;
    animation: fadeIn 1s ease-out;
    margin: auto;
    /* Center on page */
}

h2,
h3 {
    color: #2d3748;
    margin-bottom: 1.5rem;
}

/* Cards (Topics, etc.) */
.card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #cbd5e0;
}

.card h3 {
    margin-top: 0;
    color: #4a5568;
}

.card a {
    text-decoration: none;
    color: inherit;
}

.card a:hover {
    color: #5a67d8;
}

/* Forms */
.form-group {
    margin-bottom: 24px;
    text-align: left;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
textarea,
select,
input[type="file"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    background: #f8fafc;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #667eea;
    background: white;
}

/* Buttons */
button,
.button {
    background: var(--primary-gradient);
    color: white;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

button:hover,
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(102, 126, 234, 0.4);
}

button:active {
    transform: translateY(0);
}

/* Tables */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 20px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

th,
td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid #edf2f7;
}

th {
    background-color: #f7fafc;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #718096;
}

/* Logo Styles */
.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-container img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

.login-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #667eea;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* Help Widget Styles */
.help-widget-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid #667eea;
}

.help-widget-btn:hover {
    transform: scale(1.1) rotate(10deg);
}

.help-widget-btn img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.security-branding-popup {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.declaration-link {
    font-size: 0.75rem;
    color: #4a5568;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
    display: inline-block;
}

.declaration-link:hover {
    color: #667eea;
}

.security-branding-popup p {
    font-size: 0.6rem;
    color: #a0aec0;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.security-logos-popup {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.security-logos-popup img {
    height: 18px;
    width: auto;
    filter: grayscale(0.5);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.security-logos-popup img:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.1);
}

.logo-solidcyber {
    filter: brightness(0) invert(0.3) !important;
    height: 16px !important;
}



.logo-eset {
    height: 20px !important;
}

.help-popup {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 320px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9rem;
    color: #4a5568;
}

.help-popup.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

.help-popup h4 {
    margin: 0 0 15px 0;
    color: #2d3748;
    font-size: 1.1rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
}

.help-popup p {
    margin: 8px 0;
    line-height: 1.5;
}

.school-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #e2e8f0;
}

.school-info img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}


/* Login Intro Overlay */
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-gradient);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    opacity: 1;
    /* Start visible */
    transition: opacity 1s ease;
}

#intro-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.intro-scene {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
    position: absolute;
    /* Stack them */
    width: 80%;
    max-width: 800px;
}

.intro-scene.active {
    opacity: 1;
    transform: translateY(0);
}

.intro-scene h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro-scene h2 {
    font-size: 1.8rem;
    color: white;
    margin-bottom: 10px;
}

.intro-scene p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.intro-credits-small {
    font-size: 0.9rem !important;
    margin-top: 30px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8) !important;
}



tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background-color: #f7fafc;
}

/* Admin Nav */
.admin-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
}

.admin-nav a {
    background: transparent;
    color: #4a5568;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
}

.admin-nav a:hover {
    background: #edf2f7;
    color: #2d3748;
    transform: none;
}

/* Utils */
.error {
    color: var(--danger);
    background: #fff5f5;
    padding: 10px;
    border-radius: 8px;
    border-left: 4px solid var(--danger);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    background: white;
    margin-bottom: 8px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

ul li a {
    color: #4c51bf;
    text-decoration: none;
    font-weight: 500;
}

img {
    max-width: 100%;
    height: auto;
}

/* Footer */
.main-footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    border-top: 1px solid #e2e8f0;
    color: #718096;
    font-size: 0.85rem;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
}

/* Install Popup Styles */
.install-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.install-popup-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.install-popup {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 90%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    padding: 30px 25px;
    border-radius: 24px 24px 0 0;
    text-align: center;
    z-index: 9999;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (min-width: 480px) {
    .install-popup {
        bottom: 30px;
        border-radius: 24px;
        transform: translateX(-50%) translateY(30px);
        opacity: 0;
        pointer-events: none;
    }

    .install-popup.active {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
        pointer-events: all;
    }
}

.install-popup.active {
    transform: translateX(-50%) translateY(0);
}

.install-icon {
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 20px;
    margin: -65px auto 15px;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 3px solid white;
}

.install-icon img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.install-popup h3 {
    margin: 10px 0 10px;
    color: #2d3748;
    font-size: 1.35rem;
    font-weight: 700;
}

.install-popup p {
    color: #718096;
    margin: 0 0 25px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.install-buttons {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.install-btn-primary {
    background: var(--primary-gradient);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.install-btn-primary:active {
    transform: scale(0.98);
}

.install-btn-secondary {
    background: transparent;
    color: #718096;
    border: 2px solid #e2e8f0;
    padding: 14px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.install-btn-secondary:hover {
    background: #f7fafc;
    color: #4a5568;
    border-color: #cbd5e0;
}

/* Background Floating Bubbles */
.bg-bubbles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    /* Behind watermarks */
    overflow: hidden;
    padding: 0;
    margin: 0;
    pointer-events: none;
}

.bg-bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: rgba(102, 126, 234, 0.15);
    /* Light primary color */
    bottom: -150px;
    border-radius: 50%;
    /* Circles */
    animation: square 25s infinite;
    transition-timing-function: linear;
}

.bg-bubbles li:nth-child(1) {
    left: 10%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.bg-bubbles li:nth-child(2) {
    left: 20%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.bg-bubbles li:nth-child(3) {
    left: 25%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.bg-bubbles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.bg-bubbles li:nth-child(5) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.bg-bubbles li:nth-child(6) {
    left: 80%;
    width: 120px;
    height: 120px;
    animation-delay: 3s;
    background-color: rgba(255, 255, 255, 0.2);
}

.bg-bubbles li:nth-child(7) {
    left: 32%;
    width: 160px;
    height: 160px;
    animation-delay: 7s;
}

.bg-bubbles li:nth-child(8) {
    left: 55%;
    width: 20px;
    height: 20px;
    animation-delay: 15s;
    animation-duration: 40s;
}

.bg-bubbles li:nth-child(9) {
    left: 25%;
    width: 10px;
    height: 10px;
    animation-delay: 2s;
    animation-duration: 40s;
    background-color: rgba(255, 255, 255, 0.3);
}

.bg-bubbles li:nth-child(10) {
    left: 90%;
    width: 160px;
    height: 160px;
    animation-delay: 11s;
}

@keyframes square {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

/* Badges Styles */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.badge-card {
    padding: 15px;
    border-radius: 12px;
    color: white;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.badge-card:hover {
    transform: translateY(-3px) scale(1.02);
}

.badge-icon {
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.2);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.badge-info h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.badge-info p {
    margin: 2px 0 0 0;
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Mobile Responsiveness */
/* Default: Hide Mobile Menu Bar */
.mobile-menu-bar {
    display: none;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .container {
        width: 95%;
        padding: 15px;
        margin: 20px auto;
    }

    /* Mobile Menu Logic with Animation */
    .mobile-menu-bar {
        display: flex !important;
    }

    .admin-nav {
        /* Start hidden (collapsed) */
        display: flex !important;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
        padding: 0 15px !important;
        /* Start with 0 vertical padding if needed, but horizontal matches container */
        margin-bottom: 0 !important;
        /* Avoid jumps */
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .admin-nav.active {
        max-height: 500px;
        /* Arbitrary large height */
        padding: 15px !important;
        margin-bottom: 25px !important;
        opacity: 1;
    }

    .admin-nav a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        margin: 0 0 8px 0;
        padding: 12px;
        font-size: 1rem;
        border: 1px solid #edf2f7;
    }

    /* Overflow Fixes */
    table {
        min-width: 600px;
        /* Force table to have width so it triggers scroll */
    }

    .card,
    .student-list {
        overflow-x: auto;
        /* Enable horizontal scroll for containers */
        width: 100%;
        /* Ensure it doesn't overflow parent */
        box-sizing: border-box;
    }

    header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 15px;
    }

    nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    nav a {
        margin: 0;
        font-size: 0.9rem;
        padding: 6px 12px;
    }

    h1 {
        font-size: 1.5rem;
    }

    .login-container {
        width: 90%;
        padding: 25px;
        margin: 20px auto;
    }

    /* Input & Button Upscaling for Touch */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    button,
    .button,
    select {
        font-size: 16px !important;
        /* Prevent zoom on iOS */
        padding: 14px 16px !important;
        /* Larger touch area */
        height: auto;
    }

    label {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .form-group {
        margin-bottom: 25px;
        /* More spacing */
    }

    /* Hide video on mobile and use gradient */
    #background-video {
        display: none !important;
    }

    /* Force background on mobile for login/register pages which might have set it to transparent */
    body.login-page {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        align-items: center;
        justify-content: center;
    }

    /* Improve Intro Overlay on Mobile */
    .intro-scene h1 {
        font-size: 1.8rem;
    }

    .intro-scene h2 {
        font-size: 1.4rem;
    }

    .intro-scene p {
        font-size: 1rem;
    }

    /* Help Popup Adjustment */
    .help-popup {
        width: 90%;
        left: 5%;
        right: auto;
        bottom: 80px;
    }

    /* Card adjustments */
    .card {
        padding: 15px !important;
    }
}

/* =========================================
   Mobile Optimization - Student Dashboard
   ========================================= */

/* Desktop Grid (Default) */
.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

/* Nav Active State */
.admin-nav a.active {
    background: #667eea;
    color: white;
}

/* Nav Badge */
.nav-notification-badge {
    background: #f56565;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.7rem;
    position: absolute;
    top: -5px;
    right: -5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-link {
    margin-left: auto;
}

/* Mobile Menu Bar (Hidden on Desktop) */
.mobile-menu-bar {
    display: none;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.menu-label {
    font-weight: bold;
    color: #4a5568;
}

#mobile-menu-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #667eea;
    padding: 0;
}

/* Header Notification Icon */
.header-notification-icon {
    display: none !important;
    /* Hidden on desktop by default if we want it only on mobile? User said "when student logs in... beside the year... icon".
                                 Wait, user said "on the main dashboard... beside the class... notification icon".
                                 It implies it should be there always or maybe only mobile?
                                 "ok, ideme upraviť stránky, aby pekne to bolo na mobilných zariadeniach... Takže pre študentov: ... uvidi: ako to teraz je ale vedla toho ako mu tam píše ročník v akom je nech bude ikonka notfikácie... Podtým nech ostane ten hamburger"
                                 This suggests the layout changes are for mobile.
                                 But having it on desktop is also fine/good. I'll make it visible on both or just mobile if requested.
                                 Let's make it visible on both for consistency, but maybe hide the sidebar widget on mobile.
                              */
    display: flex !important;
}

/* Mobile Queries */
@media (max-width: 768px) {

    /* Layout */
    .dashboard-grid {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }

    .dashboard-grid>div:nth-child(1) {
        order: 1;
    }

    .dashboard-grid>div:nth-child(2) {
        order: 2;
    }

    /* Header */
    header {
        position: relative;
        padding-bottom: 60px;
        /* Space for the absolute badge if needed, or just standard padding */
        padding: 15px;
    }

    /* Notification Icon Position */
    .header-notification-icon {
        width: 38px;
        height: 38px;
    }

    /* Sidebar Notification Card - HIDE on mobile */
    .sidebar-notification-card {
        display: none;
    }

    /* Navigation */
    .mobile-menu-bar {
        display: flex;
    }

    #student-nav-container {
        display: none;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 20px;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #student-nav-container.active {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    #student-nav-container a {
        width: 100%;
        padding: 12px 16px;
        background: #f7fafc;
        border: 1px solid #edf2f7;
    }

    .profile-link {
        margin-left: 0;
        margin-top: 10px;
        border-top: none;
        background: #ebf4ff !important;
        color: #5a67d8 !important;
    }
}

/* =========================================
   Notification Center Styles
   ========================================= */

.layout-container {
    display: flex;
    gap: 20px;
    min-height: 500px;
    margin-top: 20px;
}

.sidebar {
    width: 220px;
    background: white;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: fit-content;
    /* Ensure it doesn't stretch unnecessarily */
}

.main-content {
    flex: 1;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Crucial for text overflow in flex children */
}

/* Nav Buttons */
.nav-btn {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #4a5568;
    border-radius: 6px;
    transition: background 0.2s;
}

.nav-btn:hover {
    background: #edf2f7;
}

.nav-btn.active {
    background: #ebf4ff;
    color: #5a67d8;
    font-weight: bold;
}

.btn-compose {
    background: #48bb78;
    color: white !important;
    text-align: center;
}

.btn-compose:hover {
    background: #38a169;
}

/* Message List */
.msg-list-item {
    padding: 15px;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    gap: 15px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.msg-list-item:hover {
    background: #f7fafc;
}

.msg-list-item.unread {
    background: #ebf8ff;
    font-weight: bold;
}

/* Message Detail */
.msg-detail {
    padding: 30px;
    word-wrap: break-word;
    /* Ensure long words break */
    overflow-wrap: break-word;
}

.msg-header {
    border-bottom: 1px solid #edf2f7;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.msg-content-body {
    line-height: 1.6;
    color: #2d3748;
    min-height: 100px;
    word-break: break-word;
}

/* =========================================
   Mobile Optimization - Notifications
   ========================================= */

@media (max-width: 768px) {

    /* Notification Center Layout */
    .layout-container {
        flex-direction: column;
        gap: 15px;
    }

    .sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        /* Horizontal scroll if buttons are too wide */
        white-space: nowrap;
        padding: 10px;
        align-items: center;
        gap: 8px;
        /* Reduce gap */
    }

    .nav-btn {
        flex-shrink: 0;
        /* Don't shrink buttons */
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    /* Adjust main content padding */
    .msg-detail {
        padding: 15px;
        /* Reduce padding */
    }

    /* Message List Compact View */
    .msg-list-item {
        padding: 12px;
        gap: 10px;
    }

    .msg-list-item>div:first-child {
        font-size: 1.2rem !important;
        /* Smaller icon */
        width: 30px !important;
    }

    /* Ensure content doesn't overflow */
    .msg-list-item span,
    .msg-list-item small,
    .msg-list-item div {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* =========================================
   Calendar Styles
   ========================================= */

#calendar-container {
    background: white;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.fc-event {
    cursor: pointer;
    border: none;
    padding: 2px 5px;
    font-size: 0.9rem;
}

.event-task {
    background: #f56565 !important;
}

.event-lesson {
    background: #4299e1 !important;
}

.fc-toolbar-title {
    font-weight: bold;
    color: #2d3748;
}

.fc-button-primary {
    background: #667eea !important;
    border-color: #667eea !important;
}

/* Responsive Calendar */
@media (max-width: 768px) {
    #calendar-container {
        padding: 10px;
    }

    .fc-header-toolbar {
        flex-direction: column;
        gap: 10px;
    }

    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .fc-toolbar-title {
        font-size: 1.2rem !important;
    }

    /* Smaller buttons on mobile */
    .fc-button {
        padding: 4px 8px !important;
        font-size: 0.85rem !important;
    }
}

/* =========================================
   General Responsive Fixes
   ========================================= */

/* Responsive Buttons & Flex Containers */
@media (max-width: 768px) {

    /* Stack flex containers in cards (like instructions + button) */
    .card>div[style*="display: flex"] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }

    /* Make buttons full width on mobile if inside such containers */
    .card>div[style*="display: flex"] .button,
    .card>div[style*="display: flex"] a.button {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        /* Ensure padding doesn't overflow width */
    }

    /* Specific fix for task urgency date/status alignment */
    .card>div>div[style*="display: flex"] {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
}

/* =========================================
   Global Tables & Forms (Mobile)
   ========================================= */

@media (max-width: 768px) {

    /* 1. Global Horizontal Scroll for Tables */
    /* Often tables are direct children of cards or main */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        /* Prevent ugly wrapping in weird places */
        -webkit-overflow-scrolling: touch;
    }

    /* Optional: Fix for data tables to look okay */
    th,
    td {
        padding: 10px 8px;
        /* Slightly reduced padding */
    }

    /* 2. Global Forms */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="datetime-local"],
    textarea,
    select {
        width: 100% !important;
        /* Force full width */
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-group {
        width: 100%;
    }

    /* 3. Modals */
    .modal-content,
    div[style*="position: fixed"][style*="background: white"] {
        width: 95% !important;
        max-width: 95% !important;
        left: 2.5% !important;
        transform: translate(0, -50%) !important;
        /* Adjust if it was translated -50% -50% */
        /* If original was translate(-50%, -50%) and left 50%, 
           we need to override left to 2.5% and transform to translate(0, ...) or keep centered logic */

        /* Better approach for centered modals on mobile: */
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* 4. Admin Navigation Logic (Shared with Student) */
    #admin-nav-container {
        display: none;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 20px;
        animation: slideIn 0.3s ease-out;
    }

    #admin-nav-container.active {
        display: flex;
    }

    #admin-nav-container a {
        background: #f7fafc;
        border: 1px solid #edf2f7;
        width: 100%;
    }

    #admin-nav-container a.active {
        background: #667eea;
        color: white;
    }
}

/* =========================================
   Mobile Footer / Help Widget Fixes
   ========================================= */
@media (max-width: 768px) {
    .help-widget-btn {
        display: flex !important;
        bottom: 90px;
        /* Raised to avoid browser bars */
        right: 20px;
        width: 50px;
        height: 50px;
    }

    .help-widget-btn img {
        width: 30px;
        height: 30px;
    }

    .help-popup {
        bottom: 150px;
        /* Adjusted for new button position */
        width: 85%;
        left: 7.5%;
        right: auto;
        background: #ffffff !important;
        /* Force readable background */
        color: #2d3748 !important;
        z-index: 10001 !important;
        /* Above everything */
    }

    .school-info {
        flex-direction: column;
        text-align: center;
    }

    /* Fix: Ensure login container is clickable above background/overlays */
    .login-container {
        position: relative;
        z-index: 50;
    }
}