/* ========================================
   تحسينات شاملة لجميع صفحات النظام - Mobile
   CRM Anglor - All 150+ Pages Optimized
   ======================================== */

/* ========================================
   BASE - تطبق على جميع الصفحات
   ======================================== */

@media (max-width: 767px) {
    
    /* ========== PAGE STRUCTURE ========== */
    
    body {
        overflow-x: hidden;
    }
    
    .page-container,
    .main-container,
    .content-wrapper {
        padding: 12px;
        width: 100%;
    }
    
    /* Page Headers - كل الصفحات */
    .page-header,
    .section-header,
    .panel-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
    }
    
    .page-header h1,
    .page-header h2,
    .section-title {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }
    
    .page-header p,
    .page-subtitle {
        font-size: 14px !important;
    }
    
    /* Page Actions - كل الصفحات */
    .page-actions,
    .header-actions,
    .action-buttons,
    .toolbar {
        width: 100% !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .page-actions .btn,
    .header-actions .btn,
    .action-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* ========== GRIDS - كل الصفحات ========== */
    
    /* Stats Grids */
    .stats-grid,
    .metrics-grid,
    .dashboard-grid,
    .overview-grid,
    .summary-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Content Grids */
    .content-grid,
    .items-grid,
    .cards-grid,
    .list-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Form Grids */
    .form-grid,
    .input-grid,
    .field-grid,
    .settings-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Two Column Layouts */
    .two-column,
    .split-view,
    .dual-panel {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .two-column > *,
    .split-view > *,
    .dual-panel > * {
        width: 100% !important;
    }
    
    /* ========== CARDS - كل الصفحات ========== */
    
    .card,
    .panel,
    .box,
    .widget {
        margin-bottom: 12px !important;
        border-radius: 12px !important;
    }
    
    .card-header,
    .panel-header,
    .box-header {
        padding: 14px !important;
        flex-wrap: wrap !important;
    }
    
    .card-body,
    .card-content,
    .panel-body,
    .box-content {
        padding: 14px !important;
    }
    
    .card-footer,
    .panel-footer {
        padding: 14px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .card-footer .btn,
    .panel-footer .btn {
        width: 100% !important;
    }
    
    /* ========== TABLES - كل الصفحات ========== */
    
    .table-wrapper,
    .table-container,
    .data-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -16px !important;
        padding: 0 16px !important;
    }
    
    .table,
    .data-table,
    .grid-table {
        min-width: 600px !important;
        font-size: 13px !important;
    }
    
    .table th,
    .table td {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }
    
    .table th {
        position: sticky !important;
        top: 0 !important;
        background: var(--background-secondary) !important;
        z-index: 10 !important;
    }
    
    /* Table Actions */
    .table-actions,
    .row-actions,
    .action-cell {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .table-actions .btn,
    .row-actions .btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
    }
    
    /* ========== FORMS - كل الصفحات ========== */
    
    .form-group,
    .field-group,
    .input-group-custom {
        margin-bottom: 14px !important;
    }
    
    .form-label,
    label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        font-weight: 600 !important;
    }
    
    .form-control,
    .form-input,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    select,
    textarea {
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
    }
    
    textarea {
        min-height: 100px !important;
    }
    
    /* Form Row */
    .form-row,
    .input-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .form-row > *,
    .input-row > * {
        width: 100% !important;
    }
    
    /* Form Actions */
    .form-actions,
    .form-buttons,
    .submit-actions {
        flex-direction: column-reverse !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }
    
    .form-actions .btn,
    .form-buttons .btn {
        width: 100% !important;
    }
    
    /* ========== BUTTONS - كل الصفحات ========== */
    
    .btn,
    button:not(.close):not(.btn-close) {
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }
    
    .btn-sm,
    .btn-small {
        min-height: 40px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
    
    .btn-lg,
    .btn-large {
        min-height: 54px !important;
        padding: 14px 24px !important;
        font-size: 16px !important;
    }
    
    /* Button Groups */
    .btn-group,
    .button-group {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .btn-group .btn,
    .button-group .btn {
        width: 100% !important;
        border-radius: 10px !important;
    }
    
    /* ========== MODALS - كل الصفحات ========== */
    
    .modal-dialog,
    .dialog,
    .popup {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        margin: 0 !important;
    }
    
    .modal-content,
    .dialog-content {
        height: 100vh !important;
        border-radius: 0 !important;
    }
    
    .modal-header,
    .dialog-header {
        padding: 16px !important;
        flex-shrink: 0 !important;
    }
    
    .modal-title,
    .dialog-title {
        font-size: 18px !important;
    }
    
    .modal-body,
    .dialog-body {
        padding: 16px !important;
        flex: 1 !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 140px) !important;
    }
    
    .modal-footer,
    .dialog-footer {
        padding: 16px !important;
        flex-direction: column-reverse !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
    }
    
    .modal-footer .btn,
    .dialog-footer .btn {
        width: 100% !important;
    }
    
    /* ========== TABS - كل الصفحات ========== */
    
    .nav-tabs,
    .tabs,
    .tab-list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: 2px solid var(--border-color) !important;
    }
    
    .nav-tabs .nav-link,
    .nav-tabs .nav-item,
    .tabs .tab,
    .tab-list .tab {
        flex: 0 0 auto !important;
        min-width: 120px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    
    .tab-content,
    .tab-panel {
        padding: 16px 0 !important;
    }
    
    /* ========== FILTERS - كل الصفحات ========== */
    
    .filters,
    .search-filters,
    .filter-bar,
    .toolbar-filters {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
        background: var(--background-secondary) !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }
    
    .filter-group,
    .search-group {
        width: 100% !important;
    }
    
    .filter-group label {
        display: block !important;
        margin-bottom: 6px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    
    .filter-group select,
    .filter-group input {
        width: 100% !important;
    }
    
    /* Date Range */
    .date-range,
    .date-picker-group {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .date-range input,
    .date-picker-group input {
        width: 100% !important;
    }
    
    /* ========== LISTS - كل الصفحات ========== */
    
    .list-group,
    .items-list,
    .data-list {
        padding: 0 !important;
    }
    
    .list-group-item,
    .list-item,
    .data-item {
        padding: 14px !important;
        margin-bottom: 10px !important;
        border-radius: 10px !important;
    }
    
    /* ========== BADGES & LABELS - كل الصفحات ========== */
    
    .badge,
    .label,
    .tag {
        padding: 4px 10px !important;
        font-size: 12px !important;
        border-radius: 12px !important;
    }
    
    /* ========== ALERTS - كل الصفحات ========== */
    
    .alert,
    .notification,
    .message {
        padding: 14px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        margin-bottom: 12px !important;
    }
    
    /* ========== BREADCRUMBS - كل الصفحات ========== */
    
    .breadcrumb,
    .breadcrumbs {
        display: none !important;
    }
    
    /* ========== PAGINATION - كل الصفحات ========== */
    
    .pagination,
    .pager {
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }
    
    .pagination .page-item,
    .pagination .btn,
    .pager .btn {
        min-width: 40px !important;
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    .pagination .page-info,
    .pager .page-info {
        width: 100% !important;
        text-align: center !important;
        margin: 8px 0 !important;
        font-size: 13px !important;
    }
    
    /* ========== DROPDOWNS - كل الصفحات ========== */
    
    .dropdown-menu,
    .context-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 60vh !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 16px !important;
    }
    
    .dropdown-item,
    .menu-item {
        padding: 14px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        margin-bottom: 6px !important;
    }
    
    /* ========== CHARTS - كل الصفحات ========== */
    
    .chart-container,
    .graph-container,
    canvas {
        height: 250px !important;
        max-height: 250px !important;
        margin-bottom: 16px !important;
    }
    
    /* ========== IMAGES - كل الصفحات ========== */
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .avatar,
    .profile-pic {
        width: 48px !important;
        height: 48px !important;
    }
    
    /* ========== SPACING - كل الصفحات ========== */
    
    .section,
    .panel,
    .block {
        margin-bottom: 16px !important;
    }
    
    .spacer,
    .divider {
        margin: 16px 0 !important;
    }
    
    /* ========== TEXT - كل الصفحات ========== */
    
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    h5 { font-size: 15px !important; }
    h6 { font-size: 14px !important; }
    
    p, .text-body {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    
    small, .text-small {
        font-size: 13px !important;
    }
    
    /* ========== UTILITIES - كل الصفحات ========== */
    
    .hide-mobile,
    .desktop-only {
        display: none !important;
    }
    
    .show-mobile,
    .mobile-only {
        display: block !important;
    }
    
    .full-width-mobile {
        width: 100% !important;
    }
    
    .text-center-mobile {
        text-align: center !important;
    }
    
    .no-padding-mobile {
        padding: 0 !important;
    }
    
    .no-margin-mobile {
        margin: 0 !important;
    }
    
    /* ========== SCROLL HINTS ========== */
    
    .scrollable-x::after {
        content: '← مرر لليسار للمزيد';
        display: block;
        text-align: center;
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 8px;
        font-style: italic;
    }
    
    /* ========== SAFE AREA (iPhone) ========== */
    
    @supports (padding: env(safe-area-inset-bottom)) {
        .content,
        .page-container {
            padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        }
        
        .modal-footer,
        .fixed-bottom {
            padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        }
    }
    
    /* ========== LOADING STATES ========== */
    
    .spinner,
    .loader,
    .loading {
        min-height: 200px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* ========== EMPTY STATES ========== */
    
    .empty-state,
    .no-data,
    .placeholder {
        padding: 40px 20px !important;
        text-align: center !important;
    }
    
    .empty-state .material-icons {
        font-size: 64px !important;
        opacity: 0.3 !important;
        margin-bottom: 16px !important;
    }
}

/* ========================================
   TABLET (768px - 1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    .stats-grid,
    .content-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .page-header {
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .page-header {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .page-header h1 {
        font-size: 18px !important;
    }
    
    .content {
        padding: 12px !important;
    }
    
    .modal-body {
        max-height: calc(100vh - 100px) !important;
    }
}

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

@media print {
    .sidebar,
    .header,
    .menu-toggle,
    .page-actions,
    .btn,
    .form-actions {
        display: none !important;
    }
    
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .table {
        page-break-inside: avoid !important;
    }
}