/* Full border like a table */
.rz-data-grid table {
    border-collapse: collapse !important;
}

    .rz-data-grid table th,
    .rz-data-grid table td {
        border: 1px solid #d0d0d0 !important;
        padding: 8px !important;
    }

    /* Header border */
    .rz-data-grid table th {
        background: #f5f5f5;
        font-weight: bold;
    }

/* Responsive mobile card layout */
.rz-data-grid .rz-data-grid-mobile .rz-grid-row {
    border: 1px solid #d0d0d0 !important;
    margin-bottom: 10px;
    padding: 10px !important;
    border-radius: 4px;
}

/* Each cell inside mobile view */
.rz-data-grid .rz-data-grid-mobile .rz-grid-cell {
    border-bottom: 1px solid #d0d0d0 !important;
    padding: 6px 0 !important;
}

    .rz-data-grid .rz-data-grid-mobile .rz-grid-cell:last-child {
        border-bottom: none !important;
    }

/* Force Radzen DataGrid to always show table layout on mobile */
@media (max-width: 768px) {

    .rz-data-grid .rz-grid-table {
        display: table !important;
        width: 100% !important;
    }

    .rz-data-grid table {
        border-collapse: collapse !important;
        width: 100% !important;
    }

    .rz-data-grid td,
    .rz-data-grid th {
        display: table-cell !important;
        border: 1px solid #ddd !important;
        padding: 8px !important;
        vertical-align: middle !important;
    }

    /* Hide mobile stacked labels */
    .rz-data-grid .rz-grid-mobile-label {
        display: none !important;
    }

    /* Allow horizontal scroll if overflow */
    .rz-data-grid .rz-grid-table {
        overflow-x: auto;
        display: block !important;
    }
}

/*.header-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;*/ /* reduce space between items */
    /*width: 100%;
    align-items: center;
}*/

/* Make item size fit content, not stretch */
/*.header-item {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;*/ /* reduce internal spacing */
    /*flex: 0 0 auto;*/ /* <-- IMPORTANT: no stretching */
    /*max-width: 33%;*/ /* allows wrapping when needed */
/*}*/

/* Label stays one line */
/*.header-label {
    font-weight: 600;
    white-space: nowrap;
}*/

/* Values wrap */
/*.header-value {
    white-space: normal;
    word-break: break-word;
}

.header-badge {
    padding: 6px 10px;
}

.separator {
    font-weight: bold;
    color: #777;
    padding: 0 4px;
}*/

/* MOBILE VERSION */
/*@media (max-width: 768px) {

    .header-container {
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .header-item {
        width: 100%;*/ /* each on new line */
        /*flex: 1 1 100%;
        max-width: 100%;
    }

    .separator {
        display: none;
    }
}*/

.header-container {
    display: flex;
    flex-wrap: nowrap; /* keep on one row */
    gap: 0.7rem;
    width: 100%;
    align-items: flex-start;
}

/* KEY FIX */
.header-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto; /* allow shrinking */
    max-width: 100%; /* allow wrapping inside */
}

/* Label always stays on one line */
.header-label {
    white-space: nowrap;
    font-weight: 600;
}

/* Value can wrap inside item */
.header-value {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* MOBILE */
@media (max-width: 768px) {

    .header-container {
        flex-wrap: wrap;
    }

    .header-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}