/* ===========================
   PRAVIDLA
=========================== */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

/* ===========================
   ZÁKLADY
=========================== */
body {
    background: #f2f2f2;
    font-family: Arial, sans-serif;
}

/* INFO BAR */
.top-info {
	background: #fafafa;
	font-size: 14px;
}

/* HLAVNÉ MENU */
.navbar-nav .nav-link {
    color: #000;
    font-weight: 500;
	font-weight: bold;
    padding: 10px 14px;
    border-radius: 6px;
    transition: 0.25s;
    display: inline-flex;
    align-items: center;
}

.navbar-nav .nav-link:hover {
    background: rgba(0,0,0,0.08);
    color: #000;
}

.navbar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.navbar .nav-link {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/*buttons*/
.buttons {
    display: flex;
    flex-wrap: wrap; /* umožní zalomenie na mobiloch */
    gap: 10px;
    margin: 20px 0;
}

.button-month {
    flex: 1 1 calc(33.333% - 10px); /* 3 tlačidlá v riadku */
    text-align: center;
    padding: 12px 18px;
    background: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* Hover efekt */
.button-month:hover {
    background: #e9e9e9;
    border-color: #999;
    box-shadow: 0 3px 6px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

/* Zvýraznený aktuálny mesiac */
.button-month.center {
    background: #dfeffd;
    border-color: #8bb7e0;
}

.button-month.center:hover {
    background: #cfe5fb;
    border-color: #7aaedc;
}

/* 📱 Mobilná verzia – tlačidlá pod sebou */
@media (max-width: 600px) {
    .button-month {
        flex: 1 1 100%;
    }
}

/* =======================================================================
   /* SEKUNDÁRNE MENU – horizontálny scroll + zarovnanie s hlavným menu */
/*=======================================================================

.subnav {
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
	border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #ddd;
}

/* scroll-wrapper má rovnaké odsadenie ako .container */
.subnav .scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;

    padding-left: calc((100vw - 1320px) / 2);
    padding-right: calc((100vw - 1320px) / 2);
	padding-top: 4px;
    padding-bottom: 4px;
}

/* pre menšie breakpoints upravíme odsadenie */
@media (max-width: 1399px) {
    .subnav .scroll-wrapper {
        padding-left: calc((100vw - 1140px) / 2);
        padding-right: calc((100vw - 1140px) / 2);
    }
}

@media (max-width: 1199px) {
    .subnav .scroll-wrapper {
        padding-left: calc((100vw - 960px) / 2);
        padding-right: calc((100vw - 960px) / 2);
    }
}

@media (max-width: 991px) {
    .subnav .scroll-wrapper {
        padding-left: calc((100vw - 720px) / 2);
        padding-right: calc((100vw - 720px) / 2);
    }
}

@media (max-width: 767px) {
    .subnav .scroll-wrapper {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* nav-pills v jednom riadku */
.subnav .nav {
    flex-wrap: nowrap;
    display: inline-flex;
}

/* štýl položiek */
.subnav .nav-link {
    color: #333;
    font-weight: 500;
    border-radius: 6px;
    margin-right: 6px;
}

.subnav .nav-link.active {
    background: #000;
    color: #fff;
}
.subnav .nav-pills .nav-link {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 15px;
}

/* Úprava výšky hlavného menu */
.navbar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.navbar .nav-link {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Úprava výšky sekundárneho menu */
.subnav {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #ddd;
}

.subnav .scroll-wrapper {
    padding-top: 4px;
    padding-bottom: 4px;
}

.subnav .nav-pills .nav-link {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 15px;
}

 /* Úprava výšky sekundárneho menu na mobilnej verzii */
    .subnav {
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #ddd;
    }

    .subnav .scroll-wrapper {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .subnav .nav-pills .nav-link {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        font-size: 15px;
    }

/* OBSAH */
main {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* FOOTER */
.footer h6 {
    letter-spacing: 0.5px;
}

.footer a:hover {
    text-decoration: underline;
}

footer {
    font-size: 14px;
}

/*// *TABULKY *//*/
/* aby sa tabuľka nelámala */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  min-width: 800px; 
}
.pdf-list a.button {
  display: block;
  margin-bottom: 12px;
  text-align: left;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

/* Responzívny obal tabuľky */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 25px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* === GLOBAL STICKY HEADER PRE VŠETKY TABUĽKY === */
table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
}

/* === HARMONOGRAM – vyšší z-index kvôli sticky stĺpcom === */
.harmonogram-table thead th {
    z-index: 50;
}


/* Fixný názov jedla na mobile */
@media (max-width: 768px) {
    table {
        border-collapse: separate;
        border-spacing: 0;
    }

    table th,
    table td {
        white-space: nowrap;
    }

    /* Stĺpec NÁZOV JEDLA */
    table th:nth-child(2),
    table td:nth-child(2) {
        position: sticky;
        left: 0;
        background: #fff; /* alebo #f8f9fa ak chceš jemné pozadie */
        z-index: 2;
        box-shadow: 2px 0 4px rgba(0,0,0,0.1);
    }

    /* Hlavička musí byť nad bunkami */
    table th:nth-child(2) {
        z-index: 3;
    }
}

/* Hlavná tabuľka */
.harmonogram-table {
  border-collapse: collapse;
  width: max-content;
  min-width: 1400px;
  font-size: 14px;
}

.harmonogram-table th,
.harmonogram-table td {
  padding: 6px 8px;
  border: 1px solid #444;
  text-align: center;
  white-space: nowrap;
}

/* Zvýraznené dni (SO, NE) */
.harmonogram-table .strong {
  font-weight: bold;
  background-color: #f2f2f2;
}

/* Sekčné nadpisy v tabuľke */
.harmonogram-table tr td[colspan="34"] {
  background: #e8e8e8;
  font-weight: bold;
  text-align: center;
}

/* Sticky header – funkčný */
#harmonogram-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: white;
  padding: 10px 0;
  border-bottom: 2px solid #ccc;
}
.responsibility-table {
  width: 100%;
  min-width: 700px; /* aby sa nerozpadla štruktúra */
  border-collapse: collapse;
}

/* Sticky harmonogram */
.harmonogram-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff; /* nech text ostane čitateľný */
}

/* 2. stĺpec – Meno */
.harmonogram-table th:nth-child(2),
.harmonogram-table td:nth-child(2) {
  position: sticky;
  left: 40px; /* šírka prvého stĺpca */
  z-index: 5;
  background: #fff;
}


/*// SEKCIE //*/
/* Všeobecné medzery medzi sekciami */
.sections section,
.device-section,
.helper-section {
  margin-bottom: 2.5rem;
}

/* Jemné vizuálne oddelenie sekcií */
.device-section,
.helper-section {
  padding: 1.5rem;
  background: #f7f7f7;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

/* Nadpisy sekcií */
.device-section h2,
.helper-section h2 {
  margin-bottom: 1rem;
  font-weight: 600;
}

/* Responzívne tabuľky */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1rem;
}

/* Minimálna šírka tabuľky, aby sa nelámala */
.table-responsive table {
  min-width: 900px;
  border-collapse: collapse;
}

/* Štýl hlavičky tabuľky */
table thead tr {
  background: #b9b8b8;
  font-weight: bold;
}

/* Štýl buniek */
table th,
table td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

/* Pásikované riadky pre lepšiu čitateľnosť */
table tbody tr:nth-child(even) {
  background: #f2f2f2;
}

/* Zvýraznenie riadku pri prechode myšou */
table tbody tr:hover {
  background: #e8e8e8;
}

/* ================================
   ZÁKLADNÝ ŠTÝL PRE VŠETKY SEKCIÁ
   ================================ */
section {
  padding: 1.75rem;
  margin-bottom: 2.75rem;
  background: #f7f7f7;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

/* Jemný tieň pre profesionálny vzhľad */
section {
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* ================================
   NADPISY SEKCIÍ
   ================================ */
.section-title,
.meal-section h1,
.device-section h2,
.notes-section h2,
.calc-section h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
/*  color: #b30000;  profesionálna tmavočervená */
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Podnadpisy / popisy */
section p,
section h2 + p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #333;
}

/* ================================
   ZOZNAMY
   ================================ */
section ol,
section ul {
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}

section li {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* Zvýraznené položky */
section li strong {
  color: #b30000;
}

/* ================================
   TABUĽKY – UNIVERZÁLNY ŠTÝL
   ================================ */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1rem;
}

.table-responsive table {
  min-width: 900px;
  border-collapse: collapse;
  width: 100%;
}

table th,
table td {
  padding: 10px 12px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}

table thead tr {
  background: #b9b8b8;
  color: #000;
  font-weight: bold;
}

table tbody tr:nth-child(even) {
  background: #f2f2f2;
}

table tbody tr:hover {
  background: #e8e8e8;
}

/* COOKIE BANNER */
  #cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background-color: #212529;
    color: #f8f9fa;
  }
  #cookie-banner .btn-cookie {
    min-width: 120px;
  }

#gdpr-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  #gdpr-overlay .gdpr-box {
    background: #ffffff;
    color: #000;
    max-width: 600px;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 25px rgba(255,255,255,0.2);
  }

  #gdpr-overlay button {
    margin-top: 20px;
    padding: 12px 28px;
    background: #198754;
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
  }

  #gdpr-overlay button:hover {
    background: #157347;
  }

  body.gdpr-locked {
    overflow: hidden !important;
  }

/*VYSVETLIVKY*/
.vysvetlivky-wrapper {
    text-align: center;
    margin-bottom: 20px;
}

.vysvetlivky-text {
    margin: 5px 0;
}

.vysvetlivky-legend {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
}

.vysvetlivky-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-box {
    width: 25px;
    height: 15px;
    border: 1px solid #333;
}

.rectangle-yellow-aktualny {
    background-color: yellow;
}

.rectangle-green-plan {
    background-color: springgreen;
}

.rectangle-red-sviatok {
    background-color: red;
}

.rectangle-orange-prazdniny {
    background-color: orange;
}