/*
 * Static desktop layout.
 *
 * This dashboard uses a fixed layout: every UI element keeps its desktop
 * position regardless of window size. When the window is smaller than the
 * layout, the page scrolls (horizontally and vertically) instead of
 * reflowing.
 *
 * The markup still carries Tailwind responsive classes (lg:*, md:*, sm:*)
 * from its responsive era. tailwind-built.css only applies those inside
 * media queries, so this file — loaded after it — pins each one
 * unconditionally to its desktop value. If markup gains a new responsive
 * class, add its pin here.
 */

/* Minimum canvas: the workflow tab's visual block is the 1536px container
   plus the ITF panel overhang (24px gap + 320px panel = 344px), shifted left
   by half that overhang so the whole block reads centered => 1880px wide,
   plus 16px screen margin each side => 1912px. Smaller windows scroll. */
body {
    min-width: 1912px;
}

/* Freeze the centered content container at its widest size. */
.container {
    max-width: 1536px !important;
}

/* ITF tracker: self-contained panel to the right of the workflow board.
   (The original Tailwind arbitrary-value classes were never generated in
   tailwind-built.css.) The board column is position:relative. */
#itf-tracker {
    position: absolute;
    top: 0;
    left: calc(100% + 24px);
    width: 320px;
    margin-bottom: 0;
}

/* The ITF panel hangs 344px off the container's right edge; shift the
   workflow grid left by half of that so container + panel sit visually
   centered as one block. */
#workflow > .grid {
    margin-left: -172px;
    margin-right: 172px;
}

/* --- Pinned responsive utilities (desktop values, all viewports) --- */

/* Display */
.sm\:inline { display: inline; }
.sm\:block { display: block; }
.md\:flex { display: flex; }
.md\:block { display: block; }
.lg\:block { display: block; }

/* Flexbox */
.sm\:flex-row { flex-direction: row; }
.sm\:justify-between { justify-content: space-between; }
.sm\:items-center { align-items: center; }
.lg\:justify-end { justify-content: flex-end; }

/* Grids */
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Column spans */
.md\:col-span-2 { grid-column: span 2 / span 2; }
.lg\:col-span-2 { grid-column: span 2 / span 2; }
.lg\:col-span-3 { grid-column: span 3 / span 3; }
.lg\:col-span-4 { grid-column: span 4 / span 4; }
.lg\:col-span-6 { grid-column: span 6 / span 6; }
.lg\:col-span-7 { grid-column: span 7 / span 7; }
.lg\:col-span-8 { grid-column: span 8 / span 8; }

/* Spacing */
.sm\:gap-4 { gap: 1rem; }
.md\:gap-6 { gap: 1.5rem; }
.md\:p-6 { padding: 1.5rem; }
.md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.md\:space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.5rem; }

/* Sizing */
.md\:w-14 { width: 3.5rem; }
.md\:h-14 { height: 3.5rem; }
.md\:w-\[420px\] { width: 420px; }
.md\:max-h-\[88vh\] { max-height: 88vh; }

/* Position */
.md\:right-4 { right: 1rem; }
.md\:left-auto { left: auto; }

/* Typography */
.md\:text-base { font-size: 1rem; line-height: 1.5rem; }
.md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }