/**
 * Grid Collections
 *
 * Quick reference:
 * - This file defines small utility grid containers and placement helpers.
 * - We use CSS custom properties (variables) to configure columns, rows, and gutters.
 * - grid-area shorthand order is: row-start / column-start / row-end / column-end.
 *   Example: grid-area: 1 / 2 / 3 / 4 means:
 *     - start on row 1, column 2
 *     - end before row 3, column 4 (so it spans rows 1–2 and columns 2–3)
 */

/*
 * Generic grid container.
 * Usage:
 *   <div class="grid" style="--grid-cols: 1fr 2fr; --grid-rows: auto auto; --grid-column-gutter: 16px; --grid-row-gutter: 8px;">…</div>
 * If a gutter variable is not provided, it defaults to 0 via the var(, fallback) syntax.
 */
.grid {
    display: grid;
    /* Define columns/rows via CSS variables so different layouts can reuse this class */
    grid-template-columns: var(--grid-cols);
    grid-template-rows: var(--grid-rows);
    /* Gaps (aka gutters) are optional and default to 0 if not provided */
    grid-column-gap: var(--grid-column-gutter, 0);
    grid-row-gap: var(--grid-row-gutter, 0);
}

/**
 * Dashboard main layout preset.
 * - 2 columns: 240px sidebar + flexible main area
 * - 3 rows: 55px header, flexible content, 44px footer
 */
.main-layout-dashboard-grid {
    --grid-cols: 240px auto;
    --grid-rows: 55px auto 44px;
}
/**
 * Region helpers for the dashboard grid above.
 * grid-area: row-start / col-start / row-end / col-end
 *
 * Layout map (rows x cols):
 *   [1,1] [1,2]
 *   [2,1] [2,2]
 *   [3,1] [3,2]
 */
.top-grid { /* Header: spans top row across both columns */ grid-area: 1 / 1 / 2 / 3; }
.left-grid { /* Sidebar: middle row, first column */ grid-area: 2 / 1 / 3 / 2; }
.main-grid { /* Main content: middle row, second column */ grid-area: 2 / 2 / 3 / 3; }
.bottom-grid { /* Footer: bottom row across both columns */ grid-area: 3 / 1 / 4 / 3; }

/**
 * A 3x2 sub-grid used for small compositions.
 * - 3 equal columns
 * - 2 equal rows
 */
.sub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0;
}

/* First row placement helpers within .sub-grid */
.start-1-col { /* Row 1, Col 1 only */ grid-area: 1 / 1 / 2 / 2; }
.start-2-cols { /* Row 1–2, Col 1–2 (two columns wide, two rows tall) */ grid-area: 1 / 1 / 3 / 3; }
.middle-col { /* Row 1, Col 2 only */ grid-area: 1 / 2 / 2 / 3; }
.end-1-col { /* Row 1, Col 3 only */ grid-area: 1 / 3 / 2 / 4; }
.end-2-cols { /* Row 1, Cols 2–3 */ grid-area: 1 / 2 / 2 / 4; }
.all-cols { /* Row 1, Cols 1–3 (full width of first row) */ grid-area: 1 / 1 / 2 / 4; }

/* Second row placement helpers within .sub-grid */
.start-1-col-row-2 { /* Row 2, Col 1 only */ grid-area: 2 / 1 / 3 / 2; }
.middle-col-row-2 { /* Row 2, Col 2 only */ grid-area: 2 / 2 / 3 / 3; }

/* Multi-row/col spanning example: Row 1–2, Col 3 only */
.end-2-row-1-col { grid-area: 1 / 3 / 3 / 4;}


/**
 * Content grid: typical media/object + details layout
 * - 2 columns: fixed 80px (e.g., thumbnail/avatar) + flexible content
 */
.content-grid {
    display: grid;
    grid-template-columns: 80px auto;
    grid-column-gap: 0;
}


/*
 * Two-column preset: fluid left + fixed 229px right
 * - Uses base .grid variables
 * - Total horizontal gap is 24px
 * - A vertical separator line is drawn centered within the 24px gap
 *
 * Usage:
 *   <div class="grid grid-two-col-right-229">
 *     <div>…left content…</div>
 *     <div>…right content…</div>
 *   </div>
 */
.grid-two-col-right-229 {
    --grid-cols: auto 277px; /* 229px + 24px*2 gap */
    --grid-rows: auto;
    --grid-column-gutter: 0;
    --grid-row-gutter: 0;
    position: relative; /* enable the separator positioning */
}