/* ============================================
   UNIFIED ROUTE CALCULATOR STYLES
   Used by: RouteCalculatorModal, OneWayRouteCalculator, RoundTripRouteCalculator
   
   This file consolidates all route calculator component styles with:
   - CSS Custom Properties (Design Tokens)
   - Mobile-first responsive design with modern CSS functions
   - User zoom support with rem/em units
   - Dark mode support
   - Accessibility features
   ============================================ */

/* ============================================
   DIALOG RESPONSIVE DIMENSIONS
   Syncfusion SfDialog uses inline styles, so we need !important
   to override properties with responsive CSS.
   Height is set to "auto" in component, CSS handles constraints.
   ============================================ */

.route-calculator-dialog.e-dialog {
    /* Width constraints - fluid with clamp, max 1000px on large screens */
    width: clamp(20rem, 95vw, 62.5rem) !important; /* 320px ? 1000px */
    max-width: 62.5rem !important; /* 1000px / 16 = 62.5rem */
    min-width: 20rem !important; /* 320px / 16 = 20rem */
    
    /* Height constraints - auto height with max constraint */
    max-height: 95vh !important;
    min-height: auto !important;
    
    /* Ensure proper flexbox layout for content sizing */
    display: flex !important;
    flex-direction: column !important;
}

/* Dialog content wrapper - enable flexbox for proper sizing */
.route-calculator-dialog .e-dlg-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important; /* Allow shrinking */
    /* Fluid max-height: accounts for header + footer (100px mobile ? 120px desktop) */
    max-height: calc(95vh - clamp(6.25rem, 2vh + 5.5rem, 7.5rem)) !important;
    overflow: hidden !important;
}

/* Dialog content area - enable scrolling when content overflows */
.route-calculator-dialog .e-dlg-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important; /* Allow shrinking in flexbox */
}

/* Dialog header - fixed height */
.route-calculator-dialog .e-dlg-header-content {
    flex-shrink: 0 !important;
}

/* Dialog footer - fixed height */
.route-calculator-dialog .e-footer-content {
    flex-shrink: 0 !important;
}

/* ============================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Spacing uses rem for user zoom support
   ============================================ */
:root {
    /* Colors - Success (Green) */
    --route-color-success: #2e7d32;
    --route-color-success-light: #81c784;
    --route-color-success-bg: #e8f5e9;
    --route-color-success-border: #a5d6a7;
    
    /* Colors - Error (Red) */
    --route-color-error: #d32f2f;
    --route-color-error-light: #ff6b6b;
    --route-color-error-secondary: #dc3545;
    
    /* Colors - Info (Blue) */
    --route-color-info: #1976d2;
    --route-color-info-light: #64b5f6;
    --route-color-info-bg: #e3f2fd;
    --route-color-info-border: #90caf9;
    
    /* Colors - Neutral/Gray Scale */
    --route-color-text: #333;
    --route-color-text-dark: #242424;
    --route-color-text-muted: #555;
    --route-color-text-light: #6c757d;
    --route-color-text-lighter: #999;
    --route-color-neutral-bg: #f8f9fa;
    --route-color-border: #e0e0e0;
    --route-color-border-light: #dee2e6;
    --route-color-white: #ffffff;
    
    /* Colors - Dark Mode */
    --route-color-dark-bg: #2a2a2a;
    --route-color-dark-bg-info: #1a2332;
    --route-color-dark-bg-success: #1b3320;
    --route-color-dark-border: #444;
    --route-color-dark-border-light: #555;
    --route-color-dark-text: #e0e0e0;
    --route-color-dark-text-muted: #aaa;
    --route-color-dark-text-light: #adb5bd;
    --route-color-dark-text-lighter: #666;
    --route-color-dark-success-border: #2e7d32;
    --route-color-dark-info-border: #4a9eff;
    
    /* Spacing Scale - rem units for zoom support */
    --route-spacing-xs: 0.25rem;   /* 4px */
    --route-spacing-sm: 0.375rem;  /* 6px */
    --route-spacing-md: 0.5rem;    /* 8px */
    --route-spacing-lg: 0.625rem;  /* 10px */
    --route-spacing-xl: 0.75rem;   /* 12px */
    --route-spacing-2xl: 1rem;     /* 16px */
    --route-spacing-3xl: 1.25rem;  /* 20px */
    --route-spacing-4xl: 1.5rem;   /* 24px */
    
    /* Border Radius */
    --route-radius-sm: 0.25rem;  /* 4px */
    --route-radius-md: 0.375rem; /* 6px */
    --route-radius-lg: 0.5rem;   /* 8px */
    
    /* Touch Targets */
    --route-touch-target-min: 2.75rem;        /* 44px */
    --route-touch-target-accessible: 3rem;    /* 48px */
    --route-touch-target-small: 2.5rem;       /* 40px */
    
    /* Font Sizes */
    --route-font-xs: 0.75rem;   /* 12px */
    --route-font-sm: 0.8125rem; /* 13px */
    --route-font-md: 0.875rem;  /* 14px */
    --route-font-base: 0.9375rem; /* 15px */
    --route-font-lg: 1rem;      /* 16px */
    
    /* Focus Outline */
    --route-focus-color: #0066cc;
    --route-focus-width: 0.125rem; /* 2px */
    --route-focus-offset: 0.125rem; /* 2px */
}

/* ============================================
   MODAL CONTAINER STYLES
   ============================================ */

/* Modal Container - fluid spacing */
.route-calculator-container {
    padding: var(--tv-spacing-xs, 0.25rem);
    display: flex;
    flex-direction: column;
    gap: var(--tv-form-row-spacing, 0.5rem); /* Match TimeRegistrationEdit row spacing */
    max-width: 100%;
}

/* ============================================
   INLINE ROUTE CALCULATOR — GROUPED SUB-FORM

   The transport section asks for two different things: describe the journey (journey type,
   stops, via-points, avoid options) and record the transport (km, worktype, route text,
   purpose, plate). Read as one flat list of fourteen controls they are hard to tell apart,
   so the journey half is bounded as its own group.

   Deliberately quiet — a tinted surface and a hairline, no heading and no heavy border. The
   dialog is already dense with outlined inputs, and a second strong frame would compete with
   them rather than organise them.
   ============================================ */

.inline-route-calculator {
    display: flex;
    flex-direction: column;
    gap: var(--tv-form-row-spacing, 0.5rem);
    background-color: var(--tv-group-surface, rgba(127, 127, 127, 0.06));
    border: 0.0625rem solid var(--tv-group-border, rgba(127, 127, 127, 0.18));
    border-radius: var(--tv-radius-lg, 0.5rem);
    padding: var(--tv-spacing-lg, 0.75rem);
}

/* The group's own padding supplies the breathing room; a leading margin inside it would read
   as a misaligned first row. */
.inline-route-calculator > :first-child {
    margin-top: 0;
}

@media (forced-colors: active) {
    /* The tint conveys the grouping, and backgrounds are dropped in forced-colors — so the
       border has to carry it instead. */
    .inline-route-calculator {
        border: 0.125rem solid CanvasText;
    }
}

/* ============================================
   JOURNEY TYPE SELECTOR
   ============================================ */

.journey-type-section {
    width: 100%;
    max-width: min(100%, 31.25rem); /* 500px / 16 = 31.25rem */
    border-radius: 0.5rem; /* 8px */
    padding: 0;
}

.journey-type-selector {
    display: flex;
    gap: clamp(1rem, 2vw, 1.5rem); /* 16px ? 24px */
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 0;
}

.journey-radio-button {
    min-height: clamp(1.5rem, 3vw, 2rem); /* 24px ? 32px */
}

.journey-radio-button:focus-visible {
    outline: var(--route-focus-width) solid var(--route-focus-color);
    outline-offset: var(--route-focus-offset);
}

/* ============================================
   SHARED COMPONENT STYLES
   ============================================ */

/* Component wrappers - use flex column to gap internal sections */
.one-way-route-calculator,
.round-trip-route-calculator {
    display: flex;
    flex-direction: column;
    gap: var(--tv-form-row-spacing, 0.5rem);
}

/* Responsive Grid Layout */
.route-endpoints {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tv-form-row-spacing, 0.5rem); /* Match TimeRegistrationEdit row spacing */
    width: 100%;
    border-radius: 0.5rem; /* 8px */
    padding: 0;
}

/* Desktop: Two-column grid */
@media (min-width: 48em) { /* 768px / 16 = 48em */
    .route-endpoints {
        grid-template-columns: 1fr 1fr;
        gap: var(--tv-form-row-gap, 0.75rem); /* Match TimeRegistrationEdit row gap */
    }
}

/* Field Styling */
.route-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem; /* 6px */
    width: 100%;
}

.required-indicator {
    color: var(--route-color-error-secondary);
    font-weight: 700;
}

/* Section Headers */
.section-header {
    font-size: var(--route-font-lg);
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    line-height: 1.4;
}

.section-spacing {
    margin-top: var(--tv-form-row-spacing, 0.5rem);
}

/* ============================================
   OPTIONS SECTION
   ============================================ */

.options-section {
    border-radius: 0.5rem; /* 8px */
    padding: 0;
}

.options-section .section-header {
    margin-top: 0;
}

.options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tv-form-row-gap, 0.75rem);
    margin-top: 0;
}

/* Desktop: Two-column options */
@media (min-width: 48em) { /* 768px / 16 = 48em */
    .options-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   DISTANCE SECTION
   ============================================ */

.distance-section {
    border-radius: 0.5rem; /* 8px */
    padding: 0;
}

.distance-section .section-header {
    margin-top: 0;
}

.distance-display-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--tv-form-row-gap, 0.75rem);
    margin-top: 0;
}

/* Desktop: Horizontal layout */
@media (min-width: 48em) { /* 768px / 16 = 48em */
    .distance-display-row {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem; /* 12px */
    }
}

.distance-value {
    flex: 1;
    font-size: var(--route-font-lg);
    font-weight: 600;
    min-height: var(--route-touch-target-min);
    display: flex;
    align-items: center;
}

.distance-result {
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: var(--route-spacing-xs);
}

.distance-note {
    font-size: var(--route-font-xs);
    font-weight: 400;
    margin-top: 0.125rem; /* 2px */
}

.calculating {
    display: flex;
    align-items: center;
    gap: var(--route-spacing-md);
    color: var(--tv-info);
}

/* Spinner Animation */
.spinner {
    display: inline-block;
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    border: 0.125rem solid var(--tv-info); /* 2px */
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   WAYPOINTS SECTION
   ============================================ */

.waypoints-section {
    border-radius: 0.5rem; /* 8px */
    padding: 0;
}

/* Demoted to a caption. Inside the grouped sub-form the via-points list is an optional extra,
   not a peer of the section itself, so it should not carry full heading weight. The explicit
   border reset kills a stray rule inherited from the app's h4 styling, which drew a line
   across the group. */
.waypoints-section .section-header {
    margin-top: 0;
    font-size: var(--tv-font-xs, 0.75rem);
    font-weight: 600;
    color: var(--tv-text-muted, #6c757d);
    border-bottom: 0;
    padding-bottom: 0;
}

.waypoints-list {
    display: flex;
    flex-direction: column;
    gap: var(--tv-form-row-spacing, 0.5rem);
    margin-bottom: var(--tv-form-row-spacing, 0.5rem);
}

.waypoint-item {
    display: flex;
    flex-direction: column;
    gap: var(--route-spacing-xs);
    width: 100%;
    border-radius: 0.375rem; /* 6px */
    padding: var(--route-spacing-xs, 0.25rem);
}

.waypoint-controls {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--route-spacing-md);
    flex-wrap: nowrap;
    width: 100%;
}

.waypoint-controls > div:first-child {
    flex: 1;
    min-width: 0;
}

/* ============================================
   BUTTONS - Touch-friendly with fluid sizing
   ============================================ */

.calculate-btn {
    flex-shrink: 0;
    min-width: min(7.5rem, 100%); /* 120px */
    min-height: var(--route-touch-target-min);
}

.remove-waypoint-btn {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: var(--route-touch-target-small);
    height: var(--route-touch-target-small);
    min-width: var(--route-touch-target-small);
    min-height: var(--route-touch-target-small);
    background: transparent !important;
    border: 0px solid var(--route-color-border-light) !important;
    padding: var(--route-spacing-md) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Override Syncfusion button styles */
.remove-waypoint-btn.e-btn {
    background: transparent;
    border: 0.0625rem solid var(--route-color-border-light); /* 1px */
    box-shadow: none;
}

.remove-waypoint-btn.e-btn:hover {
    background: rgba(220, 53, 69, 0.1);
    border-color: var(--route-color-error-secondary);
}

.remove-waypoint-btn.e-btn:active {
    background: rgba(220, 53, 69, 0.2);
}

.remove-waypoint-btn.e-btn:focus {
    outline: var(--route-focus-width) solid var(--route-focus-color);
    outline-offset: var(--route-focus-offset);
}

.remove-waypoint-btn .e-icons.e-close {
    color: var(--route-color-error-secondary);
    font-size: 1.875rem; /* 30px */
    line-height: 0.625rem; /* 10px */
    width: 1.875rem; /* 30px */
    height: 1.25rem; /* 20px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-waypoint-btn {
    margin-top: var(--tv-spacing-xs, 0.25rem);
    width: 100%;
    min-height: var(--route-touch-target-min);
}

/* Desktop: Auto-width for add button */
@media (min-width: 48em) { /* 768px / 16 = 48em */
    .add-waypoint-btn {
        width: auto;
    }
}

/* ============================================
   FOOTER WITH VALIDATION SUMMARY
   ============================================ */

.dialog-footer {
    display: flex;
    flex-direction: column;
    gap: var(--route-spacing-md);
    width: 100%;
}

.dialog-footer-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--route-spacing-xl);
    text-align: left;
}

.validation-summary {
    border-left: 0.1875rem solid var(--route-color-error); /* 3px */
    padding-left: var(--route-spacing-xl);
    color: var(--route-color-error);
    font-size: var(--route-font-md);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
}

.validation-summary-item {
    display: block;
}

/* ============================================
   MESSAGES AND STATES
   ============================================ */

/* "No via-points added" is the resting state of an optional list, so it should occupy as
   little room as possible — previously the caption, this line and a full-width button spent
   four rows saying nothing had been entered. */
.empty-state {
    font-style: italic;
    margin: 0;
    font-size: var(--tv-font-xs, 0.75rem);
    color: var(--tv-text-muted, #6c757d);
}

.info-message {
    border: 0.0625rem solid var(--tv-info-border); /* 1px */
    border-radius: var(--route-radius-sm);
    padding: var(--route-spacing-lg) var(--route-spacing-xl);
    margin-top: var(--route-spacing-md);
    font-size: var(--route-font-sm);
    color: var(--tv-info);
    line-height: 1.4;
}

/* ============================================
   TOUCH DEVICES OPTIMIZATION
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    .calculate-btn,
    .cancel-btn,
    .save-btn {
        min-height: var(--route-touch-target-accessible);
        padding: var(--route-spacing-xl) var(--route-spacing-3xl);
    }
    
    .remove-waypoint-btn {
        min-width: var(--route-touch-target-accessible);
        min-height: var(--route-touch-target-accessible);
        padding: var(--route-spacing-xl) !important;
    }
    
    .add-waypoint-btn {
        min-height: var(--route-touch-target-accessible);
        padding: var(--route-spacing-xl) var(--route-spacing-2xl);
    }
}

/* ============================================
   HIGH CONTRAST MODE (ACCESSIBILITY)
   ============================================ */

@media (forced-colors: active) {
    .options-section,
    .distance-section,
    .waypoints-section {
        border: 0.125rem solid CanvasText; /* 2px */
    }
    
    .field-label,
    .section-header,
    .distance-result,
    .calculating,
    .distance-error {
        color: CanvasText;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .remove-waypoint-btn,
    .add-waypoint-btn,
    .calculate-btn {
        display: none;
    }
    
    .waypoints-section,
    .options-section,
    .distance-section {
        border: 0.0625rem solid #000; /* 1px */
        background: white;
    }
}

/* ============================================
   CHECKBOX THEME SUPPORT
   ============================================ */

/* Box frame */
.e-checkbox .e-frame,
.e-css.e-checkbox .e-frame {
  background-color: var(--cb-bg);
  border-color: var(--cb-border);
}

/* Focus ring */
.e-checkbox:focus-within .e-frame,
.e-css.e-checkbox:focus-within .e-frame {
  box-shadow: 0 0 0 0.1875rem var(--tv-focus-ring-shadow); /* 3px */
  outline: 0.125rem solid var(--tv-focus-ring); /* 2px */
}

/* Checked state */
.e-checkbox.e-check .e-frame,
.e-css.e-checkbox.e-check .e-frame,
.e-checkbox .e-frame.e-check,
.e-css.e-checkbox .e-frame.e-check {
  background-color: var(--cb-check);
  border-color: var(--cb-check);
}

/* Disabled */
.e-checkbox.e-disable .e-frame,
.e-css.e-checkbox.e-disable .e-frame,
.e-checkbox .e-frame.e-disable,
.e-css.e-checkbox .e-frame.e-disable {
  opacity: .7;
}

/* Label */
.e-checkbox .e-label,
.e-css.e-checkbox .e-label {
  color: var(--cb-label);
}

/* ===========================================================================
   LocationPicker

   Moved here from LocationPicker.razor's markup: a route calculator renders
   two to four LocationPickers (origin, destination and a waypoint loop), so
   the block was emitted once per picker. Appended last to preserve the
   cascade position it had when injected from <body>.
   =========================================================================== */
/* Component-specific container styling only */
.location-picker-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Note: Error styling, validation messages, and accessibility features 
   are provided by validation-accessibility.css which is included globally.
   This includes:
   - .e-error class for Syncfusion error states
   - .validation-message class for error messages with warning icons
   - WCAG 2.1 Level AA compliant styling
   - High contrast mode support
   - Reduced motion support
   - Mobile touch target optimization (44px minimum)
   - Screen reader support
*/

/* Enhanced focus indicator for keyboard navigation - component-specific */
.location-picker-container .e-input-group.e-input-focus:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

/* Don't show outline on mouse click, only keyboard focus */
.location-picker-container .e-input-group.e-input-focus:not(:focus-visible) {
    outline: none;
}

/* Mobile optimizations - component-specific behavior */
@media (max-width: 768px) {
    .e-input-group .e-input {
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 44px; /* Minimum touch target size - aligns with validation-accessibility.css */
    }

    .e-ddl.e-popup {
        max-height: 50vh; /* Don't take up entire screen */
    }

    .location-picker-container .e-clear-icon {
        width: 44px;
        height: 44px;
    }
}

/* Improve touch targets on mobile - component-specific behavior */
@media (hover: none) and (pointer: coarse) {
    .e-input-group .e-clear-icon {
        padding: 12px;
    }
}

/* Constrain popup width to match input width */
.location-picker-container,
.location-picker-container ~ .e-popup {
    max-width: 100% !important;
    width: inherit !important;
}