/* Component CSS extracted from inline <style> blocks for CSP compliance.
 *
 * Loaded site-wide via base.html and admin/base.html so any page can use
 * these utility classes without re-declaring them inline.
 */

/* === Leaflet third-party overrides === */
.leaflet-popup-content {
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.custom-marker {
    background: none;
    border: none;
}

/* === Map page === */
#map {
    height: 500px;
    width: 100%;
    border-radius: 0.5rem;
}

/* === Chat slide-up animation (unified view) === */
@keyframes chatSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Request matrix virtualisation
 * Lets the browser skip layout for off-screen day sections to keep the very
 * tall matrix view scrollable on slower devices.
 */
.day-section-virtualized {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* === Schedule page travel timeline styling
 * Pseudo-elements (::before / ::after) and class combinators can't be
 * expressed as Tailwind utilities, so they stay as raw CSS.
 */
.travel-block {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    margin: 2px 0;
    font-size: 9px;
    color: #6b7280;
    background: transparent;
}

.travel-block::before,
.travel-block::after {
    content: '';
    flex: 1;
    height: 0;
    border-top: 1px dotted #d1d5db;
}

.travel-block.green { color: #059669; }
.travel-block.green::before,
.travel-block.green::after { border-color: #a7f3d0; }

.travel-block.yellow { color: #d97706; }
.travel-block.yellow::before,
.travel-block.yellow::after { border-color: #fde68a; }

.travel-block.red { color: #dc2626; }
.travel-block.red::before,
.travel-block.red::after { border-color: #fca5a5; }

.travel-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
}

.travel-badge.green  { background: #d1fae5; color: #065f46; }
.travel-badge.yellow { background: #fef3c7; color: #92400e; }
.travel-badge.red    { background: #fee2e2; color: #991b1b; }

.departure-warning {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    padding: 4px 8px;
    font-size: 10px;
    margin-bottom: 6px;
    border-radius: 0 4px 4px 0;
    color: #92400e;
}

.departure-warning.red {
    background: #fee2e2;
    border-left-color: #ef4444;
    color: #991b1b;
}

.travel-block-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin: 4px 0;
    font-size: 11px;
    color: #6b7280;
    background: transparent;
}

.travel-block-mobile::before,
.travel-block-mobile::after {
    content: '';
    flex: 1;
    height: 0;
    border-top: 1px dotted #d1d5db;
}

.travel-block-mobile.green { color: #059669; }
.travel-block-mobile.green::before,
.travel-block-mobile.green::after { border-color: #a7f3d0; }

.travel-block-mobile.yellow { color: #d97706; }
.travel-block-mobile.yellow::before,
.travel-block-mobile.yellow::after { border-color: #fde68a; }

.travel-block-mobile.red { color: #dc2626; }
.travel-block-mobile.red::before,
.travel-block-mobile.red::after { border-color: #fca5a5; }

.travel-badge-mobile {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.travel-badge-mobile.green  { background: #d1fae5; color: #065f46; }
.travel-badge-mobile.yellow { background: #fef3c7; color: #92400e; }
.travel-badge-mobile.red    { background: #fee2e2; color: #991b1b; }

.departure-warning-mobile {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    padding: 8px 12px;
    font-size: 12px;
    margin-bottom: 8px;
    border-radius: 0 6px 6px 0;
    color: #92400e;
}

.departure-warning-mobile.red {
    background: #fee2e2;
    border-left-color: #ef4444;
    color: #991b1b;
}

.travel-tooltip {
    position: absolute;
    z-index: 50;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    font-size: 12px;
    max-width: 280px;
    pointer-events: none;
}

.travel-tooltip-header {
    font-weight: 600;
    margin-bottom: 6px;
    color: #111827;
}

.travel-tooltip-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    color: #6b7280;
}

.travel-tooltip-reason {
    font-style: italic;
    color: #9ca3af;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e5e7eb;
}

.event-tooltip {
    position: absolute;
    z-index: 50;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    font-size: 12px;
    max-width: 300px;
    pointer-events: none;
}

.event-tooltip-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #111827;
    word-break: break-word;
}

.event-tooltip-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    color: #4b5563;
}

.event-tooltip-row svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.event-tooltip-location {
    word-break: break-word;
}