/** * Mobile-Specific Styles for Rust mA.Intenance * Applied when .is-mobile or .is-tablet class is present on or * Server-side detection via User-Agent in Rust backend * * FALLBACK: Also applies on screens < 768px width via media queries */ /* ============================================ Desktop Overrides - Hide mobile elements on desktop ============================================ */ /* Hide hamburger menu on desktop */ html:not(.is-mobile) .mobile-menu-btn, html.is-desktop .mobile-menu-btn { display: none !important; } /* Ensure mobile menu shows when active (not hidden) */ .is-mobile .mobile-menu:not(.hidden), html:not(.is-desktop) .mobile-menu:not(.hidden) { display: block !important; } /* Hide mobile menu on desktop */ html:not(.is-mobile) .mobile-menu, html.is-desktop .mobile-menu { display: none !important; } /* ============================================ Base Mobile Adjustments ============================================ */ .is-mobile { font-size: 14px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } .is-mobile *, .is-mobile *::before, .is-mobile *::after { box-sizing: border-box; } /* FALLBACK: Apply mobile styles on small screens even without .is-mobile class */ @media (max-width: 768px) { html:not(.is-desktop) { font-size: 14px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } html:not(.is-desktop) *, html:not(.is-desktop) *::before, html:not(.is-desktop) *::after { box-sizing: border-box; } } /* ============================================ Navigation - Mobile Hamburger Menu ============================================ */ .is-mobile nav { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; background: white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); height: auto; padding: 0.75rem 1rem; } .is-mobile .navbar-logo, .is-mobile nav img[alt*="logo"] { max-width: 48px !important; max-height: 40px !important; height: auto !important; } /* Hide navigation menu items on mobile by default */ .is-mobile nav ul, .is-mobile nav .nav-links, .is-mobile nav .nav-content { display: none; } /* Mobile menu toggle button - ONLY for mobile/tablet devices */ .is-mobile .mobile-menu-btn, .is-tablet .mobile-menu-btn { display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: #2563eb; color: white; border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: fixed; top: 0.75rem; right: 1rem; z-index: 1001; } .is-mobile .mobile-menu-btn:active, .is-tablet .mobile-menu-btn:active { transform: scale(0.95); } /* Mobile navigation when expanded */ .is-mobile nav.mobile-nav-open ul, .is-mobile nav.mobile-nav-open .nav-links, .is-mobile nav.mobile-nav-open .nav-content { display: flex !important; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: white; padding: 5rem 1rem 1rem; overflow-y: auto; z-index: 999; } .is-mobile nav.mobile-nav-open a, .is-mobile nav.mobile-nav-open button { display: block; padding: 1rem; border-bottom: 1px solid #e5e7eb; font-size: 1.125rem; color: #1f2937; text-decoration: none; } .is-mobile nav.mobile-nav-open a:active, .is-mobile nav.mobile-nav-open button:active { background: #f3f4f6; } /* ============================================ Page Layout Adjustments ============================================ */ .is-mobile main, .is-mobile .page-container-95 { width: 100% !important; max-width: 100% !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; padding-top: 5rem !important; /* Account for fixed navigation */ margin-top: 0 !important; } .is-mobile .container, .is-mobile .max-w-7xl, .is-mobile .max-w-6xl { max-width: 100% !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* ============================================ Grid Layouts - Force Single Column ============================================ */ .is-mobile .grid, .is-mobile .grid-cols-2, .is-mobile .grid-cols-3, .is-mobile .grid-cols-4, .is-mobile .sm\:grid-cols-2, .is-mobile .md\:grid-cols-3, .is-mobile .lg\:grid-cols-4 { grid-template-columns: 1fr !important; gap: 0.75rem !important; } /* ============================================ Cards and Sections ============================================ */ .is-mobile .bg-white, .is-mobile .border { border-radius: 8px !important; margin-bottom: 0.75rem; } .is-mobile .p-6 { padding: 1rem !important; } .is-mobile .p-4 { padding: 0.75rem !important; } .is-mobile .space-y-6 > * + * { margin-top: 1rem !important; } .is-mobile .space-y-4 > * + * { margin-top: 0.75rem !important; } /* ============================================ Tables - Horizontal Scroll ============================================ */ .is-mobile table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .is-mobile thead { display: table-header-group; } .is-mobile tbody { display: table-row-group; } .is-mobile th, .is-mobile td { min-width: 100px; padding: 0.5rem !important; font-size: 0.875rem; } /* Touch-friendly row selection */ .is-mobile tbody tr { cursor: pointer; -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1); transition: background-color 0.15s ease; } .is-mobile tbody tr:active { background-color: rgba(59, 130, 246, 0.05); } .is-mobile tbody tr:hover { background-color: rgba(59, 130, 246, 0.03); } /* Increase touch target size for clickable elements in tables */ .is-mobile table a, .is-mobile table button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; } /* Mobile table alternative - card layout */ .is-mobile .table-mobile-cards table { display: block; } .is-mobile .table-mobile-cards thead { display: none; } .is-mobile .table-mobile-cards tbody { display: block; } .is-mobile .table-mobile-cards tr { display: block; margin-bottom: 1rem; padding: 1rem; background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); cursor: pointer; -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1); transition: all 0.15s ease; } .is-mobile .table-mobile-cards tr:active { transform: scale(0.98); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .is-mobile .table-mobile-cards td { display: block; text-align: left !important; padding: 0.5rem 0 !important; border: none !important; min-height: auto !important; } .is-mobile .table-mobile-cards td::before { content: attr(data-label); font-weight: 600; display: inline-block; width: 120px; color: #6b7280; font-size: 0.875rem; } /* Card layout for complex tables - auto-apply to tables with many columns */ .is-mobile table[data-mobile-cards="true"] { display: block; } .is-mobile table[data-mobile-cards="true"] thead { display: none; } .is-mobile table[data-mobile-cards="true"] tbody { display: block; } .is-mobile table[data-mobile-cards="true"] tr { display: block; margin-bottom: 1rem; padding: 1rem; background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .is-mobile table[data-mobile-cards="true"] td { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0 !important; border: none !important; min-height: auto !important; } .is-mobile table[data-mobile-cards="true"] td::before { content: attr(data-label); font-weight: 600; color: #6b7280; font-size: 0.875rem; flex-shrink: 0; margin-right: 1rem; } /* ============================================ Buttons - Touch-Friendly Sizing ============================================ */ .is-mobile button:not(.pm-start-btn), .is-mobile .btn:not(.pm-start-btn), .is-mobile input[type="submit"], .is-mobile input[type="button"] { min-height: 44px !important; padding: 0.75rem 1rem !important; font-size: 1rem !important; border-radius: 8px; touch-action: manipulation; } .is-mobile button:not(.mobile-menu-btn):not(.chip):not(.pm-start-btn) { width: 100%; margin-bottom: 0.5rem; } /* ============================================ Forms - Better Mobile UX ============================================ */ .is-mobile input[type="text"], .is-mobile input[type="email"], .is-mobile input[type="password"], .is-mobile input[type="number"], .is-mobile input[type="tel"], .is-mobile input[type="date"], .is-mobile input[type="time"], .is-mobile textarea, .is-mobile select { min-height: 44px !important; font-size: 16px !important; /* Prevents iOS zoom on focus */ padding: 0.75rem !important; width: 100%; } .is-mobile label { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; display: block; } /* ============================================ Work Order Detail Page - Mobile Optimizations ============================================ */ .is-mobile #pageTitle { font-size: 1.25rem !important; line-height: 1.4; margin-bottom: 0.75rem; } .is-mobile #workOrderCode { font-size: 0.875rem; } /* Metadata grid - stack vertically */ .is-mobile .grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4, .is-mobile .grid.grid-cols-4 { grid-template-columns: 1fr !important; } /* Action buttons - fixed at bottom */ .is-mobile .flex.flex-col.gap-2.lg\:min-w-\[200px\] { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid #e5e7eb; padding: 0.75rem !important; z-index: 100; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); display: flex !important; flex-direction: row !important; gap: 0.5rem !important; margin: 0 !important; } .is-mobile .flex.flex-col.gap-2.lg\:min-w-\[200px\] button { flex: 1; margin: 0 !important; padding: 0.75rem 0.5rem !important; font-size: 0.875rem !important; } /* Add bottom padding to avoid content being hidden by fixed buttons */ .is-mobile main.page-container-95 { padding-bottom: 6rem !important; } /* ============================================ Work Order Create/Edit - Mobile Optimizations ============================================ */ /* Page header */ .is-mobile header.bg-white h1 { font-size: 1.25rem !important; } .is-mobile header.bg-white .flex.justify-between { flex-direction: column !important; gap: 0.75rem !important; align-items: flex-start !important; } .is-mobile header.bg-white a { width: 100% !important; text-align: center !important; } /* Form container */ .is-mobile .bg-white.rounded-lg.border { padding: 1rem !important; border-radius: 0.5rem !important; } /* Form spacing */ .is-mobile form .space-y-8 > * + * { margin-top: 1.5rem !important; } /* Form grid layouts - stack vertically */ .is-mobile .grid.grid-cols-1.md\:grid-cols-2 { grid-template-columns: 1fr !important; gap: 1.5rem !important; } /* Asset dropdown */ .is-mobile #asset-dropdown { position: fixed !important; left: 0.75rem !important; right: 0.75rem !important; width: auto !important; max-height: 50vh !important; z-index: 1000 !important; } /* Form actions - sticky at bottom */ .is-mobile form > .flex.justify-end { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; background: white !important; border-top: 1px solid #e5e7eb !important; padding: 0.75rem !important; margin: 0 !important; z-index: 100 !important; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important; flex-direction: row !important; justify-content: stretch !important; gap: 0.5rem !important; } .is-mobile form > .flex.justify-end a, .is-mobile form > .flex.justify-end button { flex: 1 !important; margin: 0 !important; padding: 0.75rem 1rem !important; text-align: center !important; } /* Add padding to form to account for fixed buttons */ .is-mobile .bg-white.rounded-lg.border form { padding-bottom: 5rem !important; } /* ============================================ Dashboard - Mobile Optimizations ============================================ */ .is-mobile .dashboard-stats { grid-template-columns: 1fr !important; } .is-mobile .dashboard-stats .stat-card { padding: 1rem !important; } .is-mobile .dashboard-chart { height: 250px !important; } /* ============================================ Work Orders - Hide Status Cards on Mobile ============================================ */ /* Hide dashboard metric cards on mobile */ .is-mobile .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 { display: none !important; } /* Hide the statistics cards on work orders page specifically */ .is-mobile .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-6 { display: none !important; } /* Hide Recent Activity and Alerts section on mobile */ .is-mobile .grid.grid-cols-1.lg\:grid-cols-2.gap-6 { display: none !important; } /* Work Orders Table - Hide specific columns on mobile */ .is-mobile .wo-table-hide-mobile { display: none !important; } /* Ensure important columns stay visible */ .is-mobile th.wo-table-actions, .is-mobile th.wo-table-code, .is-mobile th.wo-table-due-date, .is-mobile th.wo-table-status { display: table-cell !important; } .is-mobile td.wo-table-actions, .is-mobile td.wo-table-code, .is-mobile td.wo-table-due-date, .is-mobile td.wo-table-status { display: table-cell !important; } /* PM Schedules Table - Hide specific columns on mobile */ .is-mobile .pm-table-hide-mobile { display: none !important; } /* Work Orders Page - Mobile Header Buttons */ .is-mobile .page-header-actions { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } /* Hide filters button on mobile */ .is-mobile #filters-btn, .is-mobile .page-header-actions button[id="filters-btn"] { display: none !important; } /* Make Create Work Order button full width and less tall on mobile */ .is-mobile .page-header-actions a[href="/workorders/new"], .is-mobile .page-header-actions .btn-primary { width: 100% !important; padding: 0.625rem 1rem !important; min-height: 44px !important; height: auto !important; font-size: 0.9375rem !important; } /* Work Orders List Header - Smaller font on mobile */ .is-mobile .card-header h3, .is-mobile .card-title { font-size: 0.875rem !important; } .is-mobile .card-header label { font-size: 0.75rem !important; } .is-mobile .card-header select, .is-mobile #wo-filter-dropdown { font-size: 0.8125rem !important; padding: 0.375rem 0.5rem !important; } /* Hide PM Schedules section on mobile (combined into Jobs list) */ .is-mobile #pm-schedules-container, .is-mobile .desktop-only { display: none !important; } /* Hide admin section in mobile menu */ .is-mobile #admin-section-mobile { display: none !important; } /* Ensure Quick Actions section is visible on mobile */ .is-mobile .mobile-nav-section { display: block !important; } .is-mobile .mobile-nav-section a { display: block !important; visibility: visible !important; } /* Work Orders Table - Mobile Actions Column */ .is-mobile .wo-table-actions .text-blue-600 { display: none !important; /* Hide Edit button */ } .is-mobile .wo-table-actions a[href*="/workorders/"] { display: inline-flex !important; align-items: center; justify-content: center; padding: 0.5rem 1rem !important; background-color: #10b981 !important; /* Green background */ color: white !important; border-radius: 0.375rem !important; font-weight: 500 !important; font-size: 0.875rem !important; text-decoration: none !important; min-width: 70px !important; } .is-mobile .wo-table-actions a[href*="/workorders/"]::before { content: "▶ " !important; /* Play/Start icon */ } .is-mobile .wo-table-actions a[href*="/workorders/"]:hover { background-color: #059669 !important; /* Darker green on hover */ } /* PM Schedules Table - Mobile Actions Column */ .is-mobile .pm-table-actions .text-blue-600, .is-mobile .pm-table-actions button:not(.pm-start-btn) { display: none !important; /* Hide Preview button */ } .is-mobile .pm-table-actions .pm-start-btn, .is-mobile .wo-table-actions .pm-start-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.5rem 1rem !important; background-color: #10b981 !important; /* Green background */ color: white !important; border-radius: 0.375rem !important; font-weight: 500 !important; font-size: 0.875rem !important; text-decoration: none !important; min-width: 70px !important; border: none !important; cursor: pointer !important; } .is-mobile .pm-table-actions .pm-start-btn::before, .is-mobile .wo-table-actions .pm-start-btn::before { content: "▶ " !important; /* Play/Start icon */ } .is-mobile .pm-table-actions .pm-start-btn:hover, .is-mobile .wo-table-actions .pm-start-btn:hover { background-color: #059669 !important; /* Darker green on hover */ } /* PM Schedules Table - Match padding with Work Orders */ .is-mobile #pm-schedules-container table td, .is-mobile #pm-schedules-container table th { padding: 1rem 1.5rem !important; } /* Ensure specific columns also get the padding */ .is-mobile td.pm-table-task, .is-mobile td.pm-table-due-date, .is-mobile td.pm-table-status, .is-mobile td.pm-table-actions, .is-mobile th.pm-table-task, .is-mobile th.pm-table-due-date, .is-mobile th.pm-table-status, .is-mobile th.pm-table-actions { padding: 1rem 1.5rem !important; } /* Dashboard mobile optimizations */ .is-mobile .page-container-95 { padding-top: 1rem !important; padding-bottom: 1rem !important; } /* Hide "Welcome back, User" message on mobile */ .is-mobile main p:first-of-type, .is-mobile .page-container-95 > p:first-child { display: none !important; } /* Hide the entire button container (View Sensors Dashboard and Refresh) on mobile */ .is-mobile .mb-6.flex.flex-col.sm\:flex-row .flex.gap-2 { display: none !important; } /* Also hide buttons individually as fallback */ .is-mobile a[href="/sensor-dashboard"], .is-mobile button[onclick*="sensors"], .is-mobile a[href*="sensors"], .is-mobile button[onclick*="refresh"], .is-mobile button[onclick*="refreshDashboard"], .is-mobile button:has(i.fa-sync-alt), .is-mobile button:has(.fa-sync-alt) { display: none !important; } /* Reduce spacing on dashboard sections */ .is-mobile .mb-6 { margin-bottom: 1rem !important; } .is-mobile .space-y-6 > * + * { margin-top: 1rem !important; } /* Legacy selectors for other pages */ .is-mobile .status-cards, .is-mobile .stats-grid, .is-mobile .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-4 { display: none !important; } /* Also hide any card grids at the top of pages */ .is-mobile .space-y-6 > .grid:first-child { display: none !important; } /* ============================================ Inventory - Mobile Optimizations ============================================ */ .is-mobile .inventory-filters { flex-direction: column !important; } .is-mobile .inventory-filters > * { width: 100% !important; margin-bottom: 0.5rem; } .is-mobile .inventory-item-image { max-width: 60px !important; max-height: 60px !important; } /* Hide inventory action buttons on mobile */ .is-mobile #inventory-action-buttons { display: none !important; } .is-mobile #filters-btn { display: none !important; } .is-mobile #add-item-btn { display: none !important; } /* ============================================ Modals - Full Screen on Mobile ============================================ */ .is-mobile .modal-content, .is-mobile .modal > div { width: 100% !important; max-width: 100% !important; height: 100vh !important; margin: 0 !important; border-radius: 0 !important; overflow-y: auto; } /* ============================================ Utility Classes ============================================ */ /* Hide on mobile */ .is-mobile .mobile-hide, .is-mobile .hidden-mobile { display: none !important; } /* Show only on mobile */ .mobile-only { display: none; } .is-mobile .mobile-only { display: block !important; } /* Text sizes */ .is-mobile .text-3xl { font-size: 1.5rem !important; } .is-mobile .text-2xl { font-size: 1.25rem !important; } .is-mobile .text-xl { font-size: 1.125rem !important; } /* Spacing utilities */ .is-mobile .gap-6 { gap: 1rem !important; } .is-mobile .gap-4 { gap: 0.75rem !important; } /* ============================================ Photos and Images ============================================ */ .is-mobile #photosGrid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; } .is-mobile .photo-preview { aspect-ratio: 1; border-radius: 8px; overflow: hidden; } .is-mobile .photo-preview img { width: 100%; height: 100%; object-fit: cover; } /* ============================================ Notes Section ============================================ */ .is-mobile #notesList { padding: 0.5rem !important; } .is-mobile .note-item { padding: 0.75rem !important; margin-bottom: 0.5rem !important; font-size: 0.875rem; } /* ============================================ Chips and Badges ============================================ */ .is-mobile .chip { font-size: 0.75rem !important; padding: 0.25rem 0.5rem !important; white-space: nowrap; } /* ============================================ Progress Bars ============================================ */ .is-mobile .progress-bar-container { height: 8px !important; margin: 0.5rem 0; } /* ============================================ Tablet-Specific Overrides ============================================ */ .is-tablet .grid { grid-template-columns: repeat(2, 1fr) !important; } .is-tablet .page-container-95 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .is-tablet button:not(.mobile-menu-btn) { width: auto !important; min-width: 120px; } /* ============================================ Print Styles (Disable mobile styles for print) ============================================ */ @media print { .is-mobile nav, .mobile-menu-btn, .is-mobile .flex.flex-col.gap-2.lg\:min-w-\[200px\] { display: none !important; } .is-mobile main { padding-top: 0 !important; padding-bottom: 0 !important; } .is-mobile .mobile-hide { display: block !important; } } /* ============================================ Animations - Reduced motion for performance ============================================ */ .is-mobile * { animation-duration: 0.15s !important; transition-duration: 0.15s !important; } /* ============================================ Touch Feedback ============================================ */ .is-mobile a:active, .is-mobile button:active { opacity: 0.7; transform: scale(0.98); } /* Remove hover effects on mobile (they stick) */ .is-mobile *:hover { background-color: inherit; } /* ============================================ Safe Area Insets (for notched devices) ============================================ */ @supports (padding: env(safe-area-inset-top)) { .is-mobile nav { padding-top: calc(0.75rem + env(safe-area-inset-top)); } .is-mobile main { padding-top: calc(5rem + env(safe-area-inset-top)) !important; } .is-mobile .flex.flex-col.gap-2.lg\:min-w-\[200px\] { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important; } } /* ============================================ Table Scroll Indicator ============================================ */ .table-scroll-indicator { text-align: center; padding: 0.5rem; background: #fef3c7; color: #92400e; font-size: 0.75rem; border-radius: 0.25rem; margin-top: 0.5rem; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ============================================ VIEWPORT-BASED FALLBACK Apply mobile styles on small screens regardless of User-Agent detection This ensures mobile experience even if server detection fails ============================================ */ @media (max-width: 768px) { /* Apply all mobile navigation styles */ html:not(.is-desktop) nav { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; background: white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); height: auto; padding: 0.75rem 1rem; } html:not(.is-desktop) .navbar-logo, html:not(.is-desktop) nav img[alt*="logo"] { max-width: 48px !important; max-height: 40px !important; height: auto !important; } html:not(.is-desktop) nav ul, html:not(.is-desktop) nav .nav-links, html:not(.is-desktop) nav .nav-content { display: none; } html:not(.is-desktop) main, html:not(.is-desktop) .page-container-95 { width: 100% !important; max-width: 100% !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; padding-top: 5rem !important; margin-top: 0 !important; } html:not(.is-desktop) .grid, html:not(.is-desktop) .grid-cols-2, html:not(.is-desktop) .grid-cols-3, html:not(.is-desktop) .grid-cols-4 { grid-template-columns: 1fr !important; gap: 0.75rem !important; } html:not(.is-desktop) table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } /* Touch-friendly row selection */ html:not(.is-desktop) tbody tr { cursor: pointer; -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1); transition: background-color 0.15s ease; } html:not(.is-desktop) tbody tr:active { background-color: rgba(59, 130, 246, 0.05); } /* Increase touch target size for clickable elements in tables */ html:not(.is-desktop) table a, html:not(.is-desktop) table button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; } html:not(.is-desktop) button:not(.mobile-menu-btn):not(.chip):not(.pm-start-btn) { min-height: 44px !important; padding: 0.75rem 1rem !important; width: 100%; } html:not(.is-desktop) input[type="text"], html:not(.is-desktop) input[type="email"], html:not(.is-desktop) input[type="password"], html:not(.is-desktop) input[type="number"], html:not(.is-desktop) textarea, html:not(.is-desktop) select { min-height: 44px !important; font-size: 16px !important; padding: 0.75rem !important; width: 100%; } /* Hide status cards on mobile */ html:not(.is-desktop) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 { display: none !important; } /* Hide the statistics cards on work orders page specifically */ html:not(.is-desktop) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-6 { display: none !important; } /* Hide Recent Activity and Alerts section on mobile */ html:not(.is-desktop) .grid.grid-cols-1.lg\:grid-cols-2.gap-6 { display: none !important; } /* Work Orders Table - Hide specific columns on mobile */ html:not(.is-desktop) .wo-table-hide-mobile { display: none !important; } /* PM Schedules Table - Hide specific columns on mobile */ html:not(.is-desktop) .pm-table-hide-mobile { display: none !important; } /* Work Orders Page - Mobile Header Buttons */ html:not(.is-desktop) .page-header-actions { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } /* Hide filters button on mobile */ html:not(.is-desktop) #filters-btn, html:not(.is-desktop) .page-header-actions button[id="filters-btn"] { display: none !important; } /* Make Create Work Order button full width and less tall on mobile */ html:not(.is-desktop) .page-header-actions a[href="/workorders/new"], html:not(.is-desktop) .page-header-actions .btn-primary { width: 100% !important; padding: 0.625rem 1rem !important; min-height: 44px !important; height: auto !important; font-size: 0.9375rem !important; } /* Work Orders List Header - Smaller font on mobile */ html:not(.is-desktop) .card-header h3, html:not(.is-desktop) .card-title { font-size: 0.875rem !important; } html:not(.is-desktop) .card-header label { font-size: 0.75rem !important; } html:not(.is-desktop) .card-header select, html:not(.is-desktop) #wo-filter-dropdown { font-size: 0.8125rem !important; padding: 0.375rem 0.5rem !important; } /* Hide PM Schedules section on mobile (combined into Jobs list) */ html:not(.is-desktop) #pm-schedules-container, html:not(.is-desktop) .desktop-only { display: none !important; } /* Hide admin section in mobile menu */ html:not(.is-desktop) #admin-section-mobile { display: none !important; } /* Ensure Quick Actions section is visible on mobile */ html:not(.is-desktop) .mobile-nav-section { display: block !important; } html:not(.is-desktop) .mobile-nav-section a { display: block !important; visibility: visible !important; } /* Work Orders Table - Mobile Actions Column */ html:not(.is-desktop) .wo-table-actions .text-blue-600 { display: none !important; /* Hide Edit button */ } html:not(.is-desktop) .wo-table-actions a[href*="/workorders/"] { display: inline-flex !important; align-items: center; justify-content: center; padding: 0.5rem 1rem !important; background-color: #10b981 !important; /* Green background */ color: white !important; border-radius: 0.375rem !important; font-weight: 500 !important; font-size: 0.875rem !important; text-decoration: none !important; min-width: 70px !important; } html:not(.is-desktop) .wo-table-actions a[href*="/workorders/"]::before { content: "▶ " !important; /* Play/Start icon */ } html:not(.is-desktop) .wo-table-actions a[href*="/workorders/"]:hover { background-color: #059669 !important; /* Darker green on hover */ } /* PM Schedules Table - Mobile Actions Column */ html:not(.is-desktop) .pm-table-actions .text-blue-600, html:not(.is-desktop) .pm-table-actions button:not(.pm-start-btn) { display: none !important; /* Hide Preview button */ } html:not(.is-desktop) .pm-table-actions .pm-start-btn, html:not(.is-desktop) .wo-table-actions .pm-start-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.5rem 1rem !important; background-color: #10b981 !important; /* Green background */ color: white !important; border-radius: 0.375rem !important; font-weight: 500 !important; font-size: 0.875rem !important; text-decoration: none !important; min-width: 70px !important; border: none !important; cursor: pointer !important; } html:not(.is-desktop) .pm-table-actions .pm-start-btn::before, html:not(.is-desktop) .wo-table-actions .pm-start-btn::before { content: "▶ " !important; /* Play/Start icon */ } html:not(.is-desktop) .pm-table-actions .pm-start-btn:hover, html:not(.is-desktop) .wo-table-actions .pm-start-btn:hover { background-color: #059669 !important; /* Darker green on hover */ } /* PM Schedules Table - Match padding with Work Orders */ html:not(.is-desktop) #pm-schedules-container table td, html:not(.is-desktop) #pm-schedules-container table th { padding: 1rem 1.5rem !important; } /* Ensure specific columns also get the padding */ html:not(.is-desktop) td.pm-table-task, html:not(.is-desktop) td.pm-table-due-date, html:not(.is-desktop) td.pm-table-status, html:not(.is-desktop) td.pm-table-actions, html:not(.is-desktop) th.pm-table-task, html:not(.is-desktop) th.pm-table-due-date, html:not(.is-desktop) th.pm-table-status, html:not(.is-desktop) th.pm-table-actions { padding: 1rem 1.5rem !important; } /* Dashboard mobile optimizations */ html:not(.is-desktop) .page-container-95 { padding-top: 1rem !important; padding-bottom: 1rem !important; } /* Hide "Welcome back, User" message on mobile */ html:not(.is-desktop) main p:first-of-type, html:not(.is-desktop) .page-container-95 > p:first-child { display: none !important; } /* Hide the entire button container (View Sensors Dashboard and Refresh) on mobile */ html:not(.is-desktop) .mb-6.flex.flex-col.sm\:flex-row .flex.gap-2 { display: none !important; } /* Also hide buttons individually as fallback */ html:not(.is-desktop) a[href="/sensor-dashboard"], html:not(.is-desktop) button[onclick*="sensors"], html:not(.is-desktop) a[href*="sensors"], html:not(.is-desktop) button[onclick*="refresh"], html:not(.is-desktop) button[onclick*="refreshDashboard"], html:not(.is-desktop) button:has(i.fa-sync-alt), html:not(.is-desktop) button:has(.fa-sync-alt) { display: none !important; } /* Reduce spacing on dashboard sections */ html:not(.is-desktop) .mb-6 { margin-bottom: 1rem !important; } html:not(.is-desktop) .space-y-6 > * + * { margin-top: 1rem !important; } html:not(.is-desktop) .status-cards, html:not(.is-desktop) .stats-grid, html:not(.is-desktop) .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-4 { display: none !important; } html:not(.is-desktop) .space-y-6 > .grid:first-child { display: none !important; } /* Inventory - Hide action buttons on mobile */ html:not(.is-desktop) #inventory-action-buttons { display: none !important; } html:not(.is-desktop) #filters-btn { display: none !important; } html:not(.is-desktop) #add-item-btn { display: none !important; } /* Work Order Create/Edit - Mobile Optimizations */ html:not(.is-desktop) header.bg-white h1 { font-size: 1.25rem !important; } html:not(.is-desktop) header.bg-white .flex.justify-between { flex-direction: column !important; gap: 0.75rem !important; align-items: flex-start !important; } html:not(.is-desktop) header.bg-white a { width: 100% !important; text-align: center !important; } html:not(.is-desktop) .bg-white.rounded-lg.border { padding: 1rem !important; border-radius: 0.5rem !important; } html:not(.is-desktop) form .space-y-8 > * + * { margin-top: 1.5rem !important; } html:not(.is-desktop) .grid.grid-cols-1.md\:grid-cols-2 { grid-template-columns: 1fr !important; gap: 1.5rem !important; } html:not(.is-desktop) #asset-dropdown { position: fixed !important; left: 0.75rem !important; right: 0.75rem !important; width: auto !important; max-height: 50vh !important; z-index: 1000 !important; } html:not(.is-desktop) form > .flex.justify-end { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; background: white !important; border-top: 1px solid #e5e7eb !important; padding: 0.75rem !important; margin: 0 !important; z-index: 100 !important; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important; flex-direction: row !important; justify-content: stretch !important; gap: 0.5rem !important; } html:not(.is-desktop) form > .flex.justify-end a, html:not(.is-desktop) form > .flex.justify-end button { flex: 1 !important; margin: 0 !important; padding: 0.75rem 1rem !important; text-align: center !important; } html:not(.is-desktop) .bg-white.rounded-lg.border form { padding-bottom: 5rem !important; } } /* ============================================ Logo - Hide full text on mobile, show abbreviated "mA.I" ============================================ */ /* Hide "ntenance" part of logo on mobile viewports */ @media (max-width: 768px) { .logo-full-text { display: none !important; } } /* Also hide for mobile devices detected by server */ .is-mobile .logo-full-text { display: none !important; } /* PM View Button - Blue styling for completed PMs */ .is-mobile .pm-table-actions .pm-view-btn, .is-mobile .wo-table-actions .pm-view-btn { display: inline-flex !important; align-items: center !important; padding: 0.5rem 1rem !important; background-color: #3b82f6 !important; /* Blue background */ color: white !important; border-radius: 0.375rem !important; font-size: 0.875rem !important; font-weight: 500 !important; text-decoration: none !important; border: none !important; cursor: pointer !important; transition: background-color 0.2s ease !important; } .is-mobile .pm-table-actions .pm-view-btn::before, .is-mobile .wo-table-actions .pm-view-btn::before { content: "👁 " !important; /* Eye icon */ } .is-mobile .pm-table-actions .pm-view-btn:hover, .is-mobile .wo-table-actions .pm-view-btn:hover { background-color: #2563eb !important; /* Darker blue on hover */ } /* Desktop/non-mobile view button styling */ html:not(.is-desktop) .pm-table-actions .pm-view-btn, html:not(.is-desktop) .wo-table-actions .pm-view-btn { display: inline-flex !important; align-items: center !important; padding: 0.5rem 1rem !important; background-color: #3b82f6 !important; /* Blue background */ color: white !important; border-radius: 0.375rem !important; font-size: 0.875rem !important; font-weight: 500 !important; text-decoration: none !important; border: none !important; cursor: pointer !important; transition: background-color 0.2s ease !important; } html:not(.is-desktop) .pm-table-actions .pm-view-btn::before, html:not(.is-desktop) .wo-table-actions .pm-view-btn::before { content: "👁 " !important; /* Eye icon */ } html:not(.is-desktop) .pm-table-actions .pm-view-btn:hover, html:not(.is-desktop) .wo-table-actions .pm-view-btn:hover { background-color: #2563eb !important; /* Darker blue on hover */ } /* Mobile Logo - Constrain width to show only mA.I */ .is-mobile #nav-logo, html:not(.is-desktop) #nav-logo { max-width: 50px !important; overflow: hidden !important; white-space: nowrap !important; } .is-mobile #nav-logo a, html:not(.is-desktop) #nav-logo a { max-width: 50px !important; overflow: hidden !important; }