/* =============================================================================
   GIS road map – stylesheet
   data source: © OpenStreetMap contributors (ODbL)
   ============================================================================= */


/* =============================================================================
   variables
   ============================================================================= */

:root {
    /* font */
    --font-family:      "Segoe UI", Arial, sans-serif;
    --font-size-base:   13px;
    --font-size-medium: 14px;
    --font-size-large:  16px;

    /* colours */
    --color-dark:       #2c3e50;
    --color-border:     #ccc;
    --color-bg:         #f5f5f5;
    --color-bg-hover:   #e0e0e0;
    --color-white:      white;

    /* buttons */
    --color-save:         #27ae60;
    --color-save-hover:   #219a52;
    --color-cancel:       #e74c3c;
    --color-cancel-hover: #c0392b;

    /* spacing */
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 6px;
    --spacing-lg: 8px;
    --spacing-xl: 10px;

    /* border */
    --border-radius-sm: 3px;
    --border-radius-md: 4px;
    --border-radius-lg: 8px;

    /* shadow */
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}


/* =============================================================================
   layout – map fills whole window
   ============================================================================= */

* {
    font-family: var(--font-family);
    font-size:   var(--font-size-base);
    box-sizing:  border-box;
}

body, html {
    margin:  0;
    padding: 0;
    height:  100%;
}

#map {
    width:  100%;
    height: 100vh;
}


/* =============================================================================
   toolbar: filter at top center
   ============================================================================= */

#toolbar {
    position:      absolute;
    top:           var(--spacing-xl);
    left:          50%;
    transform:     translateX(-50%);
    z-index:       1000;
    display:       flex;
    gap:           var(--spacing-md);
    background:    var(--color-white);
    padding:       var(--spacing-md) var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow:    var(--shadow);
    align-items:   center;
}

#filter {
    display:     flex;
    align-items: center;
    gap:         var(--spacing-md);
}

#streetFilter {
    padding:       var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    border:        1px solid var(--color-border);
    cursor:        pointer;
}


/* =============================================================================
   OSM map
   ============================================================================= */

#map-loader {
    position:        absolute;
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    background:      var(--color-white);
    z-index:         2000;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       var(--font-size-large);
    color:           var(--color-dark);
}


/* =============================================================================
   leaflet popup (used to change attribute of selected road segement)
   ============================================================================= */

.leaflet-popup-content {
    font-family: var(--font-family);
}

.leaflet-popup-content b {
    font-size: var(--font-size-medium);
}

.leaflet-popup-content table {
    border-collapse: collapse;
    margin-top:      var(--spacing-sm);
    width:           100%;
}

.leaflet-popup-content td {
    padding:        var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) 0;
    vertical-align: top;
}

.leaflet-popup-content input[type="number"] {
    padding:       var(--spacing-xs) var(--spacing-sm);
    border:        1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    width:         60px;
}

.leaflet-popup-content input[type="checkbox"] {
    cursor: pointer;
}

.leaflet-popup-content select {
    padding:       var(--spacing-xs) var(--spacing-sm);
    border:        1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    cursor:        pointer;
}

.leaflet-popup-content button {
    margin-top:    var(--spacing-lg);
    padding:       var(--spacing-sm) var(--spacing-xl);
    cursor:        pointer;
    border-radius: var(--border-radius-sm);
    border:        1px solid var(--color-border);
    background:    var(--color-bg);
    color:         var(--color-dark);
}

.leaflet-popup-content button:hover {
    background: var(--color-bg-hover);
}


/* =============================================================================
   popup buttons
   ============================================================================= */

.btn-edit {
    display:       block;
    margin-top:    var(--spacing-lg);
    padding:       var(--spacing-sm) var(--spacing-xl);
    cursor:        pointer;
    border-radius: var(--border-radius-sm);
    border:        1px solid var(--color-border);
    background:    var(--color-bg);
    color:         var(--color-dark);
}

.btn-edit:hover {
    background: var(--color-bg-hover);
}

.btn-group {
    display:    flex;
    gap:        var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.btn-save {
    padding:       var(--spacing-sm) var(--spacing-xl);
    cursor:        pointer;
    border-radius: var(--border-radius-sm);
    border:        none;
    background:    var(--color-save);
    color:         var(--color-white);
}

.btn-save:hover {
    background: var(--color-save-hover);
}

.btn-cancel {
    padding:       var(--spacing-sm) var(--spacing-xl);
    cursor:        pointer;
    border-radius: var(--border-radius-sm);
    border:        none;
    background:    var(--color-cancel);
    color:         var(--color-white);
}

.btn-cancel:hover {
    background: var(--color-cancel-hover);
}