/**
 * Transport Module Styles
 * Standardized styles for all transport views
 * Created: 2025
 */

/* ==========================================================================
   1. COLOR VARIABLES & BRAND COLORS
   ========================================================================== */

:root {
    --transport-brand-maroon: #AF2D26;
    --transport-brand-maroon-light: rgba(175, 45, 38, 0.2);
    --transport-brand-maroon-lighter: rgba(175, 45, 38, 0.05);
    --transport-shadow-inset: inset rgb(0 0 0 / 16%) 0px 0px 5px 0px;
    --transport-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.1);
    --transport-debug-bg: #fff3cd;
    --transport-debug-border: #ffeeba;
}

/* ==========================================================================
   2. GRID LAYOUTS
   ========================================================================== */

@media (min-width: 1024px){
    /* Desktop Transport Order Grid (18 columns - added Datum column) */
    .grid-transport-desktop {
        display: grid;
        grid-template-columns: 40px 132px 176px 40px 176px 96px 40px 176px 40px 176px 96px 176px 54px 54px 54px 54px 180px 40px;
        gap: 0.5rem;
        min-width: max-content;
        align-items: center;
    }

    .grid-mobile-fust-labels {                                                                                                          
        display: contents !important;
    }  

    .grid-mobile-fust-inputs {
        display: contents !important;
    }

    /* Fust Order Grid (7 columns) */
    .grid-transport-fust {
        display: grid;
        grid-template-columns: 132px 96px 220px 60px 60px 60px 60px 180px;
        gap: 0.5rem;
        min-width: max-content;
    }

    .action-buttons-bar {                                                                                                                                     
        position: static;
        box-shadow: none;                                                                                                                                     
        padding: 0;                                                                                                                                           
    }

    .table-scroll-wrapper {
        max-height: 60vh;
        margin-bottom: 1.5rem;
    }

    .invoeren-container {
        transform: scale(0.9);
        transform-origin: top left;
        width: 109%;
        margin-right: 2rem;
        padding-bottom: 0;
    }

}


/* Mobile Date/Time Grid (2 columns) */
.grid-mobile-date-time {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Mobile Fust Grid (4 columns) */
.grid-mobile-fust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Mobile Fust Labels Grid */
.grid-mobile-fust-labels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.grid-mobile-fust-labels label {
    text-align: center !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Mobile Fust Inputs Grid */
.grid-mobile-fust-inputs {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.5rem !important;
}

.grid-mobile-fust-inputs input {
    min-width: 0 !important;
    width: 100% !important;
}

/* Table Mobile Card Fust Grid */
.grid-table-card-fust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    text-align: center;
    width: 100%;
}

/* ==========================================================================
   3. CONTAINERS & CARDS
   ========================================================================== */

/* Main Content Container (Desktop) */
.container-transport-main {
    box-shadow: var(--transport-shadow-inset);
    margin-bottom: 60px;
}

/* Mobile Content Container */
.container-transport-mobile {
    max-width: 64rem;
    margin: 0 auto;
    padding: 1rem;
}

@media (max-width: 640px) {
    .container-transport-mobile {
        padding: 1rem;
    }
}

/* Card with Inset Shadow */
.card-transport {
    background: white;
    border-radius: 0.75rem;
    box-shadow: var(--transport-shadow-inset);
    padding: 1rem;
}

/* Order Row Container (Desktop) */
.card-order-row {
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin-bottom: 0.375rem;
}

@media (max-width: 1023px) {                                                                                                                              
    .card-checkbox-wrapper {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
    }

    .fust-time-wrapper {                                                                                                                                      
        width: 6rem;                                                                                                                                          
    }
}

/* Order Card Container (Mobile) */
.card-order-mobile {
    background: #f9fafb;
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

/* Mobile Transport Card */
.card-transport-mobile {
    background: white;
    border: 2px solid #d1d5db;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transform: translateX(0);
    transition: all 0.2s ease-in-out;
    min-height: 90px;
    -webkit-tap-highlight-color: transparent;
}

.card-transport-mobile:hover {
    box-shadow: var(--transport-shadow-card);
    transform: translateY(-1px);
}

.card-transport-mobile:active {
    transform: translateY(0) scale(0.98);
}

.card-transport-mobile.expanded {
    border-color: #3B82F6;
}

/* Expandable Content */
.expandable-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.expandable-content.show {
    max-height: 300px !important;
}

/* Fust Grid Item (Mobile) */
.fust-grid-item {
    min-width: 0;
}

/* Fust Grid (Mobile Table) */
.fust-grid-mobile-table {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    text-align: center;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

/* Base Button Styles */
.btn-transport-base {
    display: inline-block !important;
    position: relative !important;
    z-index: 10 !important;
    border: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

/* Remove Row Button */
.btn-remove-row {
    display: inline-block !important;
    background-color: #ef4444 !important;
    color: white !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border: none !important;
    cursor: pointer !important;
}

.btn-remove-row:hover {
    background-color: #dc2626 !important;
}

/* Add Row Button */
.btn-add-row {
    display: inline-flex !important;
    background-color: #10b981 !important;
    color: white !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 18px !important;
    padding: 0 !important;
    border: none !important;
    cursor: pointer !important;
}

/* Mobile add row button — cirkel, zelfde grootte als remove knop */
.add-row-mobile-wrapper .btn-add-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

/* Mobile Add Row Wrapper */
.add-row-mobile-wrapper {
    display: none;
}

.btn-add-row:hover {
    background-color: #059669 !important;
}

/* Search Button */
.btn-search {
    background-color: var(--transport-brand-maroon-light);
    color: var(--transport-brand-maroon);
    width: 47px;
    height: 47px;
}

/* Swap Address Button */
.btn-swap {
    display: inline-block !important;
    background-color: var(--transport-brand-maroon-light) !important;
    color: var(--transport-brand-maroon) !important;
    width: 47px;
    height: 47px;
}

/* Submit Button (Mobile) */
.btn-submit-mobile {
    display: block !important;
    min-height: 48px !important;
    height: 48px;
    width: 30%;
}

/* Action button bar for mobile */
.action-buttons-bar {
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 10;
}

/* Mobile Button Overrides */
button[type="submit"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-weight: bold !important;
    z-index: 9999 !important;
}

/* ==========================================================================
   5. FORM ELEMENTS
   ========================================================================== */

/* Base Input/Select Styles (Desktop) */
.input-transport-base {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.input-transport-base:focus {
    outline: none;
    ring: 2px;
    ring-color: var(--transport-brand-maroon);
}

/* Mobile Input/Select Styles */
.input-transport-mobile {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 1rem;
    background: white;
}

.input-transport-mobile:focus {
    outline: none;
    ring: 2px;
    ring-color: var(--transport-brand-maroon);
}

/* Mobile Input Center Text */
.input-transport-mobile-center {
    text-align: center;
}

/* Number Input Styles */
.input-number-small {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.input-number-small:focus {
    outline: none;
    ring: 2px;
    ring-color: var(--transport-brand-maroon);
}

/* Date Input Desktop */
.input-date-desktop {
    width: 320px;
}

/* Select Dropdown Overflow Protection */
.select-no-overflow {
    min-width: 0;
}

/* Touch Target (Mobile) - More specific selectors to avoid conflicts */
button:not(#transportForm button):not(#transportForm input):not(#transportForm select):not(#fustForm button):not(#fustForm input):not(#fustForm select),
select:not(#transportForm select):not(#fustForm select),
input:not(#transportForm input):not(#fustForm input) {
    min-height: 44px;
}

/* Explicitly set mobile form inputs to 46px for consistency */
.mobile-form-container #transportForm select,
.mobile-form-container #transportForm input,
.mobile-form-container #fustForm select,
.mobile-form-container #fustForm input {
    min-height: 46px;
}

/* Normalize input appearance across iOS and Android - MOBILE ONLY */
.mobile-form-container #transportForm input[type="number"],
.mobile-form-container #transportForm input[type="text"],
.mobile-form-container #transportForm input[type="time"],
.mobile-form-container #transportForm input[type="date"],
.mobile-form-container #transportForm select,
.mobile-form-container #fustForm input[type="number"],
.mobile-form-container #fustForm input[type="text"],
.mobile-form-container #fustForm input[type="time"],
.mobile-form-container #fustForm input[type="date"],
.mobile-form-container #fustForm select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    min-height: 46px;
    line-height: normal;
}

/* Ensure consistent padding across all input types - MOBILE ONLY */
.mobile-form-container #transportForm input[type="number"],
.mobile-form-container #fustForm input[type="number"] {
    padding: 0.75rem 0.5rem; /* Match py-3 px-2 */
}

.mobile-form-container #transportForm select,
.mobile-form-container #transportForm input[type="text"],
.mobile-form-container #transportForm input[type="date"],
.mobile-form-container #fustForm select,
.mobile-form-container #fustForm input[type="text"],
.mobile-form-container #fustForm input[type="date"] {
    padding: 0.75rem 0.75rem; /* Match py-3 px-3 */
}

.mobile-form-container #transportForm input[type="time"],
.mobile-form-container #fustForm input[type="time"] {
    padding: 0.75rem 0.5rem; /* Match py-3 px-2 for time inputs */
}

/* iOS-specific fixes for consistent input heights - MOBILE ONLY */
@supports (-webkit-touch-callout: none) {
    /* Target iOS Safari only */
    .mobile-form-container #transportForm input,
    .mobile-form-container #transportForm select,
    .mobile-form-container #fustForm input,
    .mobile-form-container #fustForm select,
    .filter-section-mobile input,
    .filter-section-mobile select {
        min-height: 46px !important;
        height: 46px;
        font-size: 16px; /* Prevents zoom on focus in iOS */
    }

    .mobile-form-container #transportForm input[type="number"],
    .mobile-form-container #fustForm input[type="number"] {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .mobile-form-container #transportForm input[type="time"],
    .mobile-form-container #fustForm input[type="time"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* Mobile-specific fixes for select dropdowns in flex containers */
.mobile-form-container #transportForm .laad-klant-dropdown,
.mobile-form-container #transportForm .los-klant-dropdown,
.mobile-form-container #transportForm .laad-adres-dropdown,
.mobile-form-container #transportForm .los-adres-dropdown,
.mobile-form-container #transportForm .factuur-klant-dropdown {
    width: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-basis: 0% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Ensure parent flex container forces proper sizing - MOBILE ONLY */
.mobile-form-container #transportForm .flex.gap-2 {
    overflow: hidden !important;
}

/* Additional universal fix for all select elements in flex containers on mobile */
@media (max-width: 640px) {
    .mobile-form-container #transportForm select.flex-1,
    .mobile-form-container #transportForm select[class*="dropdown"] {
        width: 0 !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        flex-basis: 0% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Force select options to inherit constraints */
    .mobile-form-container #transportForm select.flex-1 option,
    .mobile-form-container #transportForm select[class*="dropdown"] option {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Prevent flex containers from expanding */
    .mobile-form-container #transportForm .flex-1.space-y-2 {
        overflow: hidden !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   6. HEADER STYLES
   ========================================================================== */

/* Grid Header Background */
.header-transport-grid {
    background-color: var(--transport-brand-maroon);
    color: white;
}

/* Sticky Header for Scrollable Tables */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--transport-brand-maroon);
}

/* Scrollable Table Wrapper */
.table-scroll-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    margin-bottom: 0.5rem;
    position: relative;
}

@media (max-width: 1023px) {
    .action-buttons-bar {
        position: static;
    }
}

/* Ensure smooth scrolling on touch devices */
.table-scroll-wrapper {
    -webkit-overflow-scrolling: touch;
}

/* Webkit-scrollbar needed for Chrome */
.table-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
}

.table-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Table Header */
.header-table-cell {
    background-color: var(--transport-brand-maroon);
    padding: 0.75rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    letter-spacing: 0.05em;
}

.header-table-cell-clickable {
    cursor: pointer;
}

.header-table-cell-clickable:hover {
    opacity: 0.9;
}

/* ==========================================================================
   7. TABLE STYLES
   ========================================================================== */

/* Table Row Striped */
.table-row-striped:nth-child(even) {
    background-color: var(--transport-brand-maroon-lighter);
}

/* Table Cell */
.table-cell-base {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.table-cell-truncate {
    max-width: 100px;
    word-wrap: break-word;
    white-space: normal;
}

/* Table Overflow Responsive */
.table-overflow-responsive {
    overflow-y: auto;
    max-height: 50vh;
    overflow-x: scroll;
}

@media (min-width: 1536px) {
    .table-overflow-responsive {
        max-height: 60vh;
        overflow-x: auto;
    }
}

/* ==========================================================================
   8. MODAL STYLES
   ========================================================================== */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(75, 85, 99, 0.5);
    overflow-y: auto;
    height: 100%;
    width: 100%;
    z-index: 50;
}

/* Modal Content */
.modal-content {
    position: relative;
    top: 5rem;
    margin: 0 auto;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    width: 91.666667%;
    max-width: 28rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem;
    background: white;
}

/* Search Results Container */
.search-results {
    max-height: 24rem;
    overflow-y: auto;
}

/* Search Result Item */
.search-result-item {
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: #eff6ff;
}

/* ==========================================================================
   9. TYPOGRAPHY
   ========================================================================== */

/* Page Title */
.title-transport-main {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-left: 23px;
}

/* Mobile Page Title */
.title-transport-mobile {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
    text-align: center;
}

/* Form Label */
.label-transport {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

/* Grid Header Text */
.text-grid-header {
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
}

/* ==========================================================================
   10. STATUS COLORS
   ========================================================================== */

.status-karren { color: #ea580c; }    /* Orange - Karren (fust1) */
.status-platen { color: #9333ea; }    /* Purple - Platen (fust2) */
.status-pallet { color: #ca8a04; }    /* Yellow - Pallet (fust3) */
.status-colli { color: #4f46e5; }     /* Indigo - Colli (fust4) */
.status-success { color: #16a34a; }   /* Green - Success */
.status-inactive { color: #d1d5db; }  /* Gray - Inactive */

/* ==========================================================================
   11. MOBILE-SPECIFIC OVERRIDES
   ========================================================================== */

/* Mobile Body Background Override */
.mobile-body-override {
    background: var(--transport-brand-maroon-light) !important;
}

.mobile-body-override > img {
    display: none !important;
}

/* Touch Action */
.touch-target {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Mobile Responsive Spacing */
@media (max-width: 640px) {
    .mobile-responsive-padding {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ==========================================================================
   12. DEBUG PANEL
   ========================================================================== */

.debug-panel {
    background: var(--transport-debug-bg);
    border: 1px solid var(--transport-debug-border);
    padding: 12px;
    margin: 12px;
    border-radius: 6px;
}

/* ==========================================================================
   13. UTILITY CLASSES
   ========================================================================== */

/* Shadow Inset */
.shadow-transport-inset {
    box-shadow: var(--transport-shadow-inset);
}

/* Shadow Card */
.shadow-transport-card {
    box-shadow: var(--transport-shadow-card);
}

/* Brand Maroon Background */
.bg-brand-maroon {
    background-color: var(--transport-brand-maroon);
}

/* Brand Maroon Light Background */
.bg-brand-maroon-light {
    background-color: var(--transport-brand-maroon-light);
}

/* Truncate Mobile Card Text */
.truncate-mobile-card {
    max-width: 180px;
}

/* ==========================================================================
   14. FORM GROUP & FILTER STYLES
   ========================================================================== */

/* Filter Form Group */
.filter-form-group {
    min-width: 180px;
}

.filter-form-group-large {
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}

/* ==========================================================================
   15. TABLE COLUMN WIDTH STYLES
   ========================================================================== */

/* Table Column: Client Names */
.table-col-client {
    max-width: 150px;
    word-wrap: break-word;
    white-space: normal;
}

/* Table Column: Address */
.table-col-address {
    max-width: 200px;
    word-wrap: break-word;
    white-space: normal;
}

/* Table Column: Time */
.table-col-time {
    max-width: 80px;
    word-wrap: break-word;
    white-space: normal;
}

/* Table Column: Fust Numbers (Karren, Platen, etc) */
.table-col-fust {
    max-width: 70px;
}

/* Table Column: Fust Check (Boolean) */
.table-col-fust-check {
    max-width: 60px;
}

/* Table Column: Veilingbrief (Boolean) */
.table-col-veilingbrief {
    max-width: 120px;
}

/* Table Column: Last Changed */
.table-col-lastchanged {
    max-width: 120px;
    word-wrap: break-word;
    white-space: normal;
}

/* ==========================================================================
   16. BUTTON ACTION STYLES
   ========================================================================== */

/* Back to Overview Button */
.btn-back-overview {
    min-height: 48px;
    width: 15%;
    background-color: #6b7280 !important;
}

/* Submit Button Large */
.btn-submit-large {
    min-height: 48px;
    width: 15%;
}

/* Search Button Sizing (Desktop) */
.btn-search-desktop {
    width: 40px;
    height: 40px;
}

/* Swap Button Sizing (Desktop) */
.btn-swap-desktop {
    width: 40px;
    height: 40px;
}

/* ==========================================================================
   18. MOBILE SPECIFIC STYLES
   ========================================================================== */

/* Mobile Body Background Override (specific for invoeren/fust mobile) */
body.mobile-transport-bg {
    background: rgba(175, 45, 38, 0.2) !important;
}

body.mobile-transport-bg > img {
    display: none !important;
}

/* Mobile Order Card */
.order-card {
    -webkit-tap-highlight-color: transparent;
}

/* Touch-friendly targets */
.remove-row, #addRowBtn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Better mobile spacing */
@media (max-width: 640px) {
    .site-content {
        padding: 1rem;
    }
}

/* Fust grid specific styles */
.fust-grid .fust-labels,
.fust-grid .fust-inputs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.5rem !important;
}

.fust-grid .fust-labels {
    margin-bottom: 0.5rem !important;
}

/* Ensure labels don't wrap and stay centered */
.fust-grid .fust-labels label {
    text-align: center !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Make sure inputs fit properly */
.fust-grid .fust-inputs input {
    min-width: 0 !important;
    width: 100% !important;
}

/* Date/Time Grid Margin Override */
.date-time-inputs.grid-mobile-date-time {
    margin-bottom: 0;
}

/* Submit button visibility and sizing */
.btn-submit-mobile-full {
    width: 100% !important;
}

/* Mobile button container with safe spacing from footer */
.mobile-button-container {
    margin-bottom: 80px !important;
}

/* ==========================================================================
   UNIFIED MOBILE STYLING - All Transport Mobile Views
   ========================================================================== */

/* Mobile Typography Standards */
@media (max-width: 640px) {
    /* Headers */
    .site-content h1,
    .site-content h2,
    .site-content h3 {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    }
    
    .site-content h1 {
        font-size: 1.25rem !important; /* 20px */
        line-height: 1.75rem !important;
    }
    
    .site-content h2 {
        font-size: 1.25rem !important; /* 20px */
        line-height: 1.75rem !important;
    }
    
    /* Labels - Standardize to text-xs (0.75rem / 12px) */
    #transportForm label,
    #fustForm label,
    .filter-section-mobile label,
    .mobile-form-container label {
        font-size: 0.75rem !important; /* 12px */
        line-height: 1rem !important;
        font-weight: 500 !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    }
    
    /* All Input Fields - Standardize to text-base (1rem / 16px) */
    #transportForm input,
    #transportForm select,
    #transportForm textarea,
    #fustForm input,
    #fustForm select,
    #fustForm textarea,
    .filter-section-mobile input,
    .filter-section-mobile select {
        font-size: 1rem !important; /* 16px - prevents zoom on iOS */
        line-height: 1.5rem !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    }
    
    /* Time inputs can be slightly smaller */
    #transportForm input[type="time"],
    #fustForm input[type="time"] {
        font-size: 0.875rem !important; /* 14px */
    }
    
    /* Card Content Text */
    .transport-card .text-xs {
        font-size: 0.75rem !important; /* 12px */
        line-height: 1rem !important;
    }
    
    .transport-card .text-sm {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.25rem !important;
    }
    
    .transport-card .text-base {
        font-size: 1rem !important; /* 16px */
        line-height: 1.5rem !important;
    }
    
    /* Button Text */
    #transportForm button,
    #fustForm button,
    .btn-submit-mobile,
    .btn-search,
    .btn-swap {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 1rem !important; /* 16px */
        line-height: 1.5rem !important;
    }
    
    /* Small buttons like swap */
    .btn-swap {
        font-size: 0.75rem !important; /* 12px */
    }
    
    /* Placeholder text */
    #transportForm input::placeholder,
    #transportForm select::placeholder,
    #fustForm input::placeholder,
    #fustForm select::placeholder,
    .filter-section-mobile input::placeholder,
    .filter-section-mobile select::placeholder {
        font-size: 1rem !important;
        color: #9ca3af !important; /* gray-400 */
    }
    
    /* Date input placeholder - simpler approach */
    .filter-section-mobile input[type="date"].date-with-placeholder::-webkit-datetime-edit {
        color: transparent;
    }
    
    .filter-section-mobile input[type="date"].date-with-placeholder:focus::-webkit-datetime-edit {
        color: inherit;
    }
    
    .filter-section-mobile input[type="date"].date-with-placeholder:not(:focus):invalid::-webkit-datetime-edit {
        color: transparent;
    }
    
    .filter-section-mobile input[type="date"].date-with-placeholder:not(:focus)::before {
        content: attr(placeholder);
        color: #9ca3af;
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        line-height: normal;
    }

    /* Fix date input height consistency - prevent pseudo-element from affecting height */
    .filter-section-mobile input[type="date"].date-with-placeholder {
        height: 46px !important;
        line-height: 46px;
        box-sizing: border-box;
        position: relative;
    }

    /* Ensure consistent font for all text elements */
    .site-content {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    }
}

/* Time field width control on mobile */
.time-field-mobile {
    max-width: 120px !important;
    width: 120px !important;
}

/* Responsive time field for smaller screens */
@media (max-width: 380px) {
    .time-field-mobile {
        max-width: 100px !important;
        width: 100px !important;
        font-size: 0.813rem !important; /* Slightly smaller text on very small screens */
    }
}