/* =====================================================================
   FS UI – náhrada Bootstrapu pre chod bez internetu.
   Obsahuje len to, čo systém naozaj používa: mriežku, pomocné triedy,
   tabuľky, formuláre, tlačidlá, upozornenia, záložky a rozbaľovacie menu.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.5; }
img, svg { vertical-align: middle; max-width: 100%; }
a { text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure { margin: 0 0 .5rem; }
ul, ol { padding-left: 1.5rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; opacity: 1; }
code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .875em; }

/* ---------------- mriežka ---------------- */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-fluid {
  width: 100%; margin: 0 auto; padding-left: 16px; padding-right: 16px;
}
@media (min-width: 576px)  { .container, .container-sm { max-width: 540px; } }
@media (min-width: 768px)  { .container, .container-sm, .container-md { max-width: 720px; } }
@media (min-width: 992px)  { .container, .container-sm, .container-md, .container-lg { max-width: 960px; } }
@media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; } }
@media (min-width: 1400px) { .container-xl { max-width: 1280px; } }
.row { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.row > * { padding: 0 6px; width: 100%; }

.g-1 { margin: -2px -2px 0; } .g-1 > * { padding: 2px; }
.g-2 { margin: -4px -4px 0; } .g-2 > * { padding: 4px; }
.g-3 { margin: -8px -8px 0; } .g-3 > * { padding: 8px; }
.g-4 { margin: -12px -12px 0; } .g-4 > * { padding: 12px; }

.col      { flex: 1 0 0%; }
.col-auto { width: auto; flex: 0 0 auto; }
.col-1 { width: 8.3333%; }   .col-2 { width: 16.6667%; }
.col-3 { width: 25%; }       .col-4 { width: 33.3333%; }
.col-5 { width: 41.6667%; }  .col-6 { width: 50%; }
.col-7 { width: 58.3333%; }  .col-8 { width: 66.6667%; }
.col-9 { width: 75%; }       .col-10 { width: 83.3333%; }
.col-11 { width: 91.6667%; } .col-12 { width: 100%; }

@media (min-width: 576px) {
  .col-sm-2 { width: 16.6667%; } .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.3333%; } .col-sm-6 { width: 50%; }
  .col-sm-8 { width: 66.6667%; } .col-sm-12 { width: 100%; }
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
  .d-sm-table-cell { display: table-cell !important; }
}
@media (min-width: 768px) {
  .col-md-2 { width: 16.6667%; } .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.3333%; } .col-md-5 { width: 41.6667%; }
  .col-md-6 { width: 50%; }      .col-md-7 { width: 58.3333%; }
  .col-md-8 { width: 66.6667%; } .col-md-12 { width: 100%; }
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-flex { display: inline-flex !important; }
  .d-md-table-cell { display: table-cell !important; }
}
@media (min-width: 992px) {
  .col-lg-1 { width: 8.3333%; }  .col-lg-2 { width: 16.6667%; }
  .col-lg-3 { width: 25%; }      .col-lg-4 { width: 33.3333%; }
  .col-lg-5 { width: 41.6667%; } .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.3333%; } .col-lg-8 { width: 66.6667%; }
  .col-lg-9 { width: 75%; }      .col-lg-12 { width: 100%; }
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
  .d-lg-table-cell { display: table-cell !important; }
}
@media (min-width: 1200px) {
  .col-xl-3 { width: 25%; } .col-xl-4 { width: 33.3333%; } .col-xl-6 { width: 50%; }
}

/* ---------------- zobrazenie a rozloženie ---------------- */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-start { align-items: flex-start !important; }
.align-self-center { align-self: center !important; }
.align-middle { vertical-align: middle !important; }
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-decoration-none { text-decoration: none !important; }
.position-relative { position: relative !important; }
.overflow-hidden { overflow: hidden !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.small { font-size: .875em; }
.fw-bold { font-weight: 700 !important; }
.fst-italic { font-style: italic !important; }
.rounded { border-radius: .375rem !important; }
.rounded-circle { border-radius: 50% !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* odsadenia 0–5 v kroku 4 px */
.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}
.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}
.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}
.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}
.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}
.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pb-3{padding-bottom:1rem!important}
.ps-3{padding-left:1rem!important}.pe-3{padding-right:1rem!important}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
.py-3{padding-top:1rem!important;padding-bottom:1rem!important}
.px-3{padding-left:1rem!important;padding-right:1rem!important}
.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}

/* ---------------- tabuľky ---------------- */
.table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; color: var(--text); }
.table > :not(caption) > * > * { padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
.table thead th { text-align: left; font-weight: 600; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------- formuláre ---------------- */
.form-label { display: inline-block; margin-bottom: .35rem; font-size: .9rem; }
.form-control, .form-select {
  display: block; width: 100%; padding: .5rem .75rem; font: inherit; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; outline: none;
}
.form-select { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.form-control:focus, .form-select:focus { border-color: var(--fire); box-shadow: 0 0 0 3px var(--fire-dim); }
.form-text { font-size: .82rem; color: var(--muted); margin-top: .25rem; }
.form-check { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.form-check-input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--fire); }
.form-check-label { margin: 0; }
.input-group { display: flex; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; width: 1%; }
.input-group-text { display: flex; align-items: center; padding: .5rem .7rem;
  background: var(--panel-2); border: 1px solid var(--line); border-right: 0;
  border-radius: 10px 0 0 10px; color: var(--muted); }
.input-group > .form-control:not(:first-child) { border-radius: 0 10px 10px 0; }
.input-group > .btn:last-child { border-radius: 0 10px 10px 0; }
.input-group-lg > .form-control { padding: .7rem 1rem; font-size: 1.05rem; }

/* ---------------- tlačidlá ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .9rem; border: 1px solid transparent; border-radius: 10px;
  font-weight: 600; font-size: .95rem; line-height: 1.3; color: var(--text);
  background: var(--panel-2); transition: filter .12s; }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { padding: .3rem .6rem; font-size: .85rem; }
.btn-lg { padding: .7rem 1.2rem; font-size: 1.05rem; }
.btn-outline-light { border-color: var(--line); background: transparent; }
.d-grid > .btn { width: 100%; }

/* ---------------- upozornenia a odznaky ---------------- */
.alert { padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 1rem; }
.alert-info    { border-color: rgba(31,168,199,.35);  background: rgba(31,168,199,.10); }
.alert-success { border-color: rgba(34,197,94,.35);   background: rgba(34,197,94,.10); }
.alert-warning { border-color: rgba(255,176,32,.35);  background: rgba(255,176,32,.10); }
.alert-danger  { border-color: rgba(232,68,42,.35);   background: rgba(232,68,42,.10); }
.text-muted   { color: var(--muted) !important; }
.text-danger  { color: var(--fire) !important; }
.text-success { color: var(--green) !important; }
.text-warning { color: var(--amber) !important; }
.badge { display: inline-block; padding: .25em .5em; border-radius: 6px; font-size: .78em; font-weight: 600; }

/* ---------------- záložky ---------------- */
.nav { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nav-tabs { border-bottom: 1px solid var(--line); gap: 2px; margin-bottom: 1rem; }
.nav-item { margin: 0; }
.nav-link { display: block; padding: .55rem .9rem; color: var(--muted); background: none;
  border: 0; border-bottom: 2px solid transparent; font-weight: 600; }
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--text); border-bottom-color: var(--fire); }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.show.active, .tab-content > .tab-pane.active { display: block; }

/* ---------------- rozbaľovacie menu ---------------- */
.dropdown { position: relative; }
.dropdown-toggle::after { content: '▾'; margin-left: .35rem; font-size: .8em; }
.dropdown-menu { position: absolute; z-index: 1000; display: none; min-width: 12rem;
  margin-top: .3rem; padding: .35rem; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.dropdown-menu.show { display: block; }
.dropdown-menu-end { right: 0; }
.dropdown-item { display: block; width: 100%; padding: .5rem .7rem; border: 0; border-radius: 8px;
  background: none; color: var(--text); text-align: left; }
.dropdown-item:hover { background: var(--panel-2); }
.dropdown-divider { height: 0; margin: .35rem .2rem; border-top: 1px solid var(--line); }

/* ---------------- ostatné drobnosti ---------------- */
.progress { height: .6rem; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--fire); }
.btn-close { border: 0; background: none; color: inherit; font-size: 1.1rem; line-height: 1; opacity: .7; }
.btn-close:hover { opacity: 1; }
.spinner-border { display: inline-block; width: 1.2rem; height: 1.2rem; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: fsspin .7s linear infinite; }
@keyframes fsspin { to { transform: rotate(360deg); } }

/* ---------------- poistky pre staršie prehliadače ----------------
   Vlastnosť gap vo flexboxe nemusí byť podporovaná; medzery preto
   zdvojíme okrajmi, aby sa prvky nezlievali. */
.btn > .bi, .btn > i { margin-right: .35rem; }
.btn > .bi:only-child, .btn > i:only-child { margin-right: 0; }
.dropdown-item > .bi, .dropdown-item > i { margin-right: .5rem; }
.form-check > .form-check-input + .form-check-label { margin-left: .15rem; }
.page-actions > * + * { margin-left: .5rem; }
.d-flex.gap-2 > * + * { margin-left: .5rem; }
.d-flex.gap-3 > * + * { margin-left: 1rem; }
.d-flex.flex-column.gap-2 > * + * { margin-left: 0; margin-top: .5rem; }
.alert > .bi:first-child { margin-right: .45rem; }

/* ---------------- doplnené triedy, ktoré systém používa ---------------- */
.alert-dismissible { position: relative; padding-right: 2.5rem; }
.alert-dismissible .btn-close { position: absolute; top: .5rem; right: .6rem; }

.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: 10px 0 0 10px; }
.btn-group > .btn:last-child  { border-radius: 0 10px 10px 0; }
.btn-group-sm > .btn { padding: .3rem .6rem; font-size: .85rem; }

/* prepínače cez skrytý input – používa ich zápis dochádzky */
.btn-check { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }
.btn-check + .btn { cursor: pointer; }
.btn-check:checked + .btn { background: var(--fire); border-color: var(--fire); color: #fff; }
.btn-check:focus-visible + .btn { box-shadow: 0 0 0 3px var(--fire-dim); }

.form-control-sm { padding: .3rem .55rem; font-size: .85rem; }
.form-control-color { padding: .2rem; height: 2.4rem; }
.input-time { text-align: right; font-family: 'IBM Plex Mono', monospace; }

.dropdown-header { padding: .4rem .7rem; color: var(--muted); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .08em; }

.fw-normal { font-weight: 400 !important; }
.align-self-start { align-self: flex-start !important; }
@media (min-width: 768px) { .col-md-auto { width: auto; flex: 0 0 auto; } }

/* ---------------- zobrazenie podľa šírky (musí byť za základnými triedami) ----------------
   Poradie je dôležité: .d-none má rovnakú váhu ako .d-md-flex, takže vyhráva to,
   čo je v súbore neskôr. Preto tieto pravidlá stoja na konci. */
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
  .d-sm-table-cell { display: table-cell !important; }
}
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-flex { display: inline-flex !important; }
  .d-md-table-cell { display: table-cell !important; }
  .d-md-grid { display: grid !important; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
  .d-lg-table-cell { display: table-cell !important; }
  .d-lg-grid { display: grid !important; }
}
@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex { display: flex !important; }
}