.common-errors {
    width: 100%;
    max-width: 100%;
}

.errors-table {
    width: 100%;
    border-collapse: collapse;
    display: table;
    border: 1px solid var(--border-color);
}

.table-header {
    display: table-header-group;
}

.table-header .header-item {
    display: table-cell;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 16px;
    color: var(--label-color);
    background-color: #F6F6F6;
}

.table-body {
    display: table-row-group;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--color-dark);
    font-size: 14px;
}

.table-cell.status {
    width: 90px;
}

.table-cell.error {
    width: 30%;
    font-weight: 500;
}

.table-cell.description {
    width: auto;
    line-height: 1.5;
}

/* Responsive design */
@media (max-width: 768px) {
    .errors-table,
    .table-header,
    .table-body,
    .table-row,
    .table-cell,
    .header-item {
        display: block;
    }
    
    .table-header {
        display: none;
    }
    
    .table-row {
        margin-bottom: 16px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 16px;
        background-color: var(--color-light);
    }
    
    .table-cell {
        border-bottom: none;
        padding: 4px 0;
        position: relative;
        padding-left: 100px;
    }
    
    .table-cell::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 90px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .table-cell.status {
        width: 100%;
        text-align: left;
    }
    
    .table-cell.error,
    .table-cell.description {
        width: 100%;
    }
}