:root {
    --grid-gap: 0.75rem;
    --dashboard-columns: 12;
    /* content scroll max */
    --card-content-max-height: 360px;
}

/* Dashboard grid container */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(var(--dashboard-columns), 1fr);
    gap: var(--grid-gap);
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

/* Tile base */
.card-tile {
    display: block; /* tiles are block-level grid items */
    box-sizing: border-box;
}

/* Column span helpers (grid-column: span N) */
.grid-span-1 {
    grid-column: span 1;
}

.grid-span-2 {
    grid-column: span 2;
}

.grid-span-3 {
    grid-column: span 3;
}

.grid-span-4 {
    grid-column: span 4;
}

.grid-span-5 {
    grid-column: span 5;
}

.grid-span-6 {
    grid-column: span 6;
}

.grid-span-7 {
    grid-column: span 7;
}

.grid-span-8 {
    grid-column: span 8;
}

.grid-span-9 {
    grid-column: span 9;
}

.grid-span-10 {
    grid-column: span 10;
}

.grid-span-11 {
    grid-column: span 11;
}

.grid-span-12 {
    grid-column: span 12;
}

/* Row span helpers if needed */
.grid-row-span-1 {
    grid-row: span 1;
}

.grid-row-span-2 {
    grid-row: span 2;
}

.grid-row-span-3 {
    grid-row: span 3;
}

/* Limit overflowing content inside tiles */
.card-tile .card-content,
.card-tile .advisory-container,
.card-tile .card-body {
    max-height: var(--card-content-max-height);
    overflow: auto;
}

/* Small helper to keep titles compact */
.card-tile .card-header-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Responsive behavior */
@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 576px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    /* make all tiles full width on narrow screens */
    .grid-span-1, .grid-span-2, .grid-span-3, .grid-span-4,
    .grid-span-5, .grid-span-6, .grid-span-7, .grid-span-8,
    .grid-span-9, .grid-span-10, .grid-span-11, .grid-span-12 {
        grid-column: span 1 !important;
    }
}