/* ============================================
   LIVECLASS — Mobile / Responsive Overrides
   Comprehensive mobile-first responsive fix
   ============================================ */

/* ─────────── GLOBAL MOBILE RESETS ─────────── */
@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    body {
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden !important;
    }

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

    .container,
    .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Bootstrap Row fix */
    .row {
        margin-left: -8px;
        margin-right: -8px;
    }
    .row > * {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Tables scroll */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 0.78rem !important;
    }

    /* Hide elements not needed on mobile */
    .d-none-mobile {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────
   DASHBOARD (style.css) — Teacher & Student
─────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 991px) {
    :root {
        --sidebar-width: 0px;
    }

    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
        width: 270px;
    }

    .sidebar.show,
    .sidebar.mobile-show,
    .sidebar.mobile-toggle-show {
        transform: translateX(0);
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.15);
        z-index: 1035; /* Lower than Bootstrap modal (1050) but higher than normal content */
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 10px 0 5px !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        width: auto !important;
        height: 50px !important;
    }

    .sidebar-close-btn {
        display: flex !important;
        position: absolute;
        right: 15px;
        top: 15px;
        width: 34px;
        height: 34px;
        background: rgba(0, 0, 0, 0.05);
        border: none;
        border-radius: 10px;
        color: var(--text-main);
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        cursor: pointer;
        z-index: 10;
        transition: all 0.2s;
    }
    .sidebar-close-btn:hover {
        background: rgba(0, 0, 0, 0.1);
    }

    .topbar {
        height: auto !important;
        min-height: 70px !important;
        padding: 5px 12px 5px 0 !important; /* Zero left padding to bring burger to edge */
        border-radius: 14px !important;
        margin-bottom: 20px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0 !important;
        z-index: 1000 !important;
    }

    .topbar h4 {
        font-size: 0.9rem !important;
        line-height: 1.2;
    }

    /* Messaging full-width on mobile */
    .messages-container {
        height: calc(100vh - 100px) !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: -16px -16px 0 -16px !important; /* Pull to edges */
    }

    .chat-input-area {
        padding: 10px 14px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .main-content {
        padding: 16px !important;
    }

    .topbar-right {
        gap: 10px !important;
    }

    .system-status {
        display: none !important;
    }

    .user-profile-btn {
        padding: 4px !important;
        padding-right: 10px !important;
        border-radius: 10px !important;
    }

    .user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
    }

    .user-name {
        font-size: 0.78rem !important;
    }

    .user-role {
        font-size: 0.55rem !important;
    }

    /* Stat Cards */
    .stat-card {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .stat-card .fw-bold.fs-5 {
        font-size: 1.1rem !important;
    }

    /* Cards */
    .card {
        border-radius: 14px !important;
    }

    .card:hover {
        transform: none !important;
    }

    /* Sections */
    .section-title {
        font-size: 0.7rem !important;
        margin-bottom: 1.2rem !important;
    }

    /* Filter bars */
    .filter-bar {
        flex-direction: column;
        gap: 8px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .filter-item {
        min-width: 100% !important;
    }

    /* Modals */
    .modal-dialog {
        margin: 8px !important;
    }

    .modal-content {
        border-radius: 16px !important;
    }

    /* Badge */
    .badge {
        font-size: 0.65rem !important;
    }

    /* Buttons */
    .btn {
        font-size: 0.82rem !important;
    }

    .btn-sm {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .main-content {
        padding: 10px !important;
    }

    .topbar {
        padding: 5px 12px 5px 0 !important;
    }

    .messages-container {
        margin: -10px -10px 0 -10px !important;
    }

    h2 {
        font-size: 1.3rem !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }

    h4 {
        font-size: 1rem !important;
    }
}

/* ─────────────────────────────────────────────
   NOTIFICATION DROPDOWN — Mobile Fix
─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dropdown-menu {
        width: calc(100vw - 32px) !important;
        max-width: 360px !important;
        right: -60px !important;
        left: auto !important;
        border-radius: 16px !important;
    }

    .notif-item {
        padding: 10px 14px !important;
    }

    .notif-title {
        font-size: 0.8rem !important;
    }

    .notif-body {
        font-size: 0.72rem !important;
    }
}

/* ─────────────────────────────────────────────
   COURSE CARDS — Mobile
─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .eduma-course-card {
        border-radius: 14px !important;
    }

    .eduma-course-card:hover {
        transform: none !important;
    }

    .eduma-course-card .course-content {
        padding: 20px 16px 16px !important;
    }

    .eduma-course-card .course-title {
        font-size: 0.9rem !important;
    }

    .eduma-course-card .instructor-avatar {
        width: 40px !important;
        height: 40px !important;
        bottom: -18px !important;
        right: 14px !important;
    }
}

/* ─────────────────────────────────────────────
   ADMIN PANEL — Mobile Overrides
─────────────────────────────────────────────── */
@media (max-width: 1200px) {
    /* Admin sidebar */
    body .sidebar {
        transform: translateX(-100%) !important;
        width: 280px !important;
    }

    body .sidebar.mobile-show,
    body .sidebar.show {
        transform: translateX(0) !important;
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.2) !important;
    }

    body .main-content {
        margin-left: 0 !important;
    }

    body .mobile-toggle {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    /* Admin settings layout */
    .settings-container {
        flex-direction: column !important;
    }

    .settings-nav {
        max-width: 100% !important;
        width: 100% !important;
    }

    .settings-content {
        width: 100% !important;
    }

    /* Admin settings cards */
    .settings-content .card {
        padding: 20px !important;
        border-radius: 18px !important;
    }

    .settings-content .p-md-5 {
        padding: 20px !important;
    }

    /* Nav pills in settings */
    .nav-icon-bg {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
    }

    .nav-pills .nav-link {
        padding: 10px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 6px !important;
    }

    /* Dashboard icon */
    .dashboard-icon-lg {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.3rem !important;
        border-radius: 14px !important;
    }

    /* Pro control inputs */
    .pro-control {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
    }

    /* Pro label */
    .pro-label {
        font-size: 0.7rem !important;
    }

    /* Settings header */
    .settings-content h4 {
        font-size: 1.1rem !important;
    }

    /* Charts */
    canvas {
        max-width: 100% !important;
    }

    /* Admin welcome banner */
    .row.align-items-center.mb-5 h2 {
        font-size: 1.2rem !important;
    }

    /* Admin stat cards grid */
    .col-xl-2 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 480px) {
    .col-xl-2 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Settings nav scrollable horizontally */
    .settings-nav .nav {
        flex-direction: row !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .settings-nav .nav::-webkit-scrollbar {
        display: none;
    }

    .settings-nav .nav .nav-link {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* ─────────────────────────────────────────────
   LANDING PAGE — Extra Mobile Polish
─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lc-navbar {
        padding: 10px 0 !important;
    }

    .lc-navbar .container {
        padding: 0 16px !important;
    }

    .lc-logo {
        font-size: 1.2rem !important;
    }

    .lc-logo-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }

    .lc-nav-actions {
        gap: 8px !important;
    }

    .lc-btn-ghost,
    .lc-btn-fill {
        padding: 8px 14px !important;
        font-size: 0.78rem !important;
    }

    .lc-hero {
        padding: 110px 0 50px !important;
    }

    .lc-hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.15 !important;
    }

    .lc-hero-desc {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    .lc-hero-stats {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    .lc-hero-stat h3 {
        font-size: 1.5rem !important;
    }

    .lc-hero-stat span {
        font-size: 0.75rem !important;
    }

    .lc-btn-hero,
    .lc-btn-outline-hero {
        padding: 14px 24px !important;
        font-size: 0.88rem !important;
        border-radius: 12px !important;
    }

    .lc-section {
        padding: 50px 0 !important;
    }

    .lc-section-header h2 {
        font-size: 1.5rem !important;
    }

    .lc-section-header p {
        font-size: 0.9rem !important;
    }

    .lc-feature-card {
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }

    .lc-feature-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.15rem !important;
    }

    .lc-feature-card h3 {
        font-size: 1rem !important;
    }

    .lc-feature-card p {
        font-size: 0.82rem !important;
    }

    /* Course cards on landing */
    .lc-course-card {
        border-radius: 14px !important;
    }

    .lc-course-card:hover {
        transform: none !important;
    }

    .lc-course-body {
        padding: 16px !important;
    }

    /* CTA */
    .lc-cta-inner {
        padding: 40px 20px !important;
        border-radius: 18px !important;
    }

    .lc-cta h2 {
        font-size: 1.5rem !important;
    }

    /* Steps */
    .lc-step-card {
        padding: 24px 20px !important;
    }

    /* Stats bar */
    .lc-stats-bar {
        border-radius: 16px !important;
        padding: 20px !important;
    }

    .lc-stat-number {
        font-size: 1.8rem !important;
    }

    /* Footer */
    .lc-footer {
        padding: 50px 0 !important;
    }

    .lc-footer-grid {
        gap: 30px !important;
    }

    .lc-footer h4 {
        font-size: 0.85rem !important;
    }

    /* Teacher section */
    .lc-teacher-card {
        padding: 30px 20px !important;
        border-radius: 24px !important;
    }

    .lc-teacher-content h2 {
        font-size: 1.5rem !important;
    }

    .lc-teacher-content p {
        font-size: 0.9rem !important;
    }

    .lc-teacher-features {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .lc-t-feat {
        font-size: 0.85rem !important;
        padding: 10px 12px !important;
    }

    .lc-btn-white {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
        border-radius: 50px !important;
    }

    .lc-teacher-badge-glass {
        display: none !important;
    }

    /* FAQ */
    .lc-faq-q {
        padding: 16px 18px !important;
        font-size: 0.9rem !important;
    }

    .lc-faq-a {
        padding: 0 18px !important;
    }

    .lc-faq-a p {
        font-size: 0.85rem !important;
    }

    /* Category cards */
    .lc-category-card {
        height: 180px !important;
        padding: 20px !important;
    }

    .lc-category-content h3 {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 480px) {
    .lc-hero h1 {
        font-size: 1.5rem !important;
    }

    .lc-hero-desc {
        font-size: 0.85rem !important;
    }

    .lc-hero-actions {
        gap: 10px !important;
    }

    .lc-btn-hero,
    .lc-btn-outline-hero {
        padding: 12px 20px !important;
        font-size: 0.82rem !important;
    }

    .lc-section-header h2 {
        font-size: 1.3rem !important;
    }
}

/* ─────────────────────────────────────────────
   MARKETPLACE / COURSES PAGE — Mobile
─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero {
        padding: 50px 0 40px !important;
    }

    .hero-title {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    .hero-desc {
        font-size: 0.95rem !important;
    }

    .sec-title {
        font-size: 1.5rem !important;
    }

    .course-card {
        border-radius: 14px !important;
    }

    .course-card:hover {
        transform: none !important;
    }

    .course-thumb {
        height: 160px !important;
    }

    .course-info {
        padding: 16px !important;
    }

    .course-name {
        font-size: 1rem !important;
    }

    .course-price {
        font-size: 1.2rem !important;
    }

    .expect-card {
        padding: 24px 18px !important;
        border-radius: 18px !important;
    }

    .expect-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.1rem !important;
    }

    .expect-title {
        font-size: 1rem !important;
    }

    .expect-desc {
        font-size: 0.82rem !important;
    }

    .testi-box {
        padding: 28px 18px !important;
        border-radius: 18px !important;
    }

    .testi-text {
        font-size: 0.95rem !important;
    }

    .testi-img {
        width: 100px !important;
        height: 100px !important;
    }

    .cat-card {
        border-radius: 14px !important;
        padding: 8px !important;
    }

    .cat-thumb {
        height: 110px !important;
        border-radius: 10px !important;
    }

    .cat-title {
        font-size: 0.95rem !important;
    }

    .hdr-nav {
        gap: 12px !important;
    }

    .hdr-nav a {
        font-size: 0.82rem !important;
    }

    .hdr-btn-start {
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
    }

    .hdr-btn-login {
        padding: 6px 12px !important;
        font-size: 0.78rem !important;
        margin-left: 8px !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.6rem !important;
    }

    .sec-title {
        font-size: 1.3rem !important;
    }

    .btn-hero,
    .btn-outline-hero {
        padding: 12px 20px !important;
        font-size: 0.85rem !important;
    }
}

/* ─────────────────────────────────────────────
   AUTH PAGES (Login/Register) — Mobile
─────────────────────────────────────────────── */
@media (max-width: 768px) {
    body.auth-page {
        align-items: stretch !important;
        display: block !important;
        background: #fff !important;
    }

    /* Hide background orbs on mobile */
    body.auth-page::before,
    body.auth-page::after {
        display: none !important;
    }

    .auth-wrapper {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100vh !important;
        max-width: 100% !important;
        width: 100% !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    .auth-wrapper.register-mode {
        max-width: 100% !important;
    }

    .auth-brand-panel {
        display: none !important;
    }

    .auth-form-panel {
        width: 100% !important;
        max-width: 100% !important;
        padding: 60px 24px 30px !important;
        min-height: auto !important;
        max-height: none !important;
        flex: 1;
    }

    .auth-form-panel.register-form-panel {
        padding: 50px 24px 30px !important;
    }

    .auth-form-header {
        margin-bottom: 1.5rem !important;
    }

    .auth-form-header h2 {
        font-size: 1.6rem !important;
    }

    .auth-form-header p {
        font-size: 0.9rem !important;
    }

    .auth-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .auth-field {
        width: 100% !important;
    }

    .auth-input {
        padding: 14px 16px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
        width: 100% !important;
    }

    .auth-password-group .auth-input {
        padding-right: 3rem !important;
    }

    .auth-btn {
        padding: 16px !important;
        font-size: 1rem !important;
        border-radius: 14px !important;
        width: 100% !important;
    }

    .auth-social-btn {
        padding: 14px !important;
        border-radius: 12px !important;
        width: 100% !important;
    }

    .auth-options {
        margin-bottom: 1.25rem !important;
    }

    .auth-role-compact {
        flex-direction: row !important;
    }

    .compact-role-btn {
        font-size: 0.85rem !important;
        padding: 12px 14px !important;
    }

    .auth-role-selector {
        grid-template-columns: 1fr 1fr !important;
    }

    .auth-copyright {
        padding: 16px !important;
        font-size: 0.75rem !important;
    }

    .auth-back-link {
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 200 !important;
    }

    /* Webcam for face verification */
    .webcam-container {
        max-width: 100% !important;
    }

    .auth-verification-box {
        width: 100% !important;
    }
}

/* ─────────────────────────────────────────────
   LIVE CLASSROOM — Mobile
─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .whiteboard-toolbar {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .whiteboard-toolbar button,
    .whiteboard-toolbar .tool-btn {
        padding: 6px 8px !important;
        font-size: 0.72rem !important;
    }

    .participant-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    .chat-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ─────────────────────────────────────────────
   SIDEBAR OVERLAY (All Panels)
─────────────────────────────────────────────── */
@media (max-width: 991px) {
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1050;
        backdrop-filter: blur(4px);
    }

    .sidebar-overlay.show {
        display: block;
    }
}

/* ─────────────────────────────────────────────
   FIX: Touch interactions
─────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .card:hover,
    .eduma-course-card:hover,
    .lc-feature-card:hover,
    .lc-course-card:hover,
    .course-card:hover,
    .stat-card:hover,
    .cat-card:hover,
    .expect-card:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }

    /* Better tap targets */
    .sidebar-item {
        min-height: 44px !important;
    }

    .btn,
    .btn-sm,
    button {
        min-height: 38px !important;
    }

    a {
        -webkit-tap-highlight-color: rgba(99, 102, 241, 0.1);
    }
}

/* ─────────────────────────────────────────────
   FIX: iOS/Safari specific
─────────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
    .sidebar {
        -webkit-overflow-scrolling: touch;
    }

    input, textarea, select {
        font-size: 16px !important; /* Prevent iOS zoom on focus */
    }
}