.preview-matrix,
.db-matrix {
    /* scrollbars if needed */
    overflow: auto;
    padding: 15px;
    display: inline-block;
    background: #fefefe;
}
.preview-matrix {
    /* background: #f9f9f9; */
    border: 4px dashed #aaa;
    margin-bottom: 1em;
}

.db-matrix {
    border: 3px solid #444; /* DB: erősebb keret */
}

table {
    border-collapse: collapse;
}

td {
    border: 1px solid #ccc;
    padding: auto;
    font-size: 0.7em;
    /* text-align: center; */
    vertical-align: middle;
}

/* Fejléc (első sor és első oszlop) kiemelés */
tr:first-child td,
td:first-child {
    background: #eee;
    font-weight: bold;
}

/* Make first row vertical */
tr:first-child td {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: normal;
}

td:first-child {
    white-space: nowrap;
    min-width: max-content;
}

.val3 {
    background-color: #f8d7da;
}

.val2 {
    background-color: #fff3cd;
}

.val1 {
    background-color: #d4edda;
}

td.mismatch {
    background-color: magenta;
    font-weight: bold;
    color: white;
}

div.mismatches {
    margin: 1em 0;
    padding: 1em;
    border: 2px solid red;
    background: #ffe6e6;
}

div.no-mismatches {
    margin: 1em 0;
    padding: 1em;
    border: 2px solid green;
    background: #e6ffe6;
}

.flash {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 24px 41px;
    border-radius: 6px;
    font-weight: bold;
    opacity: 1;
    min-width: 200px;
    text-align: center;
    animation: slideDownFade 4s forwards;
}

@keyframes slideDownFade {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(200px); /* slides down */
    }
}
/* 
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
 */
/* 
@keyframes slideFade {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
    }
} */

.flash.success {
    background-color: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}

.flash.error {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
    color: #721c24;
}

.flash .close-btn {
    position: absolute;
    right: 8px;
    top: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: inherit;
}