/* Dashboard tile grid system — 1x1 through 12x12 */

[class*="tile-"] {
    --cols: 1;
    --rows: 1;

    grid-column: span var(--cols);
    grid-row: span var(--rows);
    max-width: calc(var(--tile-max) * var(--cols) + var(--gap) * (var(--cols) - 1));
    max-height: calc(var(--tile-max) * var(--rows) + var(--gap) * (var(--rows) - 1));
    aspect-ratio: var(--cols) / var(--rows);

    background: #21252e;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    display: flex;
    flex-direction: column;
}

[class*="tile-"] h2 {
    color: #00aeef;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

[class*="tile-"] p {
    color: #b0b8c4;
    margin: 0.25rem 0;
}

[class*="tile-"] strong {
    color: #e0e0e0;
}

[class*="tile-"] .detail {
    font-size: 0.9rem;
    color: #808890;
}

/* Tile sizes: tile-{cols}x{rows}, 1-12 */
.tile-1x1 { --cols: 1; --rows: 1; }
.tile-2x1 { --cols: 2; --rows: 1; }
.tile-3x1 { --cols: 3; --rows: 1; }
.tile-4x1 { --cols: 4; --rows: 1; }
.tile-5x1 { --cols: 5; --rows: 1; }
.tile-6x1 { --cols: 6; --rows: 1; }
.tile-7x1 { --cols: 7; --rows: 1; }
.tile-8x1 { --cols: 8; --rows: 1; }
.tile-9x1 { --cols: 9; --rows: 1; }
.tile-10x1 { --cols: 10; --rows: 1; }
.tile-11x1 { --cols: 11; --rows: 1; }
.tile-12x1 { --cols: 12; --rows: 1; }
.tile-1x2 { --cols: 1; --rows: 2; }
.tile-2x2 { --cols: 2; --rows: 2; }
.tile-3x2 { --cols: 3; --rows: 2; }
.tile-4x2 { --cols: 4; --rows: 2; }
.tile-5x2 { --cols: 5; --rows: 2; }
.tile-6x2 { --cols: 6; --rows: 2; }
.tile-7x2 { --cols: 7; --rows: 2; }
.tile-8x2 { --cols: 8; --rows: 2; }
.tile-9x2 { --cols: 9; --rows: 2; }
.tile-10x2 { --cols: 10; --rows: 2; }
.tile-11x2 { --cols: 11; --rows: 2; }
.tile-12x2 { --cols: 12; --rows: 2; }
.tile-1x3 { --cols: 1; --rows: 3; }
.tile-2x3 { --cols: 2; --rows: 3; }
.tile-3x3 { --cols: 3; --rows: 3; }
.tile-4x3 { --cols: 4; --rows: 3; }
.tile-5x3 { --cols: 5; --rows: 3; }
.tile-6x3 { --cols: 6; --rows: 3; }
.tile-7x3 { --cols: 7; --rows: 3; }
.tile-8x3 { --cols: 8; --rows: 3; }
.tile-9x3 { --cols: 9; --rows: 3; }
.tile-10x3 { --cols: 10; --rows: 3; }
.tile-11x3 { --cols: 11; --rows: 3; }
.tile-12x3 { --cols: 12; --rows: 3; }
.tile-1x4 { --cols: 1; --rows: 4; }
.tile-2x4 { --cols: 2; --rows: 4; }
.tile-3x4 { --cols: 3; --rows: 4; }
.tile-4x4 { --cols: 4; --rows: 4; }
.tile-5x4 { --cols: 5; --rows: 4; }
.tile-6x4 { --cols: 6; --rows: 4; }
.tile-7x4 { --cols: 7; --rows: 4; }
.tile-8x4 { --cols: 8; --rows: 4; }
.tile-9x4 { --cols: 9; --rows: 4; }
.tile-10x4 { --cols: 10; --rows: 4; }
.tile-11x4 { --cols: 11; --rows: 4; }
.tile-12x4 { --cols: 12; --rows: 4; }
.tile-1x5 { --cols: 1; --rows: 5; }
.tile-2x5 { --cols: 2; --rows: 5; }
.tile-3x5 { --cols: 3; --rows: 5; }
.tile-4x5 { --cols: 4; --rows: 5; }
.tile-5x5 { --cols: 5; --rows: 5; }
.tile-6x5 { --cols: 6; --rows: 5; }
.tile-7x5 { --cols: 7; --rows: 5; }
.tile-8x5 { --cols: 8; --rows: 5; }
.tile-9x5 { --cols: 9; --rows: 5; }
.tile-10x5 { --cols: 10; --rows: 5; }
.tile-11x5 { --cols: 11; --rows: 5; }
.tile-12x5 { --cols: 12; --rows: 5; }
.tile-1x6 { --cols: 1; --rows: 6; }
.tile-2x6 { --cols: 2; --rows: 6; }
.tile-3x6 { --cols: 3; --rows: 6; }
.tile-4x6 { --cols: 4; --rows: 6; }
.tile-5x6 { --cols: 5; --rows: 6; }
.tile-6x6 { --cols: 6; --rows: 6; }
.tile-7x6 { --cols: 7; --rows: 6; }
.tile-8x6 { --cols: 8; --rows: 6; }
.tile-9x6 { --cols: 9; --rows: 6; }
.tile-10x6 { --cols: 10; --rows: 6; }
.tile-11x6 { --cols: 11; --rows: 6; }
.tile-12x6 { --cols: 12; --rows: 6; }
.tile-1x7 { --cols: 1; --rows: 7; }
.tile-2x7 { --cols: 2; --rows: 7; }
.tile-3x7 { --cols: 3; --rows: 7; }
.tile-4x7 { --cols: 4; --rows: 7; }
.tile-5x7 { --cols: 5; --rows: 7; }
.tile-6x7 { --cols: 6; --rows: 7; }
.tile-7x7 { --cols: 7; --rows: 7; }
.tile-8x7 { --cols: 8; --rows: 7; }
.tile-9x7 { --cols: 9; --rows: 7; }
.tile-10x7 { --cols: 10; --rows: 7; }
.tile-11x7 { --cols: 11; --rows: 7; }
.tile-12x7 { --cols: 12; --rows: 7; }
.tile-1x8 { --cols: 1; --rows: 8; }
.tile-2x8 { --cols: 2; --rows: 8; }
.tile-3x8 { --cols: 3; --rows: 8; }
.tile-4x8 { --cols: 4; --rows: 8; }
.tile-5x8 { --cols: 5; --rows: 8; }
.tile-6x8 { --cols: 6; --rows: 8; }
.tile-7x8 { --cols: 7; --rows: 8; }
.tile-8x8 { --cols: 8; --rows: 8; }
.tile-9x8 { --cols: 9; --rows: 8; }
.tile-10x8 { --cols: 10; --rows: 8; }
.tile-11x8 { --cols: 11; --rows: 8; }
.tile-12x8 { --cols: 12; --rows: 8; }
.tile-1x9 { --cols: 1; --rows: 9; }
.tile-2x9 { --cols: 2; --rows: 9; }
.tile-3x9 { --cols: 3; --rows: 9; }
.tile-4x9 { --cols: 4; --rows: 9; }
.tile-5x9 { --cols: 5; --rows: 9; }
.tile-6x9 { --cols: 6; --rows: 9; }
.tile-7x9 { --cols: 7; --rows: 9; }
.tile-8x9 { --cols: 8; --rows: 9; }
.tile-9x9 { --cols: 9; --rows: 9; }
.tile-10x9 { --cols: 10; --rows: 9; }
.tile-11x9 { --cols: 11; --rows: 9; }
.tile-12x9 { --cols: 12; --rows: 9; }
.tile-1x10 { --cols: 1; --rows: 10; }
.tile-2x10 { --cols: 2; --rows: 10; }
.tile-3x10 { --cols: 3; --rows: 10; }
.tile-4x10 { --cols: 4; --rows: 10; }
.tile-5x10 { --cols: 5; --rows: 10; }
.tile-6x10 { --cols: 6; --rows: 10; }
.tile-7x10 { --cols: 7; --rows: 10; }
.tile-8x10 { --cols: 8; --rows: 10; }
.tile-9x10 { --cols: 9; --rows: 10; }
.tile-10x10 { --cols: 10; --rows: 10; }
.tile-11x10 { --cols: 11; --rows: 10; }
.tile-12x10 { --cols: 12; --rows: 10; }
.tile-1x11 { --cols: 1; --rows: 11; }
.tile-2x11 { --cols: 2; --rows: 11; }
.tile-3x11 { --cols: 3; --rows: 11; }
.tile-4x11 { --cols: 4; --rows: 11; }
.tile-5x11 { --cols: 5; --rows: 11; }
.tile-6x11 { --cols: 6; --rows: 11; }
.tile-7x11 { --cols: 7; --rows: 11; }
.tile-8x11 { --cols: 8; --rows: 11; }
.tile-9x11 { --cols: 9; --rows: 11; }
.tile-10x11 { --cols: 10; --rows: 11; }
.tile-11x11 { --cols: 11; --rows: 11; }
.tile-12x11 { --cols: 12; --rows: 11; }
.tile-1x12 { --cols: 1; --rows: 12; }
.tile-2x12 { --cols: 2; --rows: 12; }
.tile-3x12 { --cols: 3; --rows: 12; }
.tile-4x12 { --cols: 4; --rows: 12; }
.tile-5x12 { --cols: 5; --rows: 12; }
.tile-6x12 { --cols: 6; --rows: 12; }
.tile-7x12 { --cols: 7; --rows: 12; }
.tile-8x12 { --cols: 8; --rows: 12; }
.tile-9x12 { --cols: 9; --rows: 12; }
.tile-10x12 { --cols: 10; --rows: 12; }
.tile-11x12 { --cols: 11; --rows: 12; }
.tile-12x12 { --cols: 12; --rows: 12; }