/* ============================================================
   MORETECH ERP — RESPONSIVE ENHANCEMENTS
   File: erp_responsive.css
   Version: v2026.7
   Architecture: Mobile-First Supplement
   Purpose:
   - Global responsive overrides
   - Bootstrap form touch optimization
   - Table mobile patterns
   - Button touch targets
   - Modal & offcanvas mobile fixes
   - Login page mobile optimization
   - Print media adjustments
============================================================ */


/* ============================================================
   GLOBAL TOUCH-FRIENDLY FORM INPUTS
   Ensures minimum 44px tap targets (Apple HIG / WCAG)
============================================================ */

@media (max-width: 768px) {
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 10px 12px;
        border-radius: var(--erp-radius-sm, 6px);
    }

    .form-label {
        font-size: 0.82rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    textarea.form-control {
        min-height: 80px;
    }

    .input-group .form-control {
        min-height: 44px;
    }

    .input-group-text {
        min-height: 44px;
        padding: 10px 12px;
    }
}


/* ============================================================
   GLOBAL BUTTON TOUCH TARGETS
============================================================ */

@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.88rem;
    }

    .btn-sm {
        min-height: 36px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .btn-lg {
        min-height: 52px;
        padding: 12px 20px;
    }

    /* Full-width buttons on mobile */
    .erp-page-header .btn,
    .filter-bar .btn {
        width: 100%;
    }
}


/* ============================================================
   TABLE RESPONSIVE PATTERNS
============================================================ */

/* Horizontal scroll wrapper */
@media (max-width: 768px) {
    .erp-table-card,
    .req-table-card {
        padding: 8px;
        border-radius: var(--erp-radius, 12px);
    }

    .table-responsive,
    .erp-table-card {
        margin-left: -4px;
        margin-right: -4px;
    }

    /* Compact table on mobile */
    .erp-table thead th,
    .table thead th {
        font-size: 0.7rem;
        padding: 8px 8px;
        white-space: nowrap;
    }

    .erp-table tbody td,
    .table tbody td {
        font-size: 0.8rem;
        padding: 8px 8px;
    }

    /* Hide less important columns on mobile */
    .erp-table .d-mobile-none,
    .table .d-mobile-none {
        display: none;
    }
}


/* ============================================================
   MODAL & OFFCANVAS MOBILE
============================================================ */

@media (max-width: 576px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .modal-content {
        border-radius: var(--erp-radius, 12px);
    }

    .modal-header {
        padding: 14px 16px;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
    }

    .modal-footer .btn {
        width: 100%;
    }

    .offcanvas {
        max-width: 85vw;
    }
}


/* ============================================================
   LOGIN PAGE — MOBILE OPTIMIZATION
============================================================ */

@media (max-width: 576px) {
    .login-card,
    .auth-card {
        margin: 16px;
        padding: 24px 20px;
        border-radius: var(--erp-radius, 12px);
    }

    .login-card .form-control,
    .auth-card .form-control {
        min-height: 48px;
        font-size: 16px;
    }

    .login-card .btn,
    .auth-card .btn {
        min-height: 48px;
        font-size: 1rem;
        font-weight: 600;
    }

    .login-card .logo,
    .auth-card .logo {
        max-height: 60px;
        margin-bottom: 16px;
    }
}


/* ============================================================
   CARD GRID RESPONSIVE (Bootstrap row overrides)
============================================================ */

@media (max-width: 576px) {
    .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    /* Stack KPI cards on small screens */
    .row > .col-6:has(.kpi-card),
    .row > .col-sm-6:has(.kpi-card),
    .row > .col-md-3:has(.kpi-card) {
        flex: 0 0 50%;
        max-width: 50%;
    }
}


/* ============================================================
   SELECT2 MOBILE
============================================================ */

@media (max-width: 768px) {
    .select2-container--default .select2-selection--single {
        min-height: 44px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
        font-size: 14px;
    }

    .select2-dropdown {
        border-radius: var(--erp-radius, 12px) !important;
    }

    .select2-results__option {
        padding: 10px 14px !important;
        font-size: 14px;
    }
}


/* ============================================================
   DATATABLE MOBILE OVERRIDES
============================================================ */

@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left;
        margin-bottom: 10px;
    }

    .dataTables_wrapper .dataTables_length select {
        min-height: 36px;
    }

    .dataTables_wrapper .dataTables_filter input {
        min-height: 40px;
        width: 100%;
        max-width: 100%;
        font-size: 14px;
    }

    .dataTables_wrapper .dataTables_info {
        font-size: 0.78rem;
        text-align: center;
        padding-top: 8px;
    }

    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        margin-top: 10px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 6px 10px !important;
        min-height: 36px;
    }
}


/* ============================================================
   SPACING & UTILITY OVERRIDES — MOBILE
============================================================ */

@media (max-width: 576px) {
    /* Tighter section gaps */
    .mb-4 {
        margin-bottom: 1rem !important;
    }

    .mb-5 {
        margin-bottom: 1.5rem !important;
    }

    .p-4 {
        padding: 1rem !important;
    }

    /* Better gap for flex containers */
    .gap-3 {
        gap: 0.75rem !important;
    }

    .gap-4 {
        gap: 1rem !important;
    }
}


/* ============================================================
   DROPDOWN — MOBILE FULL WIDTH
============================================================ */

@media (max-width: 576px) {
    .dropdown-menu {
        min-width: 200px;
        border-radius: var(--erp-radius, 12px);
    }

    .dropdown-item {
        padding: 10px 14px;
        font-size: 0.88rem;
    }
}


/* ============================================================
   TOAST / NOTIFICATION MOBILE
============================================================ */

@media (max-width: 576px) {
    .toast-container {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
    }

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


/* ============================================================
   BREADCRUMB MOBILE
============================================================ */

@media (max-width: 576px) {
    .breadcrumb {
        font-size: 0.78rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }
}


/* ============================================================
   HORIZONTAL OVERFLOW PREVENTION
============================================================ */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
}

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

table {
    max-width: 100%;
}


/* ============================================================
   PRINT MEDIA
============================================================ */

@media print {
    .erp-navbar,
    .erp-footer,
    .erp-nav-actions,
    .filter-bar,
    .erp-toolbar,
    .erp-quick-actions,
    .btn {
        display: none !important;
    }

    .erp-page,
    .erp-page-canvas,
    .erp-page > .content {
        padding: 0;
        box-shadow: none;
        border: none;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .erp-table thead th {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}