/*
Pouzite barvy:
  white, black
  ivory - pozadi
  orange
  gold
  lemonchiffon

*/

:root {
  /* layout */
  --header-height: 60px;
  --menu-width: 240px;
  --menu_panel-height: 180px;
  --brand_panel-height: 66px;

  /* barvy */
  --col-prim: orange;
  --col-sec: gold;
  --col-terc: lemonchiffon;
  --col-ok: lightgreen;
  --col-error: pink;
  --col-info: brown;
  --col-light: ivory;
  --col-dark: #485230;
  --col-white: #ffffff;
  --col-black: #000000;
  --col-muted: #d3d3d3;
  --col-shadow: #666666;
  --col-counter: saddlebrown;
}


body {
  font-family: sans-serif;
  background: var(--col-light);
  color: var(--col-black);
}

a {
  color: var(--col-black);
  text-decoration: none;
}

a:hover {
  background-color: var(--col-prim);
}

button {
  cursor: pointer;
  background-color: var(--col-muted);
  box-shadow: 2px 2px 2px var(--col-shadow);
}

.big_button {
  cursor: pointer;
  font-weight: bold;
  padding: 10px;
}

.brand_title {
  font-size: x-large;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 0px;
}

.brand_title_links {
  float: right;
}

.left { text-align: left }
.right { text-align: right }
.center { text-align: center }
.bold { font-weight: bold }
.italic { font-style: italic }
.small { font-size: 0.8em; }
.inline_block { display: inline-block; }
.vertical_top { vertical-align: top; }

/* input:not([type="checkbox"]) { width: 14em; } */
.input_short { width: 100px; }
.input_middle { width: 300px; }
.input_long { width: 50em; }
.input_date { width: 8em; }

.info_icon { color: var(--col-info); }
.action_icon { color: var(--col-info); }
.action_icon:hover { color: var(--col-prim); cursor: pointer; }

.title_bar {
  background-image: linear-gradient(to right, orange, gold, ivory);  /* Předělat!!! */
  padding: 8px; margin-top: 8px; margin-bottom: 8px;
  font-weight: bold; font-size: large;
}

td.has_link:hover > a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--col-prim);
}

/* --- Page layout --- */

#content {
  padding-top: var(--header-height);
  display: flex;
}

#header {
  background-color: var(--col-sec);
  color: var(--col-black);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  padding-left: 20px;
  z-index: 999;
}

#menu {
  position: fixed;
  top: calc(var(--header-height) + var(--menu_panel-height));
  left: 0;
  width: var(--menu-width);
  height: calc(100% - var(--header-height));
  background-color: var(--col-terc);
  overflow-y: auto;
}

#menu_panel {
  background-color: var(--col-terc);
  position: fixed;
  top: var(--header-height);
  height: var(--menu_panel-height);
  z-index: 900;
}

#menu_brands_footer {
  padding-left: 5px;
}

.menu_brands {
  height: calc(100% - var(--header-height) - var(--menu_panel-height));
  overflow: auto;
}

#main {
  width: 100%;
  min-height: calc(100vh - var(--header-height) - var(--brand_panel-height) - 96px);
}

.with_menu {
  margin-left: var(--menu-width);
}

#brand_panel {
  position: fixed;
  height: var(--brand_panel-height);
  top: var(--header-height);
  width: calc(100% - var(--menu-width) - 16px);
  background-color: var(--col-light);
  padding-bottom: 8px;
  z-index: 900;
}

#db_page_main {
  margin-top: calc(var(--brand_panel-height) + 10px);
}

.servername {
  font-size: medium;
  background: blue;
  color: var(--col-white);
}

.servername[data-db_name="teatagdb"] { background: green; }

#site_logo { font-size: x-large; font-weight: bold; }

#header_right {
  display: table;
  float: right;
  position: relative;
  top: 14px;
  height: 30px;
  padding-right: 20px;
}

#header_right .site_lang, #header_right .site_user {
  display: table-cell;
  vertical-align: middle;
  padding-left: 10px;
  padding-right: 10px;
}

#header_right .login_icon { padding: 6px; }

.system_msg {
  position: absolute;
  z-index: 10;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%);
  width: 80%;
  padding: 10px;
  color: var(--col-black);
}

.system_msg_type_info { background-color: var(--col-info); }
.system_msg_type_ok { background-color: var(--col-ok); }
.system_msg_type_error { background-color: var(--col-error); }
.system_msg .button { float: right; }

.system_msg .button:hover {
  cursor: pointer;
  color: var(--col-sec);
}

/* --- Hlavní menu --- */
.app_menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* nebo inline-flex */
  white-space: nowrap;
  cursor: pointer;
}

.app_menu > li:hover {
  background-color: var(--col-sec);
}

.app_menu > li {
  position: relative;
}

.app_menu > li > a, .has_app_submenu {
  padding-left: 10px;
  padding-right: 10px;
}

.app_submenu {
  display: none;
  z-index: 10;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--col-sec);
  list-style: none;
  padding: 8px;
  margin: 0;
  min-width: 150px;
  box-shadow: 12px 12px 5px var(--col-shadow);
}

.app_submenu > li > a {
  display: block;
}

.app_menu > li.has_app_submenu:hover .app_submenu {
  display: block;
}

.app_submenu li {
  cursor: pointer;
}


/* --- Dialog okna --- */
.ui-dialog {
  box-shadow: 12px 12px 5px var(--col-shadow);
  background-color: var(--col-light) !important;
  border: 1px solid var(--col-black) !important;
  overflow: auto;
  z-index: 1000 !important;
}

.ui-dialog-titlebar {
  background-color: var(--col-prim) !important;
  color: var(--col-black) !important;
}

/* --- Záložky --- */
.ui-state-default {
  color: var(--col-black) !important;
}

.ui-state-active {
  background-color: var(--col-sec) !important;
  border: 1px solid var(--col-black) !important;
}

.ui-state-active a:link {
  color: var(--col-black) !important;
}


/* --- db --- */
#collections_select {
  margin: 6px;
  font-weight: bold;
}

#main .brand_panel {
  font-size: small;
  background-color: var(--col-terc);
  outline: 1px solid var(--col-black);
  padding: 5px;
  margin-bottom: 6px;
}

.collection_panel, .edit_panel {
  margin-top: 8px;
}

.letter_link {
  font-size: large;
  font-weight: bold;
  text-align: center;
}

.button_active, .button_nonactive {
  width: 6em;
  cursor: pointer;
}

.active, .button_active {
  background-color: var(--col-prim);
}

.button_nonactive {
  background-color: var(--col-muted);
}

.button_show_collection { width: 120px; }

#menu .alphabet_links {  padding-left: 5px; padding-right: 5px; text-align: center; }

#menu hr {
  margin-top: 4px;
  margin-bottom: 4px;
}

#menu ul {
  list-style-type: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 8px;
}

#menu li a {
  display: block;
  text-decoration: none;
}

#menu .menu_bullet { vertical-align: bottom; }

#menu .menu_item_count {
  float: right;
  margin-right: 6px;
  margin-top: 2px;
  font-size: small;
}

.tag_type-title {
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 5px;
  background-color: var(--col-sec);
  outline: var(--col-black) solid 1px;
  padding: 3px;
  padding-left: 1ex;
}

.serie-title {
  font-weight: bold;
  margin-top: 18px;
  margin-bottom: 5px;
  padding: 3px;
  padding-left: 1ex;
}

.brand_footer-title {
  outline: 1px solid var(--col-black);
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: var(--col-prim);
  padding: 3px;
  padding-left: 1ex;
}

.collect-container {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
}

.collect-box {
  width: min-content;
  border-style: solid;
  border-width: 1px;
  border-color: var(--col-black);
  text-align: center;
  overflow: hidden;
  margin: 2px;    /* Sirka obrazku + 2px*/
  white-space: normal;
  font-size: small;
  max-width: 310px;
  overflow: auto;
  background: var(--col-terc);
}

.collect-container a {
  display: block;
  text-decoration: none;
}

.teatag_pair {
  display: flex;
  gap: 2px;
}

.in_collection {
  background-color: var(--col-sec);
}

.tag_writing {
  height: 54px;
  overflow: auto;
  font-size: smaller;
}

.tag_checkboxes_row { white-space: nowrap; }

/* okno detail */
#detail_dialog table {
  width: 100%;
  border-collapse: collapse;
}

#detail_dialog td { padding: 2px; }

#detail_dialog td.border {
  border: 1px solid var(--col-black);
}

#detail_headline {
  font-weight: bold;
  text-align: center;
}
#detail_dialog td.label {
  background: var(--col-terc);
  vertical-align: top;
}

/* --- Import --- */
.file_names { background: var(--col-light); }

/* --- Chosen --- */
.chosen-container { font-size: 16px !important; }
.chosen-results { max-height: 460px !important; }

.ajax_result_ok { background: var(--col-ok); }
.ajax_result_nok { background: var(--col-error); }

/* --- Counter --- */
table.counter {
  margin: 12px auto;
  border-collapse: collapse;
  font-family: sans-serif;
  background: var(--col-counter);
  color: var(--col-white)
  outline-color: var(--col-sec);
  font-size: x-small;
}

table.counter .count {
  min-width: 24px;
  text-align: right;
  padding-right: 10px;
}

table.counter td {
  color: var(--col-white);
  height: 18px;
}

table.counter img {
  vertical-align: middle;
}

table.counter a {
  color: var(--col-white);
  text-decoration: none;
}

table.counter a:hover {
  color: var(--col-black);
  text-decoration: none;
}