/* ----------------------------- */
/* Styly tabulky rizik - matrix  */
/* ----------------------------- */
.highlight-column {
    background-color: #f0f0f0; /* Šedé pozadí pro zvýrazněný sloupec */
}

.risk-matrix-table {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%; /* Plná šířka viewportu */
    table-layout: fixed; /* Zajistí správné rozložení šířky sloupců */
}

.risk-matrix-table th, .risk-matrix-table td {
    border: 1px solid #ccc; /* Přidání obrysu k buňkám */
    padding: 5px; /* Přidáno pro lepší oddělení textu od okraje */
    white-space: nowrap;
    vertical-align: bottom; /* Vertikální zarovnání textu dolů */
    text-align: center; /* Centrování textu */
}

/* Styly pro první sloupec */
.risk-matrix-table th:first-child {
    text-align: right; /* Zarovnání textu doprava pro první sloupec */
    width: 160px; /* Nastaví šířku prvního sloupce */
}

/* Specifický styl pro záhlaví rizik */
.risk-matrix-table th:not(:first-child) {
    writing-mode: vertical-lr; /* Vertikální uspořádání textu */
    transform: rotate(180deg); /* Otočí text pro správnou orientaci */
    min-width: 20px; /* Nastaví minimální šířku sloupců */
    height: 300px; /* Nastaví výšku sloupců */
    text-align: left; /* Horizontální zarovnání textu vlevo */
}

/* Styly pro data buňky */
.risk-matrix-table td {
    font-size: 12px; /* Nastavení velikosti písma */
}

/* Úprava výšky prvního řádku */
.risk-matrix-table tr:first-child th {
    height: 260px; /* Nastavení výšky prvního řádku */
    vertical-align: bottom; /* Zarovnání dolů */
}

/* Zvýraznění řádku při najetí myší */
.risk-matrix-table tr:hover {
    background-color: #f0f0f0; /* Změna barvy pozadí */
}

/* Přidání stylů pro responzivitu a overflow na menších obrazovkách */
@media (max-width: 768px) {
    .risk-matrix-table {
        display: block !important; /* Povolí blokové zobrazení */
        overflow-x: scroll !important; /* Změna pro horizontální scrollování */
        width: auto !important; /* Auto šířka pro lepší adaptabilitu */
    }
}





/* ----------------------------- */
/* Styly tabulky rizik           */
/* ----------------------------- */

/* Styly pro #ppe-risks-output */
#ppe-risks-output {
    background-color: #f9f9f9;  /* světlé pozadí pro lepší kontrast */
    border: 1px solid #ddd;     /* jemný rámeček kolem obsahu */
    padding: 15px;              /* vnější odsazení pro lepší čitelnost */
    margin-top: 20px;           /* odsazení od předchozího obsahu */
    margin-bottom: 40px !important;           /* odsazení od předchozího obsahu */

    border-radius: 8px;         /* mírně zaoblené rohy */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* mírný stín pro trochu hloubky */
    font-family: Arial, sans-serif; /* čisté a moderní písmo */
}

/* Styly pro nadpisy v #ppe-risks-output */
#ppe-risks-output h2 {
    color: #2c3e50;             /* tmavě modrá, konzistentní s jinými nadpisy */
    margin-bottom: 10px;        /* odsazení pod nadpisem */
    padding-bottom: 5px;        /* malé odsazení pod čarou nadpisu */
    border-bottom: 1px solid #ccc; /* jemná čára pod nadpisem */
}

/* Styly pro tabulku v #ppe-risks-output */
#ppe-risks-output table {
    width: 100%;                /* tabulka zaujme celou šířku kontejneru */
    border-collapse: collapse;  /* odstraní dvojité okraje mezi buňkami */
    margin-top: 10px;           /* odsazení tabulky od textu nad ní */
}

#ppe-risks-output th, #ppe-risks-output td {
    border: 1px solid #ddd;     /* rámečky kolem buněk */
    padding: 8px;               /* vnější odsazení uvnitř buněk */
    text-align: left;           /* text zarovnaný doleva */
}

/* Zvýraznění hlavičky tabulky */
#ppe-risks-output thead th {
    background-color: #0053a0;  /* tmavě modrá, konzistentní s ostatními elementy */
    color: #ffffff;             /* bílý text pro kontrast */
}

/* Styly pro řádky tabulky při najetí myši */
#ppe-risks-output tbody tr:hover {
    background-color: #f1f1f1;  /* světle šedé pozadí při najetí myši */
}





.risk-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    table-layout: auto;
    background-color: #ffffff; /* bílá barva pozadí tabulky */
}

.risk-details-table th {
    background-color: #002060; /* Tmavě modrá barva z vašeho CSS */
    color: white;
    font-weight: bold;
    padding: 10px;
    text-align: left;
}

.risk-details-table td {
    padding: 10px;
    border: 1px solid #ddd; /* světlá šedá rámeček */
    text-align: left;
    vertical-align: top; /* zarovnání textu nahoře */
}

/* Zvýraznění řádků při najetí myši */
.risk-details-table tr:hover {
    background-color: #f1f1f1;
    transition: background-color 0.2s ease;
}

/* Mobilní zobrazení */
@media (max-width: 768px) {
    .risk-details-table, .risk-details-table th, .risk-details-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .risk-details-table th {
        text-align: center; /* zarovnání nadpisu na střed */
    }

    .risk-details-table td {
        text-align: left; /* zarovnání textu vlevo */
        border-bottom: 1px solid #ddd; /* přidání spodního borderu pro oddělení */
    }

    .risk-details-table td:last-child {
        border-bottom: none;
    }
}


/* ----------------------------- */
/* Mobilní zobrazení pro tabulku rizik */
/* ----------------------------- */
@media (max-width: 768px) {
    .risk-details-table, .risk-details-table th, .risk-details-table td {
        display: flex;
        width: 100% !important;
        box-sizing: border-box;
    }

    .risk-details-table thead {
        display: none; /* Skrýt záhlaví tabulky */
    }

    .risk-details-table tr {
        border-bottom: 1px solid #ddd; /* Oddělení řádků */
        margin-bottom: 10px; /* Mezera mezi řádky */
        padding-bottom: 10px; /* Padding pro každý řádek */
    }

    .risk-details-table td {
        text-align: left; /* Zarovnání textu */
        display: block; /* Každý td element jako samostatný blok */
        width: 100%; /* Každá buňka zabírá celou šířku */
        padding-left: 10px; /* Padding na levé straně */
        padding-right: 10px; /* Padding na pravé straně */
        font-size: 14px; /* Větší font pro lepší čitelnost */
        border: none; /* Žádné rámečky kolem buněk */
    }

    .risk-details-table td:before {
        content: attr(data-label); /* Přidání popisku pro každou buňku */
        font-weight: bold; /* Tučný text pro popisky */
        display: block; /* Popisky jako samostatný blok */
        margin-bottom: 5px; /* Mezera pod popiskem */
    }
}