:root {
  --frame-bg: linear-gradient(180deg, #dadbde 0%, #55627f 100%);
  --frame-pattern:  radial-gradient(1.8px 1.8px at 1px 1px, rgba(160, 160, 160, 0.3) 70%, transparent 100%) 0 0/15px 15px;
  --content-max: auto; /* max šířka obsahu včetně headeru */
  --content-pad: 1.25rem; /* horizontální padding uvnitř karty (mimo vlastní komponenty) */
  --header-bg-color-dark: #d4d8dc;
  --header-bg-color-light: #e5e8e9;
  --header-bg: linear-gradient(0deg, var(--header-bg-color-light) 0%, var(--header-bg-color-dark) 35%);
  --card-bg: var(--header-bg-color-light);
  --card-border: #a8a8a8;
  --card-shadow: 0 12px 28px rgba(49, 49, 49, 0.5);
  --card-radius: 14px;
  --table-bordered-th-bg: #d0d7da;
  --tab-shadow-root: rgba(85, 122, 30, 0.5);
  --tab-active-shadow:  rgba(74, 83, 54, 0.6);
  --tab-active-bg: #3b412a;
  --tab-active-bg-hover: #57603c;
}

h1 {
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}

h2 {
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
  letter-spacing: 2.8px;
}

h3 {
  margin-top: 0.6rem;
  margin-bottom: 0.2rem;
}

.table-bordered {
  border-collapse: collapse;
  table-layout: auto;
  background-color: #fbfbfb;
  border-radius: 8px; /* zaoblení rohů */
  overflow: hidden; /* aby zaoblení fungovalo i na obsah */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* jemný stín */
}

.table-bordered th {
  background-color: var(--table-bordered-th-bg); /* světle šedé pozadí pro hlavičku */
  color: #333;
  font-weight: 600;
  padding: 0.8rem 1rem;
  border-bottom: 2px solid #ddd;
}

.table-bordered td {
  padding: 0.4rem 1rem;
  border-bottom: 1px solid #eee;
  color: #555;
}

.table-bordered tbody tr:nth-child(even) {
  background-color: #fafafa; /* jemné střídání řádků */
}

.no-row-striping tbody tr:nth-child(even) {
  background-color: transparent;
}

.table-bordered tbody tr:hover {
  background-color: #e6f0ff; /* moderní hover efekt */
  transition: background-color 0.2s ease-in-out;
}

/* Zvýraznění první buňky v řádku */
.table-bordered td:first-child {
  font-weight: 500;
}


.table-scroll {
  max-height: 600px;   /* libovolná výška, např. pro cca 20 řádků */
  overflow-y: scroll;
  overflow-x: hidden;  /* volitelné */
  border-collapse: collapse;
}

/* Responsivní chování */
@media (max-width: 800px) {
  .table-bordered th, .table-bordered td {
    padding: 0.5rem;
    font-size: 14px;
  }
}


.center-table {
  margin-left: auto;
  margin-right: auto;
}

.center {
  margin-left: auto;
  margin-right: auto;
}


.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* centrování obsahu */
}

.aligned-text {
  width: 40%; /* stejná šířka jako tabulka */
  text-align: left;
}

.aligned-table {
  width: 40% !important; /* stejná šířka jako tabulka */
  text-align: left;
}


body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #333;
  margin: 0;
}

h1, h2, h3, .table-header {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
}

button, input, select {
  font-family: 'Roboto', sans-serif;
}

section {
    border: 1px solid #cfcfcf;
    padding: 10px;
}

table, th, td {
  padding: 5px;
}

p {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
}

.mt-1{
  margin-top:1.5rem !important;
}

.no-indent {
  text-indent: 0;
}

/* Skrytí nativních šipek */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield; /* pro Firefox */
}

.result-input {
  width: 5rem;
  text-align: right;
}

.priority-input {
  width: 2rem;
  text-align: right;
}

/* zarovnání obsahu sloupce doprava */
.text-right {
  text-align: right !important;
}

/* zarovnání obsahu sloupce doprava */
.text-left {
  text-align: left !important;
}

/* zarovnání obsahu sloupce doprava */
.text-center {
  text-align: center !important;
}

.spec-font {
  font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 110%; 
  letter-spacing: 1.8px;
}

/* pevné šířky sloupců */
.col-competition-name {
  width: 20rem;
}

.col-competitor-name {
  width: 20rem;
}

.col-discipline-name {
  width: 20rem;
  text-align: center;
}

.col-discipline-param-name {
  width: 20rem;
  text-align: center;
}

.col-discipline-param-type {
  width: 6rem;
  text-align: center;
}

.col-discipline-calc-type {
  width: 10rem;
  text-align: center;
}

.col-discipline-calc-value {
  width: 10rem;
  text-align: center;
}

.col-discipline-result-value {
  width: 5rem !important;
  text-align: center;
}

.col-discipline-result-priority {
  width: 4rem !important;
  text-align: center;
}

.col-dashboard-year {
  width: 5rem;
  text-align: center;
}

.col-dashboard-year-admin {
  width: 7rem;
  text-align: center;
}

.col-number {
  width: 7rem;
}

.col-number-short {
  width: 4rem;
}

.col-actions {
  width: 6rem;
  text-align: center;
}

.col-3actions {
  width: 7rem;
  text-align: center;
}

.col-year {
  width: 7rem;
  text-align: center;
}

.col-email {
  width: 18rem;
  text-align: center;
}

.col-timestamp {
  width: 11rem;
  text-align: center;
}

.col-calc-ind {
  width: 5rem;
  text-align: center;
}

.col-team-name {
  width: 20rem;
  text-align: left;
}

.col-results-place {
  width: 4rem;
  text-align: center;
  border-right: #b2b2b2 solid 0.5px;
}

.col-results-name {
  width: 18rem;
  text-align: left;
  border-right: #b2b2b2 solid 0.5px;
}

.col-results-round {
  width: 6rem;
  text-align: center;
  border-left: #e7e7e7 solid 0.3px;
}

.col-results-total {
  width: 8rem;
  text-align: center;
  border-left: #b2b2b2 solid 0.5px;
}

.col-results-avg {
  width: 8rem;
  text-align: center;
  border-left: #b2b2b2 solid 0.5px;
}

.col-results-fulfilled {
  width: 4rem;
  text-align: center;
  border-left: #b2b2b2 solid 0.5px;
}

.col-messages-header {
  width: 10rem;
  text-align: center;
  border-left: #e7e7e7 solid 0.3px;
}

.col-messages-text {
  min-width: 30rem;
  text-align: center;
  border-left: #e7e7e7 solid 0.3px;
}

.col-texts-header {
  width: 15rem;
  text-align: center;
  border-left: #e7e7e7 solid 0.3px;
}

.col-texts-page {
  width: 5rem;
  text-align: center;
  border-left: #e7e7e7 solid 0.3px;
}

.col-texts-text {
  min-width: 30rem;
  text-align: center;
  border-left: #e7e7e7 solid 0.3px;
}

.row-texts {
  height: 20rem !important;
}

.w-100 {
  width: 100% !important;
}

tr.thick-row > td {
     border-top: 2px solid #b8b8b8 !important; /* tloušťka + barva */
}


.scroll-x {
  overflow-x: auto;     /* ukáže se horizontální scrollbar, když je obsah širší */
  overflow-y: hidden;   /* volitelné – bez svislého scrollu */
  max-width: 100%;      /* nevylez za viewport/rodiče */
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch; /* plynulé scrollování na iOS */
}

/* stylování inputů v tabulce */
/*
input {
  width: 95%;
  padding: 3px 5px;
  border: 1px solid #aaa;
  border-radius: 3px;
  box-sizing: border-box;
}
*/

/* ikonová tlačítka */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  transition: transform 0.15s ease, color 0.15s ease;
  vertical-align: middle;
}

/* SVG barva */
.icon-btn svg {
  fill: #333;
  transition: fill 0.15s ease;
}

/* hover efekt */
.icon-btn:hover {
  transform: scale(1.2);
}

.icon-btn:hover svg {
  fill: #0077cc;
}

/* červená pro mazání */
.icon-btn.delete:hover svg {
  fill: #cc0000;
}

.calc-ind-checked {
  accent-color: green;

}

.calc-ind-unchecked {
  accent-color: black !important;
}


.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--tab-active-bg); /* Microsoft blue */
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.3s ease;
}

.home-btn:hover {
  background: var(--tab-active-bg-hover);
}

.home-btn svg {
  flex-shrink: 0;
}


.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-vert-center {
  align-items: center;
}

.inner_page {
  margin: auto 4rem 2rem 4rem;
}

/* ===================== Layout „orámované karty“ ===================== */


/* Celoplošné pozadí stránky (jemný gradient + vzor) */
.site-frame {
  min-height: 100dvh;
  width: auto;
  background:
    var(--frame-pattern),
    var(--frame-bg);
  padding: clamp(20px, 2vw, 24px);
}

/* Středová „karta“ s obsahem (včetně headeru) */
.site-content {
  max-width: var(--content-max);
  margin: auto auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  /* Uvnitř karty nenecháváme globální padding, aby neovlivnil vnitřní layouty,
     ale dáme lehké okraje nahoře/dole, ať header i obsah „dýchají“. */
  padding: 0 0 0.75rem;
  overflow: clip; /* aby zaoblení skrylo vnitřní overflow (podpora v moderních prohl.) */
  top: clamp(20px, 2vw, 24px); /* drží se horního paddingu .site-frame */
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
}


.app-version {
  position: relative;
  right: 50px;          /* vzdálenost od pravého okraje */
  bottom: 50px;         /* vzdálenost od spodního okraje */
  font-size: 0.9rem;
  color: #555;          /* nebo jiná barva */
  opacity: 0.7;         /* lehká průhlednost */
  pointer-events: none; /* nepřekáží při klikání na obsah */
}


.sticky-header {
  position: sticky;
  top: 0;
  backdrop-filter: saturate(180%) blur(6px);
  box-shadow: 0 2px 8px var(--header-bg-color-light) 0.06;
}


/* Drobnost: Ať H1 v headeru zůstane vizuálně v kartě */
.site-content .app-header {
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
  /* žádné další zásahy – respektuji tvé původní styly */
}

.loading-bar {
  text-align: center;
}