/**
 * COEUS DESIGN SYSTEM V2 - LAYOUT UTILITIES
 *
 * PURPOSE:
 * Flexbox and Grid layout utilities
 * Consolidates flexbox.css and layout.css into single file
 *
 * INCLUDES:
 * - Flexbox utilities (display, direction, wrap, alignment)
 * - Grid utilities (columns, rows, placement)
 * - Common layout patterns (center, between, around)
 * - Positioning utilities (relative, absolute, fixed, sticky)
 *
 * DEPENDENCIES: None
 * VERSION: 2.0.0
 * CREATED: 2025-11-18
 */

/* ============================================ */
/*                   DISPLAY                    */
/* ============================================ */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.hidden { display: none; }

/* ============================================ */
/*              FLEX DIRECTION                  */
/* ============================================ */

.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* ============================================ */
/*                 FLEX WRAP                    */
/* ============================================ */

.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

/* ============================================ */
/*               FLEX GROW / SHRINK             */
/* ============================================ */

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

.flex-grow-0 { flex-grow: 0; }
.flex-grow { flex-grow: 1; }

.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink { flex-shrink: 1; }

/* ============================================ */
/*            JUSTIFY CONTENT (Main Axis)       */
/* ============================================ */

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.justify-stretch { justify-content: stretch; }

/* ============================================ */
/*            ALIGN ITEMS (Cross Axis)          */
/* ============================================ */

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* ============================================ */
/*              ALIGN CONTENT                   */
/* ============================================ */

.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-evenly { align-content: space-evenly; }
.content-stretch { align-content: stretch; }

/* ============================================ */
/*                ALIGN SELF                    */
/* ============================================ */

.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.self-baseline { align-self: baseline; }

/* ============================================ */
/*            COMMON FLEX PATTERNS              */
/* ============================================ */

/* Horizontal center (main and cross axis) */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Space between with vertical center */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Flex start with vertical center */
.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Flex end with vertical center */
.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ============================================ */
/*              GRID TEMPLATE COLUMNS           */
/* ============================================ */

.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.grid-cols-none { grid-template-columns: none; }

/* ============================================ */
/*              GRID TEMPLATE ROWS              */
/* ============================================ */

.grid-rows-1  { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2  { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3  { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4  { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5  { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6  { grid-template-rows: repeat(6, minmax(0, 1fr)); }

.grid-rows-none { grid-template-rows: none; }

/* ============================================ */
/*              GRID AUTO FLOW                  */
/* ============================================ */

.grid-flow-row { grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-row-dense { grid-auto-flow: row dense; }
.grid-flow-col-dense { grid-auto-flow: column dense; }

/* ============================================ */
/*            GRID AUTO COLUMNS / ROWS          */
/* ============================================ */

.auto-cols-auto { grid-auto-columns: auto; }
.auto-cols-min  { grid-auto-columns: min-content; }
.auto-cols-max  { grid-auto-columns: max-content; }
.auto-cols-fr   { grid-auto-columns: minmax(0, 1fr); }

.auto-rows-auto { grid-auto-rows: auto; }
.auto-rows-min  { grid-auto-rows: min-content; }
.auto-rows-max  { grid-auto-rows: max-content; }
.auto-rows-fr   { grid-auto-rows: minmax(0, 1fr)); }

/* ============================================ */
/*              GRID COLUMN SPAN                */
/* ============================================ */

.col-auto { grid-column: auto; }
.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-4  { grid-column: span 4 / span 4; }
.col-span-5  { grid-column: span 5 / span 5; }
.col-span-6  { grid-column: span 6 / span 6; }
.col-span-7  { grid-column: span 7 / span 7; }
.col-span-8  { grid-column: span 8 / span 8; }
.col-span-9  { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

/* Grid column start/end */
.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-auto { grid-column-start: auto; }

.col-end-1  { grid-column-end: 1; }
.col-end-2  { grid-column-end: 2; }
.col-end-3  { grid-column-end: 3; }
.col-end-4  { grid-column-end: 4; }
.col-end-5  { grid-column-end: 5; }
.col-end-6  { grid-column-end: 6; }
.col-end-7  { grid-column-end: 7; }
.col-end-auto { grid-column-end: auto; }

/* ============================================ */
/*                GRID ROW SPAN                 */
/* ============================================ */

.row-auto { grid-row: auto; }
.row-span-1  { grid-row: span 1 / span 1; }
.row-span-2  { grid-row: span 2 / span 2; }
.row-span-3  { grid-row: span 3 / span 3; }
.row-span-4  { grid-row: span 4 / span 4; }
.row-span-5  { grid-row: span 5 / span 5; }
.row-span-6  { grid-row: span 6 / span 6; }
.row-span-full { grid-row: 1 / -1; }

/* Grid row start/end */
.row-start-1  { grid-row-start: 1; }
.row-start-2  { grid-row-start: 2; }
.row-start-3  { grid-row-start: 3; }
.row-start-4  { grid-row-start: 4; }
.row-start-auto { grid-row-start: auto; }

.row-end-1  { grid-row-end: 1; }
.row-end-2  { grid-row-end: 2; }
.row-end-3  { grid-row-end: 3; }
.row-end-4  { grid-row-end: 4; }
.row-end-auto { grid-row-end: auto; }

/* ============================================ */
/*                 PLACE CONTENT                */
/* ============================================ */

.place-content-center  { place-content: center; }
.place-content-start   { place-content: start; }
.place-content-end     { place-content: end; }
.place-content-between { place-content: space-between; }
.place-content-around  { place-content: space-around; }
.place-content-evenly  { place-content: space-evenly; }
.place-content-stretch { place-content: stretch; }

/* ============================================ */
/*                  PLACE ITEMS                 */
/* ============================================ */

.place-items-start    { place-items: start; }
.place-items-end      { place-items: end; }
.place-items-center   { place-items: center; }
.place-items-stretch  { place-items: stretch; }

/* ============================================ */
/*                  PLACE SELF                  */
/* ============================================ */

.place-self-auto    { place-self: auto; }
.place-self-start   { place-self: start; }
.place-self-end     { place-self: end; }
.place-self-center  { place-self: center; }
.place-self-stretch { place-self: stretch; }

/* ============================================ */
/*                  POSITIONING                 */
/* ============================================ */

.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

/* ============================================ */
/*              POSITION UTILITIES              */
/* ============================================ */

/* Inset (all sides) */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-auto { top: auto; right: auto; bottom: auto; left: auto; }

/* Inset X (horizontal) */
.inset-x-0 { left: 0; right: 0; }
.inset-x-auto { left: auto; right: auto; }

/* Inset Y (vertical) */
.inset-y-0 { top: 0; bottom: 0; }
.inset-y-auto { top: auto; bottom: auto; }

/* Individual sides */
.top-0 { top: 0; }
.top-auto { top: auto; }
.right-0 { right: 0; }
.right-auto { right: auto; }
.bottom-0 { bottom: 0; }
.bottom-auto { bottom: auto; }
.left-0 { left: 0; }
.left-auto { left: auto; }

/* Common positioning patterns */
.top-1\/2 { top: 50%; }
.left-1\/2 { left: 50%; }
.top-full { top: 100%; }
.left-full { left: 100%; }

/* ============================================ */
/*                    ORDER                     */
/* ============================================ */

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { order: 0; }

/* ============================================ */
/*                    Z-INDEX                   */
/* ============================================ */

.z-0  { z-index: 0; }
.z-10 { z-index: var(--z-dropdown); }
.z-20 { z-index: var(--z-sticky); }
.z-30 { z-index: var(--z-fixed); }
.z-40 { z-index: var(--z-modal-backdrop); }
.z-50 { z-index: var(--z-modal); }
.z-60 { z-index: var(--z-popover); }
.z-70 { z-index: var(--z-toast); }
.z-80 { z-index: var(--z-tooltip); }
.z-auto { z-index: auto; }

/* Legacy aliases */
.z-base           { z-index: var(--z-base); }
.z-dropdown       { z-index: var(--z-dropdown); }
.z-sticky         { z-index: var(--z-sticky); }
.z-fixed          { z-index: var(--z-fixed); }
.z-modal-backdrop { z-index: var(--z-modal-backdrop); }
.z-modal          { z-index: var(--z-modal); }
.z-popover        { z-index: var(--z-popover); }
.z-toast          { z-index: var(--z-toast); }
.z-tooltip        { z-index: var(--z-tooltip); }

/* ============================================ */
/*                  OVERFLOW                    */
/* ============================================ */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }

/* ============================================ */
/*                 VISIBILITY                   */
/* ============================================ */

.visible { visibility: visible; }
.invisible { visibility: hidden; }
.collapse { visibility: collapse; }