/* Simple Icons System - CSS pouze */
.simple-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    position: relative;
    margin-right: 0.25em;
    
    /* Protection */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
}

/* Cloud Sun */
.simple-icon.cloud-sun::before {
    content: '☀';
    font-size: 0.8em;
    position: absolute;
    color: currentColor;
}

/* Chevron Left */
.simple-icon.chevron-left::before {
    content: '◀';
    font-size: 0.6em;
    position: absolute;
    color: currentColor;
    left: 2px;
    top: 1px;
}

/* Chevron Right */
.simple-icon.chevron-right::before {
    content: '▶';
    font-size: 0.6em;
    position: absolute;
    color: currentColor;
    left: 2px;
    top: 1px;
}

/* Chevron Up */
.simple-icon.chevron-up::before {
    content: '▲';
    font-size: 0.6em;
    position: absolute;
    color: currentColor;
    left: 2px;
    top: 1px;
}

/* Chevron Down */
.simple-icon.chevron-down::before {
    content: '▼';
    font-size: 0.6em;
    position: absolute;
    color: currentColor;
    left: 2px;
    top: 1px;
}

/* Moon */
.simple-icon.moon::before {
    content: '🌙';
    font-size: 0.8em;
    position: absolute;
    color: currentColor;
}

/* Sun */
.simple-icon.sun::before {
    content: '☀';
    font-size: 0.8em;
    position: absolute;
    color: currentColor;
}

/* Warning */
.simple-icon.warning::before {
    content: '⚠';
    font-size: 0.8em;
    position: absolute;
    color: currentColor;
}

/* Cloud */
.simple-icon.cloud::before {
    content: '☁';
    font-size: 0.8em;
    position: absolute;
    color: currentColor;
}

/* Clock */
.simple-icon.clock::before {
    content: '🕒';
    font-size: 0.8em;
    position: absolute;
    color: currentColor;
}

/* Calendar */
.simple-icon.calendar::before {
    content: '📅';
    font-size: 0.8em;
    position: absolute;
    color: currentColor;
}

/* Graph */
.simple-icon.graph::before {
    content: '📈';
    font-size: 0.8em;
    position: absolute;
    color: currentColor;
}

/* Droplet */
.simple-icon.droplet::before {
    content: '💧';
    font-size: 0.8em;
    position: absolute;
    color: currentColor;
}

/* Wind */
.simple-icon.wind::before {
    content: '🌪';
    font-size: 0.8em;
    position: absolute;
    color: currentColor;
}

/* Eye */
.simple-icon.eye::before {
    content: '👁';
    font-size: 0.8em;
    position: absolute;
    color: currentColor;
}

/* Speedometer */
.simple-icon.speedometer::before {
    content: '⏲';
    font-size: 0.8em;
    position: absolute;
    color: currentColor;
}

/* Size variations */
.simple-icon.icon-lg {
    width: 1.25em;
    height: 1.25em;
}

.simple-icon.icon-xl {
    width: 1.5em;
    height: 1.5em;
}

/* Current weather icon larger */
.current-weather-icon .simple-icon {
    width: 3rem;
    height: 3rem;
}

.current-weather-icon .simple-icon::before {
    font-size: 2.5rem;
}

/* Theme toggle icons */
.theme-toggle .simple-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.theme-toggle .simple-icon::before {
    font-size: 1rem;
}

/* Protection against saving */
.simple-icon::before {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    user-select: none !important;
    pointer-events: none !important;
}

/* Theme toggle needs to be clickable */
.theme-toggle .simple-icon {
    pointer-events: auto;
    cursor: pointer;
}

/* Remove margin from theme toggle icons */
.theme-toggle .simple-icon {
    margin-right: 0;
}

/* Fix spacing for navigation tab icons */
.nav-link .simple-icon {
    margin-right: 0.5rem;
}

/* Větší mezera pro ikonu Grafy v navigaci */
.nav-link .simple-icon.graph {
    margin-right: 1rem;
}

/* Větší mezera pro ikonu Grafy v nadpisu */
.card-header h5 .simple-icon.graph {
    margin-right: 1rem !important;
    display: inline-block;
    width: auto;
}

/* Tmavá barva ikon ve světlém režimu */
:root .simple-icon::before {
    color: #2c3e50;
}

/* Zachovat původní barvy v tmavém režimu */
[data-theme="dark"] .simple-icon::before {
    color: currentColor;
}

/* Specifické barvy pro ikony v dlaždicích */
.hourly-rain .simple-icon::before,
.daily-precip .simple-icon::before {
    color: #4099ff !important; /* modrá pro srážky */
}

.hourly-wind .simple-icon.wind::before {
    color: #6c757d !important; /* šedá pro vítr ve světlém režimu */
}

[data-theme="dark"] .hourly-wind .simple-icon.wind::before {
    color: #e9ecef !important; /* světlá pro vítr v tmavém režimu */
}

/* Ensure proper spacing for inline icons with text */
.simple-icon + span,
.simple-icon + text {
    margin-left: 0.5rem;
}

/* Fix spacing for all text after icons */
span .simple-icon,
button .simple-icon,
a .simple-icon {
    margin-right: 0.5rem;
}

/* Hide during print */
@media print {
    .simple-icon {
        display: none !important;
    }
}

/* Disable context menu */
.simple-icon {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Weather icons - PNG images from icons/ folder */
.weather-icon {
    display: inline-block;
    vertical-align: -0.125em;
    
    /* Protection */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

/* Weather icon sizes - větší ikony v gridech */
.current-weather-icon .weather-icon {
    width: 6rem !important;
    height: 6rem !important;
}

.hourly-icon .weather-icon,
.hourly-forecast .weather-icon {
    width: 3rem;
    height: 3rem;
}

.daily-icon .weather-icon,
.daily-forecast .weather-icon {
    width: 3.5rem;
    height: 3.5rem;
}

/* Weather icons in grid containers */
.card .weather-icon {
    width: 3rem;
    height: 3rem;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .simple-icon {
        font-size: 0.9em;
    }
    
    .weather-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}