/* Aircraft table row animations */
.aircraft-row {
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0s ease, background-color 0s ease;
}

/* Signal lost aircraft styling */

/* Map viewport customization */
.ol-viewport {
    @apply bg-black z-[1];
}
/* Toggle switch - no direct Tailwind equivalent */
.switch {
    @apply relative inline-block w-9 h-5;
}

.switch input {
    @apply opacity-0 w-0 h-0 absolute;
}

.slider {
    @apply absolute cursor-pointer inset-0 bg-neutral-700 transition-all duration-300 rounded-full before:content-[''] before:absolute before:h-4 before:w-4 before:left-0.5 before:bottom-0.5 before:bg-white before:transition-all before:duration-300 before:rounded-full;
}

input:checked + .slider {
    @apply bg-highlight;
}

input:checked + .slider:before {
    @apply translate-x-4;
}
/* Custom Scrollbar Styles */
/* For Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--color-surface-map) 20%, transparent);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-accent-default) 30%, transparent);
    border-radius: 3px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-accent-default) 50%, transparent);
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-accent-default) 30%, transparent) color-mix(in srgb, var(--color-surface-map) 20%, transparent);
}

/* Specific scrollbar styling for the history view */
.overflow-y-auto, .overflow-x-auto {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-accent-default) 30%, transparent) color-mix(in srgb, var(--color-surface-map) 20%, transparent);
}
.ol-overlaycontainer,
.ol-overlaycontainer-stopevent {
    overflow: visible !important;
}

/* Radio Bar Enhancements */

/* Frequency Box Enhancements */

/* Button Enhancements */

/* Canvas pane optimization */
.ol-layer canvas {
    image-rendering: optimizeSpeed;
}
/* PAR view (docs-fr/31-vue-par.md): in the map's place, under the alerts bar */
#par-view {
    position: absolute;
    inset: 0;
    z-index: 9000;
    overflow-y: auto;
    padding: 0 0 24px;
    background: var(--color-surface-page);
}
.par-message { padding: 24px; font-size: 13px; color: var(--color-text-tertiary); }
.par-svg { display: block; font-size: 11px; font-family: inherit; }
.par-ac { cursor: pointer; }
.par-tip {
    position: fixed;
    z-index: 20000;
    max-width: 340px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--color-accent-default) 35%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-surface-map) 90%, transparent);
    color: var(--color-text-primary);
    font-size: 11px;
    line-height: 1.45;
    pointer-events: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-surface-map) 50%, transparent);
}
.par-tip-title { margin-bottom: 2px; color: var(--color-accent-default); font-weight: bold; }

/* Dark base maps (ign-dark, osm-dark): the light IGN or OSM tiles, inverted.
   map/core/map-engine.js gives the base layer its own canvas (.atc-basemap) and
   puts .basemap-dark on the map's element, so aircraft, trails and the other
   layers are not filtered. The values are a starting point, to tune by eye. */
.basemap-dark .atc-basemap {
    filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9);
}

/* Alpine: hidden until initialised (the settings page would flash at load). */
[x-cloak] { display: none !important; }

.alt-track-wrap { position: relative; height: var(--size-target-desk, 24px); margin: 0 0 2px; }
.alt-track, .alt-track-band { position: absolute; top: 10px; height: 4px; border-radius: 2px; }
.alt-track { left: 7px; right: 7px; background: var(--color-border-default); }
.alt-track-band { background: var(--color-accent-default); }
.alt-ta { position: absolute; top: 6px; width: 0; height: 12px; pointer-events: none; }
.alt-range { position: absolute; inset: 0; width: 100%; height: var(--size-target-desk, 24px); margin: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.alt-range:focus { outline: none; }
.alt-range::-webkit-slider-runnable-track { background: transparent; height: var(--size-target-desk, 24px); }
.alt-range::-moz-range-track { background: transparent; }
.alt-range::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; background: var(--color-accent-default); border: 2px solid var(--color-surface-page); box-shadow: 0 0 0 1px var(--color-accent-default); cursor: grab; }
.alt-range::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent-default); border: 2px solid var(--color-surface-page); cursor: grab; }
.alt-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-default) 50%, transparent); }
.alt-marks { position: relative; height: var(--font-line-height-caption, 14px); margin: 0 7px; }
.alt-marks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.alt-marks span:first-child { transform: none; }
.alt-marks span:last-child { transform: translateX(-100%); }

/* "Reduce motion" (migration step 11, 03-systeme): durations fall to zero and
   nothing pulses, urgency included (its badge stays); the aircraft's own
   movement on the map is drawn by script and stays, being information. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* The regions the skip links lead to (step 11; the links are the system's
   .cl-skip): a target for the focus, not a control. */
#region-thread:focus, #region-column:focus { outline: none; }

/* The page's own controls at touch size under 768 px (step 12): the altitude
   range's two thumbs and the list's sort. */
@media (max-width: 767px) {
    .alt-track-wrap { height: 44px; }
    .alt-range, .alt-range::-webkit-slider-runnable-track { height: 44px; }
    .alt-range::-webkit-slider-thumb { margin-top: 15px; }
    select[aria-label="Sort"], select[aria-label="Signal lost retention"] { height: 44px !important; min-width: 64px; font-size: 13px !important; }
}