/*
 * dashboard.css — layout normalisation for widgets inside the customizable
 * dashboard's Gridstack grid. Loaded AFTER gridstack.min.css so it wins.
 *
 * Widgets are authored as standalone cards/tiles for re-use across the app.
 * Inside a dense Gridstack mosaic they need to (a) fill their whole cell so the
 * card background spans the tile, and (b) drop the big "floating" marketing
 * shadow + 3-D hover tilt that make adjacent cells visually collide. Every rule
 * is scoped under .grid-stack, so the same widgets rendered elsewhere (e.g. the
 * integrations dashboard, admin KPI rows) are untouched.
 */

/* Fill the cell. Gridstack positions .grid-stack-item-content absolutely to the
   cell box (minus the inter-item margin). Lay its single widget child out as a
   stretching column so the card grows to the full cell height instead of
   shrink-wrapping its content (which left the cell background showing — most
   visible on the Glucose tile). */
.grid-stack .grid-stack-item-content {
    display: flex;
    flex-direction: column;
    /* Gridstack's default is overflow-y:auto, which puts a scrollbar on any tile
       whose content is a hair taller than its cell (most visible on the Weight /
       Sleep / Recent-activity tiles). Tiles are sized to fit their cell, so clip
       instead of scroll — no stray scrollbars in the mosaic. */
    overflow: hidden;
}

/* The widget root (a MudCard / MudPaper / wrapper div) stretches to fill. The
   edit-mode gear/close buttons are excluded: they are position:absolute, so
   flex:1 is moot, but width:100% would still stretch them across the tile. */
.grid-stack .grid-stack-item-content > *:not(.mud-icon-button) {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* Inner card/paper surfaces fill the stretched root and shed any stray margin
   so the rounded background reaches every edge of the tile. */
.grid-stack .grid-stack-item-content .mud-card,
.grid-stack .grid-stack-item-content .mud-paper {
    height: 100%;
    margin: 0;
}

/* Soften the floating shadow inside the grid. The full marketing shadow (up to
   48px spread) bleeds well past the inter-cell gap and reads as overlap. */
.grid-stack .x-elevated {
    box-shadow:
        0 1px 2px rgba(15, 9, 38, 0.08),
        0 6px 16px -8px rgba(42, 31, 69, 0.18);
}

/* Lift-only hover. The standalone-tile tilt (perspective + rotateX) rotates a
   card into its neighbour's space, which looks like overlap in a dense grid. */
.grid-stack .x-tilt:hover {
    transform: translateY(-2px);
}

/* Defensive: a widget authored as a MudGrid item (MudItem) but rendered
   straight into a cell must not keep its responsive ~33%/padding constraints. */
.grid-stack .grid-stack-item-content > .mud-grid-item {
    flex-basis: 100%;
    max-width: 100%;
    padding: 0;
}