/* layout.css — container, grid, flex, spacing, and display utilities.
   Token-backed modern CSS replacing Bootstrap's grid + utilities.
   Uses Bootstrap-compatible class names for utilities to avoid churn;
   semantic .grid / .grid-cols-* classes replace .row / .col-* in markup. */

/* ============================================================
   Container
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container-fluid {
    width: 100%;
    padding-inline: var(--container-pad);
}

/* ============================================================
   Semantic grid — replaces .row / .col-*
   Mobile: single column. Breakpoint modifiers expand.
   ============================================================ */

.grid {
    display: grid;
    gap: var(--sp-5);
}

.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

.grid-auto-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Unequal hero split: 2fr content / 1fr aside */
.grid-hero {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid-cols-md-1 { grid-template-columns: 1fr; }
    .grid-cols-md-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-md-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-md-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-hero { grid-template-columns: 2fr 1fr; }
}

@media (min-width: 992px) {
    .grid-cols-lg-1 { grid-template-columns: 1fr; }
    .grid-cols-lg-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-lg-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-lg-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-cols-lg-6 { grid-template-columns: repeat(6, 1fr); }
}

.grid-gap-0 { gap: 0; }
.grid-gap-sm { gap: var(--sp-3); }
.grid-gap-md { gap: var(--sp-5); }
.grid-gap-lg { gap: var(--sp-8); }

/* ============================================================
   Bootstrap row/col compat — kept for untouched views
   (MenuBoard, Order/*, Account/*). New markup should use .grid instead.
   ============================================================ */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--sp-4) * -0.5);
}

.row > [class*="col-"], .row > .col {
    padding-inline: calc(var(--sp-4) * 0.5);
    width: 100%;
}

.col   { flex: 1 0 0; }
.col-1  { flex: 0 0 auto; width: 8.3333%; }
.col-2  { flex: 0 0 auto; width: 16.6667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.3333%; }
.col-5  { flex: 0 0 auto; width: 41.6667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.3333%; }
.col-8  { flex: 0 0 auto; width: 66.6667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

.row-cols-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-3 > * { flex: 0 0 auto; width: 33.3333%; }
.row-cols-4 > * { flex: 0 0 auto; width: 25%; }

@media (min-width: 576px) {
    .col-sm-6 { width: 50%; }
}

@media (min-width: 768px) {
    .col-md-1  { flex: 0 0 auto; width: 8.3333%; }
    .col-md-2  { flex: 0 0 auto; width: 16.6667%; }
    .col-md-3  { flex: 0 0 auto; width: 25%; }
    .col-md-4  { flex: 0 0 auto; width: 33.3333%; }
    .col-md-5  { flex: 0 0 auto; width: 41.6667%; }
    .col-md-6  { flex: 0 0 auto; width: 50%; }
    .col-md-7  { flex: 0 0 auto; width: 58.3333%; }
    .col-md-8  { flex: 0 0 auto; width: 66.6667%; }
    .col-md-9  { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.3333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.6667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }

    .row-cols-md-1 > * { width: 100%; }
    .row-cols-md-2 > * { width: 50%; }
    .row-cols-md-3 > * { width: 33.3333%; }
}

@media (min-width: 992px) {
    .col-lg-1  { flex: 0 0 auto; width: 8.3333%; }
    .col-lg-2  { flex: 0 0 auto; width: 16.6667%; }
    .col-lg-3  { flex: 0 0 auto; width: 25%; }
    .col-lg-4  { flex: 0 0 auto; width: 33.3333%; }
    .col-lg-5  { flex: 0 0 auto; width: 41.6667%; }
    .col-lg-6  { flex: 0 0 auto; width: 50%; }
    .col-lg-7  { flex: 0 0 auto; width: 58.3333%; }
    .col-lg-8  { flex: 0 0 auto; width: 66.6667%; }
    .col-lg-9  { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.3333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.6667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }

    .row-cols-lg-1 > * { width: 100%; }
    .row-cols-lg-2 > * { width: 50%; }
    .row-cols-lg-3 > * { width: 33.3333%; }
    .row-cols-lg-4 > * { width: 25%; }
}

/* Row gutter modifiers */
.g-0 { margin-inline: 0; }
.g-0 > * { padding-inline: 0; }
.g-4.row > * { padding-block: var(--sp-3); }

/* Legacy grid item that spans the full width of a grid */
.grid-col-full { grid-column: 1 / -1; }

/* ============================================================
   Spacing — matches Bootstrap 5 rem scale so legacy markup behaves.
   0=0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem
   ============================================================ */

:root {
    --bs-0: 0;
    --bs-1: 0.25rem;
    --bs-2: 0.5rem;
    --bs-3: 1rem;
    --bs-4: 1.5rem;
    --bs-5: 3rem;
}

/* Margin — all sides */
.m-0 { margin: var(--bs-0); }
.m-1 { margin: var(--bs-1); }
.m-2 { margin: var(--bs-2); }
.m-3 { margin: var(--bs-3); }
.m-4 { margin: var(--bs-4); }
.m-5 { margin: var(--bs-5); }
.m-auto { margin: auto; }

/* Margin top */
.mt-0 { margin-top: var(--bs-0); } .mt-1 { margin-top: var(--bs-1); }
.mt-2 { margin-top: var(--bs-2); } .mt-3 { margin-top: var(--bs-3); }
.mt-4 { margin-top: var(--bs-4); } .mt-5 { margin-top: var(--bs-5); }
.mt-auto { margin-top: auto; }

/* Margin bottom */
.mb-0 { margin-bottom: var(--bs-0); } .mb-1 { margin-bottom: var(--bs-1); }
.mb-2 { margin-bottom: var(--bs-2); } .mb-3 { margin-bottom: var(--bs-3); }
.mb-4 { margin-bottom: var(--bs-4); } .mb-5 { margin-bottom: var(--bs-5); }
.mb-auto { margin-bottom: auto; }

/* Margin start (inline-start, LTR = left) */
.ms-0 { margin-inline-start: var(--bs-0); } .ms-1 { margin-inline-start: var(--bs-1); }
.ms-2 { margin-inline-start: var(--bs-2); } .ms-3 { margin-inline-start: var(--bs-3); }
.ms-4 { margin-inline-start: var(--bs-4); } .ms-5 { margin-inline-start: var(--bs-5); }
.ms-auto { margin-inline-start: auto; }

/* Margin end (inline-end, LTR = right) */
.me-0 { margin-inline-end: var(--bs-0); } .me-1 { margin-inline-end: var(--bs-1); }
.me-2 { margin-inline-end: var(--bs-2); } .me-3 { margin-inline-end: var(--bs-3); }
.me-4 { margin-inline-end: var(--bs-4); } .me-5 { margin-inline-end: var(--bs-5); }
.me-auto { margin-inline-end: auto; }

/* Margin x / y */
.mx-0 { margin-inline: var(--bs-0); } .mx-1 { margin-inline: var(--bs-1); }
.mx-2 { margin-inline: var(--bs-2); } .mx-3 { margin-inline: var(--bs-3); }
.mx-4 { margin-inline: var(--bs-4); } .mx-5 { margin-inline: var(--bs-5); }
.mx-auto { margin-inline: auto; }

.my-0 { margin-block: var(--bs-0); } .my-1 { margin-block: var(--bs-1); }
.my-2 { margin-block: var(--bs-2); } .my-3 { margin-block: var(--bs-3); }
.my-4 { margin-block: var(--bs-4); } .my-5 { margin-block: var(--bs-5); }
.my-auto { margin-block: auto; }

/* Padding */
.p-0 { padding: var(--bs-0); } .p-1 { padding: var(--bs-1); }
.p-2 { padding: var(--bs-2); } .p-3 { padding: var(--bs-3); }
.p-4 { padding: var(--bs-4); } .p-5 { padding: var(--bs-5); }

.pt-0 { padding-top: var(--bs-0); } .pt-1 { padding-top: var(--bs-1); }
.pt-2 { padding-top: var(--bs-2); } .pt-3 { padding-top: var(--bs-3); }
.pt-4 { padding-top: var(--bs-4); } .pt-5 { padding-top: var(--bs-5); }

.pb-0 { padding-bottom: var(--bs-0); } .pb-1 { padding-bottom: var(--bs-1); }
.pb-2 { padding-bottom: var(--bs-2); } .pb-3 { padding-bottom: var(--bs-3); }
.pb-4 { padding-bottom: var(--bs-4); } .pb-5 { padding-bottom: var(--bs-5); }

.ps-0 { padding-inline-start: var(--bs-0); } .ps-1 { padding-inline-start: var(--bs-1); }
.ps-2 { padding-inline-start: var(--bs-2); } .ps-3 { padding-inline-start: var(--bs-3); }
.ps-4 { padding-inline-start: var(--bs-4); } .ps-5 { padding-inline-start: var(--bs-5); }

.pe-0 { padding-inline-end: var(--bs-0); } .pe-1 { padding-inline-end: var(--bs-1); }
.pe-2 { padding-inline-end: var(--bs-2); } .pe-3 { padding-inline-end: var(--bs-3); }
.pe-4 { padding-inline-end: var(--bs-4); } .pe-5 { padding-inline-end: var(--bs-5); }

.px-0 { padding-inline: var(--bs-0); } .px-1 { padding-inline: var(--bs-1); }
.px-2 { padding-inline: var(--bs-2); } .px-3 { padding-inline: var(--bs-3); }
.px-4 { padding-inline: var(--bs-4); } .px-5 { padding-inline: var(--bs-5); }

.py-0 { padding-block: var(--bs-0); } .py-1 { padding-block: var(--bs-1); }
.py-2 { padding-block: var(--bs-2); } .py-3 { padding-block: var(--bs-3); }
.py-4 { padding-block: var(--bs-4); } .py-5 { padding-block: var(--bs-5); }

/* Responsive spacing — only the ones the codebase actually uses */
@media (min-width: 768px) {
    .mb-md-0 { margin-bottom: 0; }
    .mb-md-2 { margin-bottom: var(--bs-2); }
    .pb-md-2 { padding-bottom: var(--bs-2); }
    .mt-md-0 { margin-top: 0; }
}

/* Legacy template spacings (style.css page-section utilities) */
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-40 { padding-top: 40px; }
.pr-10 { padding-right: 10px; }
.mb-20 { margin-bottom: 20px; }
.mt-15 { margin-top: 15px; }

/* ============================================================
   Display
   ============================================================ */

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

@media (min-width: 768px) {
    .d-md-none   { display: none; }
    .d-md-block  { display: block; }
    .d-md-flex   { display: flex; }
    .d-md-inline { display: inline; }
}

@media (min-width: 992px) {
    .d-lg-none   { display: none; }
    .d-lg-block  { display: block; }
    .d-lg-flex   { display: flex; }
}

/* ============================================================
   Flex
   ============================================================ */

.flex-row         { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column      { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-wrap        { flex-wrap: wrap; }
.flex-nowrap      { flex-wrap: nowrap; }
.flex-grow-0      { flex-grow: 0; }
.flex-grow-1      { flex-grow: 1; }
.flex-shrink-0    { flex-shrink: 0; }
.flex-shrink-1    { flex-shrink: 1; }
.flex-fill        { flex: 1 1 auto; }

@media (min-width: 768px) {
    .flex-md-row    { flex-direction: row; }
    .flex-md-column { flex-direction: column; }
}

@media (min-width: 992px) {
    .flex-lg-row    { flex-direction: row; }
    .flex-lg-column { flex-direction: column; }
}

/* Align / justify */
.align-items-start    { align-items: flex-start; }
.align-items-end      { align-items: flex-end; }
.align-items-center   { align-items: center; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch  { align-items: stretch; }

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

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

/* ============================================================
   Sizing
   ============================================================ */

.w-100 { width: 100%; }
.w-75  { width: 75%; }
.w-50  { width: 50%; }
.w-25  { width: 25%; }
.w-auto { width: auto; }
.h-100 { height: 100%; }
.h-auto { height: auto; }

/* ============================================================
   Text
   ============================================================ */

.text-start   { text-align: start; }
.text-end     { text-align: end; }
.text-center  { text-align: center; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-muted   { color: color-mix(in oklch, var(--stone) 70%, transparent); }
.text-shadow  { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }

.fst-italic   { font-style: italic; }
.fw-normal    { font-weight: 400; }
.fw-medium    { font-weight: 500; }
.fw-semibold  { font-weight: 600; }
.fw-bold      { font-weight: 700; }
.small        { font-size: 0.875em; }

@media (min-width: 992px) {
    .text-lg-end    { text-align: end; }
    .text-lg-start  { text-align: start; }
    .text-lg-center { text-align: center; }
}

/* ============================================================
   Position + float (legacy head-info uses these)
   ============================================================ */

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

.float-start { float: inline-start; }
.float-end   { float: inline-end; }
.float-none  { float: none; }

/* ============================================================
   Images
   ============================================================ */

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   Lists
   ============================================================ */

.list-inline {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: 0;
}

.list-inline-item {
    display: inline-block;
}

/* ============================================================
   Visibility
   ============================================================ */

.visible   { visibility: visible; }
.invisible { visibility: hidden; }
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* ============================================================
   Badges (minimal Bootstrap replacement for menu item "New!")
   ============================================================ */

.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bg-success { background: #2d7a3f; color: var(--cream); }
.bg-danger  { background: var(--ember); color: var(--cream); }

/* ============================================================
   Clearfix (legacy template)
   ============================================================ */

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}