html,body { height: 100%; margin: 0; font-family: Arial; }
.all { display: flex; width: 100%; height: 100%; }
.menu { width: 300px; background-color: #78ACCD; border-right: solid 1px #808080; box-shadow: 15px 0 15px -2px #808080; z-index: 9; }
h1 { font-size: 24px; text-align: center; margin: 16px 0 16px 0; color: #ffffff; text-shadow: 0.1rem 0.2rem 0.5rem rgb(27, 64, 94); }

#map { position: relative; flex: 1; height: 100%; }
.logocontrol { bottom: 0; right: 0; }
.ol-popup { background: white; padding: 8px 10px; border: 1px solid #999; border-radius: 6px; min-width: 140px; font-size: 14px; text-align: center; }

.menu-tabs { display: flex; gap: 8px; padding: 8px; background: #efefef; justify-content: center; bottom: 0; position: absolute; width: 284px; }
.tab-btn {	background: transparent; border: 0; padding: 8px 14px; font-weight: 600; cursor: pointer; border-radius: 8px; outline: none; }
.tab-btn:focus { box-shadow: 0 0 0 3px rgba(100,150,250,0.12); }
.tab-btn.active { background: white; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.panel { display: none; overflow: auto; }
.panel.panel-active { display: block; }

#calendarRoot, #infoDay, #infoPlaces, #infoSummary { width: 90%; margin: 0 auto; }
#infoDay, #infoPlaces, #infoSummary { border: solid 2px #efefef; border-radius: 25px; pading: 10px; margin-top: 30px; }

.calendarClass { border-radius: 25px; padding: 10px; border: solid 2px #efefef; }
.cal-controls { display: flex; align-items: center; margin-bottom: 20px; }
.cal-month-label { flex:1; text-align: center; font-weight: 600; color: #efefef; }
.cal-weeknames { display: grid; grid-template-columns: repeat(7,1fr); color: #efefef; font-size: 0.9rem; margin-bottom: 6px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); }
.cal-cell { padding: 5px 6px; text-align: center; cursor: pointer; user-select: none; color: #efefef; border: 1px transparent solid; }
.cal-cell.other { background: transparent; color: #c0c0e0; cursor: default; box-shadow: none; }
.cal-cell.selected-start, .cal-cell.selected-end, .cal-cell.in-range { border: 1px #efefef solid; border-radius: 100px; font-weight: bold; }
.prne { margin-top: 0; }

button { margin-top: 10px; border: solid 2px #efefef; padding: 5px 10px; border-radius: 15px; cursor: pointer; }

#loadGpxBtn { width: 65%; }
#totalDistance, #buttonOk, #viewData { text-align: center; margin: 10px 0; color: #efefef; }

#souradnice, #placesDate { text-align: center; margin: 10px 0; color: #efefef; }

#mapLoading { position: absolute; inset: 0; background: rgba(108, 92, 92, 0.85); display: none; align-items: center; justify-content: center; z-index: 4000; pointer-events: none; }
#mapLoading .map-loading-inner { text-align: center; pointer-events: auto; transform: translateY(-10px); }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 5px solid rgba(0,0,0,0.28); border-top-color: rgba(0,0,0,0.55); animation: spin 1s linear infinite; margin: 0 auto 8px auto; }
.loading-text { font-family: system-ui, Arial; color:#222; font-weight:600; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
	.all {	display: flex; flex-direction: column; height: 100vh; }
	.menu {	width: 100%; border-right: none; border-bottom: 1px solid #e0e0e0; padding-bottom: 15px; }
	#menuToggle { display: inline-block; margin: 15px; padding: 6px 10px; border: 1px solid #ddd; background:white; position: absolute; top: 0; right: 0; }
	.menu.collapsed { height: 50px; padding-bottom: 6px; }
	#map { flex: 1 1 auto; height: calc(100vh - 44px); min-height: 200px; }
	.menu:not(.collapsed) + #map { height: calc(100vh - (var(--menu-expanded-height, 320px))); }
	#mapLoading { inset: 0; position: absolute; }
}