/**
 * JSJ
 * moderni.css
 * Modernizační vrstva stylů (načítá se za styly.css a mění pouze vzhled, nikoli rozložení)
 *
 * @author Josef Šmíd <josef@skit.cz>
 * @copyright (c) 2007-2026 Josef Šmíd
 * @version 1.9.4
 */

/* PRAVIDLO PRO CELÝ SOUBOR:
   Tento soubor smí měnit pouze background, border-color, border-radius, box-shadow, color,
   transition, outline, accent-color a text-decoration. NESMÍ měnit width, height, padding,
   margin, float, display, position, font-family, font-size ani box-sizing - jinak by se
   rozsypaly husté editační mřížky (spoje.tpl).
   Jedinou schválenou výjimkou je hlavička (#titulek, #menu, h1), která je rozdělená
   na bílý pruh a pruh s nadpisem - viz sekce ZÁKLADNÍ DIVY LAYOUTU.

   Vzhled si přepíná uživatel odkazem v zápatí, volba se ukládá do uzivatele.design
   a vyhodnocuje se v templates/index.tpl. */

/* DESIGNOVÉ PROMĚNNÉ ******************************************************* */

:root
{
  /* akcent - evoluce 3/4: přepnout na zelenou frontendu #7DAF39 */
  --jsj-akcent:          #E30615;
  --jsj-akcent-tmavy:    #B30410;
  --jsj-akcent-jemny:    #FDF2F3;
  --jsj-akcent-prstenec: rgba( 227, 6, 21, .15 );

  /* neutrály - shodné s www.tvorbajizdnichradu.cz */
  --jsj-plocha:        #FFFFFF;
  --jsj-pozadi:        #EAEAEA;
  --jsj-pozadi-jemne:  #F5F5F5;
  --jsj-text:          #333333;
  --jsj-text-tlumeny:  #5A5A5A;
  --jsj-tlacitko:      #565656;
  --jsj-linka:         #E5E5E5;
  --jsj-linka-silna:   #D5D8DC;

  /* tvary - evoluce 2: --jsj-radius-tlacitko: 40px (pilulka jako frontend) */
  --jsj-radius:           6px;
  --jsj-radius-tlacitko:  6px;
  --jsj-radius-karta:     10px;
  --jsj-stin:             0 1px 2px rgba( 0, 0, 0, .04 ), 0 2px 12px rgba( 0, 0, 0, .05 );
  --jsj-stin-jemny:       0 1px 2px rgba( 0, 0, 0, .06 );
  --jsj-prechod:          .15s ease;
}

/* ZÁKLADNÍ DIVY LAYOUTU **************************************************** */

body
{
  background-color: #E7E8EA;
  background-image: linear-gradient( 180deg, #EDEEF0 0, #E4E5E8 420px );
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--jsj-text);
}

#hlavni, #zapati { background-color: transparent; }

/* Jediné místo, kde vrstva sahá na rozměry. Hlavička je rozdělená na dvě části:
   nahoře bílý pruh s logem, autobusem a údaji o přihlášení, pod ním akcentní linka
   a pod ní pruh s nadpisem, který zůstává průhledný - prosvítá jím šedé pozadí body,
   takže navazuje na levé menu i na zbytek stránky. */
#titulek
{
  height: 129px;
  background-image: url('./../images/bus.png'),
                    linear-gradient( 180deg,
                      var(--jsj-plocha) 0, var(--jsj-plocha) 82px,
                      var(--jsj-akcent) 82px, var(--jsj-akcent) 85px,
                      transparent 85px );
  background-position: 285px 14px, 0 0;
  background-size: 132px 54px, auto;
  background-repeat: no-repeat, no-repeat;
  box-shadow: none;
}

/* nadpis má nad sebou 10px k akcentní lince a pod sebou 10px k bílé kartě obsahu
   (těch 10px dole tvoří margin #obsahcely, proto h1 končí přesně na spodku #titulek) */
#menu { padding-top: 26px; }
#titulek h1 { line-height: 34px; }

#titulek_prihl { color: var(--jsj-text-tlumeny); }

#obsah
{
  background-color: var(--jsj-plocha);
  border-radius: var(--jsj-radius-karta);
  /* prstenec místo border, aby se nezměnil box model */
  box-shadow: 0 0 0 1px var(--jsj-linka), var(--jsj-stin);
}

/* přihlašovací obrazovka byla průhledná, nově je to karta jako zbytek aplikace */
#obsah.neprihlasen
{
  background-color: var(--jsj-plocha);
  box-shadow: 0 0 0 1px var(--jsj-linka), var(--jsj-stin);
}

#obsahlevy a { color: var(--jsj-text-tlumeny); text-decoration: none; transition: color var(--jsj-prechod); }
#obsahlevy a:hover, #obsahlevy a:focus { color: var(--jsj-akcent); text-decoration: underline; }

#zapati { box-shadow: inset 0 1px 0 var(--jsj-linka); }
#zapati p { color: var(--jsj-text-tlumeny); }

#horni_zprava { box-shadow: inset 0 -1px 0 rgba( 0, 0, 0, .12 ); }

/* KOMPAKTNÍ LAYOUT VEŘEJNÝCH STRÁNEK *************************************** */

/* přihlášení a obnova hesla - vycentrovaná karta místo záhlaví, menu a zápatí;
   struktura je v templates/index.tpl pod proměnnou $verejna_stranka */

#login_stranka
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

#login_karta
{
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
  padding: 35px 40px 30px;
  background-color: var(--jsj-plocha);
  border-radius: var(--jsj-radius-karta);
  box-shadow: 0 0 0 1px var(--jsj-linka), var(--jsj-stin);
}

#login_logo { text-align: center; }
#login_logo img { width: auto; height: 54px; }

/* h1 je v styly.css inline-block 160% kvůli záhlaví, tady ho chci jako centrovaný nadpis */
#login_karta h1 { display: block; text-align: center; font-size: 130%; padding: 15px 0 20px; }

/* table.form má v styly.css width 90% a margin 20px auto - v kartě ať využije celou šířku */
#login_karta table.form { width: 100%; margin: 0; }

/* v užším sloupci by se popisky lámaly na dva řádky (nejdelší je "Dvoufázové ověření:") */
#login_karta table.form td.pravy { white-space: nowrap; }

#login_zapati { font-size: 80%; color: var(--jsj-text-tlumeny); text-align: center; padding-top: 20px; }

/* TYPOGRAFIE A ODKAZY ****************************************************** */

a { text-underline-offset: 2px; transition: color var(--jsj-prechod); }

h6 { color: var(--jsj-text-tlumeny); }

p.napoveda { color: var(--jsj-text-tlumeny); }

::selection { background-color: rgba( 227, 6, 21, .18 ); }

:focus-visible { outline: 2px solid rgba( 227, 6, 21, .5 ); outline-offset: 2px; }

/* TLAČÍTKA ***************************************************************** */

input.button, #pridat_obsah input.button, .ui-dialog-buttonset button
{
  border-color: var(--jsj-tlacitko);
  border-radius: var(--jsj-radius-tlacitko);
  box-shadow: var(--jsj-stin-jemny);
  transition: background-color var(--jsj-prechod), border-color var(--jsj-prechod), box-shadow var(--jsj-prechod);
}

input.button:hover, input.button:focus,
#pridat_obsah input.button:hover, #pridat_obsah input.button:focus,
.ui-dialog-buttonset button:hover, .ui-dialog-buttonset button:focus
{ box-shadow: 0 1px 3px rgba( 227, 6, 21, .35 ); }

input.button:active, .ui-dialog-buttonset button:active { box-shadow: none; }

a.button
{
  border-radius: var(--jsj-radius-tlacitko);
  box-shadow: var(--jsj-stin-jemny);
  transition: background-color var(--jsj-prechod), box-shadow var(--jsj-prechod);
}

/* FORMULÁŘOVÁ POLE ********************************************************* */

/* na bílém #obsah by původní rámeček #EAEAEA prakticky zmizel */
input.text, textarea, select.text
{
  background-color: var(--jsj-plocha);
  border-color: var(--jsj-linka-silna);
  border-radius: var(--jsj-radius);
  transition: border-color var(--jsj-prechod), box-shadow var(--jsj-prechod);
}

input.text:focus, textarea:focus, select.text:focus
{
  border-color: var(--jsj-akcent);
  box-shadow: 0 0 0 3px var(--jsj-akcent-prstenec);
}

input.text[readonly="readonly"], select.text[readonly="readonly"] { border-color: var(--jsj-linka); }

input[disabled="disabled"], input[disabled="disabled"]:hover, input[disabled="disabled"]:focus,
select[disabled="disabled"], select[disabled="disabled"]:hover, select[disabled="disabled"]:focus
{ border-color: var(--jsj-linka); box-shadow: none; }

input.chybna, input.chybna:focus { border-color: var(--jsj-akcent); box-shadow: 0 0 0 3px var(--jsj-akcent-prstenec); }

/* zaškrtávátka - nahrazuji zelený glow akcentní barvou */
input[type=checkbox], input[type=radio] { accent-color: var(--jsj-akcent); }
input[type=checkbox]:checked, input[type=radio]:checked { box-shadow: 0 0 0 3px rgba( 227, 6, 21, .12 ); }
input[type=checkbox]:focus, input[type=radio]:focus { box-shadow: 0 0 0 3px rgba( 0, 0, 0, .15 ); }

span.chybova_hlaska { background-color: var(--jsj-akcent); border-radius: var(--jsj-radius); }

/* TABULKY ****************************************************************** */

/* oddělovací linky dělám insetem, ne borderem - border by zvětšil každý řádek
   o 1px a u dlouhých výpisů by se to sečetlo */
table.vypis th
{
  background-color: var(--jsj-pozadi);
  color: var(--jsj-text-tlumeny);
  box-shadow: inset 0 -2px 0 var(--jsj-linka-silna);
}

table.vypis th a { color: var(--jsj-text-tlumeny); }

table.vypis td { box-shadow: inset 0 -1px 0 var(--jsj-linka); }

table.vypis tr.s { background-color: var(--jsj-pozadi-jemne); }

/* původní bílý hover by na bílém #obsah nebyl vidět */
table.vypis tr:hover, table.vypis tr.s:hover
{ background-color: var(--jsj-akcent-jemny); transition: background-color var(--jsj-prechod); }
table.vypis tr.den:hover, table.vypis tr.z:hover { background-color: transparent; }

table.vypis tr.den td { box-shadow: inset 0 1px 0 var(--jsj-linka); }
table.vypis tr.z td, table.vypis tr.soucty td { box-shadow: none; }

/* filtrační řádek není hlavička - patří k obsahu, takže zůstává na bílé */
table.vypis tr.filtr th { background-color: var(--jsj-plocha); box-shadow: none; }

table.vypis.changelog th { border-top-color: transparent; }

/* ZPRÁVOVÉ BOXY ************************************************************ */

div.infobox, div.questionbox, div.errorbox, div.okbox
{
  border-radius: var(--jsj-radius-karta);
  box-shadow: var(--jsj-stin-jemny);
}

div.infobox { border-color: #EBDCA5; }
div.questionbox { border-color: #B4CFF0; }
div.errorbox { border-color: #F0B9B9; }
div.okbox { border-color: #D6DEC6; }

div.bootstrap-growl.alert { border-radius: var(--jsj-radius-karta); box-shadow: var(--jsj-stin); }

/* OBJEDNÁVKOVÉ BOXY ******************************************************** */

div.orderbox
{
  background-color: var(--jsj-plocha);
  border-color: var(--jsj-linka);
  border-radius: var(--jsj-radius-karta);
  box-shadow: var(--jsj-stin-jemny);
  transition: border-color var(--jsj-prechod), box-shadow var(--jsj-prechod);
}

div.orderbox.highlight { border-color: var(--jsj-akcent); }
div.orderbox:hover, div.orderbox:focus { border-color: var(--jsj-text-tlumeny); box-shadow: var(--jsj-stin); }
div.orderbox p.priceinfo { color: var(--jsj-text-tlumeny); }

/* STRÁNKOVÁNÍ ************************************************************** */

div.strankovani { color: var(--jsj-text-tlumeny); }
div.strankovani input[type=text] { border-color: var(--jsj-linka-silna); border-radius: 4px; }
div.strankovani a { border-radius: 4px; transition: background-color var(--jsj-prechod), color var(--jsj-prechod); }
div.strankovani a:hover, div.strankovani a:focus { background-color: var(--jsj-akcent-jemny); }

/* DROBNOSTI **************************************************************** */

div.odkaz_ikona { border-radius: 3px; }

div.schema_zastavka
{
  background-color: var(--jsj-plocha);
  border-color: var(--jsj-linka-silna);
  border-radius: var(--jsj-radius);
}
div.schema_zastavka.aktualni { border-color: var(--jsj-akcent); }

canvas#drawing { border-color: var(--jsj-linka-silna); border-radius: var(--jsj-radius); }

div.zapis_vypis .zv_popis h2 { border-bottom-color: var(--jsj-linka); }

img.fotka_nahled { border-radius: var(--jsj-radius); }

div#tabs { border-bottom-color: var(--jsj-linka-silna); }

/* SLADĚNÍ KNIHOVEN ********************************************************* */

/* jQuery UI - výchozí téma má aktivní stav modrý (#007fff), což je jediné místo,
   kde aplikace není šedočervená. Projeví se hlavně v datepickeru a v dialozích. */

.ui-widget-content { border-color: var(--jsj-linka); color: var(--jsj-text); }
.ui-widget-header { background: var(--jsj-pozadi); border-color: var(--jsj-linka); color: var(--jsj-text); }

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button
{ background: var(--jsj-pozadi-jemne); border-color: var(--jsj-linka-silna); color: var(--jsj-text); }

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus
{ background: var(--jsj-akcent-jemny); border-color: var(--jsj-linka-silna); color: var(--jsj-text); }

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover
{ background: var(--jsj-akcent); border-color: var(--jsj-akcent); color: #fff; }

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #fff; }

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight
{ background: #FFF6D6; border-color: #EBDCA5; }

.ui-visual-focus { box-shadow: 0 0 0 3px var(--jsj-akcent-prstenec); }

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: var(--jsj-radius); }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: var(--jsj-radius); }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: var(--jsj-radius); }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: var(--jsj-radius); }

.ui-dialog { border-radius: var(--jsj-radius-karta); border-color: var(--jsj-linka); box-shadow: var(--jsj-stin); }
.ui-dialog .ui-dialog-titlebar { border-radius: var(--jsj-radius-karta) var(--jsj-radius-karta) 0 0; }
.ui-widget-overlay { background: #000; opacity: .35; }

.ui-datepicker td a.ui-state-active, .ui-datepicker td a.ui-state-highlight { border-radius: 4px; }

.ui-tooltip { border-color: var(--jsj-linka); border-radius: var(--jsj-radius); box-shadow: var(--jsj-stin); }

/* Selectize - našeptávače měly modré a zelené akcenty */

.selectize-input
{
  border-color: var(--jsj-linka-silna);
  border-radius: var(--jsj-radius);
  box-shadow: none;
  transition: border-color var(--jsj-prechod), box-shadow var(--jsj-prechod);
}

.selectize-input.focus
{
  border-color: var(--jsj-akcent) !important;
  box-shadow: 0 0 0 3px var(--jsj-akcent-prstenec);
}

.selectize-dropdown
{
  border-color: var(--jsj-linka-silna);
  border-radius: 0 0 var(--jsj-radius) var(--jsj-radius);
  box-shadow: var(--jsj-stin);
}

.selectize-dropdown .active { background-color: var(--jsj-akcent-jemny); color: var(--jsj-text); }
.selectize-dropdown .optgroup-header { color: var(--jsj-text-tlumeny); }

.selectize-control.multi .selectize-input > div
{ background: var(--jsj-tlacitko); border-color: var(--jsj-tlacitko); border-radius: 4px; }

.selectize-control.multi .selectize-input > div.active
{ background: var(--jsj-akcent); border-color: var(--jsj-akcent); }

/* qTip */

.qtip { border-radius: var(--jsj-radius); box-shadow: var(--jsj-stin); }

/* mapa zastávky (libs/leaflet) */

div#mapa_zastavky
{
  border-color: var(--jsj-linka-silna);
  border-radius: var(--jsj-radius);
  box-shadow: var(--jsj-stin-jemny);
}

.leaflet-bar a { color: var(--jsj-text); border-color: var(--jsj-linka); }
.leaflet-bar a:hover, .leaflet-bar a:focus { background: var(--jsj-akcent-jemny); color: var(--jsj-akcent); }

.leaflet-popup-content-wrapper, .leaflet-popup-tip { box-shadow: var(--jsj-stin); }

p#mapa_zapnout a.mapa_ikona { color: var(--jsj-text-tlumeny); }
p#mapa_zapnout a.mapa_ikona:hover, p#mapa_zapnout a.mapa_ikona:focus { color: var(--jsj-akcent); }

p#mapa_hlavicka a#mapa_vypnout { color: var(--jsj-text-tlumeny); }
p#mapa_hlavicka a#mapa_vypnout:hover, p#mapa_hlavicka a#mapa_vypnout:focus { color: var(--jsj-akcent); }

div#mapa_kandidati p.mapa_kandidat { border-bottom-color: var(--jsj-linka); }
div#mapa_kandidati p.mapa_kandidat.vybrany { background: var(--jsj-akcent-jemny); }