/**
 * Shared dashboard view styles — the cell chrome every layout engine's
 * section blade uses (freeform grid, rows, masonry), extracted from the
 * former inline block in sections/dashboard.blade.php so the three
 * blades never drift.
 */

/* Cells are full-height items; their widget fills the cell so spans
   translate to real height. Every cell gets the shared card chrome by
   default so all widgets look consistent — a widget that brings its own
   full-bleed card (e.g. a gradient hero, a stat tile) opts out via the
   `layout-cell--bare` class (see getAdditionalCSSClasses()). */
.layout-cell {
    display: flex;
    min-height: 0;
    background: var(--content-bg-colour, #fff);
    /* Border and shadow come from the Widgets -> Widget Cards brand group.
       All three ship blank and blank is not emitted, so these fallbacks are
       the card exactly as it drew before the settings existed. */
    border: var(--widget-border-width, 1px) solid
        var(--widget-border-colour, var(--content-border-colour, #e5e7eb));
    border-radius: 12px;
    box-shadow: var(--widget-shadow, none);
    overflow: hidden;
}
.layout-cell > * {
    flex: 1 1 auto;
    min-width: 0;
}

/* Self-chromed widgets supply their own card; the cell stays
   transparent, borderless AND shadowless so theirs shows through. The
   widget shadow, like the border, belongs to the card the widget draws
   inside (.widget-card-tile, .dashboard-stat), never to a bare cell —
   a raised shadow round a transparent cell drew a ghost rectangle. */
.layout-cell--bare,
.dashboard-cell--bare { /* back-compat alias for external widgets */
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

/* An intentional gap — an empty slot in a rows layout (or a
   permission-denied cell) that must keep the row's template shape
   without drawing a card. */
.layout-cell--gap {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

/* Stat tiles keep their own tile chrome (used in bare cells). They read the
   same Widgets -> Widget Cards brand group as .layout-cell, so a stat widget's
   tiles take the border and shadow a chromed cell would; the fallbacks are
   the hairline, shadowless tile as it always drew. */
.dashboard-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    background: var(--content-bg-colour, #fff);
    border: var(--widget-border-width, 1px) solid
        var(--widget-border-colour, var(--content-border-colour, #e5e7eb));
    box-shadow: var(--widget-shadow, none);
    border-radius: 12px;
    padding: 1.25rem;
}

/* ---- Freeform grid ---------------------------------------------- */

/* On narrow screens collapse the grid to a single column so
   placements stack instead of squashing. */
@media (max-width: 767px) {
    .layout-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
    }
    .layout-grid > .layout-cell {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}

/* ---- Rows engine ------------------------------------------------- */

.layout-rows {
    display: flex;
    flex-direction: column;
    gap: var(--widget-grid-gap, 1.5rem);
}
.layout-row {
    display: grid;
    /* One twelve-column grid for EVERY row, with cells spanning columns (the
       span is inline, from the row template's width). Rows used to size their
       own columns in fr units, which divides only the space left after the
       gaps — so a three-cell row and a two-cell row subtracted different
       numbers of gaps and their boundaries drifted half a gap apart. Sharing
       one grid means sharing one set of gap tracks, so cell edges line up
       between rows however many cells each holds. */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--widget-grid-gap, 1.5rem);
}

@media (max-width: 767px) {
    /* Each row stacks its cells; empty gaps vanish rather than
       leaving holes in the single column. */
    .layout-row {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }
    /* The template's span would overflow a single column. */
    .layout-row > .layout-cell {
        grid-column: auto !important;
    }
    .layout-row > .layout-cell--gap {
        display: none;
    }
}

/* ---- Masonry engine ---------------------------------------------- */

.layout-masonry {
    display: grid;
    gap: var(--widget-grid-gap, 1.5rem);
    align-items: start;
}
.layout-masonry-col {
    display: flex;
    flex-direction: column;
    gap: var(--widget-grid-gap, 1.5rem);
    min-width: 0;
}
/* Fixed-height masonry cells clip their widget rather than growing. */
.layout-masonry-col > .layout-cell {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    /* Columns stack in order — the masonry engine's mobile win. */
    .layout-masonry {
        grid-template-columns: 1fr !important;
    }
}