/* ============================================================
   grids.css
   Shared look for list pages built on Microsoft QuickGrid (ported from TourneyHub; colors use the
   community-theme variables). Toolbar above, grid, paginator below.
   ============================================================ */

/* Toolbar above a grid: buttons on the left, filters/search on the right */
.grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background-color: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-bottom: none;
    border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0;
}

.grid-toolbar .grid-toolbar-spacer {
    flex: 1;
}

.grid-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--app-text);
    background-color: transparent;
    border: 1px solid var(--app-border-dark);
    border-radius: 5px;
    cursor: pointer;
}

.grid-toolbar-btn:hover {
    background-color: var(--brand-primary-light);
}

.grid-toolbar-icon-btn {
    background: transparent;
    border: none;
    font-size: 1.3rem;
    color: var(--app-text);
    padding: 0 6px;
    cursor: pointer;
}

.grid-toolbar-icon-btn:hover {
    color: var(--brand-primary);
}

/* Search box */
.grid-search {
    display: flex;
    align-items: center;
    border: 1px solid var(--app-border-dark);
    border-radius: 4px;
    background: var(--app-surface);
    padding: 1px 4px;
}

.grid-search input {
    border: none;
    outline: none;
    padding: 2px 4px;
    min-width: 180px;
    background: transparent;
    color: var(--app-text);
}

.grid-search i {
    cursor: pointer;
    color: var(--app-text-muted);
    padding: 0 6px;
}

/* The grid itself */
.grid-wrapper {
    border: 1px solid var(--app-border);
    background-color: var(--app-surface);
    overflow-x: auto;
}

.grid-wrapper table {
    width: 100%;
    margin-bottom: 0;
}

.grid-wrapper th {
    background-color: var(--app-surface-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.grid-wrapper td {
    vertical-align: middle;
    font-size: 0.9rem;
}

/* QuickGrid pads the last page with filler rows (empty cells, no aria-rowindex) to keep its height;
   they show up as stacked lines. Real data rows always have aria-rowindex. */
.grid-wrapper tbody tr:not([aria-rowindex]) {
    display: none;
}

/* Icon-only row buttons (edit pencil, etc.) */
.grid-cmd-btn {
    background-color: transparent;
    border: none;
    color: var(--app-text);
    padding: 0 4px;
    font-size: 1.05rem;
    cursor: pointer;
}

.grid-cmd-btn:hover {
    color: var(--brand-primary);
}

/* Paginator under the grid */
.grid-paginator {
    padding: 6px 8px;
    border: 1px solid var(--app-border);
    border-top: none;
    background-color: var(--app-surface);
    font-size: 0.85rem;
}

@media (max-width: 575.98px) {
    .grid-search,
    .grid-search input {
        min-width: 0;
        width: 100%;
    }
}