/* ==========================================================================
   Dashboard tiles
   Scoped to .TilesGroup, which only the Dashboard view uses. The analytics
   views reuse the "Tile" class for their filter panels, so nothing here is
   keyed on .Tile alone.

   The framework lays these out with floats and inline percentage widths
   derived from piColumnSpan, so the overrides below need !important to take
   the layout over and drive it from CSS instead.
   ========================================================================== */

/* Let the tile group use the full width of the view instead of the
   one-third its piColumnSpan resolves to. */
.TilesGroup {
    width: 100% !important;
}

.TilesGroup > .WebCon_Inner {
    padding: 24px 20px;
}

/* Responsive card grid: cards fill the available width and reflow on
   narrower screens without fixed column spans. */
.TilesGroup .WebCon_Content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    height: auto !important;
    overflow: visible !important;
}

/* Neutralise the float layout so the grid controls placement. */
.TilesGroup .Tile {
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
    height: auto !important;
}

.TilesGroup .Tile > .WebCon_Inner {
    height: auto !important;
    min-height: 0;
}

/* --- The card ---------------------------------------------------------- */

/* Replaces the theme's fixed 126px box. Auto height stops longer titles
   such as "Rejected requests" from being clipped. */
.TilesGroup .Tile .WebCon_Sizer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    height: auto !important;
    min-height: 132px;
    margin: 0;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 42, 67, 0.04);
    color: #102a43;
    cursor: default;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

/* Colour variants in the markup would otherwise repaint the card. */
.TilesGroup .Tile.Light .WebCon_Sizer,
.TilesGroup .Tile.LightAlternate .WebCon_Sizer,
.TilesGroup .Tile.Dark .WebCon_Sizer,
.TilesGroup .Tile.DarkAlternate .WebCon_Sizer {
    background: #ffffff;
    color: #102a43;
}

/* --- Typography -------------------------------------------------------- */

/* The theme pushes these down with top:50px/54px to sit inside the fixed
   box; with a flex card that offset just causes overlap. */
.TilesGroup .Tile .Tile_Title {
    position: static;
    top: auto;
    display: block;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: #102a43;
    overflow: visible;
}

.TilesGroup .Tile .Tile_Subtitle {
    position: static;
    top: auto;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    /* Theme sets rgba(255,255,255,0.7), which is invisible on a white card. */
    color: #627d98;
    overflow: visible;
}

/* --- Interaction ------------------------------------------------------- */

/* Only the navigating tiles are interactive; the Welcome tile is not. */
.TilesGroup .Tile .WebCon_Sizer[data-ServerOnClick] {
    cursor: pointer;
}

.TilesGroup .Tile .WebCon_Sizer[data-ServerOnClick]:hover {
    border-color: #2563eb;
    box-shadow: 0 6px 16px rgba(16, 42, 67, 0.12);
    transform: translateY(-2px);
}

.TilesGroup .Tile .WebCon_Sizer[data-ServerOnClick]:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(16, 42, 67, 0.10);
}

/* The Welcome tile reads as a heading rather than an action. */
.TilesGroup .Tile:first-child .WebCon_Sizer {
    background: #f0f4f8;
    border-color: #d9e2ec;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .TilesGroup .Tile .WebCon_Sizer {
        transition: none;
    }
    .TilesGroup .Tile .WebCon_Sizer[data-ServerOnClick]:hover {
        transform: none;
    }
}