/**
 * Mapa Historie - Frontend Styles
 * Verze: 1.0
 */

html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
body, div, p { font-family: 'Segoe UI', sans-serif; font-size: 100%; font-weight: 350; line-height: 140%; }
/* Emoji font fallback pro mobily */
.emoji, [class*="icon"], .item span { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Android Emoji', sans-serif; }
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

#mapa { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background: #d4d4d4; }
.leaflet-control-zoom { margin-top: 75px !important; margin-left: 19px !important; }
.leaflet-popup-content { min-width: 180px; cursor: pointer; }
.leaflet-popup-content img { margin: 5px 0; border-radius: 3px; max-height: 80px; cursor: default; }
@media (max-width: 700px) {
    .leaflet-popup-content { min-width: 120px; font-size: 12px; }
    .leaflet-popup-content img { max-height: 50px; max-width: 100px; }
}

#main { position: fixed; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 100; }
#main > * { pointer-events: auto; }

#head { position: absolute; left: 0; top: 0; min-width: 280px; background: #eee; z-index: 888; padding: 12px 20px; }
#logo { font-size: 145%; margin-right: 15px; }

.history-box { background: #f5f5f5; padding: 4px 8px; border-radius: 4px; margin-top: 12px; max-height: 55px; overflow: hidden; border: 1px solid #e0e0e0; transition: max-height 0.3s; }
.history-box.expanded { max-height: 200px; overflow-y: auto; }
.history-items a { display: block; color: #2a5298; text-decoration: underline; font-size: 10px; line-height: 1.4; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-items a:hover { color: #1a3a6e; }

#nav { position: relative; display: inline-block; vertical-align: middle; }
.menuCtrl { width: 32px; height: 32px; cursor: pointer; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23555"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>') center no-repeat; background-size: 24px; border-radius: 4px; }
.menuCtrl:hover { background-color: rgba(0,0,0,0.05); }
.menuCtrl.open { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23555"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>'); }
#nav ul { list-style: none; margin: 0; padding: 8px 0; display: none; position: absolute; left: 0; top: 100%; background: #eee; border: 1px solid #ddd; border-radius: 4px; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 999; }
#nav ul.open { display: block; }
#nav ul li { padding: 0; }
#nav ul li a { color: #333; text-decoration: none; font-size: 13px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; transition: background 0.2s; }
#nav ul li a:hover { background: rgba(0,0,0,0.05); color: #000; }
#nav ul li.separator { border-top: 1px solid #ccc; margin-top: 5px; padding-top: 5px; }

#body { position: absolute; z-index: 500; top: 0; right: 0; width: 380px; height: 100%; background: rgba(255,255,255,0.97); border-left: 1px solid #ccc; overflow-y: auto; overflow-x: hidden; transition: width 0.3s; pointer-events: auto; }
.isContent #body { width: 66%; max-width: calc(100% - 320px); }
.isMinimized #body { width: 600px; }

.setstyle { padding: 18px; display: flex; flex-wrap: nowrap; }
#content { display: none; flex: 1; min-width: 0; padding-right: 15px; border-right: 1px solid #ddd; margin-right: 15px; }
.isContent #content { display: block; }

.set { width: 40%; max-width: 300px; min-width: 200px; flex-shrink: 0; font-size: 12px; transition: all 0.3s; position: relative; z-index: 700; }
body:not(.isContent) #content { display: none; }
body:not(.isContent) .setstyle { display: block; padding-top: 18px; }
body:not(.isContent) .set { width: 100%; max-width: none; min-width: auto; }

.setMinimized .set { width: 100px; min-width: 100px; max-width: 100px; overflow: hidden; }
.setMinimized .set .box-1 { display: none; }
.setMinimized .set .set-header h4 { display: none; }
.setMinimized .set .set-header { justify-content: center; border-bottom: none; }

.panelCtrl { cursor: pointer; background: none; border: none; opacity: 0.5; padding: 2px; }
.panelCtrl:hover { opacity: 1; }
.panelCtrl svg { width: 18px; height: 18px; display: block; }
.setCtrl { position: absolute; top: 0; right: 0; display: none; }
.isContent .setCtrl { display: block; }

.content-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.content-header h1 { flex: 1; font-weight: normal; margin: 0; font-size: 1.2em; }
.content-header .contentCtrl { flex-shrink: 0; }

.item .date { display: inline-block; padding: 2px 10px; margin: 0 0 10px 0; color: white; background-color: #5a7fa8; font-size: 12px; border-radius: 3px; }
.item > p { margin-bottom: 10px; line-height: 1.55; color: #444; font-size: 13px; }
.item .imgs { margin: 12px 0; }
.item .imgs .main-img { border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); cursor: default; display: block; max-height: 50vh; transition: max-height 0.8s ease; }
.item .imgs .main-img.has-original { cursor: zoom-in; }
.item .imgs .main-img.has-multiple { cursor: ew-resize; }
.item .imgs .main-img.has-original.has-multiple { cursor: ew-resize; }
.item .imgs .main-img:hover { max-height: 80vh; }
.item .imgs .main-img.zoomed { max-height: none; }
.item .imgs .thumbnails { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.item .imgs .thumbnails img { width: 60px; height: 45px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; border: 2px solid transparent; }
.item .imgs .thumbnails img:hover { opacity: 1; }
.item .imgs .thumbnails img.active { opacity: 1; border-color: #007bff; }
.item .imgs .zoom-original { display: block; margin-top: 8px; font-size: 11px; color: #007bff; cursor: pointer; }
.item .imgs .zoom-original:hover { text-decoration: underline; }
.item .detail-tags { margin: 12px 0; padding: 12px 0; border-top: 1px dotted #bbb; }
.item .detail-tags label { font-size: 11px; cursor: pointer; display: inline-block; background: #f0f0f0; border-radius: 3px; padding: 4px 8px; margin: 0 3px 4px 0; }
.item .detail-tags label:hover { background: #e0e0e0; }
.item .detail-tags label.sub { background: transparent; cursor: default; font-weight: 500; padding: 4px 0; margin-right: 8px; }
.item .detail-tags label.sub:hover { background: transparent; }
.item .detail-tags label.group-tag { background: transparent; color: #1565c0; border: none; margin-right: 8px; font-weight: 500; cursor: pointer; padding: 4px 0; }
.item .detail-tags label.group-tag:hover { background: transparent; }
.item .detail-actions { margin: 12px 0; padding-top: 12px; border-top: 1px dotted #bbb; display: flex; flex-wrap: wrap; gap: 5px; }
.item .detail-actions a { display: inline-flex; align-items: center; gap: 5px; color: #2a5298; text-decoration: none; font-size: 11px; padding: 5px 10px; background: #f0f0f0; border-radius: 3px; transition: all 0.2s; }
.item .detail-actions a:hover { background: #e0e0e0; }
.item .detail-actions a.toggle-active { background: #2a5298 !important; color: white !important; border-color: #2a5298 !important; }

.author-info { margin: 15px 0; padding: 12px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #2a5298; }
.author-info .author-label { color: #666; font-size: 12px; }
.texy-table { border-collapse: collapse; margin: 10px 0; font-size: 12px; width: 100%; }
.texy-table th, .texy-table td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; }
.texy-table th { background: #f5f5f5; font-weight: 600; }
.texy-table tr:nth-child(even) td { background: #fafafa; }
q { font-style: italic; color: #555; }
.author-info strong { color: #333; }
.author-info .author-bio { margin-top: 6px; font-size: 12px; color: #555; line-height: 1.5; }

.location-filter label { display: inline-block; margin-bottom: 5px; }
.location-center-marker { font-size: 24px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.loc-checkbox { display: inline-flex !important; align-items: center; gap: 4px; background: none !important; padding: 0 !important; font-weight: 500; font-size: 11px; margin-left: 8px; }
.loc-checkbox input { margin: 0; }
.radius-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.radius-row .radius-label { font-size: 11px; color: #666; white-space: nowrap; min-width: 75px; }
.radius-row .radius-label strong { color: #007bff; }
.radius-row input[type="range"] { flex: 1; height: 20px; -webkit-appearance: none; appearance: none; background: transparent; margin: 0; }

/* Sjednocený styl pro všechny slidery */
.slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.slider-header .sub { margin: 0; }
.filter-reset { font-size: 10px; color: #007bff; cursor: pointer; text-decoration: underline; margin-left: auto; }
.filter-reset:hover { color: #0056b3; }

/* Slider track a thumb - jednotný styl */
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #ddd; border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: #007bff; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); margin-top: -5px; }
input[type="range"]::-moz-range-track { height: 4px; background: #ddd; border-radius: 2px; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: #007bff; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

/* Tags header */
.tags-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tags-header .sub { margin: 0; }
.tags-header .edit-tags-btn { padding: 2px 6px; background: #007bff; color: white; border: none; border-radius: 3px; font-size: 10px; cursor: pointer; }
.tags-header .edit-tags-btn:hover { background: #0056b3; }
.tags-header .selected-tags-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }

.set .box-1 { margin: 6px 0; padding: 8px 0; border-bottom: 1px dotted #ccc; }
.set-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #ddd; padding-right: 25px; }
.set-header h4 { margin: 0; font-size: 12px; color: #333; }
.set-header .count { font-weight: bold; color: #2a5298; font-size: 13px; }

/* Štítky v settings - původní design */
label { display: inline-block; background: #f0f0f0; border-radius: 3px; padding: 4px 8px; margin: 0 3px 4px 0; cursor: pointer; font-size: 11px; }
label:hover { background: #e0e0e0; }
label.sub { background: transparent !important; font-weight: 500; margin-right: 8px; padding: 4px 0; cursor: default; }
label.sub:hover { background: transparent !important; }
label input { margin-right: 3px; vertical-align: middle; }
label.active { background: #cce5ff; }
label.inactive { opacity: 0.5; }
/* Form labels in modals - bez pointer a background */
.modal .form-group > label { cursor: default; background: none; padding: 0; margin: 0 0 5px 0; display: block; font-weight: 600; }
.modal .form-group > label:hover { background: none; }

.selected-tags-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.selected-tags-row .tag-chip { display: inline-flex; align-items: center; gap: 3px; background: #fff3cd; border: 1px solid #ffc107; padding: 4px 10px; border-radius: 3px; font-size: 11px; }
.selected-tags-row .tag-chip input { margin: 0; }
.edit-tags-btn { padding: 4px 10px; background: #2a5298; color: white; border: none; border-radius: 3px; font-size: 11px; cursor: pointer; }
.edit-tags-btn:hover { background: #1e3c72; }
.tag-link { color: #2a5298; text-decoration: underline; cursor: pointer; }
.tag-link:hover { color: #1e3c72; }

.year-slider { margin-top: 5px; }
.year-slider .slider-container { position: relative; height: 24px; margin: 5px 0; }
.year-slider .slider-track { position: absolute; top: 10px; left: 0; right: 0; height: 4px; background: #ddd; border-radius: 2px; pointer-events: none; }
.year-slider .slider-range { position: absolute; top: 10px; height: 4px; background: #2a5298; border-radius: 2px; pointer-events: none; }
.year-slider input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 24px; background: transparent; -webkit-appearance: none; appearance: none; margin: 0; pointer-events: none; }
.year-slider input[type="range"]::-webkit-slider-runnable-track { height: 24px; background: transparent; }
.year-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: #2a5298; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); margin-top: 5px; pointer-events: auto; position: relative; z-index: 2; }
.year-slider input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: #2a5298; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); pointer-events: auto; }
.year-slider input[type="range"]::-moz-range-track { background: transparent; height: 24px; }
.year-slider .year-labels { display: flex; justify-content: space-between; font-size: 10px; color: #666; }

.search-wrapper { position: relative; flex: 1; min-width: 80px; }
.search-wrapper input[type="text"] { width: 100%; padding: 6px 10px; border: 1px solid #ccc; border-radius: 3px; font-size: 12px; }
.search-wrapper input[type="text"]:focus { border-color: #007bff; outline: none; }
.autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.autocomplete-list.active { display: block; }
.autocomplete-list div { padding: 6px 10px; cursor: pointer; font-size: 11px; }
.autocomplete-list div:hover, .autocomplete-list div.selected { background: #f0f0f0; }
.autocomplete-list div small { color: #888; margin-left: 5px; }

.search-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { padding: 4px 12px; background: #2a5298; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px; display: inline-block; text-decoration: none; text-align: center; box-sizing: border-box; }
.btn:hover { background: #1e3c72; }
.btn-primary { background: #2a5298; color: white; }
.btn-primary:hover { background: #1e3c72; }
.btn-secondary { background: #6c757d; color: white; }
.btn-secondary:hover { background: #5a6268; }
.btn-success { background: #28a745; color: white; }
.btn-success:hover { background: #218838; }
.btn-warning { background: #ffc107; color: #212529; }
.btn-warning:hover { background: #e0a800; }

/* Modal button consistency */
.modal-actions .btn {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    min-width: 150px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.restart { color: white; font-size: 11px; text-decoration: none; padding: 4px 12px; background: #2a5298; border-radius: 3px; font-weight: 500; display: inline-block; border: none; cursor: pointer; }
.restart:hover { background: #1e3c72; }
.restart.active { background: #dc3545; }

/* Warning box se samostatným tlačítkem zrušit */
.filter-warning { background: #fff3cd; color: #856404; padding: 6px 10px; border-radius: 4px; font-size: 11px; margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filter-warning .reset-btn { background: #856404; color: white; border: none; padding: 3px 8px; border-radius: 3px; cursor: pointer; font-size: 10px; white-space: nowrap; }
.filter-warning .reset-btn:hover { background: #6d5303; }

.active-filters-info { background: #e7f3ff; border: 1px solid #b3d7ff; padding: 5px 10px; border-radius: 4px; font-size: 11px; margin: 8px 0; }
.active-filters-info .filter-item { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.active-filters-info .filter-item:not(:last-child) { border-bottom: 1px dotted #b3d7ff; }
.active-filters-info .filter-reset-small { cursor: pointer; color: #0066cc; text-decoration: underline; font-size: 10px; }

.group-filter-info { background: #fff3cd; color: #856404; padding: 6px 10px; border-radius: 4px; font-size: 11px; margin: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.group-filter-info .reset-btn { background: #856404; color: white; border: none; padding: 3px 8px; border-radius: 3px; cursor: pointer; font-size: 10px; white-space: nowrap; }
.group-filter-info .reset-btn:hover { background: #6d5303; }

.action-buttons { margin-top: 5px; }
.action-buttons .add-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; margin-right: 10px;
    background: #28a745; color: white;
    text-decoration: none; border-radius: 5px; font-size: 12px;
}
.action-buttons .add-btn:hover { background: #218838; }
.action-buttons .add-btn svg { width: 18px; height: 18px; }
.action-buttons .edit-btn {
    display: inline-flex; align-items: center; gap: 5px;
    color: #666; text-decoration: none; font-size: 11px;
}
.action-buttons .edit-btn:hover { color: #007bff; }

.promo-link { margin-top: 15px; padding-top: 10px; border-top: 1px dotted #ccc; }
.promo-link a { display: block; }
.promo-link img { width: 100%; height: auto; border-radius: 4px; }

#itemsList { display: none; }
.showList #itemsList { display: block; }
.showList #itemDetail { display: none; }
#itemsList .list-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee; cursor: pointer; }
#itemsList .list-item:hover { background: #f8f8f8; margin: 0 -18px; padding: 10px 18px; }
#itemsList .list-item img { width: 60px; height: 45px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
#itemsList .list-item .no-img { width: 60px; height: 45px; background: #eee; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #ccc; }
#itemsList .list-item .info { flex: 1; min-width: 0; }
#itemsList .list-item h3 { margin: 0 0 3px 0; font-size: 0.95em; font-weight: 500; }
#itemsList .list-item .meta { font-size: 10px; color: #888; }
#itemsList .list-item .preview { font-size: 11px; color: #555; margin-top: 3px; }

.strip-wrapper { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 50; pointer-events: auto; }
.strip { padding: 6px 40px 6px 15px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
.strip .item { display: inline-block; cursor: pointer; vertical-align: bottom; transition: transform 0.2s; }
.strip .item:hover { transform: translateY(-8px); }
.strip .item img { margin: 0 3px 6px 3px; height: 65px; width: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.35); border-radius: 3px; }
.strip .item:hover img { height: 85px; }
.strip .item.no-image { display: inline-flex; align-items: center; justify-content: center; min-width: 65px; height: 65px; margin: 0 3px 6px 3px; background: rgba(240,240,240,0.95); border-radius: 3px; font-size: 9px; color: #555; text-align: center; padding: 6px; white-space: normal; box-shadow: 0 2px 8px rgba(0,0,0,0.35); border: 2px solid white; box-sizing: border-box; }
.strip .item.no-image span { line-height: 1.2; overflow: hidden; max-height: 100%; }
.strip-nav { position: fixed; bottom: 28px; width: 28px; height: 28px; background: rgba(255,255,255,0.9); border: 1px solid #ccc; border-radius: 50%; cursor: pointer; z-index: 51; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.strip-nav svg { width: 14px; height: 14px; opacity: 0.6; }
.strip-nav-left { right: 44px; }
.strip-nav-right { right: 10px; }

.leaflet-marker-icon.active-marker { filter: hue-rotate(140deg) saturate(1.5); z-index: 1000 !important; }

/* Article content - larger text */
.article-content { font-size: 15px; line-height: 1.8; color: #333; }
.article-content p { margin: 15px 0; }
.article-content strong { color: #000; }
.article-content a { color: #007bff; }

/* Guest form drop zone */
.drop-zone { border: 2px dashed #ccc; border-radius: 8px; padding: 20px; text-align: center; background: #fafafa; cursor: pointer; transition: all 0.2s; }
.drop-zone:hover, .drop-zone.dragover { border-color: #007bff; background: #f0f7ff; }
.drop-zone-text { color: #666; font-size: 13px; }
.drop-zone-text strong { color: #007bff; }
.guest-img-preview { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; border: 2px solid #28a745; }
.guest-img-item { position: relative; display: inline-block; }
.guest-img-item .remove { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; background: #dc3545; color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 10px; line-height: 18px; }

/* Toast notification */
.toast { position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.9); color: white; padding: 15px 25px; border-radius: 8px; font-size: 14px; z-index: 99999; animation: toastIn 0.3s ease; text-align: center; max-width: 300px; }
.toast.fade-out { animation: toastOut 0.3s ease forwards; }
.toast-warning { background: rgba(255, 193, 7, 0.95); color: #333; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; } }

/* Image modal */
.image-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 3000; display: none; align-items: center; justify-content: center; }
.image-modal.active { display: flex; }
.image-modal img { max-width: 85vw; max-height: 90vh; object-fit: contain; }
.image-modal .close-btn { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer; z-index: 10; }
.image-modal .modal-nav { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 50px; cursor: pointer; padding: 20px; user-select: none; opacity: 0.7; transition: opacity 0.2s; }
.image-modal .modal-nav:hover { opacity: 1; }
.image-modal .modal-prev { left: 20px; }
.image-modal .modal-next { right: 20px; }
.image-modal .modal-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; font-size: 14px; background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 20px; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal { background: white; border-radius: 8px; padding: 20px; max-width: 90%; width: 700px; max-height: 90vh; overflow-y: auto; position: relative; }
.modal h3 { margin: 0 0 15px 0; font-size: 16px; }
.modal .tags-grid { max-height: 60vh; overflow-y: auto; padding: 5px; }
.modal .tags-grid label { margin: 2px; }
.modal .modal-actions { margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.modal .btn-secondary { background: #6c757d; }
.modal .hint { font-size: 11px; color: #888; margin-top: 10px; }
.modal p { font-size: 13px; line-height: 1.6; margin: 10px 0; }
.modal ul { font-size: 13px; margin: 10px 0; padding-left: 20px; }
.modal li { margin: 5px 0; }
.modal .modal-close { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer; color: #666; }
.modal .modal-close:hover { color: #000; }
.modal .form-group { margin-bottom: 12px; }
.modal .form-group label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 4px; color: #333; }
.modal .form-group input, .modal .form-group textarea, .modal .form-group select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; box-sizing: border-box; }
.modal .form-group input:focus, .modal .form-group textarea:focus { border-color: #007bff; outline: none; }
.modal .form-row { display: flex; gap: 10px; }
.modal .checkbox-group { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #f8f9fa; border-radius: 4px; }
.modal .checkbox-group label { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; padding: 4px 0; background: none; margin: 0; border-radius: 0; }
.modal .checkbox-group label:hover { background: none; }
.modal .checkbox-group input[type="checkbox"] { width: auto; margin: 0; }

/* Add record modal */
.add-record-modal { max-width: 700px !important; width: 95% !important; }
.add-record-modal h3 { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; margin: -20px -20px 20px -20px; padding: 15px 20px; border-radius: 8px 8px 0 0; }
.step1-form { background: #f8f9fa; padding: 20px; border-radius: 6px; }
.form-row-inline { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.form-row-inline label { min-width: 140px; font-weight: 500; font-size: 13px; }
.form-row-inline input { flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
.form-row-inline input:focus { border-color: #2a5298; outline: none; }
.step1-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd; flex-wrap: wrap; }
.step1-actions .btn { padding: 10px 20px; font-size: 13px; min-width: 120px; text-align: center; }

/* Add record popup */
.add-record-popup .leaflet-popup-content-wrapper { border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.add-record-popup .leaflet-popup-content { margin: 8px 12px; }

/* Responzivní modal form - pod sebou na malých obrazovkách */
@media (max-width: 600px) {
    .form-row-inline { flex-direction: column; align-items: stretch; gap: 5px; }
    .form-row-inline label { min-width: auto; }
    .step1-actions { flex-direction: column; }
    .step1-actions span { display: none; }
    .step1-actions .btn { width: 100%; }
    .modal .form-row, #addStep2 .form-row { flex-direction: column; gap: 0; }
    .modal { padding: 15px; }
    .add-record-modal h3 { margin: -15px -15px 15px -15px; padding: 12px 15px; font-size: 14px; }
    /* Grid layouts to single column on mobile */
    #addStep1 .step1-form > div[style*="grid-template-columns"] { display: block !important; }
    #addStep1 .step1-form > div[style*="grid-template-columns"] > div { margin-bottom: 15px; }
    #addStep2 div[style*="grid-template-columns: 1fr 1fr"] { display: block !important; }
    #addStep2 div[style*="grid-template-columns: 1fr 1fr"] > div { margin-bottom: 15px; }
    #addStep2 div[style*="grid-template-columns: 1fr auto"] { display: block !important; }
    #addStep2 div[style*="grid-template-columns: 1fr auto"] > div { margin-bottom: 15px; }
}

.modal-actions { display: flex; gap: 10px; justify-content: center; }
/* .modal-actions .btn is defined above with consistent styling */

/* Step 2 - form like admin */
#addStep2 { }
#addStep2 .form-group { margin-bottom: 15px; }
#addStep2 .form-group label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: #333; }
#addStep2 input, #addStep2 textarea, #addStep2 select { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box; }
#addStep2 input:focus, #addStep2 textarea:focus { border-color: #2a5298; outline: none; }

/* Guest form labels */
#guestFormFields .form-group > label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: #333; background: none; padding: 0; cursor: default; }
#guestFormFields .form-group > label:hover { background: none; }
#addStep2 textarea { min-height: 100px; resize: vertical; }
#addStep2 .form-row { display: flex; gap: 15px; }
#addStep2 .form-row .form-group { flex: 1; }

@media (max-width: 1000px) {
    .setstyle { padding-top: 25px; }
    #body { width: 66%; }
    .isContent #body { width: 66%; max-width: 66%; }
    .isMinimized #body { width: 66%; }
    .setstyle { flex-direction: column; }
    #content { width: 100%; border-right: none; padding-right: 0; margin-right: 0; border-bottom: 1px solid #ddd; padding-bottom: 15px; margin-bottom: 15px; }
    .set { width: 100%; max-width: none; min-width: auto; }
    .isContent .setCtrl { display: none; }
    .setMinimized .set { width: 100%; max-width: none; }
    .setMinimized .set .box-1 { display: block; }
    .setMinimized .set .set-header h4 { display: block; }
}

@media (max-width: 1000px) {
    #body { width: 66%; max-width: 66%; right: -100%; transition: right 0.3s; padding-top: 60px !important; margin-left: 70px; }
    .isContent #body, body.showPanel #body { right: 0; }
    .set { padding-top: 10px; }
    body.showPanel .set { display: block !important; width: 100% !important; max-width: 100% !important; padding-top: 60px; }
    body.showPanel #content { display: none; }
    body.showPanel #body { width: 66%; max-width: 66%; right: 0; }
    #head { position: fixed; top: 0; left: 0; right: 0; z-index: 1600; background: #f0f0f0; border-bottom: 1px solid #ddd; }
    #nav ul.open { width: 100%; left: 0; right: 0; }
    
    /* Modal responsivní */
    .modal { max-width: 80% !important; width: 80% !important; }
    .add-record-modal { max-width: 90% !important; width: 90% !important; }
    
    /* Strip - u spodního okraje */
    .strip-wrapper { bottom: 0 !important; padding-bottom: 0; }
    .strip { margin-bottom: 0; padding-bottom: 5px; }
    
    /* Strip šipky - nad stripem, ale pod settings (z-index 700) */
    .strip-nav { width: 42px !important; height: 42px !important; top: auto !important; bottom: 85px !important; border-radius: 50%; border: 2px solid #ccc; background: white !important; box-shadow: 0 3px 10px rgba(0,0,0,0.25); z-index: 49 !important; }
    .strip-nav-left { left: 75px !important; }
    .strip-nav-right { right: 10px !important; }
    .strip-nav svg { width: 24px !important; height: 24px !important; }
    
    /* Mobile navigation */
    .mobile-nav { display: flex; position: fixed; left: 8px; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 10px; z-index: 1500; }
    .mobile-nav button { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #bbb; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.3); cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
    .mobile-nav button:active { transform: scale(0.95); }
    /* Map - khaki active */
    .mobile-nav button:nth-child(1).active { background: #bdb76b; border-color: #8b8b3d; color: white; }
    /* Detail - gray active */
    .mobile-nav button:nth-child(2).active { background: #808080; border-color: #555; color: white; }
    /* Settings - blue active */
    .mobile-nav button:nth-child(3).active { background: #2a5298; border-color: #1e3c72; color: white; }
    /* Add - green active */
    .mobile-nav button:nth-child(4).active { background: #228b22; border-color: #006400; color: white; }
}
@media (min-width: 1001px) {
    .mobile-nav { display: none; }
}

/* Form validation - red border for invalid required fields */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid {
    border-color: #dc3545 !important;
    background-color: #fff8f8;
}
input:invalid:not(:placeholder-shown):focus,
textarea:invalid:not(:placeholder-shown):focus {
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}
.field-error {
    border-color: #dc3545 !important;
    background-color: #fff8f8 !important;
}

/* Loading spinner animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}