/*
 * Bootstrap 5 utility shim.
 *
 * This application loads Bootstrap 5's *JavaScript* from a CDN but its CSS
 * comes from the ArchitectUI theme, which is built on Bootstrap 4. Markup
 * written with Bootstrap 5 utility classes therefore renders unstyled: the
 * class is simply not defined anywhere, so nothing applies and nothing warns.
 *
 * That is how the inspection screen ended up with no space between its cards —
 * `g-3` does not exist in Bootstrap 4 — and it silently affected several other
 * things, including `visually-hidden`, which meant screen-reader-only text was
 * being shown to everyone.
 *
 * This file defines only the utilities actually used by the inspection screens,
 * with Bootstrap 5's own values. It is deliberately small and additive: if the
 * theme is ever moved to Bootstrap 5 CSS, every rule here becomes redundant
 * rather than conflicting, and the file can be deleted.
 *
 * Bootstrap 5 spacer scale: 1 = .25rem, 2 = .5rem, 3 = 1rem.
 */

/* --------------------------------------------------------------- gutters
 * Bootstrap 4 columns already carry horizontal padding, so only the vertical
 * gutter is missing. `row-gap` on the flex row supplies it without disturbing
 * the theme's existing horizontal rhythm.
 */
.row.g-1 { row-gap: .25rem; }
.row.g-2 { row-gap: .5rem; }
.row.g-3 { row-gap: 1rem; }

/* ------------------------------------------------------------- flex gap */
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }

/* ------------------------------------------- logical spacing utilities
 * Bootstrap 5 renamed left/right to start/end. The theme only has the old
 * names. These are written as physical properties because the application
 * ships a separate RTL stylesheet that already handles direction.
 */
.ms-1 { margin-left: .25rem; }
.ms-2 { margin-left: .5rem; }
.me-1 { margin-right: .25rem; }
.me-2 { margin-right: .5rem; }
.ps-2 { padding-left: .5rem; }
.pe-2 { padding-right: .5rem; }

[dir="rtl"] .ms-1 { margin-left: 0; margin-right: .25rem; }
[dir="rtl"] .ms-2 { margin-left: 0; margin-right: .5rem; }
[dir="rtl"] .me-1 { margin-right: 0; margin-left: .25rem; }
[dir="rtl"] .me-2 { margin-right: 0; margin-left: .5rem; }

/* ------------------------------------------------------------ position */
.top-0 { top: 0; }
.end-0 { right: 0; }
[dir="rtl"] .end-0 { right: auto; left: 0; }

/* ---------------------------------------------------------- font weight */
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }

/* --------------------------------------------------------------- border */
.border-2 { border-width: 2px !important; }
.border-secondary-subtle { border-color: #c4c8cb !important; }
.bg-secondary-subtle { background-color: #e2e3e5; }
.bg-success-subtle { background-color: #d1e7dd; }

/* -------------------------------------------------- screen-reader only
 * The important one. Without this the "(Not started)" and similar labels on
 * the zone tabs were visible to everyone, which is both wrong and confusing.
 */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ------------------------------------------------------------ close button
 * Bootstrap 4 calls this `.close` and renders a "×" glyph from markup;
 * Bootstrap 5 draws it with a background image and expects an empty element.
 * The photo thumbnails use the Bootstrap 5 form, so it needs drawing.
 */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
}

.btn-close:hover { opacity: .85; }
.btn-close:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; opacity: 1; }

/* ----------------------------------------------------- xxl breakpoint
 * Bootstrap 4 stops at xl (1200px). The inspection item grid asks for a
 * third column on very wide screens, which needs the Bootstrap 5 breakpoint.
 */
@media (min-width: 1400px) {
    .col-xxl-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}