/* Dark mode overrides */
body.dark-mode {
  --color-text: var(--color-dark-text);
  --color-text-light: var(--color-dark-text-light);
  --color-text-secondary: var(--color-dark-text-secondary);
  --color-background: var(--color-dark-background);
  --color-border: var(--color-dark-border);
  --expandable-link-color: var(--expandable-link-color-dark);

  /* Tabele barve za dark mode */
  --color-light-grey: var(--color-dark-light-grey);
  --color-extra-light-grey: var(--color-dark-extra-light-grey);
  --color-dark-grey: var(--color-dark-dark-grey);

  /* Dark mode chart hover overrides */
  --chart-hover-bg: var(--color-dark);
  --chart-hover-text: var(--color-dark-text-hover);
}


html {
    font-size: 16px; /* Define a stable base font size for rem units */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* No explicit height, let it be natural or controlled by body's 100vh */
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body is at least viewport height */
    overflow-x: hidden;
    /* box-sizing: border-box; is inherited */
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: visible; /* Allow footer to be pushed down */
}

body:not(:has(.naslovna_stran-background)) main {
    background: var(--color-background);
}

body:has(.naslovna_stran-background) main {
    padding: 0;
}

.content-wrapper {
    max-width: 1200px; /* Keep max-width for larger screens */
    width: 100%; /* Allow shrinking on smaller screens */
    margin: 0 auto; /* Center the content wrapper */
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
}

h1 {
    margin-top: 0;
    margin-bottom: var(--spacing-sm); /* Using variable for margin */
    font-weight: 500; /* Keep font-weight */
    font-size: var(--font-size-general-h1);
}

h2 {
    font-size: var(--font-size-general-h2);
    margin-top: 0.6em;
    margin-bottom: 0.1em;
}

h3 {
    font-size: var(--font-size-general-h3);
    margin-top: 0.3em;
    margin-bottom: 0.1em;
}

p {
    font-size: var(--font-size-general-p);
    margin-block-start: 0;
    margin-block-end: 0;
}

.text-red {
    color: var(--color-index-zeloSlaba);
}

.text-magenta {
    color: var(--color-index-izrednoSlaba);
}

@media (min-width: 769px) { /* Desktop */
    main {
        padding: 0;
    }

    .content-wrapper {
        padding: var(--spacing-lg) var(--spacing-xl); /* Using variables for padding */
    }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .content-wrapper {
        padding: var(--spacing-sm);
        margin: 0;
    }

    /* Remove any margins that create whitespace */
    h1, h2, h3, h4, h5, h6 {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    h2, h3 {
        margin-top: 0.25em;
        margin-bottom: 0.5em;
    }
}
.js-loading * {
    visibility: hidden;
}
.js-loading .loading {
    visibility: visible;
}
.loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--spacing-lg); /* Keep font-size */
    color: var(--color-text);
}


header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-background);
    padding: 0 var(--spacing-sm);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal overflow */
    display: flex;
    align-items: stretch;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-y: auto; /* Enable vertical scrolling for navigation content */
}

.header-left, .logo-title-wrapper {
    display: flex;
    align-items: center;
    padding: var(--spacing-xs) 0 var(--spacing-xs);
    gap: var(--spacing-lg);
}

.logo {
    height: clamp(var(--header-logo-height-min), 10vw, var(--header-logo-height-max));
    display: flex;
    align-items: center;
}

.logo img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.header-napis-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: var(--font-display); /* Explicitly set font family to prevent fallback */
    font-size: 3.75rem; /* Replaced calc(1em * (60 / 15)) with a stable rem value, equivalent to 60px if 1rem=16px */
}

.header-title, .header-obcina {
    font-family: 'League Spartan', Arial, sans-serif;
    color: var(--color-text);
    line-height: 1;
}

.header-title {
    font-size: clamp(0.3em, calc(0.25em + 0.3vw), 0.6em);
    transform: translateY(0.1em);
}

@media (max-width: 992px) {
    header {
        padding: 0 var(--spacing-sm); /* Reduce horizontal padding */
    }

    /* Ensure logo and title wrapper don't overflow */
    .logo-title-wrapper {
        max-width: 100%;
        flex-wrap: wrap; /* Allow wrapping if needed */
    }

    .header-napis-wrapper {
        max-width: calc(100% - 60px); /* Account for logo width */
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 1360px) {
    .header-title {
        display: none; /* Hide title on wider screens */
    }
}


footer {
    margin-top: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-background);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 12px;
    min-height: var(--footer-height-min);
}

.footer-left, 
.footer-right {
    display: flex;
    align-items: center;
    height: 100%;
    gap: var(--spacing-lg);
}

.footer-left a {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Picture elementi - odstrani inline spacing */
.footer-left picture,
.footer-right picture {
    display: block;
    height: clamp(var(--footer-logo-height-min), 4vw, var(--footer-logo-height-max));
    max-height: var(--footer-logo-height-max);
}

/* Vsi logotipi - img, svg elementi */
.footer-left img,
.footer-left svg,
.footer-right img,
.footer-right svg {
    height: clamp(var(--footer-logo-height-min), 4vw, var(--footer-logo-height-max));
    width: auto;
    max-height: var(--footer-logo-height-max);
    object-fit: contain;
}

/* Map pages - footer positioning */
.map-page footer {
    position: relative;
    margin-top: var(--spacing-lg);
}

/* Mobile responsive */
@media (max-width: 768px) {
    footer {
        padding: var(--spacing-sm);
    }

    .footer-left, 
    .footer-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .footer-left img, 
    .footer-left svg,
    .footer-right img,
    .footer-right svg {
        max-height: var(--spacing-xl);
    }

    .map-page footer {
        margin-top: var(--spacing-sm);
    }
}

/* Very narrow screens */
@media (max-width: calc(768px / 2)) {
    .footer-left img,
    .footer-left svg,
    .footer-right img,
    .footer-right svg {
        height: calc(var(--footer-logo-height-min) * 0.75);
        max-height: calc(var(--footer-logo-height-min) * 0.75);
    }
}

/* Contents from public/css/navigation.css */
nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 100%;
}

nav ul li {
    display: flex;
    height: 100%;
}

nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 400;
    padding: var(--spacing-xs) var(--spacing-md) 0; /* zato, da je tekst res vertikalno na sredini */
    height: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'Inter', 'Arial', sans-serif;
    line-height: 1;
    box-sizing: border-box;
    font-size: clamp(16px, calc(0.7em + 0.5vw), 22px);

}

nav ul li a.active {
    background-color: var(--color-primary);
    color: var(--color-background);
}

nav ul li a:hover {
    background-color: var(--color-border);
}

nav ul li a.active:hover {
    background-color: var(--color-primary-hover);
}

@media (max-width: 768) {
    nav ul {
        flex-direction: column;
        width: 100%;
    }

    nav ul li {
        width: 100%;
    }

    nav ul li a {
        width: 100%;
        padding: var(--spacing-sm) var(--spacing-md);
        justify-content: flex-start;
    }
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
}

.hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text);
    margin: var(--spacing-xs) 0;
    transition: 0.3s;
}

/* Mobile navigation styles */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }

    .nav-menu {
        position: fixed;
        right: -100%; /* Position off-screen to the right */
        top: calc(var(--header-height-min) + 42px); /* Increased gap to avoid obstructing hamburger icon */
        display: flex;
        flex-direction: column;
        background-color: var(--color-background);
        width: 100%;
        max-width: 250px; /* Slightly smaller max width */
        /* Size to content only */
        height: auto;
        min-height: auto;
        max-height: 80vh; /* Prevent it from getting too tall on very small screens */
        box-shadow: var(--spacing-xs) 0 5px rgba(0,0,0,0.3);
        transition: 0.3s;
        z-index: 999;
        overflow-y: auto; /* Only scroll if content exceeds max-height */
        border-radius: 0 0 0 8px; /* Add slight rounding to bottom-left corner */
        /* Ensure flex container sizes to content */
        align-items: stretch;
        justify-content: flex-start;
    }

    .nav-menu.active {
        right: 0; /* Slide in from the right */
    }

    .nav-menu li {
        width: 100%;
        height: auto; /* Override the height: 100% from desktop */
        flex-shrink: 0; /* Prevent items from shrinking */
    }

    .nav-menu li a {
        width: 100%;
        height: auto; /* Override the height: 100% from desktop */
        padding: 40px var(--spacing-lg); /* Increased for larger touch targets */
        border-bottom: 1px solid var(--color-border);
        /* Remove the last border */
    }

    .nav-menu li:last-child a {
        border-bottom: none;
    }
}

/* Hamburger animation */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}
/* End of public/css/navigation.css */

/* Contents from public/css/embedded-svg.css */
/*
 * minimal-mdi.css - Embedded SVG approach (~2KB total, zero HTTP requests)
 * Replace your current minimal-mdi.css with this
 */

/* Base MDI class */
.mdi {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* Embedded SVG icons - each ~0.5KB */
.mdi-map-legend {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21L3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19.03 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3L20.34,3.03L15,5.1L9,3M8,5.45V17.15L5,18.31V6.46L8,5.45M10,5.47L14,6.87V18.53L10,17.13V5.47M19,5.7V17.54L16,18.55V6.86L19,5.7M7.46,6.3L5.57,6.97V9.12L7.46,8.45V6.3M7.46,9.05L5.57,9.72V11.87L7.46,11.2V9.05M7.46,11.8L5.57,12.47V14.62L7.46,13.95V11.8M7.46,14.55L5.57,15.22V17.37L7.46,16.7V14.55Z"/></svg>');
}

.mdi-speedometer-slow {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 16C13.66 16 15 14.66 15 13C15 11.88 14.39 10.9 13.5 10.39L3.79 4.77L9.32 14.35C9.82 15.33 10.83 16 12 16M12 3C10.19 3 8.5 3.5 7.03 4.32L9.13 5.53C10 5.19 11 5 12 5C16.42 5 20 8.58 20 13C20 15.21 19.11 17.21 17.66 18.65H17.65C17.26 19.04 17.26 19.67 17.65 20.06C18.04 20.45 18.68 20.45 19.07 20.07C20.88 18.26 22 15.76 22 13C22 7.5 17.5 3 12 3M2 13C2 15.76 3.12 18.26 4.93 20.07C5.32 20.45 5.95 20.45 6.34 20.06C6.73 19.67 6.73 19.04 6.34 18.65C4.89 17.2 4 15.21 4 13C4 12 4.19 11 4.54 10.1L3.33 8C2.5 9.5 2 11.18 2 13Z"/></svg>');
}

.mdi-speedometer-medium {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 1.38L9.14 12.06C8.8 13.1 9.04 14.29 9.86 15.12C11.04 16.29 12.94 16.29 14.11 15.12C14.9 14.33 15.16 13.2 14.89 12.21M14.6 3.35L15.22 5.68C18.04 6.92 20 9.73 20 13C20 15.21 19.11 17.21 17.66 18.65H17.65C17.26 19.04 17.26 19.67 17.65 20.06C18.04 20.45 18.68 20.45 19.07 20.07C20.88 18.26 22 15.76 22 13C22 8.38 18.86 4.5 14.6 3.35M9.4 3.36C5.15 4.5 2 8.4 2 13C2 15.76 3.12 18.26 4.93 20.07C5.32 20.45 5.95 20.45 6.34 20.06C6.73 19.67 6.73 19.04 6.34 18.65C4.89 17.2 4 15.21 4 13C4 9.65 5.94 6.86 8.79 5.65"/></svg>');
}

.mdi-speedometer {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12,16A3,3 0 0,1 9,13C9,11.88 9.61,10.9 10.5,10.39L20.21,4.77L14.68,14.35C14.18,15.33 13.17,16 12,16M12,3C13.81,3 15.5,3.5 16.97,4.32L14.87,5.53C14,5.19 13,5 12,5A8,8 0 0,0 4,13C4,15.21 4.89,17.21 6.34,18.65H6.35C6.74,19.04 6.74,19.67 6.35,20.06C5.96,20.45 5.32,20.45 4.93,20.07V20.07C3.12,18.26 2,15.76 2,13A10,10 0 0,1 12,3M22,13C22,15.76 20.88,18.26 19.07,20.07V20.07C18.68,20.45 18.05,20.45 17.66,20.06C17.27,19.67 17.27,19.04 17.66,18.65V18.65C19.11,17.2 20,15.21 20,13C20,12 19.81,11 19.46,10.1L20.67,8C21.5,9.5 22,11.18 22,13Z"/></svg>');
}
/* End of public/css/embedded-svg.css */

/* Contents from public/css/button-groups.css */
/*
 * button-groups.css - Common button group patterns
 * Used for measurement type selection and index type selection
 */

/* Base Button Group */
.button-group {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden; /* Ensures inner buttons respect border-radius */
}

.button-group .button-group-item {
    background-color: var(--color-background);
    color: var(--color-text);
    border: none; /* Remove individual button borders */
    padding: var(--button-padding); /* Use consistent padding variable */
    cursor: pointer;
    font-size: var(--font-size-button);
    font-weight: 500; /* Slightly bolder default font */
    transition: var(--transition-fast); /* Use consistent transition */
    flex-grow: 1; /* Distribute space evenly */
    text-align: center;
    white-space: nowrap; /* Prevent text wrapping */
}

.button-group .button-group-item:not(:last-child) {
    border-right: 1px solid var(--color-border); /* Add separator between buttons */
}

.button-group .button-group-item:hover {
    background-color: var(--color-light-gray-hover); /* More pronounced hover */
    color: var(--color-text-hover);
}

.button-group .button-group-item.active {
    background-color: var(--color-primary);
    color: var(--color-background); /* Text color for active button */
    font-weight: bold;
    position: relative; /* For z-index if needed */
    z-index: 1; /* Ensure active button is on top */
}

/* Dark mode adjustments for button groups */
body.dark-mode .button-group {
    border-color: var(--color-dark-border);
}

body.dark-mode .button-group .button-group-item {
    background-color: var(--color-dark-background);
    color: var(--color-dark-text);
}

body.dark-mode .button-group .button-group-item:not(:last-child) {
    border-right-color: var(--color-dark-border);
}

body.dark-mode .button-group .button-group-item:hover {
    background-color: var(--color-dark-hover);
    color: var(--color-dark-text-hover);
}

body.dark-mode .button-group .button-group-item.active {
    background-color: var(--color-primary); /* Primary color remains same */
    color: var(--color-background); /* Text color for active button */
}

/* Specific variations if needed */
.measurement-button-group {
    margin-top: var(--spacing-sm); /* Add some space below the heading */
}
/* End of public/css/button-groups.css */


/* Main dark mode styling */
body.dark-mode {
  background-color: #222; /* Keep specific dark mode background */
  color: #f0f0f0; /* Keep specific dark mode text color */
}

body.dark-mode main {
  background-color: #333333; /* Keep specific dark mode main background */
}

body.dark-mode .content-wrapper {
  background-color: #1e1e1e; /* Keep specific dark mode content-wrapper background */
  color: #e0e0e0; /* Keep specific dark mode content-wrapper text color */
}

/* Typography in dark mode */
body.dark-mode a {
  color: #6bb2ff; /* Keep specific dark mode link color */
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #f5f5f5; /* Keep specific dark mode heading color */
}

body.dark-mode p {
  color: #e0e0e0; /* Keep specific dark mode paragraph color */
}

/* UI elements in dark mode */
body.dark-mode button,
body.dark-mode input[type="button"],
body.dark-mode input[type="submit"] {
  background-color: #555555; /* Keep specific dark mode button background */
  color: #ffffff; /* Keep specific dark mode button text color */
  border: 1px solid #777777; /* Keep specific dark mode button border */
}

body.dark-mode button:hover,
body.dark-mode input[type="button"]:hover,
body.dark-mode input[type="submit"]:hover {
  background-color: #666666; /* Keep specific dark mode button hover background */
}

/* Navigation in dark mode */
body.dark-mode header {
  background-color: #1c1c1c; /* Keep specific dark mode header background */
  border-bottom: 1px solid #444444; /* Keep specific dark mode header border */
}

body.dark-mode footer {
  background-color: #1c1c1c; /* Keep specific dark mode footer background */
  border-top: 1px solid #444444; /* Keep specific dark mode footer border */
  color: #cccccc; /* Keep specific dark mode footer text color */
}

body.dark-mode nav a {
  color: #9cdcfe; /* Keep specific dark mode nav link color */
}

body.dark-mode nav a:hover {
  color: #ffffff; /* Keep specific dark mode nav link hover color */
}

/* Map elements in dark mode */
body.dark-mode .layer-toggle-control {
  background: #222; /* Keep specific dark mode layer control background */
  color: #fff; /* Keep specific dark mode layer control text color */
}

body.dark-mode .layer-toggle-button:hover {
  background-color: #333; /* Keep specific dark mode layer toggle button hover background */
}

body.dark-mode .layer-toggle-button.active {
  background-color: #2c3a47; /* Keep specific dark mode layer toggle button active background */
}

body.dark-mode .maplibregl-ctrl-scale {
  background-color: rgba(51, 51, 51, 0.9); /* Keep specific dark mode scale control background */
  border-color: #555; /* Keep specific dark mode scale control border */
  color: #f0f0f0; /* Keep specific dark mode scale control text color */
}

/* Chart elements in dark mode */
/* [Add chart-specific dark mode styles here] */

/* Home page specific dark mode */
body.dark-mode .naslovna-slika-container {
  filter: grayscale(100%); /* Keep specific dark mode home page image filter */
}

body.dark-mode #zemljevid-timestamp {
  color: #e0e0e0; /* Keep specific dark mode timestamp color */
}

/* ===== LOADING INDICATORS ===== */

/* Base loading container */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-text-primary);
}

/* Centered loading (replaces content) */
.loading.centered {
    padding: var(--spacing-md);
}

/* Overlay loading (positioned over content) */
.loading.overlay {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.9);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    z-index: var(--z-overlay);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Modal-style loading (for maps - centered and prominent) */
.loading.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-background);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    box-shadow: 0 var(--spacing-xs) 8px var(--color-shadow);
    z-index: var(--z-modal);
}

/* Spinner animation */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 1s ease-in-out infinite;
    margin-right: var(--spacing-xs);
    flex-shrink: 0;
}

/* Larger spinner for modal loading */
.loading.modal .spinner {
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    border-width: 3px;
    margin-right: var(--spacing-sm);
}

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

/* Dark mode support */
body.dark-mode .loading {
    color: var(--color-dark-text);
}

body.dark-mode .loading.overlay {
    background: rgba(51, 51, 51, 0.9);
    border-color: var(--color-dark-border);
}

body.dark-mode .loading.modal {
    background-color: var(--color-dark-background);
    border-color: var(--color-dark-border);
}

body.dark-mode .spinner {
    border-color: var(--color-dark-border);
    border-top-color: var(--color-primary);
}

/* ===== LEGACY COMPATIBILITY ===== */
/* Keep old class names for backward compatibility */

.chart-loading,
.map-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-text-primary);
}

.chart-loading.centered {
    padding: var(--spacing-md);
}

.chart-loading.overlay {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.9);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    z-index: var(--z-overlay);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Map loading - modal style by default */
.map-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-background);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    box-shadow: 0 var(--spacing-xs) 8px var(--color-shadow);
    z-index: var(--z-modal);
}
/* ===== UTILITY CLASSES ===== */

.hidden {
    display: none;
}
/* ===================================================
   Content Description - Global Styles
   =================================================== */

/* Osnovni stili za vse content-description elemente */
.content-description {
    font-size: var(--font-size-general-p);
    margin-bottom: var(--spacing-md);
}

/* Animacije za dinamične opise (prenešeno iz zemljevid.css) */
.content-description {
    transition: opacity var(--animation-duration-medium) ease-in-out;
}

.content-description.updating {
    opacity: 0.6;
}