/* General styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Inter", sans-serif;
    scroll-behavior: smooth;
    overflow: hidden;
    background: #fafafa;
}

:root {
    --primary-color: rgb(55, 191, 181);
    --primary-color-80: rgba(55, 191, 181, .8);
}

.container {
    max-width: 1440px;
}

.bg-primary {
    background: var(--primary-color) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.btn-primary {
    background: var(--primary-color) !important;
    border: 0 !important;
}

.btn-primary:hover {
    background: var(--primary-color-80) !important;
}

.modal,
.modal-dialog,
.modal-content {
    border-radius: 16px !important;
}

/* pills */

.nav-pills button {
    text-align: left;
    padding: 5px 0px;
    position: relative;
    background: transparent;
    color: black;
    font-weight: 500;
}

.nav-pills .nav-link.active {
    background: transparent;
    color: black;
}

.nav-pills .nav-link:hover {
    background: transparent;
    color: var(--primary-color) !important;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.nav-pills .nav-link.active:after {
    position: absolute;
    width: 100%;
    height: 5px;
    border-radius: 50rem;
    background: var(--primary-color);
    content: "";
    top: 100%;
    left: 0;
}

.nav-pills .nav-link.done:after {
    position: absolute;
    width: 100%;
    height: 5px;
    border-radius: 50rem;
    background: var(--primary-color);
    content: "";
    top: 100%;
    left: 0;
}

.nav-pills .nav-link:after {
    position: absolute;
    width: 100%;
    height: 5px;
    border-radius: 50rem;
    background: #ebebeb;
    content: "";
    top: 100%;
    left: 0;
}

.nav-pills .nav-link:hover:after {
    position: absolute;
    width: 100%;
    height: 5px;
    border-radius: 50rem;
    background: var(--primary-color);
    content: "";
    top: 100%;
    left: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.min-h-0 {
    min-height: 0;
}

.tab-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
}

table tr td,
th {
    border: 0px;
    vertical-align: middle;
}

/* Umístění ikony */
.status-container {
    position: fixed;
    top: 80px; /* Nastavte podle vaší preference */
    right: 20px; /* Nastavte podle vaší preference */
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 1000; /* Aby byla ikona viditelná nad ostatními prvky */
}

/* Efekt plynulého blikání */
@keyframes smoothBlink {
    0%, 100% {
        opacity: 1; /* Ikona je viditelná */
    }
    50% {
        opacity: 0.5; /* Ikona lehce pohasne */
    }
}

/* Použití animace */
.status-container i {
    font-size: 24px!important;
    color: #28a745!important; /* Zelená barva */
    animation: smoothBlink 1.5s infinite!important; /* Délka animace je 1.5 sekundy a opakuje se nekonečně */
}

@media (max-width: 713px) {
    .status-container{
        width: 35px;
        height: 35px;
        top: 9px;
        right: 80px;
        z-index: 10;
    }
}

/* SweetAlert General Styling */
.swal2-popup {
    border-radius: 16px !important; /* Shodné zaoblení jako u tvých modálů */
    background: #ffffff !important; /* Barva pozadí */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; /* Jemný stín */
    font-family: "Inter", sans-serif !important; /* Shodné písmo */
    color: #333 !important; /* Barva textu */
    padding: 20px !important;
    width: 600px !important; /* Standardní šířka */
}

.swal2-title {
    font-size: 20px !important; /* Větší a čitelnější nadpis */
    font-weight: bold !important;
    color: var(--primary-color) !important; /* Hlavní barva */
    text-align: center !important;
    margin-bottom: 15px !important;
}

.swal2-html-container {
    font-size: 16px !important; /* Čitelný text */
    line-height: 1.5 !important;
    text-align: center !important;
    color: #555 !important; /* Neutrální barva textu */
}

.swal2-icon {
    font-size: 22px !important; /* Velikost ikon (info, warning, error, atd.) */
    color: var(--primary-color) !important; /* Ikona sladěná s primární barvou */
}

.swal2-confirm {
    background-color: var(--primary-color) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease-in-out !important;
}

.swal2-confirm:hover {
    background-color: var(--primary-color-80) !important;
}

.swal2-cancel {
    background-color: #e0e0e0 !important;
    border: none !important;
    color: #555 !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease-in-out !important;
}

.swal2-cancel:hover {
    background-color: #d6d6d6 !important;
}

.swal2-footer {
    font-size: 14px !important;
    color: #888 !important;
    text-align: center !important;
}

/* Responsivita pro SweetAlert */
@media (max-width: 600px) {
    .swal2-popup {
        width: 90% !important; /* Přizpůsobení pro menší obrazovky */
        padding: 15px !important;
    }

    .swal2-title {
        font-size: 18px !important;
    }

    .swal2-html-container {
        font-size: 14px !important;
    }

    .swal2-icon {
        font-size: 40px !important;
    }

    .swal2-confirm, .swal2-cancel {
        font-size: 12px !important;
        padding: 8px 15px !important;
    }
}

/* Styl pro tlačítko Přeskočit záznam (swal2-deny) */
.swal2-deny {
    background-color: #cd5858 !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease-in-out !important;
}

.swal2-deny:hover {
    background-color: #d6d6d6 !important;
}

/* Responsivita pro tlačítko Přeskočit záznam */
@media (max-width: 600px) {
    .swal2-deny {
        font-size: 12px !important;
        padding: 8px 15px !important;
    }
}