* { font-family: "Roboto Condensed"; font-size: .9rem; }
html, body { margin: 0; }
main, table { margin: 20px; }
th, td { text-align: left; padding: 5px 10px; border: 1px solid silver; white-space: nowrap; line-height: 1rem; }
td.center, th.center { text-align: center; }
td.right { text-align: right; }
input[type=radio] { margin-right: 3px; margin-left: 5px; }
input[type=number] { width: 50px; }
table tr:hover td { background-color: #FFFFDD; }

a.nav-link.active { font-weight: bold; }

td.timetable { font-size: 1.5em; line-height: .6em; padding: 0; }

tr.covid td { background-color: #FFEEEE; }

tr td.major { font-weight: bold; font-size: 1.1em; }

tr td.station_name { font-size: 1.1rem; }
tr.major td { background-color: #DDEEFF; }
tr.major td.station_name { font-weight: bold; }
tr.sor td.station_name { font-style: italic; font-size: 1rem; }
tr.sor td.station_name::before { content: ' × '; }

td.dt { padding: 2px; margin: 0; color: red; }
td.dt.red { background-color: #FFCCCC; }
td.dt.green { background-color: #CCFFCC; }

td pre { margin: 0; }
h2 pre { display: inline; clear: none; }

table table { margin: 0; }
table table td { border: none; padding: 2px 5px; }

table thead th { background-color: #F6F6F6; }
table tbody tr:first-child td { border-top-width: 2px; }

table.stations tr.not-in-line td { text-decoration: line-through; color: gray; }

#snippet--playlist table tr { display: none; }
#snippet--playlist table tr > td:first-child { width: 130px; }
#snippet--playlist table.departure_enabled tr.event_departure,
#snippet--playlist table.departure_enabled tr.event_departure-addition,
#snippet--playlist table.departure_enabled tr.event_departure-addition-tm { display: table-row; }
#snippet--playlist table.announce_enabled tr.event_announce,
#snippet--playlist table.announce_enabled tr.event_next-stop { display: table-row; }
#snippet--playlist table.announce_enabled.sor tr.event_next-stop-sor,
#snippet--playlist table.announce_enabled.sor tr.event_next-stop-sor-door,
#snippet--playlist table.announce_enabled.sor tr.event_accept-sor { display: table-row; }
#snippet--playlist table.arrive_enabled tr.event_arrive,
#snippet--playlist table.arrive_enabled tr.event_next-stop { display: table-row; }
#snippet--playlist table.arrive_enabled.sor tr.event_next-stop-sor,
#snippet--playlist table.arrive_enabled.sor tr.event_next-stop-sor-door,
#snippet--playlist table.arrive_enabled.sor tr.event_accept-sor { display: table-row; }
#snippet--stations.show_all_events table tr { display: table-row !important; }


td.playlist { white-space: nowrap; line-height: 20px; }
td.playlist form { display: inline; }
td.playlist span { padding: 2px 5px; margin: 2px; border: 1px dashed silver; border-radius: 5px; background-color: #f6f6f6 }
td.playlist span:hover a { font-weight: bold; color: red; }
td.playlist span.play audio { display: none; }
td.playlist span.addSound, td.playlist span.clearSound { display: none; }
td.playlist:hover span.addSound, td.playlist:hover span.clearSound { display: inline; cursor: pointer; }

form td.errors { background-color: #FEE; border: 2px solid red; color: maroon; }
form td.errors ul { margin: 0; }
form td.errors ul li { list-style-image: url('/img/exclamation.png'); }

#addSoundForm form { display: none; }

/* skryto od začátku (zobrazuje se kliknutím na "klonovat"), jinak formulář při načtení stránky problikne */
#frm-cloneVariantForm { display: none; }

#frm-lineStationForm tr.fare_zone { display: none; }

span.operating_number { background-color: black; color: white; font-weight: bold; margin-right: 5px; padding: 1px 3px; }

/* dialog se roztahuje podle obsahu: min. 600px, max. téměř celá šířka okna */
div.modal-dialog { width: fit-content; min-width: 600px; max-width: calc(100vw - 3rem); }
div.modal-content { width: 100%; }
div.modal-body select, div.modal-body input { max-width: 100%; }

/*** Formuláře v dialozích — potlačení stylů datových tabulek + decentní vzhled polí ***/
div.modal-body table { margin: 0; }
div.modal-body th, div.modal-body td { border: 1px solid #eef0f2; }
div.modal-body table tr:hover td { background-color: transparent; }
div.modal-body th, div.modal-body td { padding: 6px 10px; vertical-align: middle; }
div.modal-body th { text-align: right; font-weight: normal; color: #555; white-space: nowrap; background-color: #f8f9fa; }
div.modal-body input[type=text], div.modal-body input[type=number], div.modal-body input[type=date],
div.modal-body input[type=time], div.modal-body select, div.modal-body textarea {
	border: 1px solid #ced4da; border-radius: .375rem; padding: .3rem .6rem; background-color: #fff;
}
div.modal-body input[type=number] { padding-right: 0; }
div.modal-body input:focus, div.modal-body select:focus, div.modal-body textarea:focus {
	outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}
div.modal-body input[type=submit] {
	border: none; border-radius: .375rem; padding: .4rem 1rem; margin-right: .5rem;
	background-color: #0d6efd; color: white; cursor: pointer;
}
div.modal-body input[type=submit]:hover { background-color: #0b5ed7; }
div.modal-body input[name=save_as_new] { background-color: #6c757d; }
div.modal-body input[name=save_as_new]:hover { background-color: #5c636a; }
div.modal-body input[name=delete] { background-color: #dc3545; }
div.modal-body input[name=delete]:hover { background-color: #bb2d3b; }

/*** Flash messages ***/
div.flash { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; position: absolute; top: 0; left: 0; width: 100%; z-index: 2000; animation: flash-fade .5s ease 4s forwards; }
@keyframes flash-fade { to { opacity: 0; visibility: hidden; } }
div.flash.success { background: #E6EFC2; color: #264409; border-color: #C6D880; }
div.flash.info { background: #FFF6BF; color: #514721; border-color: #FFD324; }
div.flash.error { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }

/* Původní styl pro mapy, které nejsou na stops stránce */
#stationmap { width: 45%; float: right; height: 500px; border: 1px solid blue; }

/* Nové flexbox styly pro responzivní layout */
body { height: 100vh; display: flex; flex-direction: column; }
.navbar { flex-shrink: 0; }
main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Flexbox kontejner pro obsah se stops mapou */
.content-with-stops-map { flex: 1; display: flex; gap: 20px; min-height: 0; }
.content-with-stops-map { flex: 1; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.content-with-stops-map .route-info { flex-shrink: 0; }
.content-with-stops-map .stops-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.content-with-stops-map .stops-nav-tabs { flex-shrink: 0; margin-bottom: 20px; }
.content-with-stops-map .map-and-table { flex: 1; display: flex; gap: 20px; min-height: 0; }

/* Styly pro stops mapu a tabulku */
#stopsmap { flex: 1; min-height: 400px; border: 1px solid blue; margin: 0; }
#snippet--stations { flex-shrink: 0; min-width: 500px; /*max-width: 60%;*/ overflow: auto; margin: 0; }

/* Responzivní chování */
@media (max-width: 1200px) {
	.content-with-stops-map .map-and-table { flex-direction: column; }
	#snippet--stations { max-width: 100%; min-width: auto; }
	#stopsmap { min-height: 300px; }
}

/* Fallback pro stránky bez stops mapy - zachová původní chování */
main:not(.stops-page) { display: block; }
main:not(.stops-page) #stopsmap,
main:not(.stops-page) #stationmap { width: 45%; float: right; height: 500px; border: 1px solid blue; margin: 0; }

#playlist_filemanager { position: fixed; top: 5%; height: 90%; right: 20px; overflow: auto; background-color: white; box-shadow: silver 2px 2px 10px; padding: 10px 20px; border-radius: 20px; }
#playlist_filemanager #hide { text-align: right; cursor: pointer; padding: 7px 10px; float: right; background-color: #FDD; color: maroon; border-radius: 5px; }
#playlist_filemanager select { margin-top: 10px; }
#playlist_filemanager pre { text-align: left; cursor: pointer; clear: both; }