/* LMS Global Styling - ULTRA RESPONSIVE & SECURED */
:root {
    --primary-blue: #0070ff;
    --primary-cyan: #00d2ff;
    --primary-yellow: #ffff00;
    --dark-bg: #0b0b0d;
    --darker-bg: #141417;
    --dark-gray: #1c1c21;
    --light-text: #f0f0f5;
    --card-bg: rgba(255, 255, 255, 0.03);
}

/* Base resets & Security */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#lms-app {
    min-height: 100vh;
    background: var(--dark-bg);
    color: var(--light-text);
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Fluid Containers */
.main-content {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: visible;
}

/* Scrollbar Styling - Modern & Subtle */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-blue);
}

/* Custom Scrollers for specific areas */
.scroll-area {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-blue) transparent;
}

/* Responsive fixes for boxes */
.content-box {
    overflow-x: auto;
    /* Allow horizontal scroll for large tables on small screens */
    max-width: 100%;
}

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

/* WP Admin Bar Fix */
body.admin-bar #lms-app {
    height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar #lms-app {
        height: calc(100vh - 46px);
    }
}

/* Login Page Responsive Management */
@media (max-width: 900px) {
    #lms-homepage {
        padding: 40px 10px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .lms-container {
        flex-direction: column !important;
        gap: 20px !important;
    }
}