/* Replacement for the Telerik/Kendo grid - visual language ported from the "ambra" grid
   pattern in dsl.scan.web.App/Styles/site.css, adapted to this app's own CSS variables
   (defined in css/dsl.css) since it has no ink-rgb/surface theming tokens of its own. */

.dsl-grid {
    --dsl-grid-border: rgba(19, 34, 63, 0.1);
    --dsl-grid-header-bg: var(--header, #d8dfee);
    --dsl-grid-text: #13223F;
    --dsl-grid-muted: rgba(19, 34, 63, 0.6);
    --dsl-grid-accent: var(--primary, #056cb6);
    --dsl-grid-accent-rgb: 5, 108, 182;
    --dsl-grid-stripe-bg: rgba(159, 194, 217, 0.15);
    --dsl-grid-hover-bg: rgba(5, 108, 182, 0.06);
    --dsl-grid-selected-bg: rgba(5, 108, 182, 0.12);
    font-size: 0.875rem;
}

.dsl-grid-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    color: var(--dsl-grid-text);
    cursor: pointer;
    user-select: none;
}

.dsl-grid-group-toggle input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

.dsl-grid-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dsl-grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.dsl-grid-search {
    min-width: 180px;
    font-size: 0.85rem;
}

.dsl-grid-total-count {
    font-size: 0.85rem;
    color: var(--dsl-grid-muted);
    white-space: nowrap;
}

.dsl-grid-page-size {
    font-size: 0.85rem;
    width: auto;
    min-width: 0;
}

.dsl-grid-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.35rem;
    color: var(--dsl-grid-text);
    opacity: 0.7;
    text-decoration: none;
    border: 1px solid var(--dsl-grid-border);
    background: transparent;
}

.dsl-grid-export:hover {
    opacity: 1;
    background-color: var(--dsl-grid-hover-bg);
}

.dsl-grid-table-wrap {
    overflow-x: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--dsl-grid-border);
}

.dsl-grid-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--dsl-grid-text);
}

.dsl-grid-table th {
    background-color: var(--dsl-grid-header-bg);
    color: var(--dsl-grid-text);
    border: none;
    border-bottom: 2px solid var(--dsl-grid-accent);
    border-right: 1px solid var(--dsl-grid-border);
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
    padding: 0.5rem 0.9rem;
    vertical-align: top;
    text-align: left;
}

.dsl-grid-table th:last-child {
    border-right: none;
}

.dsl-grid-select-col {
    width: 2.25rem;
    text-align: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.dsl-grid-table th[data-sortable="true"] {
    cursor: pointer;
    user-select: none;
}

.dsl-grid-table th[data-sortable="true"]:hover {
    color: var(--dsl-grid-accent);
}

.dsl-grid-sort-icon {
    margin-left: 0.3rem;
    color: var(--dsl-grid-accent);
    font-size: 0.7rem;
    vertical-align: 1px;
}

.dsl-grid-table tbody td {
    background-color: #fff;
    vertical-align: top;
    padding: 0.35rem 0.9rem;
    border-top: none;
    border-bottom: 1px solid var(--dsl-grid-border);
    border-right: 1px solid var(--dsl-grid-border);
}

.dsl-grid-table tbody td:last-child {
    border-right: none;
}

.dsl-grid-table tbody tr:last-child td {
    border-bottom: none;
}

.dsl-grid-table tbody tr:nth-of-type(even) td {
    background-color: var(--dsl-grid-stripe-bg);
}

.dsl-grid-table tbody tr:hover td {
    background-color: var(--dsl-grid-hover-bg);
}

.dsl-grid-table tbody tr.dsl-grid-row-selected td {
    background-color: var(--dsl-grid-selected-bg) !important;
}

.dsl-grid-table tfoot td {
    background-color: var(--dsl-grid-header-bg);
    font-weight: 700;
    border-top: 2px solid var(--dsl-grid-accent);
    padding: 0.35rem 0.9rem;
}

/* Bigger text than a default Bootstrap badge, but with tighter vertical padding so a cell
   full of these doesn't grow taller than a normal text row (e.g. Groups' Users column). */
.dsl-grid-user-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0.15rem 0.5rem;
    line-height: 1.2;
    margin: 0 0.25rem 0.15rem 0;
}

.dsl-grid-user-toggle {
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
}

.dsl-grid-empty {
    text-align: center;
    padding: 1.5rem 0.9rem;
    color: var(--dsl-grid-muted);
}

.dsl-grid-pager-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--dsl-grid-border);
}

.dsl-grid-pager-row .dsl-grid-toolbar-left {
    justify-self: start;
}

.dsl-grid-pager-row .dsl-grid-toolbar-right {
    justify-self: end;
}

@media (max-width: 768px) {
    .dsl-grid-pager-row {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .dsl-grid-pager-row .dsl-grid-toolbar-left,
    .dsl-grid-pager-row .dsl-grid-toolbar-right {
        justify-self: center;
    }
}

.dsl-grid-body {
    position: relative;
}

.dsl-grid-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: 0.5rem;
}

.dsl-grid-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.dsl-grid-pager-arrow,
.dsl-grid-pager-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    border-radius: 6px;
    color: var(--dsl-grid-text);
    text-decoration: none;
    font-size: 0.85rem;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.08s ease-out, opacity 0.08s ease-out;
}

.dsl-grid-pager-arrow:hover,
.dsl-grid-pager-page:hover {
    background-color: var(--dsl-grid-hover-bg);
    text-decoration: none;
}

.dsl-grid-pager-page.active {
    background-color: var(--dsl-grid-accent);
    color: #fff;
    font-weight: 600;
}

.dsl-grid-pager-arrow:disabled,
.dsl-grid-pager-arrow.disabled,
.dsl-grid-pager-page:disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

/* Mobile card fallback rows (Kendo's ".Media()" replacement) - the caller supplies a
   render callback for narrow viewports; the table itself hides below this breakpoint. */
.dsl-grid-mobile-cards {
    display: none;
}

@media (max-width: 640px) {
    .dsl-grid.has-mobile-cards .dsl-grid-table-wrap {
        display: none;
    }

    .dsl-grid.has-mobile-cards .dsl-grid-mobile-cards {
        display: block;
    }

    .dsl-grid-mobile-card {
        border: 1px solid var(--dsl-grid-border);
        border-radius: 0.5rem;
        padding: 0.6rem 0.8rem;
        margin-bottom: 0.5rem;
        background-color: #fff;
    }
}