/** * Mobile-Only Responsive CSS for GRO Ayurveda CRM * * This file provides comprehensive mobile responsiveness * following mobile-first design principles and modern CRM UX best practices. * * All media queries use: @media only screen and (max-width: 768px) * * IMPORTANT: This file ONLY contains mobile styles (max-width: 768px). * Desktop and tablet styles are handled by existing CSS files. * * Breakpoint: * - Mobile: max-width: 768px (all styles in this file) * - Desktop/Tablet: 769px+ (handled by existing CSS, no overrides here) * * @version 1.0.0 * @author GRO Ayurveda CRM Team */ /* ============================================ CSS VARIABLES & BASE SETUP ============================================ */ .desktop-tab { display: block !important; } .mobile-tab { display: none!important; } :root { --mobile-touch-target: 35px; /* Minimum touch target size (WCAG 2.1) */ --mobile-spacing-xs: 0.5rem; --mobile-spacing-sm: 0.75rem; --mobile-spacing-md: 1rem; --mobile-spacing-lg: 1.5rem; --mobile-spacing-xl: 2rem; --mobile-border-radius: 8px; --mobile-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --mobile-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ MOBILE-FIRST BASE STYLES (< 576px) ============================================ */ /* Viewport and Base Typography - Only affect mobile */ @media only screen and (max-width: 768px) { html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 14px; /* Base font size for mobile */ } body { font-size: 0.875rem; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } /* Login Page Specific Overrides - Prevent mobile.css from interfering */ @media only screen and (max-width: 768px) { .login-page .app-content { padding: 0 !important; margin-left: 0 !important; } .login-page .main-menu, .login-page .header-navbar:not(.login-header) { display: none !important; } } /* ============================================ HEADER & NAVBAR RESPONSIVENESS ============================================ */ /* Mobile Header Adjustments - Only on mobile/tablet */ @media only screen and (max-width: 768px) { /* Clean Header Layout - Reference Design Style - Smaller height on mobile */ .header-navbar { padding: 0.5rem 1rem !important; min-height: 50px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; } .header-navbar.navbar.container-xxl { padding-left: 1rem !important; padding-right: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: 100% !important; } .header-navbar .navbar-container { padding: 0 !important; flex-wrap: nowrap !important; margin-right: 0 !important; padding-right: 1rem !important; width: 100% !important; max-width: 100% !important; align-items: center !important; } .header-navbar .navbar-container .content { margin-right: 0 !important; padding-right: 0 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } /* Mobile Header Left Section - Hamburger + Title */ .bookmark-wrapper { display: flex !important; align-items: center !important; flex: 0 0 auto !important; margin-right: 0.5rem !important; } .bookmark-wrapper .bookmark-wrapper.d-md-none.d-lg-none { display: flex !important; align-items: center !important; margin-right: 0 !important; } .bookmark-wrapper .bookmark-wrapper.d-md-none.d-lg-none b { font-size: 1rem !important; font-weight: 600 !important; margin-left: 0.5rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 150px !important; } .navbar-nav .nav-item.mobile-menu { margin-right: 0.5rem !important; } .navbar-nav .nav-item.mobile-menu .nav-link { padding: 0.5rem !important; min-width: 40px !important; min-height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Mobile Header Right Section - Icons */ .navbar-nav.align-items-center.ms-auto { margin-right: 0 !important; padding-right: 0 !important; margin-left: auto !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; flex-shrink: 0 !important; } .navbar-nav .nav-item { margin-right: 0 !important; margin-left: 0.25rem !important; flex-shrink: 0 !important; } .navbar-nav .nav-item:last-child { margin-right: 0 !important; padding-right: 0 !important; } /* Force show dark mode icon on mobile - In header, NOT in search bar */ .navbar-nav.align-items-center.ms-auto li.nav-item.d-none.d-lg-block:has(.nav-link-style):not(:has(.doctor-search-container)) { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: auto !important; margin: 0 0.5rem 0 0 !important; padding: 0 !important; z-index: 1 !important; } /* Remove any extra spacing from right side */ .header-navbar .navbar-container > *:last-child { margin-right: 0 !important; padding-right: 0 !important; } /* Hide desktop page title on mobile (but dark mode icon is already shown by rule above) */ /* Show dark mode icon on mobile - beside user icon */ .navbar-nav .nav-item.d-none.d-lg-block:has(.nav-link-style), .navbar-nav.align-items-center.ms-auto .nav-item.d-none.d-lg-block:has(.nav-link-style), .navbar-nav li.nav-item.d-none.d-lg-block:has(.nav-link-style), /* Fallback for browsers without :has() support */ .navbar-nav.align-items-center.ms-auto li.nav-item.d-none.d-lg-block:has(a.nav-link.nav-link-style), li.nav-item.d-none.d-lg-block a.nav-link.nav-link-style { display: block !important; margin-right: 0.5rem !important; visibility: visible !important; opacity: 1 !important; } /* Ensure the parent li is visible */ .navbar-nav.align-items-center.ms-auto li.nav-item.d-none.d-lg-block:has(a.nav-link.nav-link-style) { display: block !important; } .nav-link-style { padding: 0.5rem !important; min-width: 40px !important; min-height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; } /* Ensure the icon inside is visible */ .nav-link-style i, .nav-link-style .ficon { display: inline-block !important; visibility: visible !important; opacity: 1 !important; } /* User dropdown and icons styling */ .dropdown-user .nav-link { padding: 0.25rem !important; } .dropdown-user .avatar { width: 36px !important; height: 36px !important; } .nav-link-style { padding: 0.5rem !important; min-width: 40px !important; min-height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Fix container-xxl padding on mobile */ .header-navbar.container-xxl { padding-left: 1rem !important; padding-right: 0 !important; } /* Ensure no extra margin on right side */ .header-navbar * { box-sizing: border-box; } .header-navbar .navbar-container .navbar-nav:last-child { margin-right: 0 !important; padding-right: 0 !important; } } /* Mobile Menu Toggle - Only on mobile/tablet */ @media only screen and (max-width: 768px) { .navbar-nav .nav-item.mobile-menu { margin-right: 0.5rem; } .navbar-nav .nav-item.mobile-menu .nav-link { padding: 0.5rem; min-width: var(--mobile-touch-target); min-height: var(--mobile-touch-target); display: flex; align-items: center; justify-content: center; } /* Page Title in Mobile Header */ .bookmark-wrapper .nav-link.bookmark-star { font-size: 0.875rem; padding: 0.5rem 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } /* Doctor Search Bar - Mobile - Positioned Below Header (Reference Design Style) */ /* Override Bootstrap's d-none d-lg-block - Show ONLY search container, NOT dark mode icon */ .navbar-nav .nav-item.d-none.d-lg-block:has(.doctor-search-container), .navbar-nav li.d-none.d-lg-block:has(.doctor-search-container), .navbar-nav.align-items-center.ms-auto .nav-item.d-none.d-lg-block:has(.doctor-search-container), li.nav-item.d-none.d-lg-block:has(.doctor-search-container) { display: block !important; position: fixed !important; top: 50px !important; /* Updated to match reduced header height */ left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; z-index: 1030 !important; list-style: none !important; visibility: visible !important; opacity: 1 !important; } /* Hide other d-none d-lg-block items that don't have search, but keep dark mode icon */ .navbar-nav .nav-item.d-none.d-lg-block:not(:has(.doctor-search-container)):not(:has(.nav-link-style)) { display: none !important; } /* Show search bar as fixed element below header on mobile - Reduced height */ .doctor-search-container { position: relative !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding:0.3rem 1rem 0.5rem 1rem !important; background: #fff !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important; z-index: 1030 !important; display: block !important; visibility: visible !important; opacity: 1 !important; border-bottom: 1px solid #e8e8e8 !important; } /* Search wrapper - Reduced height on mobile */ .doctor-search-wrapper { display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; background: #fff !important; border: 2px solid #e0e0e0 !important; border-radius: 10px !important; padding: 0.175rem 0.75rem !important; min-height: 30px !important; transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; } .doctor-search-wrapper:focus-within { border-color: #037345 !important; box-shadow: 0 4px 12px rgba(3, 115, 69, 0.15) !important; transform: translateY(-1px) !important; } .doctor-search-icon { display: flex !important; visibility: visible !important; opacity: 1 !important; color: #037345 !important; font-size: 1.1rem !important; margin-right: 0.5rem !important; align-items: center !important; flex-shrink: 0 !important; } .doctor-search-input { display: block !important; visibility: visible !important; opacity: 1 !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 0.175rem 0.5rem !important; font-size: 0.9rem !important; color: #5e5873 !important; background: transparent !important; flex: 1 !important; min-width: 0 !important; line-height: 1.4 !important; } .doctor-search-input::placeholder { color: #b4b7bd !important; font-weight: 400 !important; } /* Close icon - Hidden by default, only show after typing */ .doctor-search-clear { cursor: pointer !important; color: #b4b7bd !important; font-size: 1rem !important; padding: 0.25rem !important; margin-left: 0.5rem !important; display: none !important; /* Hidden by default on mobile */ align-items: center !important; justify-content: center !important; transition: color 0.2s ease !important; flex-shrink: 0 !important; min-width: 32px !important; min-height: 32px !important; } /* Show close icon when input has value (handled by JS, but ensure it can be shown) */ .doctor-search-wrapper:has(.doctor-search-input:not(:placeholder-shown)) .doctor-search-clear, .doctor-search-wrapper:has(.doctor-search-input[value]:not([value=""])) .doctor-search-clear { display: flex !important; } .doctor-search-clear:hover { color: #ea5455 !important; } /* Adjust content padding to account for fixed header + search bar (reduced heights) */ .app-content { padding-top: calc(50px + 55px) !important; /* Header height (50px) + Search bar height (55px) */ } .doctor-search-dropdown { position: fixed !important; top: calc(50px + 55px) !important; /* Updated to match reduced header + search bar heights */ left: 1rem !important; right: 1rem !important; width: calc(100% - 2rem) !important; max-height: calc(100vh - 180px) !important; border-radius: 10px !important; margin-top: 0.5rem !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; z-index: 1031 !important; background: #fff !important; } .doctor-search-dropdown li a { padding: 1rem 1rem !important; min-height: 48px !important; } /* User Menu - Mobile */ .navbar-nav .dropdown-user { margin-left: 0.5rem; } .dropdown-user .nav-link { padding: 0.25rem 0.5rem !important; } .dropdown-user .user-nav { display: none !important; /* Hide text on mobile, show only avatar */ } .dropdown-user .avatar { width: 36px !important; height: 36px !important; } .dropdown-user .avatar img { width: 36px !important; height: 36px !important; } /* Dropdown Menus - Mobile */ .dropdown-menu { min-width: 200px; max-width: calc(100vw - 2rem); margin-top: 0.5rem; border-radius: var(--mobile-border-radius); box-shadow: var(--mobile-shadow); } .dropdown-item { padding: 0.75rem 1rem !important; min-height: var(--mobile-touch-target); font-size: 0.875rem; display: flex; align-items: center; } .dropdown-item i { margin-right: 0.75rem; width: 20px; text-align: center; } } /* ============================================ SIDEBAR NAVIGATION - MOBILE ============================================ */ /* Sidebar Overlay on Mobile - Only on mobile/tablet */ @media only screen and (max-width: 768px) { .main-menu { position: fixed !important; top: 0; left: -260px; /* Hidden by default */ width: 260px !important; height: 100vh; z-index: 1050; transition: left 0.3s ease; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); } /* Content Overlay when Sidebar is Open */ .content-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1040; display: none; } .content-overlay.show { display: block; } /* Sidebar Brand/Logo */ .main-menu .navbar-brand { padding: 1rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .main-menu .navbar-brand img { max-height: 40px; width: auto; } /* Navigation Links - Mobile */ .main-menu .navigation li a { padding: 0.875rem 1rem !important; font-size: 0.875rem; min-height: var(--mobile-touch-target); display: flex; align-items: center; } .main-menu .navigation li a i { margin-right: 0.75rem; width: 20px; text-align: center; font-size: 1rem; } /* ============================================ MAIN CONTENT AREA ============================================ */ .app-content { padding: calc(60px + 70px + 0.5rem) 0.75rem 1rem !important; /* Account for fixed header (60px) + search bar (70px) */ width: 100% !important; margin-left: 0 !important; } .content-wrapper { padding: 0 !important; } .content-body { padding: 0 !important; } /* Page Headers */ .content-header { margin-bottom: 1rem; padding: 0 !important; } .content-header h1, .content-header h2, .content-header h3, .content-header h4 { font-size: 1.25rem; margin-bottom: 0.5rem; } } /* ============================================ CARDS & STATISTICS CARDS ============================================ */ /* Cards - Mobile Only */ @media only screen and (max-width: 768px) { .card { margin-bottom: 1rem; border-radius: var(--mobile-border-radius); box-shadow: var(--mobile-shadow); overflow: hidden; } .card-header { padding: 0.875rem 1rem !important; font-size: 0.875rem; border-bottom: 1px solid #e0e0e0; } .card-body { padding: 1rem !important; } /* Statistics Cards - Mobile Stack */ .stat-card { margin-bottom: 0.75rem; width: 100% !important; } .stat-card .card-header { padding: 1rem !important; min-height: auto !important; } .stat-card .stat-icon { width: 40px !important; height: 40px !important; font-size: 1.125rem !important; right: 1rem !important; } .stat-card .stat-label { font-size: 0.75rem !important; margin-bottom: 0.375rem !important; } .stat-card .stat-value { font-size: 1.5rem !important; line-height: 1.2 !important; } .stat-card .stat-subtext { font-size: 0.7rem !important; } /* Analysis Cards */ .analysis-card { margin-bottom: 1rem; } .analysis-card .card-body { padding: 1rem !important; } /* Chart Cards */ .chart-card { margin-bottom: 1rem; } .chart-card .card-header { padding: 0.875rem 1rem !important; font-size: 0.875rem; } .chart-card .card-body { padding: 1rem !important; min-height: 250px !important; } .chart-card .card-body canvas { max-height: 250px !important; } /* Filter Form on Mobile */ .form-vertical .row { margin: 0 !important; } .form-vertical .col-md-4, .form-vertical .col-md-3 { margin-bottom: 1rem !important; padding: 0 0.5rem !important; } .form-vertical .form-group { margin-bottom: 0.75rem !important; } .form-vertical label { font-size: 0.875rem !important; margin-bottom: 0.5rem !important; font-weight: 500 !important; } /* Search and Reset buttons - In one line on mobile */ .form-vertical .col-md-3 .form-group { display: flex !important; gap: 0.5rem !important; flex-wrap: nowrap !important; } #btn_search, #btn_reset { flex: 1 !important; width: auto !important; margin-bottom: 0.5rem !important; margin-right: 0 !important; min-height: var(--mobile-touch-target) !important; } /* Card body padding adjustments */ .card-body.border-bottom { padding: 1rem !important; } /* Analysis Tables */ .analysis-table { font-size: 0.75rem; } .analysis-table thead th { padding: 0.625rem 0.5rem !important; font-size: 0.7rem; } .analysis-table tbody td { padding: 0.625rem 0.5rem !important; font-size: 0.75rem; } /* ============================================ FORMS & INPUTS ============================================ */ .form-group { margin-bottom: 1rem; } .form-label { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; display: block; } .form-control, .form-select, .select2-container .select2-selection--single { font-size: 0.875rem; padding: 0.625rem 0.75rem; min-height: var(--mobile-touch-target); border-radius: var(--mobile-border-radius); border: 1px solid #d0d7de; } .form-control:focus, .form-select:focus { border-color: #037345; box-shadow: 0 0 0 0.2rem rgba(3, 115, 69, 0.15); } /* Input Groups */ .input-group { flex-wrap: wrap; } .input-group-text { padding: 0.625rem 0.75rem; font-size: 0.875rem; min-height: var(--mobile-touch-target); } /* Select2 Dropdowns */ .select2-container { width: 100% !important; } .select2-dropdown { border-radius: var(--mobile-border-radius); box-shadow: var(--mobile-shadow); } .select2-results__option { padding: 0.75rem 1rem !important; min-height: var(--mobile-touch-target); font-size: 0.875rem; } /* Date Pickers */ .flatpickr-input { font-size: 0.875rem !important; padding: 0.625rem 0.75rem !important; min-height: var(--mobile-touch-target); } /* Textareas */ textarea.form-control { min-height: 100px; resize: vertical; } /* ============================================ BUTTONS & TOUCH TARGETS ============================================ */ .btn { font-size: 0.875rem; padding: 0.625rem 1rem; min-height: var(--mobile-touch-target); min-width: var(--mobile-touch-target); border-radius: var(--mobile-border-radius); font-weight: 500; transition: var(--mobile-transition); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } .btn-sm { font-size: 0.8125rem; padding: 0.5rem 0.75rem; min-height: 36px; } .btn-lg { font-size: 1rem; padding: 0.75rem 1.5rem; min-height: 48px; } .btn i { margin-right: 0.375rem; } .btn-icon { min-width: var(--mobile-touch-target); padding: 0.5rem; } /* Button Groups */ .btn-group { flex-wrap: wrap; gap: 0.5rem; } .btn-group .btn { margin: 0.25rem; } /* ============================================ TABS & NAVIGATION TABS ============================================ */ .nav-tabs { border-bottom: 2px solid #e0e0e0; flex-wrap: wrap; margin-bottom: 1rem; } .nav-tabs .nav-link { padding: 0.75rem 1rem !important; font-size: 0.875rem; min-height: var(--mobile-touch-target); border-radius: var(--mobile-border-radius) var(--mobile-border-radius) 0 0; margin-right: 0.5rem; margin-bottom: 0.5rem; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; } .nav-tabs .nav-link i { margin-right: 0.5rem; } .nav-tabs .nav-link.active { background: #037345; color: #fff; border-color: #037345; } .tab-content { padding: 1rem 0; } .tab-pane { padding: 0; } /* ============================================ MODALS & DIALOGS ============================================ */ .modal { padding: 0.5rem !important; } .modal-dialog { margin: 0.5rem auto; max-width: calc(100% - 1rem); } .modal-content { border-radius: var(--mobile-border-radius); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .modal-header { padding: 1rem !important; border-bottom: 1px solid #e0e0e0; } .modal-title { font-size: 1.125rem; font-weight: 600; } .modal-body { padding: 1rem !important; max-height: calc(100vh - 200px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-footer { padding: 0.75rem 1rem !important; border-top: 1px solid #e0e0e0; flex-wrap: wrap; gap: 0.5rem; } .modal-footer .btn { flex: 1; min-width: calc(50% - 0.25rem); } /* ============================================ BADGES & LABELS ============================================ */ .badge { font-size: 0.75rem; padding: 0.375rem 0.625rem; border-radius: 4px; font-weight: 500; } .badge-lg { font-size: 0.875rem; padding: 0.5rem 0.75rem; } /* ============================================ SKELETON LOADERS - MOBILE ============================================ */ .skeleton-card { padding: 1rem; margin-bottom: 1rem; } .skeleton-text { height: 12px; margin-bottom: 0.5rem; } .skeleton-text-lg { height: 20px; margin-bottom: 0.5rem; } .skeleton-icon { width: 40px; height: 40px; } .skeleton-chart { height: 200px; margin: 1rem 0; } .skeleton-table-row { height: 40px; margin-bottom: 0.5rem; } /* ============================================ DOCTOR PROFILE - MOBILE ============================================ */ /* Doctor Profile Card */ .pop-dr { padding: 1rem; margin-bottom: 1rem; } .pop-dr .avatar { width: 80px; height: 80px; margin-bottom: 0.75rem; } .pop-dr .user-info h5 { font-size: 1.125rem; margin-bottom: 0.5rem; } .pop-dr .badge { font-size: 0.875rem; padding: 0.5rem 0.75rem; } } /* ============================================ LANDSCAPE ORIENTATION ADJUSTMENTS ============================================ */ @media only screen and (max-width: 768px) and (orientation: landscape) { /* Reduce header height in landscape */ .header-navbar { min-height: 48px !important; } .app-content { padding-top: calc(48px + 0.5rem) !important; } /* Reduce modal max height */ .modal-body { max-height: calc(100vh - 150px); } /* Compact cards in landscape */ .stat-card .card-header { padding: 0.75rem !important; min-height: 80px !important; } } /* ============================================ PRINT STYLES ============================================ */ @media print { .header-navbar, .main-menu, .doctor-search-container, .btn, .dropdown-menu { display: none !important; } .app-content { margin-left: 0 !important; padding: 0 !important; } .card { page-break-inside: avoid; box-shadow: none; border: 1px solid #ddd; } } /* ============================================ ACCESSIBILITY ENHANCEMENTS (All Devices - Safe) ============================================ */ /* Focus States for Keyboard Navigation - Safe for all devices */ *:focus-visible { outline: 2px solid #037345; outline-offset: 2px; border-radius: 2px; } /* High Contrast Mode Support - Safe for all devices */ @media (prefers-contrast: high) { .card { border: 2px solid #000; } .btn { border: 2px solid currentColor; } } /* Reduced Motion Support - Safe for all devices */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================ DARK MODE SUPPORT (if applicable) ============================================ */ @media (prefers-color-scheme: dark) { /* Add dark mode overrides if needed */ /* This section can be expanded based on your dark mode implementation */ } /* ============================================ SPECIFIC COMPONENT FIXES - MOBILE ONLY ============================================ */ /* All component fixes wrapped in media query to only affect mobile/tablet */ @media only screen and (max-width: 768px) { /* Fix for Bootstrap Grid on Mobile */ .row { margin-left: -0.5rem; margin-right: -0.5rem; } .row > * { padding-left: 0.5rem; padding-right: 0.5rem; } /* Fix for Select2 on Mobile */ .select2-container--default .select2-selection--single { height: var(--mobile-touch-target) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: var(--mobile-touch-target) !important; padding-left: 0.75rem; padding-right: 2rem; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--mobile-touch-target) !important; right: 0.5rem; } /* Fix for Flatpickr on Mobile */ .flatpickr-calendar { width: 100%; max-width: 100%; } /* Fix for DataTables on Mobile */ .dataTables_wrapper .dataTables_info { font-size: 0.8125rem; margin-bottom: 0.5rem; } .dataTables_wrapper .dataTables_paginate { font-size: 0.8125rem; } /* Fix for Chart.js Containers */ .chart-container { position: relative; height: 250px; width: 100%; } html body .app-content { padding: calc(50px + 45px + 0.5rem) 0.75rem 1rem !important; } /* ============================================ TAB HEADER - MOBILE OPTIMIZATION ============================================ */ /* Top Header Tabs Container - Mobile */ .top-header { margin: 1rem 0 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; background: #fff !important; border: 1px solid #e0e0e0 !important; } .top-header .row { margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } .top-header .row > div { padding: 0 !important; width: 100% !important; margin: 0 !important; flex: 1 !important; } /* Individual Tab Links - Mobile */ .top-header a.nav-link { display: block !important; width: 100% !important; padding: 1rem 1.25rem !important; min-height: 56px !important; text-align: center !important; font-size: 0.9375rem !important; font-weight: 500 !important; color: #5e5873 !important; background: #fff !important; border: none !important; border-bottom: 1px solid #f0f0f0 !important; transition: all 0.3s ease !important; position: relative !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } /* Remove border from last tab */ .top-header .row > div:last-child a.nav-link { border-bottom: none !important; } /* Active Tab - Mobile */ .top-header a.nav-link.active { background: #037345 !important; color: #fff !important; font-weight: 600 !important; border-bottom: none !important; box-shadow: 0 2px 8px rgba(3, 115, 69, 0.2) !important; } /* Active tab indicator - subtle left border accent */ .top-header a.nav-link.active::before { content: '' !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 4px !important; background: #fff !important; } /* Tab Hover/Touch Effect - Mobile */ .top-header a.nav-link:active { background: #f8f9fa !important; transform: scale(0.98) !important; } .top-header a.nav-link.active:active { background: #025a35 !important; } /* Bold count numbers in tabs */ .top-header a.nav-link b { font-weight: 700 !important; font-size: 1rem !important; margin-left: 0.25rem !important; } .top-header a.nav-link.active b { color: #fff !important; } /* Tab spacing improvements */ .top-header a.nav-link { line-height: 1.5 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; } /* ============================================ ADD BUTTON - MOBILE OPTIMIZATION ============================================ */ /* Card Datatable Container - Mobile */ .card-datatable { position: relative !important; padding-top: 0 !important; } /* ============================================ ORDERS ADD/EDIT FORM - MOBILE OPTIMIZATION ============================================ */ /* Form Layout - Stack columns on mobile */ .row .col-7, .row .col-5 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-bottom: 1.5rem !important; } /* Card Body - Better Mobile Spacing */ .card-body.py-1.my-0 { padding: 1.25rem 1rem !important; } /* Form Row Spacing - Mobile */ .row.mt-1, .row { margin-left: -0.5rem !important; margin-right: -0.5rem !important; } .row > [class*="col-"] { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } /* All form columns stack on mobile */ .col-12.col-sm-6, .col-md-12, .col-md-6, .col-md-4, .col-md-2, .col-md-1 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-bottom: 1rem !important; } #kpi_cards .col-6 { width: 50% !important; max-width: 100% !important; flex: 0 0 50% !important; margin-bottom: 0rem !important; } /* Form Labels - Enhanced Mobile UX */ label { font-size: 0.875rem !important; font-weight: 600 !important; margin-bottom: 0.5rem !important; display: block !important; line-height: 1.4 !important; } /* Required Field Indicator - Mobile */ label .required { color: #dc3545 !important; font-size: 0.875rem !important; margin-left: 0.25rem !important; font-weight: 700 !important; } /* Form Groups - Better Spacing */ .form-group { margin-bottom: 0.25rem !important; } /* Input Fields - Enhanced Mobile UX */ .form-control, .form-select, .form-control.readonly { width: 100% !important; min-height: 44px !important; padding: 0.75rem 1rem !important; font-size: 0.9375rem !important; border: 1.5px solid #d0d7de; border-radius: 10px !important; background: #fff !important; transition: all 0.2s ease !important; -webkit-appearance: none !important; appearance: none !important; } .form-control:focus, .form-select:focus { border-color: #037345 !important; box-shadow: 0 0 0 3px rgba(3, 115, 69, 0.1) !important; outline: none !important; } /* Read-only Fields - Visual Distinction */ .form-control.readonly, input[readonly] { background-color: #f8f9fa !important; border-color: #e9ecef !important; color: #6c757d !important; cursor: not-allowed !important; } /* Select2 Dropdowns - Enhanced Mobile */ .select2-container { width: 100% !important; } .select2-container--default .select2-selection--single { height: 44px !important; border: 1.5px solid #d0d7de !important; border-radius: 10px !important; padding: 0 !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px !important; padding-left: 1rem !important; padding-right: 2rem !important; font-size: 0.9375rem !important; color: #495057 !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; right: 0.75rem !important; } .select2-container--default.select2-container--focus .select2-selection--single { border-color: #037345 !important; box-shadow: 0 0 0 3px rgba(3, 115, 69, 0.1) !important; } /* Radio Buttons - Enhanced Mobile UX */ .demo-inline-spacing { display: flex !important; flex-direction: row !important; gap: 1rem !important; background: #f8f9fa !important; padding: 0.75rem !important; border-radius: 10px !important; margin-bottom: 0rem !important; } .form-check-inline { display: flex !important; align-items: center !important; min-height: 44px !important; flex: 1 !important; justify-content: center !important; padding: 0.5rem !important; border-radius: 8px !important; transition: all 0.2s ease !important; } .form-check-input { width: 20px !important; height: 20px !important; margin-right: 0.5rem !important; cursor: pointer !important; } .form-check-label { font-size: 0.9375rem !important; font-weight: 500 !important; cursor: pointer !important; user-select: none !important; } /* Product Row Layout - Mobile */ .element-1 { background: #f8f9fa !important; border: 1px solid #e9ecef !important; border-radius: 12px !important; padding: 0.75rem !important; margin-bottom: 0.75rem !important; } .element-1 .row { margin: 0 !important; } .element-1 .col-md-5, .element-1 .col-md-4, .element-1 .col-md-2, .element-1 .col-md-1 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-bottom: 0.5rem !important; padding-left: 0 !important; padding-right: 0 !important; } .element-1 .col-md-1:last-child { margin-bottom: 0 !important; } .element-1 .form-group { margin-bottom: 0.5rem !important; } /* Product Remove Button - Mobile */ .element-1 .btn-danger.btn-sm { width: 100% !important; margin-top: 0.25rem !important; min-height: 40px !important; font-size: 0.875rem !important; font-weight: 600 !important; border-radius: 8px !important; } /* Serial Number in Product Row */ .sr-no { color: #037345 !important; font-weight: 700 !important; font-size: 0.875rem !important; } /* Total Summary - Mobile - Single Line Layout */ .ttotal { background: #f8f9fa !important; border: 1px solid #e9ecef !important; border-radius: 12px !important; padding: 0.75rem 1rem !important; margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } .ttotal .row { flex-direction: row !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.5rem !important; } .ttotal .col-md-5 { display: none !important; } .ttotal .col-md-2 { flex: 1 !important; min-width: 0 !important; margin-bottom: 0 !important; text-align: center !important; padding: 0.25rem 0.5rem !important; font-size: 0.8125rem !important; white-space: nowrap !important; } .ttotal .col-md-2 b { display: block !important; font-size: 0.75rem !important; color: #6c757d !important; margin-bottom: 0.25rem !important; font-weight: 600 !important; } .ttotal .col-md-2 span { display: block !important; font-size: 0.9375rem !important; font-weight: 700 !important; color: #2c2c2c !important; } .ttotal .col-md-2:last-child { flex: 1.5 !important; border-left: 1px solid #dee2e6 !important; padding-left: 0.75rem !important; } .ttotal .col-md-2:last-child b { color: #037345 !important; } .ttotal .col-md-2:last-child span { color: #037345 !important; font-size: 1.0625rem !important; } /* Textarea - Mobile */ textarea.form-control { min-height: 100px !important; font-size: 0.9375rem !important; line-height: 1.5 !important; padding: 0.75rem 1rem !important; resize: vertical !important; } /* Submit Button - Mobile */ .btn-primary.btn_verify { width: 100% !important; font-size: 1.0625rem !important; font-weight: 700 !important; margin-top: 0rem !important; margin-bottom: 0rem !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(3, 115, 69, 0.2) !important; transition: all 0.3s ease !important; } #collapseOne .pb-1 { padding-bottom: 0rem!important; } .btn-primary.btn_verify:active { transform: scale(0.98) !important; box-shadow: 0 2px 8px rgba(3, 115, 69, 0.3) !important; } /* Add Product Button - Mobile */ .btn-outline-primary { width: 100% !important; min-height: 48px !important; margin-bottom: 1.5rem !important; font-size: 0.9375rem !important; font-weight: 600 !important; border-radius: 10px !important; border-width: 2px !important; } .btn-outline-primary:active { transform: scale(0.98) !important; } /* Customer Details Card - Mobile */ .card-body .row .col-md-6 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-bottom: 0.5rem !important; } /* Section Headers - Mobile */ .h-title { font-size: 1.125rem !important; font-weight: 700 !important; color: #2c2c2c !important; margin-bottom: 1rem !important; display: block !important; padding-bottom: 0.75rem !important; border-bottom: 2px solid #037345 !important; } /* Horizontal Rule - Mobile */ .hr { margin: 0.75rem 0 !important; border-color: #e9ecef !important; border-width: 1px !important; } /* Note Section - Mobile */ .row.mt-2 .col-md-12 h6 { font-size: 0.8125rem !important; color: #6c757d !important; line-height: 1.6 !important; padding: 0.75rem !important; background: #f8f9fa !important; border-radius: 8px !important; margin: 0 !important; } /* Timeline - Mobile */ .timeline { padding-left: 0rem !important; } .timeline-item { margin-bottom: 1.5rem !important; padding-left: 1rem !important; } .timeline-event { padding: 1rem !important; background: #fff !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; } .pending-orders-verification-details-page .timeline-event { padding: 0rem !important; background: #fff !important; border-radius: 0 !important; box-shadow: none !important; } /* Tables in Edit Page - Mobile Card View */ .timeline .table.table-bordered { font-size: 0.875rem !important; margin: 1rem 0 !important; } .timeline .table.table-bordered thead { display: none !important; } .timeline .table.table-bordered tbody tr { display: block !important; width: 100% !important; margin-bottom: 1rem !important; background: #fff !important; border: 1px solid #e0e0e0 !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; padding: 1rem !important; } .timeline .table.table-bordered tbody td { display: flex !important; flex-direction: column !important; width: 100% !important; padding: 0.75rem 0 !important; border: none !important; border-bottom: 1px solid #f5f5f5 !important; text-align: left !important; } .timeline .table.table-bordered tbody td:before { content: attr(data-label) !important; font-weight: 600 !important; font-size: 0.7rem !important; color: #8e8b9b !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; margin-bottom: 0.5rem !important; display: block !important; } .timeline .table.table-bordered tbody td:last-child { border-bottom: none !important; } /* Hide ledger section on mobile initially */ #dr-ledger-body { order: 2 !important; margin-top: 1.5rem !important; } /* Price Display - Mobile */ .mprice { font-size: 1rem !important; font-weight: 700 !important; color: #037345 !important; margin-top: 0.5rem !important; } /* Stock Availability - Mobile */ .m-stock-avl p { font-size: 0.8125rem !important; margin-bottom: 0.5rem !important; } /* Form Validation - Mobile */ .form-control.is-invalid, .form-select.is-invalid { border-color: #dc3545 !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important; } .invalid-feedback { font-size: 0.8125rem !important; margin-top: 0.375rem !important; color: #dc3545 !important; } } /* Utility Classes - These are safe as they're opt-in classes */ .overflow-hidden-mobile { overflow: hidden; } .overflow-x-auto-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ============================================ DATA TABLES - CARD VIEW ON MOBILE ============================================ */ /* Convert DataTables to Card View on Mobile */ @media only screen and (max-width: 768px) { /* Prevent horizontal scrolling on html and body */ html { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; } /* Prevent horizontal scrolling on body and main containers */ body { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; } .app-content, .content-wrapper, .main-content { overflow-x: hidden !important; max-width: 100% !important; width: 100% !important; } /* Hide table wrapper scroll on mobile */ .table-responsive { overflow-x: hidden !important; -webkit-overflow-scrolling: auto !important; max-width: 100% !important; width: 100% !important; } /* DataTables wrapper - prevent overflow */ .dataTables_wrapper { overflow-x: hidden !important; max-width: 100% !important; width: 100% !important; } /* DataTables scroll container - disable horizontal scroll on mobile */ .dataTables_scroll, .dataTables_scrollHead, .dataTables_scrollBody, .dataTables_scrollFoot { overflow-x: hidden !important; max-width: 100% !important; width: 100% !important; } /* DataTables scroll body inner container */ .dataTables_scrollBody { position: relative !important; overflow: hidden !important; } /* Table inside scroll container */ .dataTables_scrollBody table, .dataTables_scrollBody #report-datatable, .dataTables_scrollBody table.dataTable { width: 100% !important; max-width: 100% !important; table-layout: auto !important; } /* Card datatable container */ .card-datatable { overflow-x: hidden !important; max-width: 100% !important; width: 100% !important; } /* Card container */ .card { overflow-x: hidden !important; max-width: 100% !important; width: 100% !important; } /* Table cells - flex layout with proper constraints */ .table tbody td, .mx-table tbody td, .m-report tbody td, #report-datatable tbody td, table.dataTable tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; max-width: 100% !important; padding: 0.25rem 0.75rem !important; border: none !important; border-bottom: 1px solid #f0f0f0 !important; font-size: 0.875rem !important; color: #5e5873 !important; word-break: break-word !important; vertical-align: middle !important; min-height: 40px !important; box-sizing: border-box !important; overflow: hidden !important; } /* Table rows - ensure they don't overflow */ .table tbody tr, #report-datatable tbody tr, table.dataTable tbody tr { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } /* Table itself - prevent overflow */ .table, #report-datatable, table.dataTable { width: 100% !important; max-width: 100% !important; table-layout: auto !important; margin: 0 !important; } /* Table thead - hide on mobile card view */ .table thead, #report-datatable thead, table.dataTable thead { display: none !important; } /* Enhanced Labels - Compact Minimal Design (Left Label, Right Content) */ .table tbody td[data-label]:before, .mx-table tbody td[data-label]:before, .m-report tbody td[data-label]:before, .pop-report tbody td[data-label]:before, #report-datatable tbody td[data-label]:before, table.dataTable tbody td[data-label]:before, #report-datatable tbody tr td[data-label]:before, table.dataTable tbody tr td[data-label]:before, .mx-table tbody tr td[data-label]:before, .pop-report tbody tr td[data-label]:before { content: attr(data-label) !important; font-weight: 500 !important; font-size: 0.8125rem !important; color: #6c757d !important; text-transform: none !important; letter-spacing: 0 !important; margin-right: 0.75rem !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; flex-shrink: 0 !important; min-width: 70px !important; max-width: 35% !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } /* Content alignment - Right side (actual content, not the td itself) */ .table tbody td[data-label] > *:not(:before), .mx-table tbody td[data-label] > *:not(:before), .m-report tbody td[data-label] > *:not(:before), .pop-report tbody td[data-label] > *:not(:before), #report-datatable tbody td[data-label] > *:not(:before), table.dataTable tbody td[data-label] > *:not(:before), #report-datatable tbody tr td[data-label] > *:not(:before), table.dataTable tbody tr td[data-label] > *:not(:before), .mx-table tbody tr td[data-label] > *:not(:before), .pop-report tbody tr td[data-label] > *:not(:before) { text-align: right !important; margin-left: auto !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: 65% !important; overflow: hidden !important; word-break: break-word !important; box-sizing: border-box !important; } /* Wrapped text content - Right aligned */ .table tbody td[data-label] .mobile-cell-content, .mx-table tbody td[data-label] .mobile-cell-content, .m-report tbody td[data-label] .mobile-cell-content, #report-datatable tbody td[data-label] .mobile-cell-content, table.dataTable tbody td[data-label] .mobile-cell-content { text-align: right !important; margin-left: auto !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: 65% !important; overflow: hidden !important; word-break: break-word !important; box-sizing: border-box !important; } /* Text content alignment - For td itself (non-action columns) */ .table tbody td[data-label]:not(.mobile-actions-column):not([data-label="Actions"]):not([data-label="Action"]), .mx-table tbody td[data-label]:not(.mobile-actions-column):not([data-label="Actions"]):not([data-label="Action"]), .m-report tbody td[data-label]:not(.mobile-actions-column):not([data-label="Actions"]):not([data-label="Action"]), .pop-report tbody td[data-label]:not(.mobile-actions-column):not([data-label="Actions"]):not([data-label="Action"]), #report-datatable tbody td[data-label]:not(.mobile-actions-column):not([data-label="Actions"]):not([data-label="Action"]), table.dataTable tbody td[data-label]:not(.mobile-actions-column):not([data-label="Actions"]):not([data-label="Action"]) { text-align: right !important; } /* Card body padding adjustments */ .card-body.border-bottom { padding: 1rem !important; } /* Filter form on mobile */ .form-vertical .row { margin: 0 !important; } .form-vertical .col-md-4, .form-vertical .col-md-3 { margin-bottom: 1rem !important; padding: 0 0.5rem !important; } .form-vertical .form-group { margin-bottom: 0.75rem !important; } .form-vertical label { font-size: 0.875rem !important; margin-bottom: 0.5rem !important; font-weight: 500 !important; } /* Search and Reset buttons - In one line on mobile */ .form-vertical .col-md-3 .form-group { display: flex !important; gap: 0.5rem !important; flex-wrap: nowrap !important; } #btn_search, #btn_reset { flex: 1 !important; width: auto !important; margin-bottom: 0.5rem !important; margin-right: 0 !important; min-height: var(--mobile-touch-target) !important; } .header-navbar .navbar-container .show~.dropdown-menu { overflow: visible; z-index: 999999; } .add-mobile { display: inline-block !important; float: right; } .desktop-tab { display: none !important; } .add-btn { margin: 0px !important; } .login-card .form-control,.login-card .form-select,.login-card .form-control.readonly { width: auto !important; border-radius: 0px !important; } .mobile-tab { display: block !important; } .swal2-checkbox, .swal2-radio { display: none!important; } .doctor-search-container .form-control:focus,.doctor-search-container .form-select:focus { box-shadow: none !important; } } /* ============================================ ORDER DETAILS PAGE - SCOPED STYLING Parent Class: .order-details-page Only affects: accounts/approval-by-manager/details pages ============================================ */ @media only screen and (max-width: 768px) { /* Order Details Page - Customer Details Section - Compact Header */ .order-details-page .customer-details-header { padding: 0.5rem 0.75rem !important; background: linear-gradient(135deg, #037345 0%, #318344 100%); border-bottom: none !important; } .order-details-page .customer-details-header h5 { color: #fff !important; font-size: 0.875rem !important; font-weight: 600 !important; margin: 0 !important; display: flex !important; align-items: center !important; line-height: 1.2 !important; } .order-details-page .customer-details-header .feather { width: 14px !important; height: 14px !important; stroke-width: 2.5 !important; margin-right: 0.375rem !important; } .order-details-page .customer-details-body { padding: 0.75rem !important; } /* Compact Detail Items - Reduced Spacing */ .order-details-page .detail-item { padding: 0.375rem 0 !important; border-bottom: 1px solid #f0f0f0 !important; } .order-details-page .detail-label { font-size: 0.625rem !important; margin-bottom: 0.125rem !important; line-height: 1.2 !important; } .order-details-page .detail-value { font-size: 0.8125rem !important; line-height: 1.3 !important; } /* Reduce margin between detail columns */ .order-details-page .customer-details-body .row .col-md-6 { margin-bottom: 0.5rem !important; } .order-details-page .detail-item:last-child { border-bottom: none !important; } .order-details-page .detail-value strong { font-weight: 600 !important; color: #2c2c2c !important; } .order-details-page .detail-value a { color: #037345 !important; text-decoration: none !important; } .order-details-page .detail-value a:hover { text-decoration: underline !important; } /* Final Action Section - Enhanced Card Design with Fill */ .order-details-page .final-action-section { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .order-details-page .final-action-section .card { width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow: visible !important; background: #ffffff !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; } .order-details-page .final-action-section .card-body { width: 100% !important; max-width: 100% !important; padding: 0.5rem !important; overflow: visible !important; box-sizing: border-box !important; background: #fafbfc !important; } .order-details-page .final-action-section .final-action-timeline { list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } .order-details-page .final-action-section .timeline-item { position: relative !important; padding: 0 !important; margin: 0 !important; margin-bottom: 0 !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } .order-details-page .final-action-section .timeline-point { display: none !important; } .order-details-page .final-action-section .timeline-event { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; box-sizing: border-box !important; } .order-details-page .final-action-section .final-action-heading { font-size: 0.875rem !important; font-weight: 600 !important; color: #2c2c2c !important; margin-bottom: 0.5rem !important; padding-bottom: 0.375rem !important; border-bottom: 2px solid #037345 !important; width: 100% !important; box-sizing: border-box !important; } /* Final Action Section - Form Elements */ .order-details-page .final-action-section .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } .order-details-page .final-action-section .col-12, .order-details-page .final-action-section .col-md-12, .order-details-page .final-action-section .col-sm-12, .order-details-page .final-action-section .col-md-8, .order-details-page .final-action-section .col-md-4 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-bottom: 0.375rem !important; } .order-details-page .final-action-section label { font-size: 0.75rem !important; margin-bottom: 0.25rem !important; word-wrap: break-word !important; line-height: 1.2 !important; } .order-details-page .final-action-section .form-select, .order-details-page .final-action-section .form-control, .order-details-page .final-action-section select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; font-size: 0.8125rem !important; padding: 0.375rem 0.5rem !important; min-height: 36px !important; } .order-details-page .final-action-section .btn { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-bottom: 0.25rem !important; white-space: normal !important; word-wrap: break-word !important; padding: 0.4375rem 0.625rem !important; font-size: 0.8125rem !important; } .order-details-page .final-action-section .pull-right { float: none !important; width: 100% !important; margin-bottom: 0.5rem !important; } /* Address Section - Ultra Compact */ .order-details-page .final-action-section #address_Data { width: 100% !important; max-width: 100% !important; overflow: visible !important; margin-top: 0.375rem !important; margin-bottom: 0.375rem !important; } .order-details-page .final-action-section #address_Data .col-md-12 { padding: 0.375rem !important; width: 100% !important; max-width: 100% !important; } /* Address Cards - Ultra Compact */ .order-details-page .final-action-section .address-card, .order-details-page .final-action-section [class*="address"] { margin-bottom: 0.375rem !important; padding: 0.5rem !important; } /* Shipping Address Button Layout - Compact */ .order-details-page .final-action-section .row .col-md-8, .order-details-page .final-action-section .row .col-md-4 { flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 0.375rem !important; } .order-details-page .final-action-section .row .col-md-8 label { display: block !important; margin-bottom: 0.25rem !important; } .order-details-page .final-action-section .row .col-md-4 .btn, .order-details-page .final-action-section .row .col-md-4 p.btn { width: 100% !important; margin: 0 !important; text-align: center !important; } /* Update Price Button - Compact */ .order-details-page .final-action-section .pull-right { float: none !important; width: 100% !important; margin-bottom: 0.375rem !important; } .order-details-page .final-action-section a.btn.pull-right { display: block !important; width: 100% !important; text-align: center !important; margin: 0 0 0.375rem 0 !important; } /* GST and Total Section - Enhanced Mobile Design */ .order-details-page .final-action-section .gst-tab-div { width: 100% !important; max-width: 100% !important; overflow: visible !important; background: #ffffff !important; border: 1px solid #e0e0e0 !important; border-radius: 6px !important; padding: 0.5rem !important; margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .order-details-page .final-action-section .gst { width: 100% !important; max-width: 100% !important; margin-bottom: 0.375rem !important; padding: 0.375rem 0.5rem !important; border-radius: 4px !important; display: flex !important; align-items: center !important; min-height: 36px !important; } .order-details-page .final-action-section .gst:nth-of-type(odd) { background-color: #f8f9fa !important; } .order-details-page .final-action-section .gst:nth-of-type(even) { background-color: #ffffff !important; } /* Grand Total - Highlight */ .order-details-page .final-action-section .gst#new_total_tab, .order-details-page .final-action-section .gst:last-of-type { background: linear-gradient(135deg, #037345 0%, #318344 100%) !important; color: #ffffff !important; font-weight: 700 !important; margin-top: 0.5rem !important; padding: 0.5rem !important; border-radius: 6px !important; } .order-details-page .final-action-section .gst:last-of-type b { color: #ffffff !important; font-size: 1rem !important; } .order-details-page .final-action-section .gst .row { width: 100% !important; max-width: 100% !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .order-details-page .final-action-section .gst .col-12, .order-details-page .final-action-section .gst .col-md-10, .order-details-page .final-action-section .gst .col-md-2 { flex: 1 1 auto !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; } .order-details-page .final-action-section .gst .col-md-10 { justify-content: flex-start !important; flex: 1 1 60% !important; } .order-details-page .final-action-section .gst .col-md-2 { justify-content: flex-end !important; flex: 1 1 40% !important; text-align: right !important; } .order-details-page .final-action-section .gst .col-md-10 b, .order-details-page .final-action-section .gst .col-md-2 b { font-size: 0.8125rem !important; font-weight: 600 !important; color: #2c2c2c !important; line-height: 1.4 !important; } .order-details-page .final-action-section .gst:last-of-type .col-md-10 b, .order-details-page .final-action-section .gst:last-of-type .col-md-2 b { color: #ffffff !important; font-size: 0.9375rem !important; } /* Discount and Freight Input Fields - Compact */ .order-details-page .final-action-section .gst .dis-input { width: 70px !important; min-width: 70px !important; max-width: 70px !important; height: 32px !important; min-height: 32px !important; padding: 0.25rem 0.375rem !important; font-size: 0.75rem !important; margin-left: 0.375rem !important; border: 1px solid #ced4da !important; border-radius: 4px !important; display: inline-block !important; float: none !important; } .order-details-page .final-action-section .gst .dis-freight { width: 55px !important; min-width: 55px !important; max-width: 55px !important; height: 32px !important; min-height: 32px !important; padding: 0.25rem 0.25rem !important; font-size: 0.75rem !important; margin-left: 0.25rem !important; border: 1px solid #ced4da !important; border-radius: 4px !important; display: inline-block !important; } .order-details-page .final-action-section .gst .dis-flex-left { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 0.25rem !important; } .order-details-page .final-action-section .gst .dis-flex-right { display: flex !important; align-items: center !important; justify-content: flex-end !important; } .order-details-page .final-action-section .gst #dis_type { font-size: 0.75rem !important; color: #6c757d !important; margin-left: 0.25rem !important; } /* Round Off Input */ .order-details-page .final-action-section .gst #round_of { width: 80px !important; min-width: 80px !important; max-width: 80px !important; height: 32px !important; min-height: 32px !important; padding: 0.25rem 0.375rem !important; font-size: 0.75rem !important; border: 1px solid #ced4da !important; border-radius: 4px !important; } /* Grand Total - Special Highlight (using ID selector) */ .order-details-page .final-action-section .gst:last-of-type { background: linear-gradient(135deg, #037345 0%, #318344 100%) !important; color: #ffffff !important; font-weight: 700 !important; margin-top: 0.5rem !important; padding: 0.625rem !important; border-radius: 6px !important; box-shadow: 0 2px 8px rgba(3, 115, 69, 0.2) !important; } .order-details-page .final-action-section .gst:last-of-type b { color: #ffffff !important; font-size: 1rem !important; font-weight: 700 !important; } /* TCS Section - Highlight */ .order-details-page .final-action-section .gst[id*="tcs"], .order-details-page .final-action-section .gst:has(#tcs_amount_) { background-color: #fff3cd !important; border-left: 3px solid #ffc107 !important; } /* Better spacing for text-right alignment */ .order-details-page .final-action-section .gst .text-right { text-align: left !important; justify-content: flex-start !important; } .order-details-page .final-action-section .gst .col-md-2.text-right { text-align: right !important; justify-content: flex-end !important; } /* Remove border from gst-tab-div inner elements */ .order-details-page .final-action-section .gst-tab-div .gst { border: none !important; } /* Better visual separation */ .order-details-page .final-action-section .gst-tab-div { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important; } /* Remark Section */ .order-details-page .final-action-section textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Action Buttons at Bottom - Compact */ .order-details-page .final-action-section .col-12.text-center { width: 100% !important; padding: 0.375rem !important; } .order-details-page .final-action-section .col-12.text-center .btn { width: 100% !important; max-width: 100% !important; margin: 0.25rem 0 !important; display: block !important; padding: 0.4375rem 0.625rem !important; font-size: 0.8125rem !important; } /* Requirement Area - Fix Remove Button Overlapping */ .order-details-page #requirement_area { position: relative !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; box-sizing: border-box !important; } .order-details-page #requirement_area .fx-border { position: relative !important; padding: 0.625rem !important; padding-top: 2rem !important; padding-right: 3rem !important; margin-bottom: 0.5rem !important; border-radius: 6px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; background: #ffffff !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important; } .order-details-page #requirement_area .m-stock-avl { position: absolute !important; top: 0.625rem !important; right: 0.625rem !important; z-index: 10 !important; width: auto !important; padding: 0 !important; margin: 0 !important; } .order-details-page #requirement_area .m-stock-avl button { min-width: 36px !important; min-height: 36px !important; padding: 0.375rem !important; border-radius: 4px !important; box-shadow: 0 1px 4px rgba(220, 53, 69, 0.25) !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #dc3545 !important; border: none !important; color: #fff !important; } .order-details-page #requirement_area .m-stock-avl button:hover { background: #c82333 !important; box-shadow: 0 2px 8px rgba(220, 53, 69, 0.35) !important; } .order-details-page #requirement_area .jsr-no { position: absolute !important; left: 0.625rem !important; top: 0.625rem !important; z-index: 5 !important; margin: 0 !important; font-size: 11px !important; padding: 0.2em 0.4em !important; } .order-details-page #requirement_area .flex-grow-1 { padding-left: 0rem !important; padding-right: 0rem !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Requirement Area - Row and Column Fixes */ .order-details-page #requirement_area .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } /* Product Row - Mobile: 2 inputs per row for compact layout */ .order-details-page #requirement_area .row { display: flex !important; flex-wrap: wrap !important; margin-left: 0 !important; margin-right: 0 !important; } /* Product selection - Full width */ .order-details-page #requirement_area .row .col-md-3 { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; margin-bottom: 0.375rem !important; } /* Qty and Free Qty - 2 in one row */ .order-details-page #requirement_area .row .col-md-1.pl-0:first-of-type, .order-details-page #requirement_area .row .col-md-1.prescription.pl-0 { flex: 0 0 48% !important; max-width: 48% !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; margin-bottom: 0.375rem !important; margin-right: 2% !important; } /* Hold Qty - Full width or can be paired */ .order-details-page #requirement_area .row .col-md-1.pl-0:nth-of-type(4) { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; margin-bottom: 0.375rem !important; } /* Price, Basic Price, GST - 2 in one row */ .order-details-page #requirement_area .row .col-md-1.pl-0:nth-of-type(5), .order-details-page #requirement_area .row .col-md-1.pl-0:nth-of-type(6), .order-details-page #requirement_area .row .col-md-1.pl-0:nth-of-type(7) { flex: 0 0 48% !important; max-width: 48% !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; margin-bottom: 0.375rem !important; margin-right: 2% !important; } /* Discount and Total Price - 2 in one row */ .order-details-page #requirement_area .row .col-md-1.pl-0:nth-of-type(8), .order-details-page #requirement_area .row .col-md-1.no-padd { flex: 0 0 48% !important; max-width: 48% !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; margin-bottom: 0.375rem !important; margin-right: 2% !important; } /* Remove button column - Full width at bottom */ .order-details-page #requirement_area .row .col-md-2.m-stock-avl { flex: 0 0 100% !important; max-width: 100% !important; padding: 0.375rem 0.25rem !important; margin-bottom: 0.375rem !important; text-align: right !important; position: relative !important; top: auto !important; right: auto !important; } .order-details-page #requirement_area .row .col-md-2.m-stock-avl button { position: relative !important; top: auto !important; right: auto !important; display: inline-block !important; } /* Batch Section - Compact Layout with 2 inputs per row */ .order-details-page .batch-wise { background: #f8f9fa !important; border: 1px solid #e9ecef !important; border-radius: 4px !important; padding: 0.5rem !important; margin-top: 0.375rem !important; margin-bottom: 0.375rem !important; } .order-details-page .batch-wise .row { display: flex !important; flex-wrap: wrap !important; margin-left: 0 !important; margin-right: 0 !important; } /* Batch Number - Full width */ .order-details-page .batch-wise .col-md-5 { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; margin-bottom: 0.375rem !important; } /* Expiry Date and Batch Qty - 2 in one row */ .order-details-page .batch-wise .col-md-2:first-of-type { flex: 0 0 48% !important; max-width: 48% !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; margin-bottom: 0.375rem !important; margin-right: 2% !important; } .order-details-page .batch-wise .col-md-2:nth-of-type(2) { flex: 0 0 48% !important; max-width: 48% !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; margin-bottom: 0.375rem !important; } /* Free Qty and Remove Button - 2 in one row */ .order-details-page .batch-wise .col-md-2.prescription { flex: 0 0 48% !important; max-width: 48% !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; margin-bottom: 0.375rem !important; margin-right: 2% !important; } .order-details-page .batch-wise .col-md-2.m-stock-avl { flex: 0 0 48% !important; max-width: 48% !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; margin-bottom: 0.375rem !important; text-align: right !important; position: relative !important; top: auto !important; right: auto !important; padding-top: 1.5rem !important; } .order-details-page .batch-wise .m-stock-avl button { min-width: 36px !important; min-height: 36px !important; padding: 0.375rem !important; border-radius: 4px !important; box-shadow: 0 1px 4px rgba(220, 53, 69, 0.25) !important; background: #dc3545 !important; border: none !important; color: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .order-details-page .batch-wise .m-stock-avl button:hover { background: #c82333 !important; box-shadow: 0 2px 8px rgba(220, 53, 69, 0.35) !important; } .order-details-page .batch-wise .m-stock-avl label { display: none !important; } /* Form Groups in Requirement Area - Ultra Compact Spacing */ .order-details-page #requirement_area .form-group { margin-bottom: 0.375rem !important; } .order-details-page #requirement_area .form-group label { font-size: 0.625rem !important; font-weight: 600 !important; color: #495057 !important; margin-bottom: 0.125rem !important; line-height: 1.2 !important; display: block !important; } .order-details-page #requirement_area .form-control, .order-details-page #requirement_area .form-select, .order-details-page #requirement_area select { min-height: 36px !important; font-size: 0.8125rem !important; padding: 0.375rem 0.5rem !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; border: 1px solid #ced4da !important; border-radius: 4px !important; background: #fff !important; } .order-details-page #requirement_area .form-control:focus, .order-details-page #requirement_area .form-select:focus { border-color: #037345 !important; box-shadow: 0 0 0 0.2rem rgba(3, 115, 69, 0.15) !important; outline: none !important; } .order-details-page #requirement_area .form-control-plaintext { font-size: 0.8125rem !important; font-weight: 600 !important; color: #2c2c2c !important; padding: 0.375rem 0.5rem !important; min-height: 36px !important; display: flex !important; align-items: center !important; } /* Batch Section Form Controls - Ultra Compact */ .order-details-page .batch-wise .form-group { margin-bottom: 0.375rem !important; } .order-details-page .batch-wise .form-group label { font-size: 0.625rem !important; font-weight: 600 !important; color: #495057 !important; margin-bottom: 0.125rem !important; } .order-details-page .batch-wise .form-control, .order-details-page .batch-wise select { min-height: 36px !important; font-size: 0.8125rem !important; padding: 0.375rem 0.5rem !important; border: 1px solid #ced4da !important; border-radius: 4px !important; } /* Add New Batch Button - Ultra Compact */ .order-details-page #requirement_area #add_batch_stock .btn-outline-primary, .order-details-page #requirement_area [id^="add_batch_stock"] .btn-outline-primary { margin-top: 0.375rem !important; margin-bottom: 0.375rem !important; width: 100% !important; padding: 0.4375rem 0.625rem !important; font-size: 0.8125rem !important; border-radius: 4px !important; } /* Add New Product Button - Compact */ .order-details-page .final-action-section center .btn-outline-primary { width: 100% !important; padding: 0.5rem 0.75rem !important; font-size: 0.8125rem !important; margin-top: 0.375rem !important; margin-bottom: 0.375rem !important; border-radius: 4px !important; } /* Prevent Horizontal Scroll - Global Container Fixes */ .order-details-page { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .order-details-page * { box-sizing: border-box !important; } .order-details-page .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } .order-details-page .card { width: 100% !important; max-width: 100% !important; overflow: visible !important; box-sizing: border-box !important; } .order-details-page .m-acc { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .order-details-page .m-acc .card-body { width: 100% !important; max-width: 100% !important; padding: 0.75rem !important; box-sizing: border-box !important; overflow: visible !important; } /* Reduce spacing between timeline sections */ .order-details-page .m-acc { margin-bottom: 0.75rem !important; } .order-details-page .m-acc:last-child { margin-bottom: 0 !important; } .order-details-page .m-acc .card-body .row { width: 100% !important; max-width: 100% !important; } /* Ensure no content gets cut off */ .order-details-page .col-md-12, .order-details-page .col-12 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* Timeline Cards - Compact Mobile Spacing (for other sections) */ .order-details-page .timeline-item:not(.final-action-section .timeline-item) { margin-bottom: 0.75rem !important; } .order-details-page .timeline-item:not(.final-action-section .timeline-item) .card { border-radius: 8px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important; margin-bottom: 0.5rem !important; } .order-details-page .timeline-item:not(.final-action-section .timeline-item) .card-body { padding: 0.75rem !important; } .order-details-page .timeline-event h6:not(.final-action-heading) { font-size: 0.875rem !important; font-weight: 600 !important; color: #2c2c2c !important; margin-bottom: 0.5rem !important; line-height: 1.3 !important; } .order-details-page .timeline-event-time { font-size: 0.8125rem !important; color: #6e6b7b !important; } /* Tables in Order Details - Compact Mobile View */ .order-details-page .pop-report tbody tr { background: #fff !important; border: 1px solid #e0e0e0 !important; border-radius: 6px !important; margin-bottom: 0.5rem !important; padding: 0.625rem !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; } .order-details-page .pop-report tbody td { padding: 0.5rem 0 !important; border-bottom: 1px solid #f5f5f5 !important; } .order-details-page .pop-report tbody td:last-child { border-bottom: none !important; padding-top: 0.5rem !important; } .order-details-page .pop-report tbody td[data-label]:before { font-size: 0.625rem !important; margin-bottom: 0.25rem !important; color: #8e8b9b !important; } /* Table bordered - Compact */ .order-details-page .table.table-bordered { margin-bottom: 0.5rem !important; } .order-details-page .table.table-bordered td, .order-details-page .table.table-bordered th { padding: 0.375rem 0.5rem !important; font-size: 0.8125rem !important; } /* Action Buttons in Tables */ .order-details-page .icon-btn { min-width: 36px !important; min-height: 36px !important; padding: 0.5rem !important; border-radius: 6px !important; } /* Badge Styling */ .order-details-page .badge { font-size: 0.75rem !important; padding: 0.375rem 0.75rem !important; border-radius: 12px !important; font-weight: 600 !important; } /* Chip Text */ .order-details-page .chip-text { display: inline-block !important; padding: 0.25rem 0.625rem !important; background: #f0f0f0 !important; border-radius: 4px !important; font-size: 0.8125rem !important; color: #2c2c2c !important; } /* Section Spacing - Compact */ .order-details-page .row { margin-bottom: 0.75rem !important; } .order-details-page .row:last-child { margin-bottom: 0 !important; } /* Form Elements - Compact but Touch-Friendly */ .order-details-page input, .order-details-page select, .order-details-page textarea { min-height: 38px !important; font-size: 0.8125rem !important; } /* Improved Visual Hierarchy - Compact */ .order-details-page .h-title { font-size: 1rem !important; font-weight: 600 !important; color: #2c2c2c !important; margin-bottom: 0.75rem !important; } /* Remark Section - Compact */ .order-details-page .c-remark { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .order-details-page .c-remark label { font-size: 0.8125rem !important; margin-bottom: 0.25rem !important; } .order-details-page .c-remark p { font-size: 0.8125rem !important; margin-bottom: 0 !important; line-height: 1.4 !important; } /* Card spacing between sections */ .order-details-page .card { margin-bottom: 0.75rem !important; } .order-details-page .card:last-child { margin-bottom: 0 !important; } } /* ============================================ BILLED ORDER DETAILS PAGE - MOBILE OPTIMIZATION URL: accounts/billed-order/details/2 ============================================ */ @media only screen and (max-width: 768px) { /* Use both class names for better specificity */ .billed-order-details-page, .order-details-view { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* Customer Details Section - Compact */ .billed-order-details-page .card-body.py-1.my-0 { padding: 0.75rem !important; } .billed-order-details-page .h-title { font-size: 0.875rem !important; font-weight: 600 !important; margin-bottom: 0.5rem !important; color: #2c2c2c !important; } /* Customer Details Labels - Compact */ .billed-order-details-page .card-body .row .col-md-6 label, .billed-order-details-page .card-body .row .col-md-12 label { font-size: 0.75rem !important; margin-bottom: 0.375rem !important; display: block !important; line-height: 1.5 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; overflow: visible !important; } .billed-order-details-page .card-body .row .col-md-6, .billed-order-details-page .card-body .row .col-md-12 { margin-bottom: 0.5rem !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; box-sizing: border-box !important; overflow: visible !important; } .billed-order-details-page .card-body .row .col-md-6 label *, .billed-order-details-page .card-body .row .col-md-12 label * { word-wrap: break-word !important; overflow-wrap: break-word !important; display: inline !important; } /* Invoice Information Section - Compact */ .billed-order-details-page .row .col-md-7, .billed-order-details-page .row .col-md-5 { flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 0.75rem !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; box-sizing: border-box !important; overflow: visible !important; } .billed-order-details-page .row .col-md-7 p, .billed-order-details-page .row .col-md-5 p { font-size: 0.8125rem !important; margin-bottom: 0.5rem !important; line-height: 1.5 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; overflow: visible !important; } .billed-order-details-page .row .col-md-7 p b, .billed-order-details-page .row .col-md-5 p b { font-weight: 600 !important; color: #495057 !important; display: inline !important; margin-right: 0.25rem !important; } .billed-order-details-page .row .col-md-7 p:last-child, .billed-order-details-page .row .col-md-5 p:last-child { margin-bottom: 0 !important; } /* Invoice Tables - Mobile Card View */ .billed-order-details-page .dinvoice { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; overflow-x: visible !important; } .billed-order-details-page .dinvoice table { width: 100% !important; font-size: 0.75rem !important; border-collapse: separate !important; border-spacing: 0 !important; table-layout: auto !important; } /* Ensure table content is visible */ .billed-order-details-page .dinvoice table * { visibility: visible !important; opacity: 1 !important; } .billed-order-details-page .dinvoice table thead { display: none !important; } .billed-order-details-page .dinvoice table tbody tr { display: block !important; margin-bottom: 0.75rem !important; border: 1px solid #e0e0e0 !important; border-radius: 6px !important; padding: 0.75rem !important; background: #ffffff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; overflow: visible !important; width: 100% !important; box-sizing: border-box !important; } .billed-order-details-page .dinvoice table tbody tr:empty { display: none !important; } /* Ensure table cells don't overlap */ .billed-order-details-page .dinvoice table tbody td { position: relative !important; z-index: 1 !important; } .billed-order-details-page .dinvoice table tbody td:before { z-index: 2 !important; } .billed-order-details-page .dinvoice table tbody td > * { position: relative !important; z-index: 3 !important; } .billed-order-details-page .dinvoice table tbody td { display: block !important; padding: 0.625rem 0 !important; padding-left: 0 !important; text-align: left !important; border: none !important; border-bottom: 1px solid #f5f5f5 !important; position: relative !important; min-height: 2.5rem !important; } .billed-order-details-page .dinvoice table tbody td:last-child { border-bottom: none !important; } .billed-order-details-page .dinvoice table tbody td[data-label]:before { content: attr(data-label) !important; position: absolute !important; left: 0 !important; top: 0.625rem !important; width: 36% !important; max-width: 36% !important; font-weight: 600 !important; font-size: 0.6875rem !important; color: #8e8b9b !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; line-height: 1.4 !important; padding-right: 0.75rem !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; overflow: visible !important; } .billed-order-details-page .dinvoice table tbody td[data-label] { padding-left: 40% !important; padding-right: 0.5rem !important; padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; word-wrap: break-word !important; overflow-wrap: break-word !important; min-height: 2.75rem !important; overflow: visible !important; } /* Ensure data content doesn't overlap with label */ .billed-order-details-page .dinvoice table tbody td[data-label] > * { margin-left: 0 !important; max-width: 100% !important; } .billed-order-details-page .dinvoice table tbody td[data-label] * { color: #2c2c2c !important; font-size: 0.8125rem !important; font-weight: 500 !important; line-height: 1.4 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; max-width: 100% !important; display: inline-block !important; } /* Table Footer - Compact */ .billed-order-details-page .dinvoice table tfoot { display: block !important; width: 100% !important; } .billed-order-details-page .dinvoice table tfoot tr { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 0.5rem !important; padding: 0.625rem 0.75rem !important; background: #f8f9fa !important; border-radius: 4px !important; border: 1px solid #e0e0e0 !important; flex-wrap: nowrap !important; gap: 0.75rem !important; min-height: 2.5rem !important; } /* Hide empty spacer cells completely */ .billed-order-details-page .dinvoice table tfoot td[colspan][rowspan], .billed-order-details-page .dinvoice table tfoot td[colspan]:empty, .billed-order-details-page .dinvoice table tfoot td.text-left:empty, .billed-order-details-page .dinvoice table tfoot td[colspan="5"][rowspan] { display: none !important; width: 0 !important; padding: 0 !important; margin: 0 !important; flex: 0 0 0 !important; } /* Label cells (text-right) - Show label on left */ .billed-order-details-page .dinvoice table tfoot th.text-right, .billed-order-details-page .dinvoice table tfoot td.text-right { display: flex !important; flex: 1 1 auto !important; text-align: left !important; padding: 0 !important; margin: 0 !important; border: none !important; min-width: 0 !important; max-width: 65% !important; overflow: visible !important; word-wrap: break-word !important; white-space: normal !important; align-items: center !important; } /* Value cells (text-center) - Show value on right - CRITICAL: Ensure values are visible */ .billed-order-details-page .dinvoice table tfoot th.text-center, .billed-order-details-page .dinvoice table tfoot td.text-center, .order-details-view .dinvoice table tfoot th.text-center, .order-details-view .dinvoice table tfoot td.text-center { display: flex !important; flex: 0 0 auto !important; text-align: right !important; padding: 0 !important; margin: 0 !important; border: none !important; min-width: 100px !important; max-width: 40% !important; overflow: visible !important; word-wrap: break-word !important; white-space: normal !important; align-items: center !important; justify-content: flex-end !important; flex-shrink: 0 !important; } /* CRITICAL: Force all value content to be visible */ .billed-order-details-page .dinvoice table tfoot th.text-center span.bold, .billed-order-details-page .dinvoice table tfoot td.text-center span.bold, .billed-order-details-page .dinvoice table tfoot th.text-center .bold, .billed-order-details-page .dinvoice table tfoot td.text-center .bold, .order-details-view .dinvoice table tfoot th.text-center span.bold, .order-details-view .dinvoice table tfoot td.text-center span.bold { display: inline-block !important; visibility: visible !important; opacity: 1 !important; color: #2c2c2c !important; font-weight: 700 !important; font-size: 0.875rem !important; white-space: nowrap !important; min-width: 60px !important; } /* Ensure all content is visible and not overlapping */ .billed-order-details-page .dinvoice table tfoot td, .billed-order-details-page .dinvoice table tfoot th { visibility: visible !important; opacity: 1 !important; overflow: visible !important; white-space: normal !important; position: relative !important; z-index: 1 !important; } /* CRITICAL: Make sure all spans and text inside tfoot cells are visible */ .billed-order-details-page .dinvoice table tfoot th span, .billed-order-details-page .dinvoice table tfoot td span, .billed-order-details-page .dinvoice table tfoot th .bold, .billed-order-details-page .dinvoice table tfoot td .bold { font-weight: 600 !important; color: #2c2c2c !important; font-size: 0.8125rem !important; display: inline !important; visibility: visible !important; opacity: 1 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; line-height: 1.4 !important; white-space: normal !important; } /* Ensure all text in tfoot is visible */ .billed-order-details-page .dinvoice table tfoot th, .billed-order-details-page .dinvoice table tfoot td { color: #2c2c2c !important; font-size: 0.8125rem !important; line-height: 1.5 !important; } /* Make sure bold text is visible and not overlapping */ .billed-order-details-page .dinvoice table tfoot .bold, .billed-order-details-page .dinvoice table tfoot b { font-weight: 700 !important; color: #2c2c2c !important; display: inline !important; visibility: visible !important; opacity: 1 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Prevent text from being cut off - Ensure all child elements are visible */ .billed-order-details-page .dinvoice table tfoot th *, .billed-order-details-page .dinvoice table tfoot td * { max-width: 100% !important; overflow: visible !important; text-overflow: clip !important; visibility: visible !important; opacity: 1 !important; display: inline !important; } /* Ensure text-center cells show their content */ .billed-order-details-page .dinvoice table tfoot th.text-center span, .billed-order-details-page .dinvoice table tfoot td.text-center span, .billed-order-details-page .dinvoice table tfoot th.text-center .bold, .billed-order-details-page .dinvoice table tfoot td.text-center .bold { display: inline-block !important; visibility: visible !important; opacity: 1 !important; color: #2c2c2c !important; font-weight: 700 !important; } /* Grand Total Row - Highlight */ .billed-order-details-page .dinvoice table tfoot tr:last-child { background: linear-gradient(135deg, #037345 0%, #318344 100%) !important; color: #ffffff !important; font-weight: 700 !important; padding: 0.875rem !important; border: none !important; box-shadow: 0 2px 8px rgba(3, 115, 69, 0.2) !important; gap: 0.75rem !important; } .billed-order-details-page .dinvoice table tfoot tr:last-child th, .billed-order-details-page .dinvoice table tfoot tr:last-child td { color: #ffffff !important; font-size: 1rem !important; font-weight: 700 !important; border-bottom: none !important; overflow: visible !important; word-wrap: break-word !important; } .billed-order-details-page .dinvoice table tfoot tr:last-child th.text-right { flex: 1 1 auto !important; max-width: 60% !important; } .billed-order-details-page .dinvoice table tfoot tr:last-child th.text-center { flex: 0 0 auto !important; min-width: 100px !important; max-width: 40% !important; } .billed-order-details-page .dinvoice table tfoot tr:last-child th span, .billed-order-details-page .dinvoice table tfoot tr:last-child td span, .billed-order-details-page .dinvoice table tfoot tr:last-child th .bold, .billed-order-details-page .dinvoice table tfoot tr:last-child td .bold { color: #ffffff !important; font-weight: 700 !important; font-size: 1rem !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* CRITICAL: Override any rules that might hide values - Use highest specificity */ .billed-order-details-page .dinvoice table tfoot th.text-center *, .billed-order-details-page .dinvoice table tfoot td.text-center *, .order-details-view .dinvoice table tfoot th.text-center *, .order-details-view .dinvoice table tfoot td.text-center *, .billed-order-details-page.order-details-view .dinvoice table tfoot th.text-center *, .billed-order-details-page.order-details-view .dinvoice table tfoot td.text-center * { display: inline-block !important; visibility: visible !important; opacity: 1 !important; white-space: nowrap !important; max-width: none !important; width: auto !important; height: auto !important; } /* Ensure cells with values are not empty and show content */ .billed-order-details-page .dinvoice table tfoot th.text-center, .billed-order-details-page .dinvoice table tfoot td.text-center, .order-details-view .dinvoice table tfoot th.text-center, .order-details-view .dinvoice table tfoot td.text-center { min-height: 1.5rem !important; min-width: 100px !important; } /* Make sure all direct children (spans with values) are visible */ .billed-order-details-page .dinvoice table tfoot th.text-center > span, .billed-order-details-page .dinvoice table tfoot td.text-center > span, .billed-order-details-page .dinvoice table tfoot th.text-center span.bold, .billed-order-details-page .dinvoice table tfoot td.text-center span.bold, .order-details-view .dinvoice table tfoot th.text-center > span, .order-details-view .dinvoice table tfoot td.text-center > span { display: inline-block !important; visibility: visible !important; opacity: 1 !important; color: #2c2c2c !important; font-weight: 700 !important; font-size: 0.875rem !important; } /* Override any display:none rules */ .billed-order-details-page .dinvoice table tfoot th.text-center span, .billed-order-details-page .dinvoice table tfoot td.text-center span { display: inline-block !important; } /* Timeline Sections - Compact */ .billed-order-details-page .m-acc { margin-bottom: 0.75rem !important; } .billed-order-details-page .m-acc .card { border-radius: 8px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important; } .billed-order-details-page .m-acc .card-body { padding: 0.75rem !important; } .billed-order-details-page .m-acc .timeline-item { margin-bottom: 0.5rem !important; } .billed-order-details-page .m-acc .timeline-event h6 { font-size: 0.875rem !important; font-weight: 600 !important; margin-bottom: 0.5rem !important; } .billed-order-details-page .m-acc .timeline-event-time { font-size: 0.75rem !important; color: #6c757d !important; } /* Invoice Card Section */ .billed-order-details-page .card-body.no-padd { padding: 0.75rem !important; } .billed-order-details-page .card-body.no-padd .row { margin-bottom: 0.5rem !important; } .billed-order-details-page .card-body.no-padd .col-md-4, .billed-order-details-page .card-body.no-padd .col-md-8 { flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 0.5rem !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .billed-order-details-page .card-body.no-padd label { font-size: 0.8125rem !important; font-weight: 600 !important; margin-bottom: 0.375rem !important; display: block !important; word-wrap: break-word !important; overflow: visible !important; } .billed-order-details-page .card-body.no-padd label b { display: inline !important; word-wrap: break-word !important; } .billed-order-details-page .card-body.no-padd .mt-1 { margin-top: 0.5rem !important; word-wrap: break-word !important; overflow: visible !important; } .billed-order-details-page .card-body.no-padd .mt-1 a, .billed-order-details-page .card-body.no-padd .mt-1 * { word-wrap: break-word !important; overflow-wrap: break-word !important; max-width: 100% !important; } /* Remark Section - Compact */ .billed-order-details-page .c-remark { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; padding: 0.625rem !important; background: #f8f9fa !important; border-radius: 4px !important; overflow: visible !important; } .billed-order-details-page .c-remark label { font-size: 0.8125rem !important; font-weight: 600 !important; margin-bottom: 0.375rem !important; display: block !important; word-wrap: break-word !important; overflow: visible !important; } .billed-order-details-page .c-remark label b { display: inline !important; } .billed-order-details-page .c-remark p { font-size: 0.8125rem !important; margin-bottom: 0 !important; line-height: 1.5 !important; color: #495057 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; overflow: visible !important; } /* Badge Styling */ .billed-order-details-page .badge { font-size: 0.75rem !important; padding: 0.375rem 0.625rem !important; border-radius: 12px !important; } /* Chip Text */ .billed-order-details-page .chip-text { display: inline-block !important; padding: 0.25rem 0.5rem !important; background: #f0f0f0 !important; border-radius: 4px !important; font-size: 0.75rem !important; margin-left: 0.25rem !important; } } /* Desktop Enhancements - Order Details Page (Only for screens > 768px) */ @media only screen and (min-width: 769px) { .order-details-page .customer-details-header { background: linear-gradient(135deg, #037345 0%, #318344 100%); border-bottom: none; padding: 1rem 1.5rem; } .order-details-page .customer-details-header h5 { color: #fff; font-size: 1rem; font-weight: 600; margin: 0; display: flex; align-items: center; } .order-details-page .customer-details-header .feather { width: 18px; height: 18px; margin-right: 8px; stroke-width: 2.5; } /* Requirement Area - Desktop Fixes */ .order-details-page #requirement_area .m-stock-avl { position: relative; top: auto; right: auto; } .order-details-page #requirement_area .m-stock-avl button { position: relative; top: auto; } } @media only screen and (max-width: 768px) { .tango-v2 .header-navbar.floating-nav { background: #037345; } .bookmark-wrapper .bookmark-wrapper.d-md-none.d-lg-none b { color: #fff; } .header-navbar .navbar-container ul.navbar-nav li i.ficon { color: #fff; } .doctor-search-container { background: #037345 !important; } .doctor-search-container .form-control{ width: 100% !important; min-height: 30px !important; padding: 0.45rem 1rem !important; font-size: 0.9375rem !important; border-radius: 10px !important; background: #fff !important; } .mx-table thead { display: none; } .mx-table, .mx-table tbody, .mx-table tr, .mx-table td { display: block; width: 100%; } .mx-table tbody tr { background: #fff; margin-bottom: 12px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.08); padding: 0px 0; border-radius: var(--mobile-border-radius); box-shadow: var(--mobile-shadow); overflow: hidden; } .mx-table tbody td { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border: none; text-align: right; font-size: 13px; white-space: normal !important; } .mx-table tbody td::before { content: attr(data-label); font-weight: 600; color: #555; flex: 1; text-align: left; padding-right: 10px; text-transform: uppercase; font-size: 12px; } .mx-table tbody td:last-child { justify-content: flex-end; } /* Floating Add Button */ .add-btn.mobile-tab { position: fixed; bottom: 20px; right: 20px; z-index: 1050; width: 56px; height: 56px; border-radius: 50%; padding: 0; display: flex !important; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.25); } .add-btn.mobile-tab i { font-size: 1.6rem; margin-right: 0; } /* Button container */ .mx-filter .action-buttons { display: flex; gap: 10px; width: 100%; } /* Default: Search full width */ .mx-filter .action-buttons { margin-top: 1rem !important; } .mx-filter .action-buttons .search-btn { width: 100%; } /* When Reset exists */ .mx-filter .action-buttons.has-reset .search-btn, .mx-filter .action-buttons.has-reset .reset-btn { width: 100%; } /* Reset anchor fix */ .mx-filter .action-buttons .reset-wrap { width: 100%; } .mx-filter .form-vertical .col-md-4,.mx-filter .form-vertical .col-md-3 { margin-bottom: 0rem !important; padding: 0 0rem !important; } .mx-filter .form-vertical .form-group { margin-bottom: 0rem !important; } .mx-filter .pb-1 { padding-bottom: 0rem!important; } .mx-title{padding-bottom: 0.05rem !important;} .dataTables_paginate ul.pagination { float: none!important; } /* ============================================ QUICK LINKS - MOBILE OPTIMIZATION Better design for mobile view only ============================================ */ /* Prevent Bootstrap dropdown from interfering on mobile */ .quick-links.dropdown.show .dropdown-menu { /* Bootstrap's default positioning - override on mobile */ position: fixed !important; transform: none !important; } /* Quick Links Button - Mobile */ .quick-links .nav-link { padding: 0.5rem !important; min-width: 44px !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(3, 115, 69, 0.1) !important; transition: all 0.3s ease !important; cursor: pointer !important; } .quick-links .nav-link:hover, .quick-links .nav-link:focus { background: rgba(3, 115, 69, 0.2) !important; transform: scale(1.05) !important; } .quick-links .nav-link i { font-size: 1.25rem !important; color: #fff !important; } /* Quick Links Dropdown - Mobile Compact Overlay */ .quick-links .dropdown-menu { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; background: rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; z-index: 9999 !important; display: none !important; overflow: hidden !important; } .quick-links .dropdown-menu.show { display: block !important; } /* Dropdown Content Container - Compact */ .quick-links .dropdown-menu-media { position: absolute !important; bottom: 0 !important; left: -6px !important; right: 0 !important; width: 100% !important; max-width: 100% !important; background: #ffffff !important; border-radius: 16px !important; padding: 1rem 1rem 1.25rem !important; max-height: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12) !important; transform: none !important; height: fit-content !important; } /* Dropdown Header - Mobile Compact */ .quick-links .dropdown-menu-header { margin-bottom: 1rem !important; padding-bottom: 0.75rem !important; border-bottom: 1px solid #f0f0f0 !important; } .quick-links .dropdown-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 !important; margin: 0 !important; } .quick-links .dropdown-header h3 { font-size: 1.125rem !important; font-weight: 700 !important; color: #2c2c2c !important; margin: 0 !important; } .quick-links .dropdown-header h3:last-child { font-size: 1.375rem !important; color: #037345 !important; cursor: pointer !important; padding: 0.25rem !important; transition: transform 0.2s ease !important; } .quick-links .dropdown-header h3:last-child:active { transform: scale(0.9) !important; } /* Shortcuts List Container */ .quick-links .dropdown-shortcuts-list { padding: 0 !important; margin: 0 !important; } .quick-links .row-bordered { margin: 0 !important; padding: 0 !important; gap: 0.75rem !important; display: flex !important; flex-direction: row !important; } /* Individual Shortcut Item - Mobile Compact Card Style */ .quick-links .dropdown-shortcuts-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 1rem 0.75rem !important; background: #ffffff !important; border: 1.5px solid #e8e8e8 !important; border-radius: 12px !important; min-height: 100px !important; transition: all 0.2s ease !important; position: relative !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important; flex: 1 !important; } .quick-links .dropdown-shortcuts-item:active { transform: scale(0.98) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important; } .quick-links .dropdown-shortcuts-item:hover { border-color: #037345 !important; box-shadow: 0 4px 12px rgba(3, 115, 69, 0.15) !important; transform: translateY(-2px) !important; } /* Shortcut Icon - Mobile Compact */ .quick-links .dropdown-shortcuts-icon { width: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, #037345 0%, #318344 100%) !important; border-radius: 12px !important; margin-bottom: 0.75rem !important; box-shadow: 0 2px 8px rgba(3, 115, 69, 0.2) !important; } .quick-links .dropdown-shortcuts-icon i { font-size: 1.375rem !important; color: #ffffff !important; } /* Shortcut Link - Mobile Compact */ .quick-links .dropdown-shortcuts-item .stretched-link { font-size: 0.875rem !important; font-weight: 600 !important; color: #2c2c2c !important; text-decoration: none !important; margin-bottom: 0.375rem !important; text-align: center !important; line-height: 1.3 !important; } .quick-links .dropdown-shortcuts-item .stretched-link:active { color: #037345 !important; } /* Shortcut Description - Mobile Compact */ .quick-links .dropdown-shortcuts-item small { font-size: 0.75rem !important; color: #6c757d !important; text-align: center !important; line-height: 1.3 !important; } /* Close Button Overlay - Mobile */ .quick-links .dropdown-menu::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: transparent !important; z-index: -1 !important; } /* Prevent body scroll when dropdown is open */ body.quick-links-open { overflow: hidden !important; position: fixed !important; width: 100% !important; } } .order-details-page .detail-item { padding: 0.5rem 0; } .order-details-page .detail-label { font-size: 0.8125rem; font-weight: 600; color: #8e8b9b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; display: block; } .order-details-page .detail-value { font-size: 0.9375rem; color: #2c2c2c; font-weight: 500; line-height: 1.6; } .order-details-page .detail-value strong { font-weight: 600; color: #2c2c2c; } .order-details-page .detail-value a { color: #037345; text-decoration: none; transition: color 0.2s ease; } .order-details-page .detail-value a:hover { color: #025a35; text-decoration: underline; } /* Mobile scrollable tabs */ @media (max-width: 768px) { .mobile-scrollable-tabs { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.3) transparent; } .mobile-scrollable-tabs .row { display: flex; flex-wrap: nowrap; min-width: max-content; } .mobile-scrollable-tabs .col-12, .mobile-scrollable-tabs .col-md-4 { flex: 0 0 auto; min-width: 120px; white-space: nowrap; } .mobile-scrollable-tabs .nav-link { white-space: nowrap; padding: 10px 15px; text-align: center; } .mobile-scrollable-tabs::-webkit-scrollbar { height: 4px; } .mobile-scrollable-tabs::-webkit-scrollbar-track { background: transparent; } .mobile-scrollable-tabs::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); border-radius: 2px; } .card-body.nev-card{padding:0px!important} } /* ============================================ STOCK ADJUSTMENT PAGES - PROFESSIONAL MOBILE DESIGN Scoped to .stock-adj class to avoid affecting other pages ============================================ */ @media only screen and (max-width: 768px) { /* Hide table header on mobile - using labels instead */ .stock-adj #requirement_area thead { display: none !important; } /* Professional Card Design for Product Rows */ .stock-adj #requirement_area tbody tr { display: block !important; background: #ffffff !important; border: 1px solid #e0e6ed !important; border-radius: 12px !important; margin-bottom: 1.25rem !important; padding: 1.25rem !important; position: relative !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .stock-adj #requirement_area tbody tr:active { transform: scale(0.98) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important; } /* Row Number Badge - Professional Design */ .stock-adj #requirement_area tbody tr td:first-child { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 1rem !important; padding-bottom: 1rem !important; border-bottom: 2px solid #f0f4f8 !important; padding: 0 0 1rem 0 !important; } .stock-adj #requirement_area tbody tr td:first-child b { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; background: linear-gradient(135deg, #037345 0%, #025a35 100%) !important; color: #ffffff !important; border-radius: 8px !important; font-size: 0.875rem !important; font-weight: 700 !important; box-shadow: 0 2px 4px rgba(3, 115, 69, 0.2) !important; } /* Table cell inputs - Full width with proper spacing */ .stock-adj #requirement_area td { padding: 0 !important; display: block !important; width: 100% !important; border: none !important; margin-bottom: 1.25rem !important; } .stock-adj #requirement_area td:last-child { margin-bottom: 0 !important; } /* Hide empty action cells on mobile */ .stock-adj #requirement_area tbody tr td:last-child:empty { display: none !important; } /* Professional Remove Button - Top Right Corner */ .stock-adj #requirement_area tbody tr td:last-child { position: absolute !important; top: 1rem !important; right: 1rem !important; width: auto !important; padding: 0 !important; border: none !important; z-index: 10 !important; margin: 0 !important; } .stock-adj #requirement_area tbody tr .btn-danger.btn-sm { width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; background: #fff !important; border: 2px solid #fee2e2 !important; color: #dc2626 !important; box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15) !important; font-size: 0.875rem !important; transition: all 0.2s ease !important; } .stock-adj #requirement_area tbody tr .btn-danger.btn-sm:active { transform: scale(0.95) !important; box-shadow: 0 1px 3px rgba(220, 38, 38, 0.2) !important; } .stock-adj #requirement_area tbody tr .btn-danger.btn-sm i { margin: 0 !important; font-size: 1.125rem !important; line-height: 1 !important; } /* Professional Input Labels */ .stock-adj .table-input-label { display: block !important; font-size: 0.8125rem !important; font-weight: 600 !important; color: #374151 !important; margin-bottom: 0.625rem !important; margin-top: 0 !important; letter-spacing: 0.01em !important; } .stock-adj .table-input-label .required { color: #dc2626 !important; margin-left: 0.25rem !important; } /* Professional Form Controls */ .stock-adj #requirement_area td .form-control, .stock-adj #requirement_area td .select2-container { width: 100% !important; min-width: 100% !important; margin-top: 0 !important; } .stock-adj #requirement_area td .form-control { min-height: 48px !important; padding: 0.875rem 1rem !important; font-size: 0.9375rem !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; background: #ffffff !important; transition: all 0.2s ease !important; color: #111827 !important; } .stock-adj #requirement_area td .form-control:focus { border-color: #037345 !important; box-shadow: 0 0 0 3px rgba(3, 115, 69, 0.1) !important; outline: none !important; } /* Professional Select2 Styling */ .stock-adj #requirement_area td .select2-container--default .select2-selection--single { height: 48px !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; background: #ffffff !important; } .stock-adj #requirement_area td .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px !important; padding-left: 1rem !important; font-size: 0.9375rem !important; color: #111827 !important; } .stock-adj #requirement_area td .select2-container--default.select2-container--focus .select2-selection--single { border-color: #037345 !important; box-shadow: 0 0 0 3px rgba(3, 115, 69, 0.1) !important; } /* Remove static width for quantity */ .stock-adj #requirement_area td[style*="width: 80px"], .stock-adj #requirement_area td[style*="width:80px"], .stock-adj #requirement_area td[style*="width: 80px !important"], .stock-adj #requirement_area td[style*="width:80px!important"], .stock-adj #requirement_area td[style*="width: 150px"], .stock-adj #requirement_area td[style*="width:150px"], .stock-adj #requirement_area td[style*="width: 150px !important"], .stock-adj #requirement_area td[style*="width:150px!important"] { width: 100% !important; min-width: 100% !important; max-width: 100% !important; } .stock-adj #requirement_area td input[name="quantity[]"] { width: 100% !important; } /* Readonly Available Quantity Field Styling */ .stock-adj #requirement_area td input[name="account_quantity[]"], .stock-adj #requirement_area td input[readonly] { width: 100% !important; background-color: #f3f4f6 !important; border-color: #d1d5db !important; color: #6b7280 !important; cursor: not-allowed !important; opacity: 0.9 !important; } .stock-adj #requirement_area td input[name="account_quantity[]"]:focus, .stock-adj #requirement_area td input[readonly]:focus { background-color: #f3f4f6 !important; border-color: #d1d5db !important; box-shadow: none !important; outline: none !important; } /* Professional Add Row Button */ .stock-adj .btn-outline-info { background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important; border: 2px solid #037345 !important; color: #037345 !important; padding: 1rem 2rem !important; font-size: 1rem !important; font-weight: 600 !important; border-radius: 12px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; min-width: 100% !important; width: 100% !important; box-shadow: 0 2px 4px rgba(3, 115, 69, 0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; } .stock-adj .btn-outline-info:active { background: linear-gradient(135deg, #037345 0%, #025a35 100%) !important; color: #ffffff !important; transform: scale(0.98) !important; box-shadow: 0 4px 12px rgba(3, 115, 69, 0.3) !important; } .stock-adj .btn-outline-info i { font-size: 1.125rem !important; } /* Professional Submit Button */ .stock-adj .btn-primary { background: linear-gradient(135deg, #037345 0%, #025a35 100%) !important; border: none !important; color: #ffffff !important; padding: 1rem 2rem !important; font-size: 1rem !important; font-weight: 600 !important; border-radius: 12px !important; width: 100% !important; box-shadow: 0 4px 12px rgba(3, 115, 69, 0.25) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .stock-adj .btn-primary:active { transform: scale(0.98) !important; box-shadow: 0 2px 8px rgba(3, 115, 69, 0.3) !important; } /* Warehouse Field Styling */ .stock-adj .col-12.col-sm-4 { margin-bottom: 1.5rem !important; } .stock-adj .form-label { font-size: 0.8125rem !important; font-weight: 600 !important; color: #374151 !important; margin-bottom: 0.625rem !important; letter-spacing: 0.01em !important; } .stock-adj .form-select.select2, .stock-adj select.form-select { min-height: 48px !important; padding: 0.875rem 1rem !important; font-size: 0.9375rem !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; background: #ffffff !important; } .stock-adj .form-select:focus, .stock-adj select.form-select:focus { border-color: #037345 !important; box-shadow: 0 0 0 3px rgba(3, 115, 69, 0.1) !important; outline: none !important; } /* Card Body Padding */ .stock-adj .card-body { padding: 1.25rem !important; overflow-x: hidden !important; max-width: 100% !important; } /* Row container - prevent overflow */ .stock-adj .row { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; overflow-x: hidden !important; } /* Column containers - prevent overflow */ .stock-adj [class*="col-"] { max-width: 100% !important; overflow-x: hidden !important; } /* Inner div containers - prevent overflow */ .stock-adj .col-12.col-sm-12 > div { overflow-x: hidden !important; max-width: 100% !important; width: 100% !important; } /* Table Container */ .stock-adj .col-lg-12.no-pad { padding: 0 !important; margin-top: 1rem !important; overflow-x: hidden !important; max-width: 100% !important; width: 100% !important; } /* Prevent horizontal scrolling on table wrapper */ .stock-adj .col-12.col-sm-12 { overflow-x: hidden !important; max-width: 100% !important; width: 100% !important; } /* Table wrapper - prevent overflow */ .stock-adj #requirement_area { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* Table itself - prevent overflow */ .stock-adj #requirement_area table { width: 100% !important; max-width: 100% !important; table-layout: auto !important; } /* Table cells - ensure no fixed widths cause overflow */ .stock-adj #requirement_area th, .stock-adj #requirement_area td { max-width: 100% !important; overflow: hidden !important; word-wrap: break-word !important; } /* Select2 dropdown container - prevent overflow */ .stock-adj .select2-container { max-width: 100% !important; width: 100% !important; } /* Select2 selection - prevent overflow */ .stock-adj .select2-container--default .select2-selection--single { max-width: 100% !important; overflow: hidden !important; } /* Select2 dropdown - ensure it doesn't cause scroll */ .stock-adj .select2-dropdown { max-width: 100vw !important; } /* Professional focus states - scoped */ .stock-adj .form-control:focus, .stock-adj .form-select:focus, .stock-adj .select2-container--focus .select2-selection--single { border-color: #037345 !important; box-shadow: 0 0 0 3px rgba(3, 115, 69, 0.1) !important; } /* Exclude readonly fields from focus styling */ .stock-adj .form-control[readonly]:focus { border-color: #d1d5db !important; box-shadow: none !important; } /* Loading state for buttons - scoped */ .stock-adj .btn:disabled { opacity: 0.6 !important; cursor: not-allowed !important; } } /* Desktop enhancements for stock adjustment pages */ @media (min-width: 769px) { /* Restore table layout for desktop */ .stock-adj #requirement_area td { display: table-cell !important; } .stock-adj #requirement_area tbody tr { display: table-row !important; border: none !important; border-radius: 0 !important; margin-bottom: 0 !important; padding: 0.75rem !important; transition: background-color 0.2s ease !important; } .stock-adj #requirement_area tbody tr:hover { background-color: #f9fafb !important; } /* Desktop: Hide labels - table headers are visible */ .stock-adj .table-input-label { display: none !important; } .stock-adj #requirement_area td .form-control, .stock-adj #requirement_area td .select2-container { width: 100% !important; } /* Professional desktop button styling */ .stock-adj .btn-outline-info { min-width: auto !important; width: auto !important; } /* Desktop: Readonly Available Quantity Field Styling */ .stock-adj #requirement_area td input[name="account_quantity[]"], .stock-adj #requirement_area td input[readonly] { background-color: #f3f4f6 !important; border-color: #d1d5db !important; color: #6b7280 !important; cursor: not-allowed !important; } .stock-adj #requirement_area td input[name="account_quantity[]"]:focus, .stock-adj #requirement_area td input[readonly]:focus { background-color: #f3f4f6 !important; border-color: #d1d5db !important; box-shadow: none !important; outline: none !important; } } /* ============================================ STOCK IMPORT IN PAGE - PROFESSIONAL MOBILE DESIGN Scoped to .stock-import class ============================================ */ @media only screen and (max-width: 768px) { /* Instructions Box - Mobile */ .stock-import .instructions { padding: 1rem !important; margin-bottom: 1rem !important; font-size: 0.8125rem !important; line-height: 1.6 !important; } .stock-import .instructions h6 { font-size: 0.9375rem !important; margin-bottom: 0.75rem !important; font-weight: 600 !important; } .stock-import .instructions p { margin-bottom: 0.5rem !important; font-size: 0.8125rem !important; } /* Card Body Padding */ .stock-import .card-body { padding: 1.25rem !important; } /* Upload Section - Professional Mobile Design */ .stock-import .upload-section { padding: 1.25rem !important; border-radius: 12px !important; border: 2px dashed #d1d5db !important; background: #f9fafb !important; transition: all 0.3s ease !important; } .stock-import .upload-section:active { border-color: #037345 !important; background: #f0f9f4 !important; } /* Form Labels - Professional */ .stock-import .form-label { font-size: 0.8125rem !important; font-weight: 600 !important; color: #374151 !important; margin-bottom: 0.625rem !important; letter-spacing: 0.01em !important; } .stock-import .form-label .text-danger { color: #dc2626 !important; margin-left: 0.25rem !important; } /* Form Controls - Professional Mobile Design */ .stock-import .form-select, .stock-import select.form-select { min-height: 48px !important; padding: 0.875rem 1rem !important; font-size: 0.9375rem !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; background: #ffffff !important; transition: all 0.2s ease !important; } .stock-import .form-select:focus, .stock-import select.form-select:focus { border-color: #037345 !important; box-shadow: 0 0 0 3px rgba(3, 115, 69, 0.1) !important; outline: none !important; } /* File Input Label - Professional Design */ .stock-import .file-input-label { min-height: 48px !important; padding: 0.875rem 1rem !important; font-size: 0.9375rem !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; background: #ffffff !important; display: flex !important; align-items: center !important; transition: all 0.2s ease !important; cursor: pointer !important; } .stock-import .file-input-label:active { border-color: #037345 !important; background: #f0f9f4 !important; transform: scale(0.98) !important; } .stock-import .file-input-label i { font-size: 1.125rem !important; color: #037345 !important; margin-right: 0.5rem !important; } /* Column Spacing */ .stock-import .col-12.col-sm-4, .stock-import .col-12.col-sm-2 { margin-bottom: 1.5rem !important; } .stock-import .row.g-3.align-items-end > div { margin-bottom: 1.5rem !important; } /* Buttons - Professional Mobile Design */ .stock-import .btn-primary, .stock-import .btn-outline-success { width: 100% !important; min-height: 48px !important; padding: 0.875rem 1.5rem !important; font-size: 0.9375rem !important; font-weight: 600 !important; border-radius: 10px !important; margin-bottom: 1rem !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; } .stock-import .btn-primary { background: linear-gradient(135deg, #037345 0%, #025a35 100%) !important; border: none !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(3, 115, 69, 0.25) !important; } .stock-import .btn-primary:active { transform: scale(0.98) !important; box-shadow: 0 2px 8px rgba(3, 115, 69, 0.3) !important; } .stock-import .btn-outline-success { background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important; border: 2px solid #037345 !important; color: #037345 !important; box-shadow: 0 2px 4px rgba(3, 115, 69, 0.1) !important; } .stock-import .btn-outline-success:active { background: linear-gradient(135deg, #037345 0%, #025a35 100%) !important; color: #ffffff !important; transform: scale(0.98) !important; box-shadow: 0 4px 12px rgba(3, 115, 69, 0.3) !important; } /* Progress Bar */ .stock-import .progress { height: 6px !important; border-radius: 10px !important; background: #e5e7eb !important; overflow: hidden !important; } .stock-import .progress-bar { background: linear-gradient(135deg, #037345 0%, #025a35 100%) !important; border-radius: 10px !important; } /* Status Messages */ .stock-import .status-message { padding: 0.875rem 1rem !important; border-radius: 10px !important; font-size: 0.875rem !important; line-height: 1.5 !important; } /* Return Data Section */ .stock-import .returnData { margin-top: 1.5rem !important; border-radius: 12px !important; overflow: hidden !important; } /* Confirm Button in Preview */ .stock-import #confirm_stock_in_form .btn-success { width: 100% !important; min-height: 48px !important; padding: 0.875rem 1.5rem !important; font-size: 0.9375rem !important; font-weight: 600 !important; border-radius: 10px !important; background: linear-gradient(135deg, #037345 0%, #025a35 100%) !important; border: none !important; box-shadow: 0 4px 12px rgba(3, 115, 69, 0.25) !important; margin-bottom: 0.75rem !important; } .stock-import #confirm_stock_in_form .btn-success:active { transform: scale(0.98) !important; box-shadow: 0 2px 8px rgba(3, 115, 69, 0.3) !important; } /* Valid rows text - below button */ .stock-import #confirm_stock_in_form .text-center { text-align: center !important; padding: 0.5rem 0 !important; } .stock-import #confirm_stock_in_form .text-center small { font-size: 0.8125rem !important; color: #6b7280 !important; line-height: 1.5 !important; } .stock-import #confirm_stock_in_form .text-center small b { color: #037345 !important; font-weight: 600 !important; } /* Row Container */ .stock-import .row { margin-left: 0 !important; margin-right: 0 !important; } /* Column Containers */ .stock-import [class*="col-"] { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .stock-import #confirm_stock_in_form .card-body { padding: 0rem !important; } } /* Desktop enhancements for stock import page */ @media (min-width: 769px) { .stock-import .btn-primary, .stock-import .btn-outline-success { width: auto !important; min-height: auto !important; } .stock-import #confirm_stock_in_form .btn-success { width: auto !important; min-height: auto !important; } } /* ============================================ STATE MAPPING PAGE - MOBILE FIXES ============================================ */ @media only screen and (max-width: 768px) { /* State Mapping Select2 Dropdowns - Mobile Fix */ .state_mapping .select2-container, #state_id.select2-container, #co_id.select2-container, #co_id_bulk.select2-container, #states_c_.select2-container { width: 100% !important; min-height: 44px !important; position: relative !important; } .state_mapping .select2-container--default .select2-selection--single, #state_id.select2-container--default .select2-selection--single, #co_id.select2-container--default .select2-selection--single, #co_id_bulk.select2-container--default .select2-selection--single, #states_c_.select2-container--default .select2-selection--single { height: 44px !important; min-height: 44px !important; border: 1.5px solid #d0d7de !important; border-radius: 10px !important; background-color: #ffffff !important; padding: 0 !important; cursor: pointer !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important; } .state_mapping .select2-container--default .select2-selection--single .select2-selection__rendered, #state_id.select2-container--default .select2-selection--single .select2-selection__rendered, #co_id.select2-container--default .select2-selection--single .select2-selection__rendered, #co_id_bulk.select2-container--default .select2-selection--single .select2-selection__rendered, #states_c_.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px !important; padding-left: 1rem !important; padding-right: 2.5rem !important; font-size: 0.9375rem !important; color: #495057 !important; } .state_mapping .select2-container--default .select2-selection--single .select2-selection__arrow, #state_id.select2-container--default .select2-selection--single .select2-selection__arrow, #co_id.select2-container--default .select2-selection--single .select2-selection__arrow, #co_id_bulk.select2-container--default .select2-selection--single .select2-selection__arrow, #states_c_.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; right: 0.75rem !important; top: 0 !important; } .state_mapping .select2-container--default.select2-container--open .select2-selection--single, #state_id.select2-container--default.select2-container--open .select2-selection--single, #co_id.select2-container--default.select2-container--open .select2-selection--single, #co_id_bulk.select2-container--default.select2-container--open .select2-selection--single, #states_c_.select2-container--default.select2-container--open .select2-selection--single { border-color: #037345 !important; box-shadow: 0 0 0 3px rgba(3, 115, 69, 0.1) !important; } .state_mapping .select2-container--default.select2-container--focus .select2-selection--single, #state_id.select2-container--default.select2-container--focus .select2-selection--single, #co_id.select2-container--default.select2-container--focus .select2-selection--single, #co_id_bulk.select2-container--default.select2-container--focus .select2-selection--single, #states_c_.select2-container--default.select2-container--focus .select2-selection--single { border-color: #037345 !important; box-shadow: 0 0 0 3px rgba(3, 115, 69, 0.1) !important; outline: none !important; } /* Select2 Dropdown - Mobile Fix */ .state_mapping .select2-dropdown, .select2-dropdown { border: 1.5px solid #d0d7de !important; border-radius: 10px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; margin-top: 4px !important; z-index: 9999 !important; max-width: 100vw !important; overflow: hidden !important; } .state_mapping .select2-results__option, .select2-results__option { padding: 0.875rem 1rem !important; min-height: 44px !important; font-size: 0.9375rem !important; line-height: 1.5 !important; cursor: pointer !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important; } .state_mapping .select2-results__option--highlighted, .select2-results__option--highlighted { background-color: #037345 !important; color: #ffffff !important; } .state_mapping .select2-results__option[aria-selected="true"], .select2-results__option[aria-selected="true"] { background-color: #e8f5e9 !important; color: #037345 !important; font-weight: 500 !important; } /* Ensure Select2 is clickable on mobile */ .state_mapping .select2-container--default .select2-selection--single, #state_id.select2-container--default .select2-selection--single, #co_id.select2-container--default .select2-selection--single, #co_id_bulk.select2-container--default .select2-selection--single, #states_c_.select2-container--default .select2-selection--single { pointer-events: auto !important; -webkit-user-select: none !important; user-select: none !important; touch-action: manipulation !important; } /* Fix for Select2 search box on mobile */ .state_mapping .select2-search--dropdown .select2-search__field, .select2-search--dropdown .select2-search__field { padding: 0.625rem 0.75rem !important; font-size: 0.9375rem !important; min-height: 44px !important; border: 1.5px solid #d0d7de !important; border-radius: 8px !important; } /* Prevent overflow issues */ .state_mapping .select2-container, #state_id.select2-container, #co_id.select2-container, #co_id_bulk.select2-container, #states_c_.select2-container { overflow: visible !important; } /* Form group spacing for state mapping */ .state_mapping .form-group, .col-md-4 .form-group { margin-bottom: 1rem !important; } /* Ensure select2 dropdown is above other elements */ .select2-container--open .select2-dropdown { z-index: 99999 !important; position: absolute !important; } } /* ============================================ PAYMENT COLLECTION DETAILS PAGE - MOBILE FIXES ============================================ */ @media only screen and (max-width: 768px) { /* Payment Collection Details Page - Mobile Optimization */ .payment-collection-details-page .card { margin-bottom: 1rem; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .payment-collection-details-page .card-body { padding: 1rem !important; } /* Info Labels and Values - Mobile Card Style */ .payment-collection-details-page .row > div[class*="col-"] { margin-bottom: 1.25rem; padding-left: 0.75rem; padding-right: 0.75rem; } .payment-collection-details-page label { display: block; font-size: 0.8125rem; font-weight: 500; color: #6c757d; margin-bottom: 0.5rem; line-height: 1.4; } .payment-collection-details-page .info-value { font-size: 0.9375rem; font-weight: 500; color: #212529; line-height: 1.5; word-break: break-word; padding: 0.375rem 0; min-height: 1.5rem; } /* Badge within info-value */ .payment-collection-details-page .info-value .badge { display: inline-block; margin-top: 0.25rem; vertical-align: middle; } /* Empty value handling */ .payment-collection-details-page .info-value:empty::after { content: "-"; color: #adb5bd; font-style: italic; font-weight: 400; } /* Title Styling */ .payment-collection-details-page .h-title { font-size: 1rem; font-weight: 600; color: #037345; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #037345; display: block; } /* Section spacing */ .payment-collection-details-page .card { margin-bottom: 1.25rem; } .payment-collection-details-page .card:last-child { margin-bottom: 0; } /* Badge Styling */ .payment-collection-details-page .badge { font-size: 0.8125rem; padding: 0.375rem 0.75rem; border-radius: 6px; font-weight: 500; } .payment-collection-details-page .badge-success { background-color: #28a745; color: #ffffff; } .payment-collection-details-page .badge-danger { background-color: #dc3545; color: #ffffff; } .payment-collection-details-page .badge-warning { background-color: #ffc107; color: #212529; } /* Customer Details Table - Mobile Card View (Following billed-order pattern) */ .payment-collection-details-page .mx-table { width: 100%; border-collapse: collapse; } .payment-collection-details-page .mx-table thead { display: none; } .payment-collection-details-page .mx-table, .payment-collection-details-page .mx-table tbody, .payment-collection-details-page .mx-table tr, .payment-collection-details-page .mx-table td { display: block; width: 100%; } .payment-collection-details-page .mx-table tbody tr { background: #fff; margin-bottom: 12px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.08); padding: 0; overflow: hidden; } .payment-collection-details-page .mx-table tbody td { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border: none; text-align: right; font-size: 13px; white-space: normal !important; } .payment-collection-details-page .mx-table tbody td::before { content: attr(data-label); font-weight: 600; color: #555; flex: 1; text-align: left; padding-right: 10px; text-transform: uppercase; font-size: 12px; } .payment-collection-details-page .mx-table tbody td:last-child { justify-content: flex-end; } /* Total Row Styling - Following billed-order pattern - Full Width */ .payment-collection-details-page .mx-table tfoot { display: block; width: 100%; } .payment-collection-details-page .mx-table tfoot tr { background: #037345; margin-top: 12px; border-radius: 8px; box-shadow: 0 2px 6px rgba(3, 115, 69, 0.2); padding: 0; overflow: hidden; display: block; width: 100%; box-sizing: border-box; } /* Hide first two columns in tfoot on mobile */ .payment-collection-details-page .mx-table tfoot td:first-child, .payment-collection-details-page .mx-table tfoot td:nth-child(2) { display: none !important; } .payment-collection-details-page .mx-table tfoot td:last-child { display: flex !important; width: 100%; justify-content: space-between; align-items: center; padding: 12px; border: none; color: #ffffff; font-size: 14px; font-weight: 600; box-sizing: border-box; } .payment-collection-details-page .mx-table tfoot td:last-child::before { content: "Total"; font-weight: 700; color: #ffffff; flex: 1; text-align: left; padding-right: 10px; text-transform: uppercase; font-size: 12px; } /* Remark Section */ .payment-collection-details-page .c-remark { background-color: #f8f9fa; padding: 1rem; border-radius: 10px; border-left: 4px solid #037345; margin-top: 1rem; margin-bottom: 1rem; } .payment-collection-details-page .c-remark label { font-weight: 600; color: #037345; font-size: 0.9375rem; margin-bottom: 0.5rem; display: block; } .payment-collection-details-page .c-remark p { margin-bottom: 0; color: #495057; line-height: 1.6; font-size: 0.875rem; padding: 0.5rem; background-color: #ffffff; border-radius: 6px; } /* Form Controls */ .payment-collection-details-page .form-control { font-size: 0.9375rem; padding: 0.625rem 0.75rem; border-radius: 8px; border: 1.5px solid #d0d7de; min-height: 44px; } .payment-collection-details-page .form-control:focus { border-color: #037345; box-shadow: 0 0 0 3px rgba(3, 115, 69, 0.1); } .payment-collection-details-page textarea.form-control { min-height: 100px; resize: vertical; } /* Buttons */ .payment-collection-details-page .btn { min-height: 44px; padding: 0.625rem 1.25rem; font-size: 0.9375rem; font-weight: 500; border-radius: 8px; width: 100%; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; } .payment-collection-details-page .btn:last-child { margin-bottom: 0; } .payment-collection-details-page .btn i { font-size: 0.875rem; } .payment-collection-details-page .btn-primary { background-color: #037345; border-color: #037345; } .payment-collection-details-page .btn-primary:hover { background-color: #025a35; border-color: #025a35; } .payment-collection-details-page .btn-danger { background-color: #dc3545; border-color: #dc3545; } .payment-collection-details-page .btn-danger:hover { background-color: #c82333; border-color: #c82333; } /* Table Responsive Wrapper */ .payment-collection-details-page .table-responsive { border-radius: 8px; overflow: visible; } /* Spacing Adjustments */ .payment-collection-details-page .mb-2 { margin-bottom: 1rem !important; } .payment-collection-details-page .mt-2 { margin-top: 1rem !important; } /* Card body padding optimization */ .payment-collection-details-page .card-body { padding: 1rem 1rem !important; } /* Better visual separation between sections */ .payment-collection-details-page .row + .row { margin-top: 0.5rem; } /* Info item grouping - subtle background for better scanability */ .payment-collection-details-page .col-12.col-md-6 { padding-bottom: 0.75rem; } /* Better visual hierarchy for sections */ .payment-collection-details-page .card-body .row:first-child { margin-bottom: 1rem; } /* Improve readability of long text */ .payment-collection-details-page .info-value p { margin-bottom: 0.5rem; line-height: 1.6; } .payment-collection-details-page .info-value p:last-child { margin-bottom: 0; } } /* Desktop View - Keep table layout */ @media (min-width: 769px) { .payment-collection-details-page .mx-table { display: table; width: 100%; } .payment-collection-details-page .mx-table thead { display: table-header-group; } .payment-collection-details-page .mx-table tbody { display: table-row-group; } .payment-collection-details-page .mx-table tbody tr, .payment-collection-details-page .mx-table tfoot tr { display: table-row; } .payment-collection-details-page .mx-table tbody td, .payment-collection-details-page .mx-table tfoot td { display: table-cell; padding: 0.5rem; border: 1px solid #dee2e6; } .payment-collection-details-page .mx-table tbody td::before, .payment-collection-details-page .mx-table tfoot td::before { display: none; } /* Reset tfoot column visibility on desktop */ .payment-collection-details-page .mx-table tfoot td:first-child, .payment-collection-details-page .mx-table tfoot td:nth-child(2) { display: table-cell !important; } /* Desktop tfoot styling */ .payment-collection-details-page .mx-table tfoot tr { background-color: #037345; } .payment-collection-details-page .mx-table tfoot td { color: #ffffff; font-weight: 600; } } /* ============================================ PENDING ORDERS VERIFICATION DETAILS PAGE - MOBILE APP DESIGN Native Mobile App Experience ============================================ */ @media only screen and (max-width: 768px) { /* No mobile header - removed as per user request */ /* Collapsible Card Sections - Native App Style */ .pending-orders-verification-details-page .card-header { padding: 1rem 1.25rem; background: #ffffff; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; min-height: 56px; } .pending-orders-verification-details-page .card-header:active { background: #f8f9fa; } .pending-orders-verification-details-page .card-header .card-title { font-size: 1rem; font-weight: 600; color: #037345; margin: 0; display: flex; align-items: center; gap: 0.5rem; } .pending-orders-verification-details-page .card-header .card-title i { font-size: 1.125rem; color: #037345; } .pending-orders-verification-details-page .card-toggle-icon { font-size: 1.25rem; color: #6c757d; transition: transform 0.3s ease; } .pending-orders-verification-details-page .card.collapsed .card-toggle-icon { transform: rotate(-90deg); } .pending-orders-verification-details-page .card-body { padding: 1.25rem; transition: all 0.3s ease; } .pending-orders-verification-details-page .card.collapsed .card-body { display: none; } /* Mobile Fixed Bottom Action Buttons - PROMINENT & ACCESSIBLE */ .pending-orders-verification-details-page .mobile-fixed-actions { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; background: linear-gradient(to top, #ffffff 0%, #f8f9fa 100%) !important; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15) !important; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)) !important; display: block !important; visibility: visible !important; opacity: 1 !important; border-top: 3px solid #037345; } .pending-orders-verification-details-page .mobile-actions-container { display: flex; flex-direction: column; gap: 0.875rem; max-width: 100%; } .pending-orders-verification-details-page .mobile-action-btn { width: 100%; border: none; border-radius: 14px; padding: 1.125rem 1.5rem; font-size: 0.9375rem; font-weight: 700; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 0.75rem; transition: all 0.2s ease; cursor: pointer; -webkit-tap-highlight-color: transparent; letter-spacing: 0.5px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); text-transform: uppercase; } .pending-orders-verification-details-page .mobile-action-btn:active { transform: translateY(2px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .pending-orders-verification-details-page .mobile-action-primary { background: linear-gradient(135deg, #037345 0%, #025a35 100%) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(3, 115, 69, 0.4) !important; } .pending-orders-verification-details-page .mobile-action-primary:active { background: linear-gradient(135deg, #025a35 0%, #014428 100%) !important; transform: translateY(2px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .pending-orders-verification-details-page .mobile-action-warning { background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important; color: #212529 !important; box-shadow: 0 4px 16px rgba(255, 193, 7, 0.4) !important; } .pending-orders-verification-details-page .mobile-action-warning:active { transform: translateY(2px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .pending-orders-verification-details-page .mobile-action-danger { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(220, 53, 69, 0.4) !important; } .pending-orders-verification-details-page .mobile-action-danger:active { transform: translateY(2px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .pending-orders-verification-details-page .mobile-action-btn i { font-size: 1.25rem; } /* Add bottom padding to content for fixed buttons */ .pending-orders-verification-details-page { padding-bottom: 240px !important; /* Extra space for prominent buttons */ } /* Ensure content doesn't get hidden behind buttons */ .pending-orders-verification-details-page .final-action-section { margin-bottom: 2rem; } /* Ensure mobile fixed actions are always visible */ .pending-orders-verification-details-page .mobile-fixed-actions { display: flex !important; visibility: visible !important; opacity: 1 !important; z-index: 1050 !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; } /* Make sure buttons are visible and properly styled */ .pending-orders-verification-details-page .mobile-action-btn { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* Hide desktop card headers on mobile (we use collapsible headers) */ .pending-orders-verification-details-page .card-header.customer-details-header { display: flex !important; } /* Timeline sections - Make collapsible and collapsed by default */ .pending-orders-verification-details-page .morder-logs .card.collapsed .card-body { display: none !important; } .pending-orders-verification-details-page .morder-logs .card-header { display: flex !important; } .pending-orders-verification-details-page .morder-logs .timeline-event h6 { font-size: 0.9375rem; font-weight: 600; color: #212529; margin-bottom: 0.5rem; } .pending-orders-verification-details-page .morder-logs .timeline-event-time { font-size: 0.8125rem; color: #6c757d; } /* ============================================ FINAL ADMIN DETAILS - PROFESSIONAL REDESIGN ============================================ */ /* Card Container - Clean & Spacious */ .pending-orders-verification-details-page .final-admin-card { margin-bottom: 2rem; overflow: visible; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); background: #ffffff; } /* Header - Prominent & Clear */ .pending-orders-verification-details-page .final-admin-header { background: linear-gradient(135deg, #037345 0%, #025a35 100%); color: #ffffff; border-bottom: none; border-radius: 16px 16px 0 0; padding: 1.25rem 1.5rem; box-shadow: 0 2px 8px rgba(3, 115, 69, 0.2); } .pending-orders-verification-details-page .final-admin-header .card-title { color: #ffffff !important; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.3px; } .pending-orders-verification-details-page .final-admin-header .card-title i { color: #ffffff !important; margin-right: 0.5rem; font-size: 1.375rem; } .pending-orders-verification-details-page .final-admin-header .card-toggle-icon { color: #ffffff !important; font-size: 1.25rem; } .pending-orders-verification-details-page .final-admin-header:active { background: linear-gradient(135deg, #025a35 0%, #014428 100%); } /* Card Body - Spacious Layout */ .pending-orders-verification-details-page .final-action-section .card-body { padding: 0rem !important; padding-top: 1rem !important; overflow: visible; } /* Section Organization - Clear Visual Hierarchy */ .pending-orders-verification-details-page .final-action-section { margin: 0; padding: 0; overflow: visible; } /* Section Dividers - Clear Separation */ .pending-orders-verification-details-page .final-action-section .hr { margin: 2rem 0 !important; border: none; border-top: 2px solid #e9ecef; background: none; height: 0; } /* Row Spacing - Generous */ .pending-orders-verification-details-page .final-action-section .row { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 1.5rem; } .pending-orders-verification-details-page .final-action-section .row > [class*="col-"] { padding-left: 0.75rem !important; padding-right: 0.75rem !important; margin-bottom: 1.25rem; } /* Form Labels - Clear & Prominent */ .pending-orders-verification-details-page .final-action-section .form-label { font-size: 0.875rem; font-weight: 700; color: #212529; margin-bottom: 0.625rem; display: block; letter-spacing: 0.2px; } .pending-orders-verification-details-page .final-action-section .form-label .required { color: #dc3545; margin-left: 0.25rem; } /* Form Controls - Professional & Touch-Friendly */ .pending-orders-verification-details-page .final-action-section .form-select, .pending-orders-verification-details-page .final-action-section select, .pending-orders-verification-details-page .final-action-section .select2-container { width: 100% !important; font-size: 0.9375rem; padding: 0; border: 0; border-radius: 12px; box-sizing: border-box; transition: all 0.2s ease; background: #ffffff; } .pending-orders-verification-details-page .final-action-section .form-select:focus, .pending-orders-verification-details-page .final-action-section select:focus { border-color: #037345; box-shadow: 0 0 0 4px rgba(3, 115, 69, 0.1); outline: none; } .pending-orders-verification-details-page .final-action-section .select2-container--default .select2-selection--single { height: 52px !important; border: 2px solid #dee2e6 !important; border-radius: 12px !important; transition: all 0.2s ease; } .pending-orders-verification-details-page .final-action-section .select2-container--default.select2-container--focus .select2-selection--single { border-color: #037345 !important; box-shadow: 0 0 0 4px rgba(3, 115, 69, 0.1) !important; } .pending-orders-verification-details-page .final-action-section .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 52px !important; padding-left: 1rem !important; font-size: 0.9375rem; color: #212529; } /* Buttons - Prominent & Accessible */ .pending-orders-verification-details-page .final-action-section .btn { width: 100%; min-height: 52px; font-size: 0.9375rem; font-weight: 700; padding: 0.875rem 1.25rem; border-radius: 12px; margin-bottom: 1rem; letter-spacing: 0.3px; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .pending-orders-verification-details-page .final-action-section .btn:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } /* Shipping Address Section - Fix Layout */ .pending-orders-verification-details-page .final-action-section #address_Data { margin-top: 1rem; margin-bottom: 1rem; padding: 0; } /* Product Requirements Area - Clean Card Design */ .pending-orders-verification-details-page .final-action-section #requirement_area { width: 100% !important; max-width: 100% !important; overflow: visible !important; padding: 0; margin: 1.5rem 0; } /* Product Card - Modern & Clean (like stock-adjustment-in) */ .pending-orders-verification-details-page .final-action-section .fx-border { margin-bottom: 2rem !important; padding: 1.5rem !important; border-radius: 16px !important; background: #f8f9fa !important; border: 2px solid #e9ecef !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important; position: relative !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; } /* Product Header Row - Number Badge and Remove Button (like stock-adjustment-in) */ .pending-orders-verification-details-page .final-action-section .fx-border .product-header-row { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 1.5rem !important; padding-bottom: 1rem !important; border-bottom: 2px solid #f0f4f8 !important; } /* Product Number Badge - Like stock-adjustment-in */ .pending-orders-verification-details-page .final-action-section .fx-border .product-number-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; background: linear-gradient(135deg, #037345 0%, #025a35 100%) !important; color: #ffffff !important; border-radius: 10px !important; font-size: 0.9375rem !important; font-weight: 700 !important; box-shadow: 0 2px 6px rgba(3, 115, 69, 0.3) !important; margin: 0 !important; padding: 0 !important; } /* Remove Button - Top Right (like stock-adjustment-in) */ .pending-orders-verification-details-page .final-action-section .fx-border .product-remove-btn { width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; background: #fff !important; border: 2px solid #fee2e2 !important; color: #dc2626 !important; box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15) !important; font-size: 0.875rem !important; transition: all 0.2s ease !important; } .pending-orders-verification-details-page .final-action-section .fx-border .product-remove-btn:active { transform: scale(0.95) !important; box-shadow: 0 1px 3px rgba(220, 38, 38, 0.2) !important; } .pending-orders-verification-details-page .final-action-section .fx-border .product-remove-btn i { margin: 0 !important; font-size: 1.125rem !important; line-height: 1 !important; } /* Hide old jsr-no if still present */ .pending-orders-verification-details-page .final-action-section .fx-border .jsr-no { display: none !important; } /* Hide old remove button in m-stock-avl */ .pending-orders-verification-details-page .final-action-section .fx-border .m-stock-avl { display: none !important; } /* Product Form Fields - Clean Vertical Stack */ .pending-orders-verification-details-page .final-action-section .fx-border .row { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 1.25rem; } .pending-orders-verification-details-page .final-action-section .fx-border .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; margin-bottom: 0.25rem !important; } .pending-orders-verification-details-page .final-action-section .fx-border .form-group { margin-bottom: 1.25rem; } .pending-orders-verification-details-page .final-action-section .fx-border .form-group label { font-size: 0.8125rem; font-weight: 700; color: #495057; margin-bottom: 0.625rem; display: block; letter-spacing: 0.2px; } .pending-orders-verification-details-page .final-action-section .fx-border .form-control, .pending-orders-verification-details-page .final-action-section .fx-border .form-select, .pending-orders-verification-details-page .final-action-section .fx-border select { width: 100% !important; min-height: 50px; font-size: 0.9375rem; padding: 0.875rem 1rem; border: 2px solid #dee2e6; border-radius: 12px; box-sizing: border-box; background: #ffffff; transition: all 0.2s ease; } .pending-orders-verification-details-page .final-action-section .fx-border .form-control:focus { border-color: #037345; box-shadow: 0 0 0 4px rgba(3, 115, 69, 0.1); outline: none; } .pending-orders-verification-details-page .final-action-section .fx-border .form-control-plaintext { min-height: 50px; padding: 0.875rem 1rem; font-size: 0.9375rem; font-weight: 700; color: #037345; display: flex; align-items: center; background: #f8f9fa; border-radius: 12px; border: 2px solid #e9ecef; } /* Batch Section - Differentiated Design (Mobile) */ .pending-orders-verification-details-page .final-action-section .batch-section-card { background: #ffffff !important; border: 2px solid #e3f2fd !important; border-radius: 12px !important; padding: 1.25rem !important; margin-top: 1.5rem !important; margin-bottom: 1rem !important; box-shadow: 0 2px 8px rgba(33, 150, 243, 0.08) !important; } /* Batch Header Row - Mobile */ .pending-orders-verification-details-page .final-action-section .batch-header-row { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 0.75rem !important; padding-bottom: 1rem !important; border-bottom: 2px solid #e3f2fd !important; } /* Batch Number Badge - Blue (Different from Product Green) */ .pending-orders-verification-details-page .final-action-section .batch-number-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%) !important; color: #ffffff !important; border-radius: 8px !important; font-size: 0.875rem !important; font-weight: 700 !important; box-shadow: 0 2px 6px rgba(33, 150, 243, 0.3) !important; } /* Batch Header Right - Stock Label and Remove Button */ .pending-orders-verification-details-page .final-action-section .batch-header-right { display: flex !important; align-items: center !important; gap: 0.75rem !important; } .pending-orders-verification-details-page .final-action-section .batch-stock-label { font-size: 0.8125rem !important; font-weight: 600 !important; color: #1976d2 !important; margin: 0 !important; } /* Batch Remove Button - Mobile */ .pending-orders-verification-details-page .final-action-section .batch-remove-btn { width: 36px !important; min-width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #fff !important; border: 2px solid #fee2e2 !important; color: #dc2626 !important; box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15) !important; font-size: 0.875rem !important; transition: all 0.2s ease !important; } .pending-orders-verification-details-page .final-action-section .batch-remove-btn:active { transform: scale(0.95) !important; box-shadow: 0 1px 3px rgba(220, 38, 38, 0.2) !important; } .pending-orders-verification-details-page .final-action-section .batch-remove-btn i { margin: 0 !important; font-size: 1rem !important; line-height: 1 !important; } /* Batch Section - Stack Vertically */ .pending-orders-verification-details-page .final-action-section .batch-wise .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-bottom: 1rem !important; } /* Hide desktop batch remove button on mobile */ .pending-orders-verification-details-page .final-action-section .batch-remove-btn-desktop { display: none !important; } /* Hide desktop m-stock-avl on mobile */ .pending-orders-verification-details-page .final-action-section .batch-wise .m-stock-avl { display: none !important; } /* ============================================ GST CALCULATION SECTION - PREMIUM MOBILE DESIGN ============================================ */ /* Main Container - Elevated Card Design */ .pending-orders-verification-details-page .final-action-section .gst-tab-div { margin-top: 2rem !important; padding: 0 !important; background: #ffffff !important; border-radius: 16px !important; border: none !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } /* Section Header (Visual Grouping) */ .pending-orders-verification-details-page .final-action-section .gst-tab-div::before { content: "Order Summary" !important; display: block !important; padding: 1rem 1.25rem !important; background: linear-gradient(135deg, #037345 0%, #025a35 100%) !important; color: #ffffff !important; font-size: 1.0625rem !important; font-weight: 700 !important; letter-spacing: 0.3px !important; margin: 0 !important; border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important; } /* Individual GST Row - Compact Design */ .pending-orders-verification-details-page .final-action-section .gst { padding: 0.75rem 1rem !important; margin: 0 !important; border-bottom: 1px solid #f0f0f0 !important; display: flex !important; align-items: center !important; min-height: 44px !important; background: #ffffff !important; transition: background-color 0.2s ease !important; } .pending-orders-verification-details-page .final-action-section .gst:hover { background: #f8f9fa !important; } .pending-orders-verification-details-page .final-action-section .gst:last-child { border-bottom: none !important; } /* Alternate Row Styling - Subtle Background */ .pending-orders-verification-details-page .final-action-section .gst:nth-of-type(even) { background: #fafbfc !important; } /* Row Layout - Single Line (No Stacking) */ .pending-orders-verification-details-page .final-action-section .gst .row { margin: 0 !important; width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; } .pending-orders-verification-details-page .final-action-section .gst .row > [class*="col-"] { padding: 0 !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; } /* Override col-12 to stay inline on mobile */ .pending-orders-verification-details-page .final-action-section .gst .row .col-12 { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } /* Label Column - Left Side - Single Line */ .pending-orders-verification-details-page .final-action-section .gst .row .col-md-10, .pending-orders-verification-details-page .final-action-section .gst .row .col-12.col-md-10 { flex: 1 1 auto !important; justify-content: flex-start !important; min-width: 0 !important; flex-wrap: nowrap !important; width: auto !important; max-width: none !important; } /* Value Column - Right Side - Single Line */ .pending-orders-verification-details-page .final-action-section .gst .row .col-md-2, .pending-orders-verification-details-page .final-action-section .gst .row .col-12.col-md-2 { flex: 0 0 auto !important; justify-content: flex-end !important; text-align: right !important; min-width: 100px !important; flex-shrink: 0 !important; width: auto !important; max-width: none !important; } /* Typography - Compact Labels */ .pending-orders-verification-details-page .final-action-section .gst b { font-size: 0.875rem !important; font-weight: 600 !important; color: #495057 !important; display: inline-block !important; line-height: 1.4 !important; letter-spacing: 0.1px !important; } /* Text Alignment Override */ .pending-orders-verification-details-page .final-action-section .gst .text-right { text-align: left !important; justify-content: flex-start !important; } /* Discount/Freight Input Container - Single Line */ .pending-orders-verification-details-page .final-action-section .gst .dis-flex-left { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 0.5rem !important; justify-content: flex-start !important; width: auto !important; max-width: 100% !important; } /* Value Display Container - Compact */ .pending-orders-verification-details-page .final-action-section .gst .dis-flex-right { display: flex !important; align-items: center !important; justify-content: flex-end !important; text-align: right !important; font-weight: 700 !important; color: #212529 !important; min-width: 90px !important; flex-shrink: 0 !important; } /* Standard Values - Compact Typography */ .pending-orders-verification-details-page .final-action-section .gst #sub_total_, .pending-orders-verification-details-page .final-action-section .gst #discount_amount_, .pending-orders-verification-details-page .final-action-section .gst #sub_total_after_discount_, .pending-orders-verification-details-page .final-action-section .gst #freight_charges_excl_, .pending-orders-verification-details-page .final-action-section .gst #cgst, .pending-orders-verification-details-page .final-action-section .gst #sgst, .pending-orders-verification-details-page .final-action-section .gst #igst, .pending-orders-verification-details-page .final-action-section .gst #gst_total { font-size: 0.9375rem !important; font-weight: 700 !important; color: #212529 !important; letter-spacing: 0.2px !important; white-space: nowrap !important; } /* Grand Total - Special Highlight */ .pending-orders-verification-details-page .final-action-section .gst #grand_total_, .pending-orders-verification-details-page .final-action-section .gst #net_total_ { font-size: 1.25rem !important; font-weight: 800 !important; color: #037345 !important; letter-spacing: 0.5px !important; } /* Input Fields - Compact Design */ .pending-orders-verification-details-page .final-action-section .gst .dis-input { width: 90px !important; max-width: 90px !important; min-width: 80px !important; margin-left: 0 !important; margin-top: 0 !important; min-height: 38px !important; border: 1.5px solid #dee2e6 !important; border-radius: 8px !important; padding: 0.5rem 0.625rem !important; font-size: 0.875rem !important; font-weight: 600 !important; color: #212529 !important; background: #ffffff !important; display: inline-block !important; float: none !important; transition: all 0.2s ease !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; } .pending-orders-verification-details-page .final-action-section .gst .dis-input:focus { border-color: #037345 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(3, 115, 69, 0.1) !important; } /* Freight Select Dropdown - Compact */ .pending-orders-verification-details-page .final-action-section .gst .dis-freight { width: 65px !important; min-width: 65px !important; max-width: 65px !important; min-height: 38px !important; border: 1.5px solid #dee2e6 !important; border-radius: 8px !important; padding: 0.5rem 0.375rem !important; font-size: 0.8125rem !important; font-weight: 600 !important; margin-left: 0 !important; display: inline-block !important; background: #ffffff !important; color: #212529 !important; transition: all 0.2s ease !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; cursor: pointer !important; } .pending-orders-verification-details-page .final-action-section .gst .dis-freight:focus { border-color: #037345 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(3, 115, 69, 0.1) !important; } .pending-orders-verification-details-page .final-action-section .gst select.dis-freight { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23212529' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.5rem center !important; background-size: 12px !important; padding-right: 2rem !important; } /* Discount Type Label */ .pending-orders-verification-details-page .final-action-section .gst #dis_type { font-size: 0.8125rem !important; color: #6c757d !important; font-weight: 500 !important; margin-left: 0.25rem !important; } /* Grand Total Section - Compact Highlight */ .pending-orders-verification-details-page .final-action-section .gst#new_total_tab { background: linear-gradient(135deg, #037345 0%, #025a35 100%) !important; color: #ffffff !important; padding: 1rem 1rem !important; border-radius: 0 !important; margin-top: 0.25rem !important; border: none !important; border-top: 2px solid rgba(255, 255, 255, 0.2) !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important; position: relative !important; min-height: 52px !important; } .pending-orders-verification-details-page .final-action-section .gst#new_total_tab::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%) !important; } .pending-orders-verification-details-page .final-action-section .gst#new_total_tab b { color: #ffffff !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.3px !important; } .pending-orders-verification-details-page .final-action-section .gst#new_total_tab #net_total_ { color: #ffffff !important; font-size: 1.25rem !important; font-weight: 900 !important; letter-spacing: 0.3px !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; } .pending-orders-verification-details-page .final-action-section .gst#new_total_tab .dis-flex-left, .pending-orders-verification-details-page .final-action-section .gst#new_total_tab .dis-flex-right { color: #ffffff !important; } /* Tax Section Visual Separator - Compact */ .pending-orders-verification-details-page .final-action-section .gst#cgst_tab, .pending-orders-verification-details-page .final-action-section .gst#sgst_tab, .pending-orders-verification-details-page .final-action-section .gst#igst_tab, .pending-orders-verification-details-page .final-action-section .gst#gst_tab { border-top: 1.5px solid #e9ecef !important; margin-top: 0.25rem !important; padding-top: 0.75rem !important; } .pending-orders-verification-details-page .final-action-section .gst#cgst_tab { margin-top: 0.5rem !important; padding-top: 0.75rem !important; } /* Section Header - Compact */ .pending-orders-verification-details-page .final-action-section .gst-tab-div::before { content: "Order Summary" !important; display: block !important; padding: 0.875rem 1rem !important; background: linear-gradient(135deg, #037345 0%, #025a35 100%) !important; color: #ffffff !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.3px !important; margin: 0 !important; border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important; } /* Update Price Button */ .pending-orders-verification-details-page .final-action-section .btn-outline-success { width: 100% !important; margin-bottom: 1rem; } /* Desktop buttons hidden on mobile */ .pending-orders-verification-details-page .final-action-section .d-none.d-md-block { display: none !important; } /* Timeline Structure - Fix for Final Action */ .pending-orders-verification-details-page .final-action-section .timeline { padding-left: 0 !important; margin: 0; } .pending-orders-verification-details-page .final-action-section .timeline-item { margin-bottom: 0; padding: 0; } .pending-orders-verification-details-page .final-action-section .timeline-point { display: none; } .pending-orders-verification-details-page .final-action-section .timeline-event { padding: 0; margin: 0; } /* Override pl-0 and pr-0 on mobile for proper spacing */ .pending-orders-verification-details-page .final-action-section .pl-0 { padding-left: 0.75rem !important; } .pending-orders-verification-details-page .final-action-section .pr-0 { padding-right: 0.75rem !important; } .pending-orders-verification-details-page .final-action-section .no-padd { padding: 0.75rem !important; } /* Fix ml-15 class on mobile */ .pending-orders-verification-details-page .final-action-section .ml-15 { margin-left: 0 !important; } /* Add New Product Button */ .pending-orders-verification-details-page .final-action-section center { text-align: center; margin: 1.5rem 0; } .pending-orders-verification-details-page .final-action-section center .btn { width: 100%; max-width: 100%; } /* Add New Batch Button */ .pending-orders-verification-details-page .final-action-section #add_batch_stock .btn { width: 100%; margin-top: 0.5rem; } /* Remark Section */ .pending-orders-verification-details-page .final-action-section textarea { width: 100% !important; min-height: 100px; padding: 0.75rem; border: 1.5px solid #ced4da; border-radius: 10px; font-size: 0.9375rem; box-sizing: border-box; } /* HR Separator */ .pending-orders-verification-details-page .final-action-section .hr { margin: 1.5rem 0; border-top: 1px solid #e9ecef; } /* Address Cards */ .pending-orders-verification-details-page .final-action-section #address_Data .card { margin-bottom: 1rem; } /* Select2 Dropdown - Prevent Overflow */ .pending-orders-verification-details-page .final-action-section .select2-dropdown { max-width: 100vw !important; width: 100% !important; } .pending-orders-verification-details-page .final-action-section .select2-container { width: 100% !important; max-width: 100% !important; } /* Add bottom padding to content for fixed buttons */ .pending-orders-verification-details-page { padding-bottom: 240px !important; /* Extra space for prominent buttons */ } /* Ensure content doesn't get hidden behind buttons */ .pending-orders-verification-details-page .final-action-section { margin-bottom: 2rem; } /* Ensure mobile fixed actions are always visible */ .pending-orders-verification-details-page .mobile-fixed-actions { display: flex !important; visibility: visible !important; opacity: 1 !important; z-index: 1050 !important; } /* Make sure buttons are visible and properly styled */ .pending-orders-verification-details-page .mobile-action-btn { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* Customer Details - 2 items per row on mobile (Override general rules with highest specificity) */ .pending-orders-verification-details-page .customer-details-body .customer-details-row .col-md-6.col-12.col-sm-6.mb-3, .pending-orders-verification-details-page .customer-details-body .customer-details-row .col-md-6.col-12.mb-3, .pending-orders-verification-details-page .customer-details-row .col-md-6.col-12.col-sm-6.mb-3, .pending-orders-verification-details-page .customer-details-row .col-md-6.col-12.mb-3 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; margin-bottom: 1rem !important; } .pending-orders-verification-details-page .customer-details-row .detail-item { margin-bottom: 0.5rem; } .pending-orders-verification-details-page .customer-details-row .detail-label { font-size: 0.8125rem; font-weight: 500; color: #6c757d; margin-bottom: 0.375rem; display: block; } .pending-orders-verification-details-page .customer-details-row .detail-value { font-size: 0.9375rem; font-weight: 500; color: #212529; word-break: break-word; line-height: 1.4; } /* Order Items Table - Mobile Card View (Following stock-adjustment-in pattern) */ .pending-orders-verification-details-page .order-items-table.mx-table { width: 100%; border-collapse: collapse; } .pending-orders-verification-details-page .order-items-table.mx-table thead { display: none; } .pending-orders-verification-details-page .order-items-table.mx-table, .pending-orders-verification-details-page .order-items-table.mx-table tbody, .pending-orders-verification-details-page .order-items-table.mx-table tr, .pending-orders-verification-details-page .order-items-table.mx-table td { display: block; width: 100%; } /* Professional Card Design for Product Rows */ .pending-orders-verification-details-page .order-items-table.mx-table tbody tr:not(.table-total-row) { display: block !important; background: #ffffff !important; border: 1px solid #e0e6ed !important; border-radius: 12px !important; margin-bottom: 1.25rem !important; padding: 1.25rem !important; position: relative !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .pending-orders-verification-details-page .order-items-table.mx-table tbody tr:not(.table-total-row):active { transform: scale(0.98) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important; } /* Row Number Badge - Professional Design */ .pending-orders-verification-details-page .order-items-table.mx-table tbody tr:not(.table-total-row) td:first-child { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 1rem !important; padding-bottom: 1rem !important; border-bottom: 2px solid #f0f4f8 !important; padding: 0 0 1rem 0 !important; } /* Table cells - Full width with proper spacing */ .pending-orders-verification-details-page .order-items-table.mx-table tbody tr:not(.table-total-row) td { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 0.75rem 0 !important; border: none !important; border-bottom: 1px solid #f1f3f5 !important; margin-bottom: 0 !important; width: 100% !important; } .pending-orders-verification-details-page .order-items-table.mx-table tbody tr:not(.table-total-row) td:last-child { border-bottom: none !important; } /* Labels from data-label attribute */ .pending-orders-verification-details-page .order-items-table.mx-table tbody tr:not(.table-total-row) td::before { content: attr(data-label); font-weight: 600; color: #6c757d; font-size: 0.8125rem; margin-right: 1rem; flex-shrink: 0; min-width: 100px; text-transform: uppercase; } /* Cell content */ .pending-orders-verification-details-page .order-items-table.mx-table tbody tr:not(.table-total-row) td { text-align: right; font-size: 0.9375rem; color: #212529; } /* Product Name - Make it bold */ .pending-orders-verification-details-page .order-items-table.mx-table tbody tr:not(.table-total-row) td:nth-child(2) { font-weight: 600; } /* Total Row Styling - Full Width */ .pending-orders-verification-details-page .order-items-table.mx-table tbody tr.table-total-row { display: block !important; background: #037345 !important; border: 1px solid #037345 !important; border-radius: 12px !important; margin-top: 1rem !important; padding: 0 !important; box-shadow: 0 2px 8px rgba(3, 115, 69, 0.2) !important; overflow: hidden; } .pending-orders-verification-details-page .order-items-table.mx-table tbody tr.table-total-row td { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 1rem !important; border: none !important; color: #ffffff !important; font-size: 1rem !important; font-weight: 600 !important; width: 100% !important; box-sizing: border-box !important; } .pending-orders-verification-details-page .order-items-table.mx-table tbody tr.table-total-row td::before { content: "Total"; font-weight: 700; color: #ffffff; flex: 1; text-align: left; padding-right: 10px; text-transform: uppercase; font-size: 0.875rem; } /* Hide first columns in total row on mobile */ .pending-orders-verification-details-page .order-items-table.mx-table tbody tr.table-total-row td:not(:last-child) { display: none !important; } /* ============================================ MORDER-LOGS TABLE - Following payment-collection-details pattern Override timeline table conflicts ============================================ */ /* Override general timeline table rules for morder-logs */ .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table { width: 100% !important; border-collapse: collapse !important; margin-top: 0.5rem !important; font-size: 0.875rem !important; } .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table thead, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table thead { display: none !important; } .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table, .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tbody, .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tr, .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table td, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tr, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table td { display: block !important; width: 100% !important; } /* Override timeline table row styles - Use payment-collection-details pattern */ .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tbody tr:not(.table-total-row), .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr:not(.table-total-row) { background: #fff !important; margin-bottom: 12px !important; border-radius: 8px !important; box-shadow: 0 2px 6px rgba(0,0,0,.08) !important; padding: 0 !important; overflow: hidden !important; border: none !important; width: 100% !important; display: block !important; } /* Override timeline table cell styles - Use payment-collection-details pattern (row layout, not column) */ .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tbody td, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody td { display: flex !important; flex-direction: row !important; /* Override timeline's column layout */ justify-content: space-between !important; align-items: center !important; padding: 8px 12px !important; border: none !important; text-align: right !important; font-size: 13px !important; white-space: normal !important; width: 100% !important; } /* Override timeline table cell ::before - Use payment-collection-details pattern */ /* Exclude total row from this rule - it has its own styling */ .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tbody tr:not(.table-total-row) td::before, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr:not(.table-total-row) td::before { content: attr(data-label) !important; font-weight: 600 !important; color: #555 !important; flex: 1 !important; text-align: left !important; padding-right: 10px !important; text-transform: uppercase !important; font-size: 12px !important; display: block !important; /* Override timeline's block display */ margin-bottom: 0 !important; /* Remove timeline's margin-bottom */ letter-spacing: normal !important; /* Remove timeline's letter-spacing */ } .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tbody td:last-child, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody td:last-child { justify-content: flex-end !important; border-bottom: none !important; } /* Total Row Styling - Following payment-collection-details pattern - Full Width */ /* Override timeline table total row styles */ .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tbody tr.table-total-row, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr.table-total-row { background: #037345 !important; margin-top: 12px !important; border-radius: 8px !important; box-shadow: 0 2px 6px rgba(3, 115, 69, 0.2) !important; padding: 0 !important; overflow: hidden !important; display: block !important; width: 100% !important; box-sizing: border-box !important; border: none !important; } /* Hide first columns in total row on mobile */ .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tbody tr.table-total-row td:not(:last-child), .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr.table-total-row td:not(:last-child) { display: none !important; } /* Total row last cell - Override timeline styles */ .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tbody tr.table-total-row td:last-child, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr.table-total-row td:last-child { display: flex !important; width: 100% !important; justify-content: space-between !important; align-items: center !important; padding: 12px !important; border: none !important; color: #ffffff !important; font-size: 14px !important; font-weight: 600 !important; box-sizing: border-box !important; background: transparent !important; } /* Total row ::before - Override timeline styles and hide data-label ::before */ /* First, hide the data-label ::before that comes from general table rules */ .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tbody tr.table-total-row td:last-child[data-label]::before, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr.table-total-row td:last-child[data-label]::before { content: "Total" !important; font-weight: 700 !important; color: #ffffff !important; flex: 1 !important; text-align: left !important; padding-right: 10px !important; text-transform: uppercase !important; font-size: 12px !important; display: block !important; margin-bottom: 0 !important; letter-spacing: normal !important; } /* Ensure total row content (amount) is white and properly displayed */ .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tbody tr.table-total-row td:last-child b, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr.table-total-row td:last-child b, .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tbody tr.table-total-row td:last-child, .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr.table-total-row td:last-child { color: #ffffff !important; } /* Hide any duplicate "Total" text in the cell content, keep only the amount */ .pending-orders-verification-details-page .morder-logs .timeline .table.table-bordered.mx-table.order-items-table tbody tr.table-total-row td:last-child b:first-child:not(:only-child), .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr.table-total-row td:last-child b:first-child:not(:only-child) { display: none !important; } } /* Desktop View - Keep table layout */ @media (min-width: 769px) { .pending-orders-verification-details-page .order-items-table.mx-table { display: table; width: 100%; } .pending-orders-verification-details-page .order-items-table.mx-table thead { display: table-header-group; } .pending-orders-verification-details-page .order-items-table.mx-table tbody { display: table-row-group; } .pending-orders-verification-details-page .order-items-table.mx-table tbody tr { display: table-row; } .pending-orders-verification-details-page .order-items-table.mx-table tbody td { display: table-cell; padding: 0.5rem; border: 1px solid #dee2e6; } .pending-orders-verification-details-page .order-items-table.mx-table tbody td::before { display: none; } /* Reset total row column visibility on desktop */ .pending-orders-verification-details-page .order-items-table.mx-table tbody tr.table-total-row td { display: table-cell !important; } /* Desktop total row styling */ .pending-orders-verification-details-page .order-items-table.mx-table tbody tr.table-total-row { background-color: #037345; } .pending-orders-verification-details-page .order-items-table.mx-table tbody tr.table-total-row td { color: #ffffff; font-weight: 600; } /* Morder-logs table desktop view */ .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table { display: table; width: 100%; } .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table thead { display: table-header-group; } .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody { display: table-row-group; } .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr { display: table-row; } .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody td { display: table-cell; padding: 0.5rem; border: 1px solid #dee2e6; } .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody td::before { display: none; } /* Reset total row column visibility on desktop */ .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr.table-total-row td { display: table-cell !important; } /* Desktop total row styling */ .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr.table-total-row { background-color: #037345; } .pending-orders-verification-details-page .morder-logs .order-items-table.mx-table tbody tr.table-total-row td { color: #ffffff; font-weight: 600; } /* Desktop: Always show morder-logs content (override collapsed state) */ .pending-orders-verification-details-page .morder-logs .card.collapsed .card-body, .pending-orders-verification-details-page .morder-log-card.collapsed .card-body { display: block !important; } } /* ============================================ END OF MOBILE.CSS ============================================ */