/* =========================================================================
   MOBILE RESPONSIVENESS OVERRIDES
   These styles are applied on screens smaller than 768px (tablets & mobiles)
========================================================================= */

@media (max-width: 768px) {
    /* 1. TYPOGRAPHY & BODY */
    body {
        font-size: 14px;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-size: 0.9em;
    }

    .em-card-header h2,
    .em-card-header h3 {
        font-size: 14px !important;
    }

    /* 2. CONTAINERS & CARDS */
    .bod-container, .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-top: 15px !important;
    }

    .ml-card, .em-card, .bu-card, .auth-card, .main-card {
        padding: 12px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }

    .em-card-header {
        padding: 10px !important;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .bod-section-body {
        padding: 10px !important;
    }

    /* 3. NAVBAR */
    .navbar-custom {
        padding: 10px 5px !important;
    }
    .navbar-brand img {
        height: 28px !important;
    }
    .nav-btn-custom {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    /* 4. BUTTONS & INPUTS */
    .ml-btn, .em-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    
    .ml-btn-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

    .em-input, .em-form-control, .form-control, .form-select {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    form .input-wrapper .form-control,
    .login-card .input-wrapper .form-control {
        padding-left: 45px !important;
    }


    /* 5. TABLES */
    .ml-table-responsive {
        border-radius: 8px !important;
        margin-bottom: 12px !important;
        /* Ensure horizontal scrolling is smooth on mobile */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ml-table th, .ml-table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* Stack or Adjust specific table cells if needed, but horizontal scroll is generally preferred for data tables */

    /* 6. MODALS */
    .em-modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
        border-radius: 12px !important;
    }

    .em-modal-header {
        padding: 12px 15px !important;
    }
    .em-modal-header h3, .em-modal-header h4 {
        font-size: 16px !important;
    }
    
    .em-modal-body {
        padding: 15px !important;
    }

    .em-modal-footer {
        padding: 12px 15px !important;
        gap: 8px !important;
    }

    /* Adjust modal layout if there are grids */
    .em-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 7. OTHER COMPONENTS */
    /* Sidebar or Tabs */
    .em-tabs {
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin-bottom: 15px !important;
    }
    .em-tab-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        flex: 1 1 auto;
        text-align: center;
    }

    /* Profile / Header alignments */
    .bod-header-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* 8. BUILDING OPERATION TOPBAR */
    .tm-bu-topbar {
        padding: 10px 15px !important;
        gap: 10px !important;
    }
    .topbar-left-section {
        gap: 8px !important;
    }
    .bu-logo-nav {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
    .bu-subtitle-text {
        font-size: 9px !important;
    }
    .bu-title-text {
        font-size: 15px !important;
    }
    .bu-profile-avatar {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }
    .bu-profile-name {
        font-size: 11px !important;
    }
    .bu-profile-badge {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }
}

@media (max-width: 991px) {
    .bo-collapse-menu {
        flex-basis: 100%;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 12px;
        padding: 15px;
        margin-top: 15px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }
}