/**
 * Vodné Prysk - barevné téma
 *
 * Navazuje na původní zelené schéma (color.css), jen v čitelnějších tónech.
 * Načítá se AŽ ZA bootstrap.min.css, takže smí přepisovat jeho proměnné.
 *
 * Pozor: tenhle soubor se do tiskových výstupů nedostane - getPage($page,"",true)
 * vyprázdní aCSS[false] a nechá jen print.css. To je záměr.
 */

:root {
  /* Základní paleta - odvozeno z původních #04441A / #345B41 / #73DB96 */
  --v-green-900: #0c3d22;
  --v-green-700: #15643c;
  --v-green-600: #1d7a4a;
  --v-green-100: #e4f2ea;
  --v-green-050: #f2f8f5;

  --v-surface:    #ffffff;
  --v-bg:         #f4f6f5;
  --v-border:     #d6dcd8;
  --v-text:       #1f2a24;
  --v-text-muted: #5f6d65;

  /* Přemapování Bootstrapu na naši paleta */
  --bs-primary:      var(--v-green-700);
  --bs-primary-rgb:  21, 100, 60;
  --bs-link-color:   var(--v-green-700);
  --bs-link-hover-color: var(--v-green-900);
  --bs-body-color:   var(--v-text);
  --bs-body-bg:      var(--v-bg);
  --bs-border-color: var(--v-border);
  --bs-focus-ring-color: rgba(21, 100, 60, .25);
}

/* Bootstrap .btn-primary pracuje s vlastními --bs-btn-* proměnnými */
.btn-primary {
  --bs-btn-bg: var(--v-green-700);
  --bs-btn-border-color: var(--v-green-700);
  --bs-btn-hover-bg: var(--v-green-900);
  --bs-btn-hover-border-color: var(--v-green-900);
  --bs-btn-active-bg: var(--v-green-900);
  --bs-btn-active-border-color: var(--v-green-900);
  --bs-btn-disabled-bg: var(--v-green-700);
  --bs-btn-disabled-border-color: var(--v-green-700);
}

/* ------------------------------------------------------------------ */
/* Zebra a označení řádků v gridech                                     */
/* ------------------------------------------------------------------ */
/*
 * Framework sám střídá class="odd" na <tr> (cls_block_list.php:152)
 * a při označení řádku mu regexem NAHRADÍ celou třídu za "mark".
 * Proto se zebra NEDĚLÁ přes .table-striped - ten maluje přes
 * box-shadow:inset, což by překrylo stavové barvy na buňkách.
 */
.app-grid tbody tr.odd,
.page table[id] tbody tr.odd,
.page table[id] tr.odd { background-color: var(--v-green-050); }
.app-grid tbody tr:hover,
.page table[id] tr[onclick]:hover { background-color: var(--v-green-100); }

.app-grid tbody tr.mark,
.app-grid tbody tr.mark:hover,
.page table[id] tr.mark,
.page table[id] tr.mark:hover {
  background-color: #fde7c9;
  box-shadow: inset 3px 0 0 #d98324;
}

/* ------------------------------------------------------------------ */
/* Stavové barvy řádku (sloupec STAV)                                   */
/* ------------------------------------------------------------------ */
/*
 * Hodnotu vrací SQL ve voda.php jako STAV_COLOR: olive|yellow|green|red|teal
 * nebo prázdný řetězec. Prázdná hodnota dá neexistující třídu "stav-",
 * která nic nedělá - proto se SQL nemusí měnit.
 *
 * Vyšší specificita (.app-grid td.stav-*) kvůli tomu, že Bootstrap
 * nastavuje background-color přímo na buňky přes --bs-table-bg.
 */
.app-grid td.stav-olive  { background-color: #e6e3c8; color: #4a4616; }
.app-grid td.stav-yellow { background-color: #fdf0c4; color: #6b5310; }
.app-grid td.stav-green  { background-color: #d5eddd; color: #14532d; }
.app-grid td.stav-red    { background-color: #f8d7da; color: #7c1d24; }
.app-grid td.stav-teal   { background-color: #d2e9ea; color: #14494c; }

.app-grid td[class*="stav-"] {
  font-weight: 600;
  letter-spacing: .04em;
}

/* Legenda stavů pod tabulkou */
.stav-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  margin-top: .75rem;
  font-size: .8125rem;
  color: var(--v-text-muted);
}

/* Značka stavu v legendě - stejné barvy jako buňka v tabulce, protože
   třídy stav-* níže platí i tady. */
.stav-znacka {
  display: inline-block;
  min-width: 1.6rem;
  padding: .05rem .3rem;
  border: 1px solid var(--v-border);
  border-radius: .25rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .04em;
}
.stav-znacka + span,
.stav-legenda .stav-znacka:not(:first-child) { margin-left: .35rem; }

.stav-znacka.stav-olive  { background-color: #e6e3c8; color: #4a4616; }
.stav-znacka.stav-yellow { background-color: #fdf0c4; color: #6b5310; }
.stav-znacka.stav-green  { background-color: #d5eddd; color: #14532d; }
.stav-znacka.stav-red    { background-color: #f8d7da; color: #7c1d24; }
.stav-znacka.stav-teal   { background-color: #d2e9ea; color: #14494c; }