/* ============================================
   SYNCFUSION MOBILE RESPONSIVENESS
   Mobile-specific overrides for Syncfusion controls
   
   Purpose: Optimize Syncfusion components for mobile devices with:
   - Touch-friendly sizing (44px minimum touch targets)
   - Responsive layouts and horizontal scrolling
   - Mobile-specific popup positioning
   - iOS zoom prevention (16px minimum font size)
   
   Breakpoints:
   - Mobile: max-width 768px
   - Small mobile: max-width 480px
   
   Note: See css/README.md for complete CSS architecture documentation
   ============================================ */

/* ============================================
   DIALOG POSITIONING FIX
   Ensure dialogs are centered on screen
   CRITICAL: Must be in this file as it loads AFTER Syncfusion theme
   ============================================ */

/* Override Syncfusion's inline styles for dialog positioning */
.e-dialog.e-popup.e-popup-open,
.e-dialog.e-popup,
.e-dialog {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* Ensure dialog overlay covers entire viewport */
.e-dlg-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: var(--z-modal) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Ensure dialog container appears above overlay */
.e-dialog-container,
.e-dialog.e-lib {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: calc(var(--z-modal) + 1) !important;
}

/* ============================================
   GRID RESPONSIVE BEHAVIOR
   Make grids scrollable and properly sized on mobile
   ============================================ */

/* Enable horizontal scrolling for grids on small screens */
@media (max-width: 768px) {
    /* Grid Container - Enable horizontal scroll */
    .e-grid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Grid content wrapper */
    .e-gridcontent {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Grid header */
    .e-gridheader {
        overflow-x: auto !important;
    }

    /* Ensure grid takes full width of container */
    .e-grid .e-table {
        min-width: 100%;
        width: auto;
    }

    /* Make pager more mobile-friendly */
    .e-grid .e-gridpager {
        padding: 8px 4px;
    }

    .e-grid .e-gridpager .e-pagercontainer {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Reduce padding in grid cells for mobile */
    .e-grid td {
        padding: 8px 4px !important;
        font-size: 14px;
    }

    .e-grid th {
        padding: 10px 6px !important;
        font-size: 13px;
    }

    /* Make filter menu icons more touch-friendly */
    .e-grid .e-filterbarcelldiv,
    .e-grid .e-filterbarcell {
        min-height: 40px;
    }

    /* Adjust column menu for mobile */
    .e-grid .e-columnmenu {
        font-size: 20px;
    }

    /* Make buttons in grid more touch-friendly */
    .e-grid button,
    .e-grid .e-btn {
        min-height: 36px;
        min-width: 36px;
        padding: 6px 12px;
    }

    /* Grid sorting icons - make more visible */
    .e-grid .e-sortnumber {
        font-size: 12px;
    }

    /* Improve toolbar spacing on mobile */
    .e-grid .e-toolbar {
        padding: 8px 4px;
    }

    .e-grid .e-toolbar-item {
        margin: 2px;
    }
}

/* ============================================
   VERY SMALL SCREENS (<= 480px)
   Ultra-compact view for phones
   ============================================ */

@media (max-width: 480px) {
    /* Further reduce padding on very small screens */
    .e-grid td {
        padding: 6px 2px !important;
        font-size: 12px;
    }

    .e-grid th {
        padding: 8px 4px !important;
        font-size: 12px;
    }

    /* Hide less important columns on very small screens */
    /* You can add specific column hiding rules based on your needs */
    
    /* Make page size dropdown compact */
    .e-grid .e-pagesizes {
        max-width: 80px;
    }

    /* Compact pager buttons */
    .e-grid .e-numericitem,
    .e-grid .e-currentitem {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* ============================================
   SYNCFUSION BUTTONS - MOBILE
   Touch-friendly button sizing
   ============================================ */

@media (max-width: 768px) {
    /* All Syncfusion buttons */
    .e-btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 14px;
    }

    /* Small buttons */
    .e-btn.e-small {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 13px;
    }

    /* Icon buttons */
    .e-btn.e-icon-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================
   SYNCFUSION DIALOGS - MOBILE
   Full-screen dialogs on mobile
   ============================================ */

@media (max-width: 768px) {
    .e-dialog {
        max-width: 95vw !important;
        max-height: 90vh !important;
    }

    .e-dialog .e-dlg-content {
        padding: 16px 12px;
    }

    .e-dialog .e-footer-content {
        padding: 12px;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ============================================
   SYNCFUSION FORMS - MOBILE
   Form controls responsive sizing
   ============================================ */

@media (max-width: 768px) {
    /* Input fields */
    .e-input-group,
    .e-float-input {
        min-height: 44px;
    }

    .e-input-group input,
    .e-float-input input,
    .e-input-group textarea,
    .e-float-input textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
        min-height: 44px;
        padding: 10px 12px !important;
    }

    /* Dropdown lists */
    .e-ddl.e-input-group {
        min-height: 44px;
    }

    /* Date pickers */
    .e-datepicker.e-input-group {
        min-height: 44px;
    }
    
    /* Time pickers */
    .e-timepicker.e-input-group {
        min-height: 44px;
    }
    
    /* DateTime pickers */
    .e-datetimepicker.e-input-group {
        min-height: 44px;
    }
    
    /* Numeric text box */
    .e-numerictextbox.e-input-group {
        min-height: 44px;
    }
    
    /* ComboBox */
    .e-combobox.e-input-group {
        min-height: 44px;
    }
    
    /* AutoComplete */
    .e-autocomplete.e-input-group {
        min-height: 44px;
    }
    
    /* MultiSelect */
    .e-multiselect.e-input-group {
        min-height: 44px;
    }
    
    /* Ensure form controls have proper spacing */
    .form-control,
    .form-select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        min-height: 44px;
        padding: 10px 12px;
    }
    
    /* Popup lists on mobile - make items touch-friendly */
    .e-popup .e-list-item {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 16px;
    }
    
    /* Calendar popup on mobile */
    .e-calendar.e-popup {
        max-width: 95vw;
    }
    
    /* TimePicker popup on mobile */
    .e-timepicker.e-popup .e-list-parent {
        max-height: 300px;
    }
    
    .e-timepicker.e-popup .e-list-item {
        min-height: 44px;
        font-size: 16px;
    }
}

/* ============================================
   SYNCFUSION SCHEDULER/CALENDAR - MOBILE
   Calendar responsive behavior
   ============================================ */

@media (max-width: 768px) {
    .e-schedule {
        font-size: 14px;
    }

    .e-schedule .e-time-cells-wrap,
    .e-schedule .e-work-cells {
        font-size: 12px;
    }

    .e-schedule .e-appointment {
        font-size: 11px;
        padding: 2px 4px;
    }
}

/* ============================================
   CONTAINER ADJUSTMENTS
   Ensure grid containers don't overflow
   ============================================ */

@media (max-width: 768px) {
    /* Ensure parent containers don't constrain grids improperly */
    section .rounded-2xl:has(.e-grid) {
        overflow: visible;
    }

    /* Allow grid wrapper to scroll */
    div:has(> .e-grid) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   Ensure touch targets meet minimum size
   ============================================ */

@media (max-width: 768px) {
    /* Minimum touch target size of 44x44px */
    .e-grid .e-icons,
    .e-grid .e-checkbox-wrapper,
    .e-grid .e-radio-wrapper {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Clickable rows */
    .e-grid tr {
        cursor: pointer;
    }
}

/* ============================================
   SYNCFUSION CARD FLEX LAYOUT FIX
   Ensure Syncfusion cards work properly in flex layouts
   This must be in syncfusion-mobile.css (not app.css) because
   it loads AFTER Syncfusion's theme CSS and can override it
   ============================================ */

/* Fix for Syncfusion cards in flexbox containers */
.e-card {
    display: block !important;
    width: 100%;
}

/* Ensure card content respects flex layout */
.e-card .e-card-content {
    display: block;
}

/* Ensure cards in flex containers maintain proper width */
.flex .e-card,
.flex-1 .e-card,
.lg\\:w-64 .e-card {
    flex-shrink: 0;
}

/* ============================================
   TABLET RESPONSIVE DESIGN (768px - 1024px)
   Optimizations for tablet devices (iPad, Android tablets)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Grid adjustments for tablets */
    .e-grid {
        font-size: 0.9375rem;
    }

    .e-grid td {
        padding: 0.625rem 0.5rem !important;
    }

    .e-grid th {
        padding: 0.75rem 0.625rem !important;
    }

    /* Form controls - slightly smaller than desktop but larger than mobile */
    .e-input-group,
    .e-float-input {
        min-height: 42px;
    }

    .e-input-group input,
    .e-float-input input,
    .e-input-group textarea,
    .e-float-input textarea {
        font-size: 15px;
        min-height: 42px;
        padding: 9px 12px !important;
    }

    /* Buttons - optimized for tablet touch */
    .e-btn {
        min-height: 42px;
        padding: 9px 16px;
        font-size: 15px;
    }

    /* Dialogs - use more screen space */
    .e-dialog {
        max-width: 85vw !important;
        max-height: 85vh !important;
    }

    /* Popups and dropdowns */
    .e-popup {
        max-width: 90vw;
    }

    /* Calendar popup sizing */
    .e-calendar.e-popup {
        max-width: 450px;
    }

    /* Tab navigation - larger touch targets */
    .e-tab .e-tab-header .e-toolbar-item {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }

    /* Checkbox and radio - slightly larger */
    .e-checkbox-wrapper .e-frame,
    .e-radio-wrapper .e-frame {
        width: 22px;
        height: 22px;
    }

    /* MultiSelect chips - better spacing */
    .e-multiselect .e-chips {
        padding: 0.375rem 0.875rem;
        font-size: 0.9375rem;
        margin: 0.25rem;
    }

    /* Schedule/Calendar - optimized view */
    .e-schedule {
        font-size: 0.9375rem;
    }

    .e-schedule .e-appointment {
        font-size: 0.8125rem;
        padding: 3px 5px;
    }
}

/* ============================================
   LANDSCAPE MOBILE (PHONES IN LANDSCAPE)
   Optimizations for phones in landscape orientation
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    /* Dialogs - use more horizontal space */
    .e-dialog {
        max-width: 90vw !important;
        max-height: 85vh !important;
    }

    /* Grid - more compact in landscape */
    .e-grid td {
        padding: 6px 8px !important;
        font-size: 13px;
    }

    .e-grid th {
        padding: 8px 10px !important;
        font-size: 13px;
    }

    /* Calendar popup - wider in landscape */
    .e-calendar.e-popup {
        max-width: 80vw;
    }

    /* Form elements - compact but usable */
    .e-input-group,
    .e-float-input {
        min-height: 40px;
    }

    .e-input-group input,
    .e-float-input input {
        min-height: 40px;
        padding: 8px 12px !important;
    }
}

/* ============================================
   ENHANCED TOUCH FEEDBACK
   Visual feedback for touch interactions
   ============================================ */

@media (max-width: 1024px) {
    /* Active/pressed state for touch */
    .e-btn:active {
        transform: scale(0.98);
        transition: transform 0.1s ease-in-out;
    }

    .e-list-item:active {
        background-color: rgba(46, 78, 63, 0.15) !important;
    }

    [data-theme="dark"] .e-list-item:active {
        background-color: rgba(74, 111, 92, 0.25) !important;
    }

    /* Grid row tap feedback */
    .e-grid .e-row:active {
        background-color: rgba(46, 78, 63, 0.1) !important;
    }

    [data-theme="dark"] .e-grid .e-row:active {
        background-color: rgba(74, 111, 92, 0.2) !important;
    }

    /* Checkbox/radio tap feedback */
    .e-checkbox-wrapper:active .e-frame,
    .e-radio-wrapper:active .e-frame {
        transform: scale(0.95);
        transition: transform 0.1s ease-in-out;
    }

    /* Tab tap feedback */
    .e-tab .e-tab-header .e-toolbar-item:active {
        background-color: rgba(46, 78, 63, 0.15);
    }

    [data-theme="dark"] .e-tab .e-tab-header .e-toolbar-item:active {
        background-color: rgba(74, 111, 92, 0.25);
    }
}

/* ============================================
   IMPROVED POPUP POSITIONING FOR TABLETS
   Better dropdown and popup behavior on tablets
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Dropdowns - optimized width for tablets */
    .e-dropdownlist.e-popup,
    .e-ddl.e-popup,
    .e-autocomplete.e-popup,
    .e-combobox.e-popup,
    .e-multiselect.e-popup {
        max-width: 500px;
        min-width: 250px;
    }

    /* Date picker popup - better sizing */
    .e-datepicker.e-popup,
    .e-calendar.e-popup {
        max-width: 450px;
    }

    /* Time picker list - scrollable with touch */
    .e-timepicker.e-popup .e-list-parent {
        max-height: 350px;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   DATAFORM RESPONSIVE LAYOUT
   Responsive column adjustments for DataForm
   ============================================ */

@media (max-width: 768px) {
    /* Force single column on mobile */
    .e-dataform {
        grid-template-columns: 1fr !important;
    }

    .e-dataform .e-field {
        grid-column: span 1 !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Two columns on tablets */
    .e-dataform {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .e-dataform .e-field {
        grid-column: span 1 !important;
    }

    /* Full width for specific fields */
    .e-dataform .e-field[data-field-type="textarea"],
    .e-dataform .e-field[data-full-width] {
        grid-column: span 2 !important;
    }
}

/* ============================================
   ACCORDION MOBILE ENHANCEMENTS
   Better touch interaction for accordions
   ============================================ */

@media (max-width: 1024px) {
    .e-accordion .e-acrdn-header {
        min-height: 48px;
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }

    .e-accordion .e-acrdn-header:active {
        background-color: rgba(46, 78, 63, 0.1);
    }

    [data-theme="dark"] .e-accordion .e-acrdn-header:active {
        background-color: rgba(74, 111, 92, 0.2);
    }

    /* Icon sizing for touch */
    .e-accordion .e-acrdn-header .e-toggle-icon {
        font-size: 1.25rem;
        min-width: 32px;
        min-height: 32px;
    }
}

/* ============================================
   RICH TEXT EDITOR MOBILE
   Better toolbar and editing experience
   ============================================ */

@media (max-width: 768px) {
    .e-richtexteditor .e-rte-toolbar {
        flex-wrap: wrap;
        padding: 4px;
    }

    .e-richtexteditor .e-toolbar-item {
        min-width: 36px;
        min-height: 36px;
        margin: 2px;
    }

    .e-richtexteditor .e-rte-content {
        min-height: 250px;
        font-size: 16px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .e-richtexteditor .e-toolbar-item {
        min-width: 40px;
        min-height: 40px;
    }

    .e-richtexteditor .e-rte-content {
        min-height: 300px;
        font-size: 15px;
    }
}

/* ============================================
   GRID COLUMN VISIBILITY
   Hide less important columns on small screens
   ============================================ */

@media (max-width: 480px) {
    /* Hide columns marked as optional on very small screens */
    .e-grid .e-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    /* Show some optional columns on larger phones */
    .e-grid .e-hide-small-mobile {
        display: none !important;
    }
}

/* ============================================
   IMPROVED SCROLLBAR STYLING
   Better scrollbar appearance on touch devices
   ============================================ */

@media (max-width: 1024px) {
    /* Webkit scrollbar styling for mobile/tablet */
    .e-grid .e-gridcontent::-webkit-scrollbar,
    .e-popup::-webkit-scrollbar,
    .e-list-parent::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .e-grid .e-gridcontent::-webkit-scrollbar-track,
    .e-popup::-webkit-scrollbar-track,
    .e-list-parent::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }

    .e-grid .e-gridcontent::-webkit-scrollbar-thumb,
    .e-popup::-webkit-scrollbar-thumb,
    .e-list-parent::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }

    [data-theme="dark"] .e-grid .e-gridcontent::-webkit-scrollbar-thumb,
    [data-theme="dark"] .e-popup::-webkit-scrollbar-thumb,
    [data-theme="dark"] .e-list-parent::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
    }
}

/* ============================================
   SAFE AREA INSETS (NOTCH SUPPORT)
   Support for devices with notches (iPhone X+, etc.)
   ============================================ */

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .e-dialog {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
            padding-bottom: max(12px, env(safe-area-inset-bottom));
        }

        .e-popup {
            padding-left: max(8px, env(safe-area-inset-left));
            padding-right: max(8px, env(safe-area-inset-right));
        }
    }
}