/* Buildr page-specific styles on top of Bootstrap 6 (vendor/bootstrap) and design.css (tokens, fonts, components).
   Keep this file small: components come from Bootstrap classes; colours use Bootstrap 6 variables so dark mode and the schemes work. */

[dir="ltr"] { direction: ltr; }
.skip-link:focus { position: fixed; top: 0.5rem; inset-inline-start: 0.5rem; z-index: 1100; }

/* Linked-scroll compare: two pdf.js panes that follow each other (documents/compare). */
.compare-linked { margin-block: 1rem; }

/* Drawing compare overlay (drawings/compare pair view): legend, the overlay image and the changed area. */
.compare-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding-block: 0.5rem; font-size: 0.875rem; line-height: 1.5; }
.compare-legend-item { display: inline-flex; align-items: center; gap: 0.25rem; }
.compare-ratio { margin-inline-start: auto; color: var(--bs-fg-3); }
.compare-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 0.125rem; }
/* Fixed data colours: they must match the server-rendered overlay image (red removed, blue added, grey both). */
.compare-swatch-removed { background: #dc2626; }
.compare-swatch-added { background: #2563eb; }
.compare-swatch-both { background: #9ca3af; }
.compare-stage { overflow: auto; background: var(--bs-bg-body); border: 1px solid var(--bs-border-color); border-radius: 0.5rem; padding: 1rem; }
.compare-overlay { position: relative; width: fit-content; margin-inline: auto; }
.compare-overlay img { display: block; max-width: 100%; height: auto; }
.compare-bbox { position: absolute; pointer-events: none; border: 2px solid #f59e0b; border-radius: 0.125rem; }
.compare-status { font-size: 0.875rem; line-height: 1.5; }
.linked-panes { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .linked-panes { grid-template-columns: 1fr 1fr; } }
.linked-scroll { height: 70vh; overflow: auto; border: 1px solid var(--bs-border-color); border-radius: 0.5rem; background: var(--bs-bg-2); padding: 0.5rem 0; }
.linked-page { position: relative; margin: 0 auto 0.5rem; background: #fff; box-shadow: var(--e2, 0 1px 2px rgb(0 0 0 / 0.15)); } /* paper: PDF pages stay white in both themes */
.linked-page canvas { display: block; }

/* Photo viewer (photo-viewer.js): a Deep Zoom stage with absolutely positioned tiles. Always LTR. */
.photo-panorama, .photo-zoom-stage, .photo-map { position: relative; height: 60vh; min-height: 18rem; overflow: hidden; border-radius: 0.375rem; background: #111820; } /* a dark stage for photos in both themes */
.photo-zoom-stage { touch-action: none; cursor: grab; }
.photo-zoom-stage.is-dragging { cursor: grabbing; }
.photo-zoom-stage:focus-visible { outline: 2px solid var(--focus-c, var(--bs-primary-base)); outline-offset: 2px; }
.photo-zoom-tile { pointer-events: none; user-select: none; max-width: none; }
.photo-zoom-controls { display: flex; gap: 0.5rem; }

/* Photo thumbnail grid (photos.html photo_grid): days, then square cards that link to the photo. */
.photo-day { font-size: 0.95rem; font-weight: 600; margin-block: 1rem 0.5rem; }
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .photo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.photo-card { position: relative; border: 1px solid var(--bs-border-color); border-radius: var(--r-md, 0.5rem); background: var(--bs-bg-body); overflow: hidden; }
.photo-card > a { display: block; color: inherit; text-decoration: none; }
.photo-card-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; background: var(--bs-bg-2); }
.photo-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-card-none { font-size: 0.8rem; color: var(--bs-fg-3); padding: 0.5rem; text-align: center; }
.photo-card-caption { display: block; padding: 0.375rem 0.5rem; }
.photo-card-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
.photo-card-taken { display: block; font-size: 0.75rem; color: var(--bs-fg-3); }
.photo-card-badges { position: absolute; inset-inline-start: 0.5rem; top: 0.5rem; display: flex; gap: 0.25rem; flex-wrap: wrap; pointer-events: none; }
.photo-card-badges .badge { background: color-mix(in oklch, var(--bs-bg-body) 90%, transparent); color: var(--bs-fg-1); }
/* The dialog look (radius, elevation, blurred backdrop) comes from design.css; this keeps its size. */
.confirm-dialog { max-inline-size: min(28rem, 92vw); border: 1px solid var(--bs-border-color); background: var(--bs-bg-body); color: var(--bs-fg-body); padding: 1.25rem; }
.confirm-dialog::backdrop { background: var(--overlay, rgb(0 0 0 / 0.45)); }
.confirm-dialog h2 { margin-block: 0 0.5rem; font-size: 1.125rem; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-block-start: 1rem; }
/* Schedule WBS tree indent: the template emits the depth as data-wbs-indent (rem, 0.75 per level). */
[data-wbs-indent="0.75"] { padding-inline-start: 0.75rem; }
[data-wbs-indent="1.5"] { padding-inline-start: 1.5rem; }
[data-wbs-indent="2.25"] { padding-inline-start: 2.25rem; }
[data-wbs-indent="3"] { padding-inline-start: 3rem; }
[data-wbs-indent="3.75"] { padding-inline-start: 3.75rem; }
[data-wbs-indent="4.5"] { padding-inline-start: 4.5rem; }
[data-wbs-indent="5.25"] { padding-inline-start: 5.25rem; }
[data-wbs-indent="6"] { padding-inline-start: 6rem; }
[data-wbs-indent="6.75"] { padding-inline-start: 6.75rem; }
[data-wbs-indent="7.5"] { padding-inline-start: 7.5rem; }

/* Signature canvas: stop touch drags from scrolling the page while signing. */
[data-signature-canvas] { touch-action: none; }

/* Long codes, tokens and URLs wrap instead of widening the page at 360px (UX alignment, WCAG 1.4.10). */
code, pre { overflow-wrap: anywhere; }
pre { white-space: pre-wrap; }

/* A closed menu leaves at once. Bootstrap's exit fade let the account menu flash over the page on every
   load (UX alignment: its items were clickable for 150 ms, WCAG 2.4.11). Opening still animates. */
.menu:not(.show) { transition: none; }
.photo-card-select { position: absolute; top: 0.5rem; inset-inline-start: 0.5rem; z-index: 1; width: 1.25rem; height: 1.25rem; }
.photo-map-pin { display: block; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid #fff; background: var(--bs-primary-base); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.photo-map-cluster { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid #fff; background: var(--bs-primary-base); color: var(--bs-primary-contrast); font-size: .75rem; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* Touch-sized actions: 44px minimum height on phones (WCAG 2.5.5 / Apple HIG), used on RFI pages. */
.btn-touch { min-height: 44px; }
/* Mobile submittals (records.html stacked list and submittal_detail.html actions). Touch targets are 44px. */
.touch-target { min-height: 2.75rem; min-width: 2.75rem; }
.submittal-row-link { display: block; min-height: 2.75rem; padding: 0.75rem 1rem; color: inherit; text-decoration: none; }
.submittal-row-link:focus-visible { outline: 2px solid var(--focus-c, var(--bs-primary-base)); outline-offset: -2px; }
@media (max-width: 575.98px) {
  .submittal-actions { flex-direction: column; align-items: stretch; }
  .submittal-actions > * { width: 100%; }
  .submittal-actions .btn { width: 100%; }
}

/* Compatibility for the ported markup, in Bootstrap's `custom` layer so utility classes still win.
   Uses the design.css tokens (--hairline, --r-*, --e1, --tint, --hover). */
@layer custom {
/* Selects: BS6 styles select.form-control but has no .form-select (used by the ported views), and its
   caret sits on the right even in RTL and stays black under a system dark theme. */
.form-select {
  display: block; inline-size: 100%; min-block-size: var(--bs-btn-input-min-height);
  padding-block: var(--bs-btn-input-padding-y); padding-inline: var(--bs-btn-input-padding-x) calc(var(--bs-btn-input-padding-x) * 3);
  font: inherit; font-size: var(--bs-btn-input-font-size); line-height: var(--bs-btn-input-line-height); color: var(--bs-fg-body);
  appearance: none; background-color: var(--bs-control-bg); border: 1px solid var(--bs-control-border-color); border-radius: var(--bs-control-border-radius);
  --bs-control-select-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300000080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-control-select-bg-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-control-select-bg-position: right .75rem center;
  background-image: var(--bs-control-select-bg); background-repeat: no-repeat; background-position: var(--bs-control-select-bg-position); background-size: 16px 12px;
}
.form-select:disabled { background-color: var(--bs-bg-2); opacity: .75; }
.form-select-sm { min-block-size: var(--bs-btn-input-sm-min-height); padding-block: var(--bs-btn-input-sm-padding-y); padding-inline-start: var(--bs-btn-input-sm-padding-x); font-size: var(--bs-btn-input-sm-font-size); border-radius: var(--r-xs); }
.form-select:is([multiple], [size]:not([size="1"])) { background-image: none; padding-inline-end: var(--bs-btn-input-padding-x); }
[dir="rtl"] :is(select.form-control, .form-select) { --bs-control-select-bg-position: left .75rem center; }
[data-bs-theme="dark"] .form-select { background-image: var(--bs-control-select-bg-dark); }
@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme]) :is(select.form-control, .form-select) { background-image: var(--bs-control-select-bg-dark); }
}

/* Bootstrap 5 names the ported views still use (BS6 dropped them). */
:is(.btn-primary, .btn-outline-primary, .alert-primary, .text-bg-primary) { --bs-theme-fg: var(--bs-primary-fg); --bs-theme-bg: var(--bs-primary-bg); --bs-theme-bg-subtle: var(--bs-primary-bg-subtle); --bs-theme-border: var(--bs-primary-border); --bs-theme-contrast: var(--bs-primary-contrast); --bs-theme-focus-ring: var(--bs-primary-focus-ring); }
:is(.btn-secondary, .btn-outline-secondary, .alert-secondary, .text-bg-secondary, .text-bg-light) { --bs-theme-fg: var(--bs-fg-1); --bs-theme-bg: var(--bs-bg-3); --bs-theme-bg-subtle: var(--bs-bg-2); --bs-theme-border: var(--bs-border-color); --bs-theme-contrast: var(--bs-fg-body); --bs-theme-focus-ring: var(--focus-c); }
:is(.btn-danger, .btn-outline-danger, .alert-danger, .text-bg-danger) { --bs-theme-fg: var(--bs-danger-fg); --bs-theme-bg: var(--bs-danger-bg); --bs-theme-bg-subtle: var(--bs-danger-bg-subtle); --bs-theme-border: var(--bs-danger-border); --bs-theme-contrast: var(--bs-danger-contrast); --bs-theme-focus-ring: var(--bs-danger-focus-ring); }
:is(.btn-success, .btn-outline-success, .alert-success, .text-bg-success) { --bs-theme-fg: var(--bs-success-fg); --bs-theme-bg: var(--bs-success-bg); --bs-theme-bg-subtle: var(--bs-success-bg-subtle); --bs-theme-border: var(--bs-success-border); --bs-theme-contrast: var(--bs-success-contrast); --bs-theme-focus-ring: var(--bs-success-focus-ring); }
:is(.btn-warning, .btn-outline-warning, .alert-warning, .text-bg-warning) { --bs-theme-fg: var(--bs-warning-fg); --bs-theme-bg: var(--bs-warning-bg); --bs-theme-bg-subtle: var(--bs-warning-bg-subtle); --bs-theme-border: var(--bs-warning-border); --bs-theme-contrast: var(--bs-warning-contrast); --bs-theme-focus-ring: var(--bs-warning-focus-ring); }
:is(.btn-info, .alert-info, .text-bg-info) { --bs-theme-fg: var(--bs-info-fg); --bs-theme-bg: var(--bs-info-bg); --bs-theme-bg-subtle: var(--bs-info-bg-subtle); --bs-theme-border: var(--bs-info-border); --bs-theme-contrast: var(--bs-info-contrast); --bs-theme-focus-ring: var(--bs-info-focus-ring); }
.btn:is(.btn-primary, .btn-secondary, .btn-danger, .btn-success, .btn-warning, .btn-info) {
  --bs-btn-bg: var(--bs-theme-bg); --bs-btn-color: var(--bs-theme-contrast); --bs-btn-border-color: var(--bs-theme-bg);
  --bs-btn-hover-bg: oklch(from var(--bs-theme-bg) calc(l * .95) c h); --bs-btn-hover-color: var(--bs-theme-contrast); --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-bg: oklch(from var(--bs-theme-bg) calc(l * .9) c h); --bs-btn-active-color: var(--bs-theme-contrast);
  box-shadow: var(--e1), inset 0 1px 0 color-mix(in oklch, #fff 16%, transparent);
}
.btn[class*="btn-outline-"] {
  --bs-btn-bg: transparent; --bs-btn-color: var(--bs-theme-fg); --bs-btn-border-color: color-mix(in oklch, var(--bs-theme-border) 80%, transparent);
  --bs-btn-hover-bg: var(--bs-theme-bg-subtle); --bs-btn-hover-color: var(--bs-theme-fg); --bs-btn-hover-border-color: var(--bs-theme-border);
  --bs-btn-active-bg: var(--bs-theme-bg-subtle); --bs-btn-active-color: var(--bs-theme-fg);
}
.btn-ghost { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--bs-theme-fg, var(--bs-fg-1)); --bs-btn-hover-bg: var(--hover); --bs-btn-hover-color: var(--bs-fg-body); --bs-btn-active-bg: var(--tint); }
.text-bg-primary, .text-bg-secondary, .text-bg-light, .text-bg-danger, .text-bg-success, .text-bg-warning, .text-bg-info { background-color: var(--bs-theme-bg); color: var(--bs-theme-contrast); }
.text-muted, .muted, .text-body-tertiary { color: var(--bs-fg-3); }
.text-body-secondary, .text-secondary { color: var(--bs-fg-2); }
.text-danger { color: var(--bs-danger-fg); } .text-success { color: var(--bs-success-fg); } .text-warning { color: var(--bs-warning-fg); }
.bg-light, .bg-body-tertiary, .table-light { background-color: var(--bs-bg-2); }
.fs-3 { font-size: var(--bs-font-size-xl); } .fs-4 { font-size: var(--bs-font-size-lg); } .fs-5 { font-size: var(--bs-font-size-md); } .fs-6 { font-size: var(--bs-font-size-sm); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; container-type: inline-size; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-raised); margin-block-end: var(--gap-section); }
.table-wrap > .table { margin-block-end: 0; }
p.empty, .empty { color: var(--bs-fg-2); text-align: center; padding: var(--gap-5) var(--gap-4); border: 1px dashed var(--bs-border-color); border-radius: var(--r-lg); }
.form-check { display: flex; align-items: flex-start; gap: .5rem; min-block-size: 1.5rem; margin-block-end: .25rem; }
.form-check-input { flex: none; inline-size: 1.125rem; block-size: 1.125rem; margin: .1875rem 0 0; accent-color: var(--bs-primary-base); }
.form-check-label { cursor: pointer; }
.form-check-inline { display: inline-flex; margin-inline-end: 1rem; }
/* Legacy grid: col-{sm,md,lg,xl}-N at Bootstrap 6's breakpoints */
@media (width >= 576px) {
  .col-sm { flex: 1 0 0; } .col-sm-2 { flex: none; width: 16.6667%; } .col-sm-3 { flex: none; width: 25%; } .col-sm-4 { flex: none; width: 33.3333%; } .col-sm-6 { flex: none; width: 50%; } .col-sm-8 { flex: none; width: 66.6667%; } .col-sm-9 { flex: none; width: 75%; } .col-sm-10 { flex: none; width: 83.3333%; } .col-sm-12 { flex: none; width: 100%; }
}
@media (width >= 768px) {
  .col-md { flex: 1 0 0; } .col-md-auto { flex: none; width: auto; } .col-md-2 { flex: none; width: 16.6667%; } .col-md-3 { flex: none; width: 25%; } .col-md-4 { flex: none; width: 33.3333%; } .col-md-5 { flex: none; width: 41.6667%; } .col-md-6 { flex: none; width: 50%; } .col-md-8 { flex: none; width: 66.6667%; } .col-md-9 { flex: none; width: 75%; } .col-md-12 { flex: none; width: 100%; }
}
@media (width >= 1024px) {
  .col-lg-3 { flex: none; width: 25%; } .col-lg-4 { flex: none; width: 33.3333%; } .col-lg-6 { flex: none; width: 50%; } .col-lg-8 { flex: none; width: 66.6667%; }
}
@media (width >= 1280px) { .col-xl-4 { flex: none; width: 33.3333%; } .col-xl-6 { flex: none; width: 50%; } }
}