body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

.material-symbols-outlined { 
    vertical-align: middle;
    user-select: none;
}

#map { 
    height: 100%; 
    min-height: 400px;
    border-radius: 8px;
}

/* New layout styles */
.main-container {
    display: flex;
    height: calc(100vh - 80px); /* Full viewport height minus header */
}

.left-panel {
    flex: 0 0 70%; /* Initial width 70% - give more space to the map */
    display: flex;
    flex-direction: column;
    min-width: 300px; /* Prevent it from getting too small */
}

.resizer {
    flex: 0 0 10px;
    background: #f1f1f1;
    cursor: col-resize;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.right-panel {
    flex: 1 1 auto; /* Takes up remaining space */
    overflow-y: auto;
    padding-left: 10px;
    min-width: 300px; /* Prevent it from getting too small */
}

.map-container {
    /* Take up most of the space in the left panel */
    position: relative; /* This is crucial for positioning the spinner inside it */
    flex-grow: 1;
}

.elevation-chart {
    /* Fixed height, does not grow or shrink */
    flex-shrink: 0;
    height: 200px;
    border-radius: 8px;
}

.waypoint-item {
    transition: all 0.2s;
    cursor: pointer;
    padding: 0.5rem !important; /* Make waypoint items more compact */
}

.waypoint-item:hover {
    background-color: #f8f9fa;
    transform: translateX(3px);
}

.waypoint-item.active {
    background-color: #e7f3ff;
    border-left: 3px solid #0d6efd;
}

/* Make waypoint icons smaller */
.waypoint-item .material-symbols-outlined {
    font-size: 18px;
}

/* Make waypoint badges smaller */
.waypoint-item .badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

/* Make waypoint input smaller */
.waypoint-item h6 {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.waypoint-item small {
    font-size: 0.75rem;
}

/* Make buttons in waypoint items more compact */
.waypoint-item .btn-icon {
    padding: 0.15rem 0.35rem;
}

.rest-badge {
    background: #ffc107;
    color: #000;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
}

.btn-icon {
    padding: 0.25rem 0.5rem;
}

.speed-input {
    width: 80px;
}

.summary-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
}

canvas {
    border-radius: 8px;
}

/* Add a class for the crosshair cursor */
.crosshair-cursor {
    cursor: crosshair;
}

/* Style for inline waypoint name input */
.waypoint-name-input {
    width: 60%;
}

/* Remove inline styles from buttons */
#routeName {
    width: 200px;
}

/* Collapsible header styles */
.collapsible-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
}

/* Hide the open icon by default, show closed icon */
.collapsible-header .collapse-icon-open {
    display: none;
}

.collapsible-header .collapse-icon-closed {
    display: inline-block;
}

/* When the collapse is NOT collapsed (i.e., expanded), show open icon and hide closed icon */
.collapsible-header:not(.collapsed) .collapse-icon-open {
    display: inline-block;
}

.collapsible-header:not(.collapsed) .collapse-icon-closed {
    display: none;
}

/* Make cards in right panel more compact */
.right-panel .card {
    margin-bottom: 0.75rem !important;
}

.right-panel .card-body {
    padding: 0.75rem;
}

.right-panel .card-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* Make the settings form more compact */
#settingsCollapse .row {
    margin-top: 0.5rem !important;
}

#settingsCollapse .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

#settingsCollapse .form-control {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Make summary card more compact */
.summary-card .card-body {
    padding: 0.75rem;
}

.summary-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0;
}

.summary-card small {
    font-size: 0.75rem;
}