/* editors_mobile.css - FIXED: Strict 50/50 Grid, Field Widths, Overrides UI & Checklist Fix */

/* --- 1. Reset & Spacing Restoration --- */
#actModal .body,
#bookModal .body,
.modal .body {
  gap: 16px; 
  padding: 16px 12px;
}

/* Vertical rhythm between rows */
#actModal .body .row,
#bookModal .body .row,
#actModal .row,
#bookModal .row,
.modal .body .row,
.modal .row {
  margin-bottom: 16px;
  gap: normal;
}

/* Standardize label spacing & typography for mobile */
#actModal label,
#bookModal label,
.modal label {
  margin-bottom: 6px; 
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block;
  width: 100%;
}

/* --- 2. Floating Card Modal (Mobile) --- */
@media (max-width: 560px) {
  #actModal .sheet,
  #bookModal .sheet,
  .modal .sheet {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
    bottom: auto !important;
    
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - 24px - env(safe-area-inset-bottom, 20px)) !important;
    
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
    transform: none !important;
    
    display: flex !important;
    flex-direction: column !important;
  }

  #actModal .body,
  #bookModal .body,
  .modal .body {
    overflow-y: auto;
    flex: 1 1 auto;
    scrollbar-width: thin;
  }
  
  #actModal .sheet > .actions,
  #bookModal .sheet > .actions {
    border-radius: 0 0 16px 16px !important;
    padding: 16px 12px !important;
    background: var(--panel);
    border-top: 1px solid var(--inputBorder);
  }
}

/* --- 3. Field Alignment & Grid Fixes --- */
@media (max-width: 560px) {
  
  /* --- A. STRICT 50/50 GRID --- */
  .row > .modal-grid-two,
  .row > .modal-grid-two-compact,
  .row.modal-grid-two {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  .row > .modal-grid-two > div,
  .row > .modal-grid-two-compact > div,
  .row.modal-grid-two > div {
    min-width: 0 !important;
    width: 100% !important;
  }
  .row > .modal-grid-three {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .row > .modal-grid-three > div {
    min-width: 0 !important;
    width: 100% !important;
  }
  
  /* --- B. INPUT VISUAL PARITY --- */
  .modal input,
  .modal select,
  .input-with-chip {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important; /* Uniform Height */
  }
  
  /* Normalize OS-specific date/time rendering */
  .modal input[type="date"],
  .modal input[type="time"] {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    padding-right: 0 !important;
  }
  
  /* Chip Positioning */
  .input-with-chip .chip {
    height: 30px;
    width: 30px;
    right: 5px;
  }

  /* --- C. HOTEL OVERRIDES TAB --- */
  #perDayCompact .per-day-control-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  
  #perDayCompact .per-day-nav-group {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    align-items: center !important;
  }
  
  #perDayCompact .per-day-nav-group select {
    flex: 1 !important;
    width: auto !important;
  }
  
  #perDayCompact .per-day-nav-group .btn.square {
    width: 40px !important;
    flex-shrink: 0 !important;
  }
  
  #pdApplyToAll {
    width: 100% !important;
    margin-top: 4px !important;
    height: 40px !important;
  }

  #perDayCompact .perday-triple {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* --- D. CHECKLIST FIX (The Wonky View Fix) --- */
  /* Explicitly prevent checkboxes from inheriting the 100% width of text inputs */
  .checklist-list input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 560px) {
  #transportRouteFields {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .transport-location-fields {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .transport-location-spacer {
    display: flex !important;
    justify-content: center !important;
    min-height: auto !important;
    padding: 0 !important;
  }

  .transport-route-map-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .transport-swap-col {
    padding-bottom: 0 !important;
  }

  .transport-swap-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .transport-place-trigger {
    width: 30px !important;
    height: 30px !important;
    right: 5px !important;
  }

  .transport-label-row input {
    padding-right: 40px !important;
  }

  .transport-place-picker {
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
}



@media (max-width: 560px) {
  .journey-group-editor {
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  .journey-group-editor-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .journey-group-editor-titleblock {
    gap: 4px;
  }

  .journey-group-editor-actions {
    justify-content: flex-start;
    gap: 6px;
  }

  .journey-group-editor-actions .btn-subtle {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .journey-group-editor-help {
    max-width: none;
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  .journey-editor-row-top {
    grid-template-columns: 1fr;
  }

  .journey-segment-details-grid {
    grid-template-columns: 1fr;
  }

  .journey-segment-details-head {
    flex-direction: column;
    align-items: stretch;
  }

  .journey-segment-details-actions {
    justify-content: stretch;
  }

  .journey-segment-details-footnote {
    font-size: 11px;
  }
  .journey-segment-details-actions .btn {
    width: 100%;
  }
}


@media (max-width: 680px) {
  .journey-segment-details-supplements {
    gap: 10px;
  }

  .journey-segment-details-checklist,
  .journey-segment-details-docs {
    padding: 10px;
  }
}

@media (max-width: 560px) {
  .journey-segment-details-grid-booking {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
  }
  .journey-segment-details-route-fields,
  .journey-segment-details-location-fields {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .journey-segment-details-route-fields .transport-swap-col {
    display: flex;
  }
  .journey-segment-details-location-fields .transport-location-spacer {
    display: block !important;
  }
  .journey-editor-route-fields,
  .journey-editor-location-fields {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .journey-editor-location-fields .transport-location-spacer,
  .journey-segment-details-location-fields .transport-location-spacer {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }
}

@media (max-width: 560px) {
  .journey-editor-actions {
    justify-self: stretch;
    justify-content: flex-end;
  }

  .journey-editor-row-timing {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}