/* ------------------- Podstawowe style ------------------- */
body {
    background-color: #f8f9fa;
    height: 100%;
    margin: 0;
}

.card {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: 100%;
    max-width: 400px;
}

.card-body {
    padding: 2rem;
}

h3 {
    margin-bottom: 1rem;
}

textarea {
    resize: vertical;
}

.nowrap {
    white-space: nowrap;
}

th.sortable {
    cursor: pointer;
}

.bg-light {
    background-color: #f8f9fa !important;
}

/* ------------------- Login ------------------- */
.login-wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loginError, #errorMsg {
    display: none;
}

/* ------------------- Header ------------------- */
.header-logo {
    height: 50px;
    width: auto;
}

.header-container {
    width: 100%;
}

.header-container h2 {
    margin: 0;
    font-weight: bold;
}

.header-title {
    font-size: 1.8rem;
    text-align: center;
}

@media (max-width: 576px) {
    .header-title { font-size: 1.4rem; }
    .header-logo { height: 40px; }
}

/* ------------------- Badge ------------------- */
.pass-badge, .fail-badge, .unknown-badge {
    color: white;
    font-weight: bold;
    padding: 0.35em 0.7em;
    border-radius: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    animation: fadeIn 0.5s;
}

.pass-badge { background: linear-gradient(135deg,#4caf50,#81c784); }
.fail-badge { background: linear-gradient(135deg,#f44336,#e57373); }
.unknown-badge { background: linear-gradient(135deg,#9e9e9e,#bdbdbd); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ------------------- Tabela ------------------- */
tr:hover td { transition: background 0.3s ease; }

tr:hover .pass-badge { box-shadow: 0 4px 10px rgba(76,175,80,0.4); }
tr:hover .fail-badge { box-shadow: 0 4px 10px rgba(244,67,54,0.4); }
tr:hover .unknown-badge { box-shadow: 0 4px 10px rgba(158,158,158,0.4); }

/* ------------------- Modal ------------------- */
.modal-body pre {
    max-height: 400px;
    overflow-y: auto;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 0.3rem;
}

.modal-body pre span.date {
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 3px;
}

#toastRoot {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    pointer-events: none;
}

#toastRoot .toast {
    pointer-events: auto;
    min-width: 250px;
    max-width: 350px;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateX(120%);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* ------------------- Toast ------------------- */
#toastRoot {
    position: fixed;
    top: 1rem;
    right: 1rem; /* po prawej stronie */
    z-index: 1100;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* wszystkie toast'y przy prawej krawędzi */
}

#toastRoot .toast {
    pointer-events: auto;
    min-width: 250px;
    max-width: 350px;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateX(120%);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

#toastRoot .toast.show {
    opacity: 1;
    transform: translateX(0);
}

#toastRoot .toast.hide {
    opacity: 0;
    transform: translateX(120%);
}

.toast-success { background-color: #28a745; color: #fff; }
.toast-danger  { background-color: #dc3545; color: #fff; }
.toast-warning { background-color: #ffc107; color: #212529; }

.toast .btn-close {
    opacity: 0.7;
    transition: opacity 0.2s;
}
.toast .btn-close:hover { opacity: 1; }

.btn {
  border-radius: 0.5rem;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}