/* ==========================================================================
   Action Interactive Map - Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Variables)
   -------------------------------------------------------------------------- */
:root {
    /* Brand Colors */
    --action-blue-dark: #0a1f5c;
    --action-blue-medium: #1e3a8a;
    --action-blue-light: #dbeafe;
    --action-blue-stripe: #60a5fa;
    --action-blue-hover: #3b82f6;
    --action-orange: #f97316;
    --action-orange-light: #fdba74;
    --action-white: #ffffff;
    --action-grey-light: #f1f5f9;
    --action-grey: #94a3b8;
    --action-grey-dark: #475569;

    /* Typography - sized to match Action Update page */
    --font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.875rem;
    --font-size-sm: 1rem;
    --font-size-base: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.875rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 2.875rem;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Layout */
    --panel-width: 48%;
    --map-width: 52%;
    --timeline-height: 80px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Map Position (edit these values from admin mode) */
    --map-translate-x: 0px;
    --map-translate-y: 0px;
    --map-scale: 1;
}

/* --------------------------------------------------------------------------
   Reset & Base Styles
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    width: 100%;
}

body {
    font-family: var(--font-family);
    font-weight: 400;
    line-height: 1.5;
    color: var(--action-blue-dark);
    background-color: transparent;
    height: 100vh;
    width: 100%;
    max-height: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Loading Spinner
   -------------------------------------------------------------------------- */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity var(--transition-normal);
}

.loading.hidden {
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Page Header
   -------------------------------------------------------------------------- */
.page-header {
    padding: 0 0 var(--spacing-lg) 0;
    background: transparent;
}

.page-title {
    font-family: 'Ubuntu', sans-serif;
    font-size: 52px;
    font-weight: 700;
    color: var(--action-blue-dark);
    margin-bottom: var(--spacing-md);
    line-height: 62.4px;
}

.page-subtitle {
    font-family: 'Ubuntu', sans-serif;
    font-size: 28px;
    font-weight: 300;
    color: rgb(83, 87, 90);
    line-height: 39.2px;
    margin-bottom: var(--spacing-sm);
}

.page-body {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgb(83, 87, 90);
    line-height: 22.4px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--action-blue-light);
    border-top-color: var(--action-blue-medium);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* --------------------------------------------------------------------------
   Main Container
   -------------------------------------------------------------------------- */
.map-container {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Info Panel
   -------------------------------------------------------------------------- */
.info-panel {
    width: var(--panel-width);
    height: 100%;
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    background: transparent;
    overflow: hidden;
    position: relative;
}

.panel-header {
    margin-bottom: var(--spacing-lg);
}

.panel-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--action-blue-dark);
    line-height: 1.3;
    margin-bottom: var(--spacing-sm);
}

.panel-description {
    font-size: var(--font-size-sm);
    color: var(--action-grey-dark);
    line-height: 1.6;
}

.panel-content {
    flex: 1;
}

/* Totals Summary */
.totals-summary {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.total-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.total-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--action-blue-dark);
    line-height: 1.1;
}

.total-label {
    font-size: var(--font-size-sm);
    color: var(--action-grey-dark);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Country Info */
.country-info {
    display: table;
    border-collapse: separate;
    border-spacing: 0 var(--spacing-sm);
}

.info-row {
    display: table-row;
}

.info-label {
    display: table-cell;
    font-size: var(--font-size-sm);
    color: var(--action-blue-medium);
    font-weight: 400;
    text-align: right;
    padding-right: var(--spacing-md);
    vertical-align: baseline;
    white-space: nowrap;
}

.info-value {
    display: table-cell;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--action-blue-medium);
    vertical-align: baseline;
}

/* Country name styling */
html body .info-panel .info-value#country-name,
#country-name {
    color: var(--action-blue-medium) !important;
    font-size: var(--font-size-sm);
    font-weight: 700 !important;
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased !important;
}

.distribution-centres {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--action-blue-medium);
    line-height: 1.6;
}

/* Lock Indicator */
.lock-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--action-grey-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--action-grey-dark);
}

.lock-indicator[hidden] {
    display: none;
}

.lock-icon::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background: var(--action-orange);
    border-radius: var(--radius-sm);
}

/* Panel Legend */
.panel-legend {
    margin-top: auto;
    padding-top: var(--spacing-md);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.legend-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.legend-text {
    font-size: var(--font-size-sm);
    color: var(--action-blue-medium);
}

/* --------------------------------------------------------------------------
   Map Area
   -------------------------------------------------------------------------- */
.map-area {
    width: var(--map-width);
    height: 100%;
    flex: 1;
    position: relative;
    overflow: hidden;
    background: transparent;
}

.map-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* Country Name Tooltip */
.country-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--action-blue-dark);
    color: var(--action-white);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    z-index: 100;
    box-shadow: var(--shadow-md);
    transform: translate(10px, 10px);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.country-tooltip.visible {
    opacity: 1;
}

.country-tooltip[hidden] {
    display: none;
}

#map-svg-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#map-svg-container svg {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left top;
    width: auto;
    height: 115%;
    /* Default position - edit CSS variables in :root to change */
    transform: translate(var(--map-translate-x), var(--map-translate-y)) scale(var(--map-scale));
}

/* Country Styles - SVG groups with built-in stripe patterns */

/* Country borders - white stroke for visibility */
.cls-2, .cls-3, .cls-4 {
    stroke: var(--action-white) !important;
    stroke-width: 1.2px !important;
}

/* Hide the locations layer - we use its coordinates but don't display it */
#locations {
    display: none;
}

/* Invisible hit areas for country hover detection - uses actual country shape */
.country-hit-area {
    pointer-events: all;
    fill: transparent !important;
    stroke: none !important;
}

/* By default, country stripes are hidden (inactive countries) */
[id^="country-"] {
    opacity: 0.3;
    cursor: default;
    transition: opacity var(--transition-fast);
    pointer-events: all;
}

/* Active countries show their stripes */
[id^="country-"].active {
    opacity: 1;
    cursor: pointer;
}

/* Hover state - slightly brighter/more prominent */
[id^="country-"].active:hover,
[id^="country-"].hovered {
    opacity: 1;
    filter: brightness(1.1);
}

/* Selected country - orange glow effect */
[id^="country-"].selected {
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.6)) brightness(1.05);
}

/* Inactive country hover - subtle feedback to show it's clickable */
[id^="country-"].inactive-hover {
    opacity: 0.5;
    cursor: pointer;
    filter: brightness(1.15);
}

/* DC Pin markers inside SVG */
.dc-pin {
    fill: var(--action-blue-dark);
    stroke: var(--action-white);
    stroke-width: 1.5;
    transition: fill var(--transition-fast);
}

.dc-pin-cross {
    stroke: var(--action-white);
    stroke-width: 0.67;
    stroke-linecap: round;
    transition: stroke var(--transition-fast);
}

/* Pin hover state - just change color, no scale to avoid jitter */
.dc-pin-group:hover .dc-pin,
.dc-pin-group.hovered .dc-pin {
    fill: var(--action-orange);
}

.dc-pin-group:hover .dc-pin-cross,
.dc-pin-group.hovered .dc-pin-cross {
    stroke: var(--action-white);
}

/* SVG Pin Markers container */
#dc-pins {
    pointer-events: none;
}

/* Allow pointer events on individual pins */
.dc-pin-group {
    pointer-events: all;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */
.timeline-container {
    height: var(--timeline-height);
    width: 90%;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-sm);
    background: var(--action-white);
    border-top: 1px solid var(--action-grey-light);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.timeline-info {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    padding-left: calc(var(--panel-width) - var(--spacing-lg));
}

.timeline-label {
    font-size: var(--font-size-sm);
    color: var(--action-grey-dark);
}

.timeline-year {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--action-blue-dark);
    line-height: 1;
}

.timeline-date {
    font-size: var(--font-size-xs);
    color: var(--action-grey);
    margin-left: var(--spacing-md);
}

.timeline-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Play Button */
.timeline-play-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--action-orange);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}

.timeline-play-btn:hover {
    background: var(--action-orange-light);
    transform: scale(1.05);
}

.timeline-play-btn:focus {
    outline: 2px solid var(--action-blue-medium);
    outline-offset: 2px;
}

.play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent var(--action-white);
    margin-left: 3px;
}

.timeline-play-btn.playing .play-icon {
    border: none;
    width: 12px;
    height: 14px;
    background: linear-gradient(
        to right,
        var(--action-white) 0%,
        var(--action-white) 35%,
        transparent 35%,
        transparent 65%,
        var(--action-white) 65%,
        var(--action-white) 100%
    );
    margin-left: 0;
}

/* Timeline Slider */
.timeline-slider-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    position: relative;
}

.timeline-track {
    position: relative;
    height: 8px;
    background: var(--action-grey-light);
    border-radius: var(--radius-full);
    cursor: pointer;
}

.timeline-track:focus {
    outline: 2px solid var(--action-blue-medium);
    outline-offset: 2px;
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--action-blue-light);
    border-radius: var(--radius-full);
    pointer-events: none;
    transition: width 0.2s ease-out;
}

.timeline-track.dragging .timeline-progress {
    transition: none;
}

.timeline-handle {
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
    background: var(--action-orange);
    border: 3px solid var(--action-white);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-shadow: var(--shadow-md);
    transition: left 0.2s ease-out, transform var(--transition-fast);
}

.timeline-handle:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.timeline-handle.dragging {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.15);
    transition: transform var(--transition-fast);
}

/* Timeline Labels */
.timeline-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--spacing-xs);
}

.timeline-label-year {
    font-size: var(--font-size-xs);
    color: var(--action-grey);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.timeline-label-year:hover {
    color: var(--action-blue-medium);
}

.timeline-label-year.active {
    color: var(--action-blue-dark);
    font-weight: 500;
    font-size: var(--font-size-base);
}

/* Year labels with highlights get a small indicator dot */
.timeline-label-year.has-highlight {
    position: relative;
}

.timeline-label-year.has-highlight::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--action-orange);
    border-radius: 50%;
}

/* Timeline Highlight Callout */
.timeline-highlight-callout {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--action-blue-dark);
    color: var(--action-white);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 260px;
    white-space: normal;
    text-align: center;
    box-shadow: var(--shadow-sm);
    z-index: 10;
    opacity: 0.9;
    transition: opacity var(--transition-fast), left var(--transition-fast);
}

.timeline-highlight-callout[hidden] {
    display: none;
}

.timeline-highlight-callout .callout-text {
    display: block;
}

.timeline-highlight-callout .callout-arrow {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent var(--action-blue-dark) transparent;
}

/* --------------------------------------------------------------------------
   Admin Panel
   -------------------------------------------------------------------------- */
.admin-panel {
    position: fixed;
    bottom: var(--timeline-height);
    right: var(--spacing-md);
    width: 280px;
    background: var(--action-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
}

.admin-panel[hidden] {
    display: none;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--action-blue-dark);
    color: var(--action-white);
    cursor: move;
    user-select: none;
}

.admin-header::before {
    content: "::";
    margin-right: var(--spacing-sm);
    opacity: 0.5;
    letter-spacing: 2px;
}

.admin-header h2 {
    font-size: var(--font-size-base);
    font-weight: 500;
}

.admin-close {
    background: none;
    border: none;
    color: var(--action-white);
    font-size: var(--font-size-xl);
    cursor: pointer;
    line-height: 1;
}

.admin-content {
    padding: var(--spacing-md);
}

.admin-hint {
    font-size: var(--font-size-sm);
    color: var(--action-grey-dark);
    margin-bottom: var(--spacing-md);
}

.admin-coords {
    display: flex;
    gap: var(--spacing-lg);
    font-family: monospace;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.admin-export {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--action-blue-medium);
    color: var(--action-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background var(--transition-fast);
}

.admin-export:hover {
    background: var(--action-blue-dark);
}

/* Admin Section Headers */
.admin-section {
    margin-bottom: var(--spacing-md);
}

.admin-section h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--action-blue-dark);
    margin-bottom: var(--spacing-xs);
}

.admin-divider {
    border: none;
    border-top: 1px solid var(--action-grey-light);
    margin: var(--spacing-md) 0;
}

/* Admin Position Controls */
.admin-position-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.admin-zoom-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.admin-zoom-unit {
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--action-grey-dark);
}

.admin-input {
    width: 70px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--action-grey);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: var(--font-size-sm);
    text-align: center;
}

.admin-input:focus {
    outline: none;
    border-color: var(--action-blue-medium);
}

.admin-input-sm {
    width: 60px;
}

.admin-pan-inputs {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--action-grey-dark);
}

.admin-pan-inputs label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.admin-position-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

/* Admin Buttons */
.admin-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--action-grey);
    background: var(--action-white);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--action-blue-dark);
    transition: all var(--transition-fast);
}

.admin-btn:hover {
    background: var(--action-grey-light);
    border-color: var(--action-blue-medium);
}

.admin-btn-primary {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--action-blue-medium);
    color: var(--action-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.admin-btn-primary:hover {
    background: var(--action-blue-dark);
}

.admin-btn-secondary {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--action-white);
    color: var(--action-blue-medium);
    border: 1px solid var(--action-blue-medium);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.admin-btn-secondary:hover {
    background: var(--action-blue-light);
}

.admin-output {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--action-grey-light);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 11px;
    color: var(--action-blue-dark);
    word-break: break-all;
    min-height: 1.5em;
}

/* Admin Draggable Map */
#map-svg-container.admin-draggable {
    cursor: grab;
}

#map-svg-container.admin-draggable.dragging {
    cursor: grabbing;
}

#map-svg-container.admin-draggable svg {
    transition: none;
}

/* --------------------------------------------------------------------------
   Responsive Styles
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --panel-width: 100%;
        --map-width: 100%;
        --timeline-height: 100px;
    }

    .map-container {
        flex-direction: column;
    }

    .info-panel {
        width: 100%;
        max-height: 30vh;
        padding: var(--spacing-md);
    }

    .panel-title {
        font-size: var(--font-size-xl);
    }

    .panel-description {
        display: none;
    }

    .country-info {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .info-row {
        flex: 1;
        min-width: 120px;
    }

    .info-label {
        min-width: auto;
        text-align: left;
    }

    .map-area {
        width: 100%;
        flex: 1;
        min-height: 40vh;
    }

    .timeline-info {
        padding-left: 0;
    }

    .timeline-year {
        font-size: var(--font-size-2xl);
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --timeline-height: 80px;
    }

    .info-panel {
        max-height: 25vh;
        padding: var(--spacing-sm);
    }

    .panel-header {
        margin-bottom: var(--spacing-sm);
    }

    .panel-title {
        font-size: var(--font-size-lg);
    }

    .info-value {
        font-size: var(--font-size-base);
    }

    .info-value.country-name {
        font-size: var(--font-size-base);
    }

    .info-value.stores-count,
    .info-value.employees-count {
        font-size: var(--font-size-base);
    }

    .panel-legend {
        display: none;
    }

    .timeline-container {
        padding: var(--spacing-sm);
    }

    .timeline-info {
        gap: var(--spacing-xs);
    }

    .timeline-label {
        font-size: var(--font-size-xs);
    }

    .timeline-year {
        font-size: var(--font-size-xl);
    }

    .timeline-date {
        display: none;
    }

    .timeline-play-btn {
        width: 32px;
        height: 32px;
    }

    .play-icon {
        border-width: 6px 0 6px 10px;
    }

    .timeline-labels {
        font-size: var(--font-size-xs);
    }

    .admin-panel {
        right: var(--spacing-sm);
        width: calc(100% - var(--spacing-md));
        max-width: 280px;
    }
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
@media print {
    .timeline-container,
    .admin-panel,
    .loading {
        display: none;
    }

    .map-container {
        display: block;
    }

    .info-panel,
    .map-area {
        width: 100%;
    }
}