/* ========================================================
   RESPONSIVE GRID & LAYOUT SYSTEM
   Mobile-first approach with CSS Grid, Flexbox, and Container Queries
   ======================================================== */

/* ========================================================
   BREAKPOINT VARIABLES
   ======================================================== */

:root {
  /* Breakpoints (mobile-first) */
  --bp-sm: 640px;      /* Tablet: 640px+ */
  --bp-md: 768px;      /* Desktop: 768px+ */
  --bp-lg: 1024px;     /* Wide desktop: 1024px+ */
  --bp-xl: 1280px;     /* Extra wide: 1280px+ */

  /* Container sizes */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-2xl: 1320px;

  /* Gap/spacing utilities */
  --gap-0: 0;
  --gap-1: 0.5rem;
  --gap-2: 1rem;
  --gap-3: 1.5rem;
  --gap-4: 2rem;
  --gap-5: 2.5rem;
  --gap-6: 3rem;
}

/* ========================================================
   CONTAINER COMPONENT
   ======================================================== */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

/* Mobile (default, no max-width) */
.container {
  max-width: 100%;
}

/* Tablet (640px+) */
@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}

/* Desktop (768px+) */
@media (min-width: 768px) {
  .container {
    max-width: var(--container-lg);
  }
}

/* Wide Desktop (1024px+) */
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Extra Wide (1280px+) */
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-2xl);
  }
}

/* Fluid container (no max-width) */
.container-fluid {
  width: 100%;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  margin-left: auto;
  margin-right: auto;
}

/* ========================================================
   GRID SYSTEM
   ======================================================== */

.grid {
  display: grid;
  gap: var(--gap-3);
  width: 100%;
}

/* Mobile: 1 column (default) */
.grid {
  grid-template-columns: 1fr;
}

/* ---- THE GRID/FLEX ITEM MINIMUM (v2.7.0) ----
   A grid or flex ITEM defaults to `min-width: auto`, which resolves to its
   MIN-CONTENT size. The item then refuses to shrink below its content
   however narrow its track is, and one long unbroken string — a batch ID, a
   species name, a "Rs. 1,234,567.00" — pushes the whole row wider than the
   screen and the entire page scrolls sideways.

   ⚠ THIS USED TO LIVE IN layout/mobile.css INSIDE `@media (max-width:
   1024px)`, AND THAT CAP WAS A BUG. `min-width: auto` is a property of CSS
   Grid, not of small screens, and the cap switched the guard off in exactly
   the band where templates/entry_form.html's 2:1 split had not started
   either — that page reaches three columns at `-xl` (1280px). Between
   1025px and 1279px the Sawn Timber order form's column was therefore a
   `1fr` track with an auto minimum, and its min-content is a 26-column
   table.

   Measured in a browser at a 1,100px viewport, before this moved:

       .grid (container)          760px    correct
       .col-span-2-xl (item)     2093px    <- blown out to min-content
       .panel                    2093px
       .sawn-order (form)        2035px
       .fieldset-group           2031px
       .sawn-grid-frame          1989px    overflow-x:auto that CANNOT fire —
       #sawn-order-grid          1987px       already as wide as its content
       document scrollWidth      2393px    in a 1,100px window

   The frame's `overflow-x: auto` is powerless there for the same reason the
   fieldset quirk made it powerless in v2.6.0 (see .fieldset-group in
   layout/main.css): a scroll container already sized to its content has
   nothing left to scroll. The grid ran 1,281px past its own panel and over
   the Recent Records column, which stacks below the form at that width.
   1025-1279px is a landscape tablet and a small laptop, which is why this
   was seen on real hardware and not at 1440px.

   Unscoping it cannot widen anything: `min-width: 0` only ever PERMITS an
   item to shrink. Every item already fitting its track is unaffected; the
   only ones that move are those that were overflowing. Verified panel by
   panel at 1440px, 1100px and 390px.

   It is HERE and not in mobile.css because mobile.css guarantees that
   nothing in it outside a max-width query can reach a desktop, and
   test_mobile_css_rules_are_all_scoped_to_a_max_width enforces that. A
   statement about how CSS Grid sizes its items belongs beside the grid. */
.grid > *,
.flex > * {
  min-width: 0;
}

/* Tablet breakpoint (640px+) */
@media (min-width: 640px) {
  /* Default 2-column on tablet */
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* Desktop breakpoint (768px+) */
@media (min-width: 768px) {
  /* Default 3-column on desktop */
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* Wide Desktop (1024px+) */
@media (min-width: 1024px) {
  .grid-cols-1-lg { grid-template-columns: 1fr; }
  .grid-cols-2-lg { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3-lg { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-4-lg { grid-template-columns: repeat(4, 1fr); }
  .grid-cols-6-lg { grid-template-columns: repeat(6, 1fr); }
  .grid-cols-12-lg { grid-template-columns: repeat(12, 1fr); }
}

/* Extra Wide (1280px+)
   ---------------------------------------------------------------------
   These were MISSING. templates/entry_form.html has always been written as
   `grid grid-cols-1-lg grid-cols-3-xl` with a `col-span-2-xl` form pane
   and a recent-records sidebar — but with no -xl classes defined, the
   page silently collapsed to a single column at every width, and the
   "Recent Records" panel dropped below the form instead of sitting beside
   it. Defining them makes the page render as it was authored. */
@media (min-width: 1280px) {
  .grid-cols-1-xl { grid-template-columns: 1fr; }
  .grid-cols-2-xl { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3-xl { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-4-xl { grid-template-columns: repeat(4, 1fr); }
  .grid-cols-6-xl { grid-template-columns: repeat(6, 1fr); }
  .grid-cols-12-xl { grid-template-columns: repeat(12, 1fr); }

  .col-span-1-xl { grid-column: span 1; }
  .col-span-2-xl { grid-column: span 2; }
  .col-span-3-xl { grid-column: span 3; }
  .col-span-4-xl { grid-column: span 4; }
  .col-span-6-xl { grid-column: span 6; }
  .col-span-8-xl { grid-column: span 8; }
  .col-span-12-xl { grid-column: span 12; }
}

/* Explicit, unscoped column counts. Defined after the breakpoint blocks above
   so that an explicit .grid-cols-N always wins over the default per-breakpoint
   column count set on .grid, regardless of viewport width. */
.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);
}

/* ========================================================
   GAP UTILITIES
   ======================================================== */

.gap-0 { gap: var(--gap-0); }
.gap-1 { gap: var(--gap-1); }
.gap-2 { gap: var(--gap-2); }
.gap-3 { gap: var(--gap-3); }
.gap-4 { gap: var(--gap-4); }
.gap-5 { gap: var(--gap-5); }
.gap-6 { gap: var(--gap-6); }

/* Column gap only */
.gap-x-0 { column-gap: var(--gap-0); }
.gap-x-1 { column-gap: var(--gap-1); }
.gap-x-2 { column-gap: var(--gap-2); }
.gap-x-3 { column-gap: var(--gap-3); }
.gap-x-4 { column-gap: var(--gap-4); }
.gap-x-5 { column-gap: var(--gap-5); }
.gap-x-6 { column-gap: var(--gap-6); }

/* Row gap only */
.gap-y-0 { row-gap: var(--gap-0); }
.gap-y-1 { row-gap: var(--gap-1); }
.gap-y-2 { row-gap: var(--gap-2); }
.gap-y-3 { row-gap: var(--gap-3); }
.gap-y-4 { row-gap: var(--gap-4); }
.gap-y-5 { row-gap: var(--gap-5); }
.gap-y-6 { row-gap: var(--gap-6); }

/* ========================================================
   FLEXBOX LAYOUT
   ======================================================== */

.flex {
  display: flex;
}

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

.flex-row {
  flex-direction: row;
}

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

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

/* Responsive flex-direction / alignment (matches the -sm/-md/-lg suffix
   convention used elsewhere in this file; this codebase does not use
   Tailwind's colon-prefixed variant syntax like `md:flex-row`). */
@media (min-width: 768px) {
  .flex-row-md { flex-direction: row; }
  .items-center-md { align-items: center; }
}

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

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

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

/* Flex grow/shrink */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

/* ========================================================
   COLUMN UTILITIES
   ======================================================== */

.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-6 { grid-column: span 6; }
.col-span-12 { grid-column: span 12; }

/* Responsive column spans */
@media (min-width: 768px) {
  .col-span-1-md { grid-column: span 1; }
  .col-span-2-md { grid-column: span 2; }
  .col-span-3-md { grid-column: span 3; }
  .col-span-4-md { grid-column: span 4; }
  .col-span-6-md { grid-column: span 6; }
  .col-span-8-md { grid-column: span 8; }
  .col-span-12-md { grid-column: span 12; }
}

/* ========================================================
   PADDING & MARGIN UTILITIES
   ======================================================== */

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

/* Padding X (horizontal) */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }

/* Padding Y (vertical) */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* Margin
   NOTE: `.m-0` is intentionally NOT defined here. It lives in
   base/utilities.css with `!important`, which is load-bearing (it has to
   beat the heading margins set in base/typography.css). Two competing
   definitions made which-one-wins depend on <link> order. */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }

/* Margin X (horizontal) */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Y (vertical) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }

/* ========================================================
   WIDTH & HEIGHT UTILITIES
   ======================================================== */

.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-auto { width: auto; }
.w-1/2 { width: 50%; }
.w-1/3 { width: 33.333%; }
.w-2/3 { width: 66.666%; }
.w-1/4 { width: 25%; }
.w-3/4 { width: 75%; }

.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

/* ========================================================
   POSITION & DISPLAY UTILITIES
   ======================================================== */

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

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
/* NOTE: `.hidden` is intentionally NOT defined here. It lives in
   base/utilities.css with `!important`, which is load-bearing: it must beat
   `.form-group { display: flex }` from components/forms.css, which is linked
   after this file. A non-important `.hidden` here would have left every
   conditional "Other (Specify)" field in the entry forms permanently
   visible if utilities.css were ever reordered. */

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

/* Hide on mobile, show on tablet+ */
.hidden-mobile {
  display: none;
}

@media (min-width: 640px) {
  .hidden-mobile {
    display: block;
  }
}

/* Show on mobile, hide on tablet+ */
.hidden-desktop {
  display: block;
}

@media (min-width: 768px) {
  .hidden-desktop {
    display: none;
  }
}

/* Hide on mobile, show on desktop+ */
.hidden-tablet {
  display: none;
}

@media (min-width: 768px) {
  .hidden-tablet {
    display: block;
  }
}

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

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ========================================================
   RESPONSIVE WRAPPER (For responsive tables/content)
   ======================================================== */

.responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.responsive-wrapper table {
  width: 100%;
  min-width: 500px;
}

/* ========================================================
   SIDEBAR + MAIN LAYOUT
   ======================================================== */

.layout-with-sidebar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-3);
  width: 100%;
  min-height: 100vh;
}

/* Stack sidebar on top on mobile */
@media (max-width: 1024px) {
  .layout-with-sidebar {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   FEATURE-FLAG: CONTAINER QUERIES
   (For modern browsers that support @container)
   ======================================================== */

@supports (container-type: inline-size) {
  /* Container query example for cards */
  .card-container {
    container-type: inline-size;
  }

  /* Responsive card layout based on container width, not viewport */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--gap-3);
  }

  @container (max-width: 500px) {
    .card-grid {
      grid-template-columns: 1fr;
    }
  }

  @container (min-width: 500px) and (max-width: 800px) {
    .card-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @container (min-width: 800px) {
    .card-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

/* ========================================================
   ASPECT RATIO UTILITIES
   ======================================================== */

.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-3-2 { aspect-ratio: 3 / 2; }
.aspect-16-10 { aspect-ratio: 16 / 10; }

/* ========================================================
   BORDER RADIUS UTILITIES
   ======================================================== */

.rounded-none { border-radius: 0; }
.rounded-xs   { border-radius: var(--radius-xs); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded      { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* --- The concentric helper, as classes -------------------------------
   Put .r-nest on the parent (it declares the two inputs and applies them)
   and .r-nested on any rounded child sitting --r-pad inside it; the child's
   radius is then DERIVED from the parent's rather than picked by eye.
   See the RADIUS block in base/variables.css for the rule and the reason. */
.r-nest   { border-radius: var(--r-outer); padding: var(--r-pad); }
.r-nested { border-radius: var(--radius-inner); }
.r-pad-1  { --r-pad: var(--space-1); }
.r-pad-2  { --r-pad: var(--space-2); }
.r-pad-3  { --r-pad: var(--space-3); }
.r-out-md { --r-outer: var(--radius-md); }
.r-out-lg { --r-outer: var(--radius-lg); }
.r-out-xl { --r-outer: var(--radius-xl); }

/* ========================================================
   SHADOW UTILITIES
   ======================================================== */

.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12); }
.shadow-xl { box-shadow: 0 20px 40px rgba(16, 24, 40, 0.15); }

/* ========================================================
   BORDER UTILITIES
   ======================================================== */

.border-0 { border: none; }
.border { border: 1px solid var(--card-border); }
.border-2 { border: 2px solid var(--card-border); }
.border-t { border-top: 1px solid var(--card-border); }
.border-b { border-bottom: 1px solid var(--card-border); }
.border-l { border-left: 1px solid var(--card-border); }
.border-r { border-right: 1px solid var(--card-border); }

/* ========================================================
   OPACITY UTILITIES
   ======================================================== */

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ========================================================
   CURSOR UTILITIES
   ======================================================== */

.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-move { cursor: move; }
.cursor-text { cursor: text; }

/* ========================================================
   TRANSITION UTILITIES
   ======================================================== */

.transition-none { transition: none; }
.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color, background-color 0.2s ease; }
.transition-opacity { transition: opacity 0.2s ease; }
.transition-transform { transition: transform 0.2s ease; }