/* Shift Worksheets migration (see docs/tablet-portal-migration-plan.md, Phase T2/T3a). Touch-friendly
   Bootstrap 5 styling for the Shift Worksheets shell - large tap targets, no sidebar/topbar chrome
   inherited from the admin _Layout.cshtml. Mobile-first throughout: this portal has to work on
   phones and browsers as well as tablets (task #215 follow-up), not just tablet-sized viewports -
   Bootstrap's grid/utilities are mobile-first by default, and the rules below fill the gaps
   Bootstrap doesn't cover itself (min touch-target height, safe-area insets for notched phones,
   overflow guards, a sticky bottom action bar pattern for primary actions on tall detail pages). */

/* ---------------------------------------------------------------------------------------------
   BMS admin portal look (Brad, 2026-09-24): "the look and feel ... follow the BMS admin portal
   colours etc, whilst keeping the current layout". Colours, font, borders and corner radii only -
   no size, spacing or layout changes. Values are the admin portal's own, from Web's
   bms-color-scheme.css (light palette) and tabler-theme.css (font stack, 6px control radius,
   10px card radius, card shadow). Bootstrap stays the vendored 5.3.8 - the latest release.
   Where Bootstrap 5.3 compiles a colour into a component instead of reading a --bs-* variable
   (buttons, focus rings, checkboxes), the component is re-pointed below.
   The admin palette, for reference:
     primary #2e5cff (hover #204ae0) | links #267da8 (hover #1d658a) | ink #1c2536
     muted #68707e | canvas #f2f4f8 | border #e3e7ef | selected fill #eef1f6
     success #189a51 | danger #d6414b | warning #d99a2b | navigation shell #17151a
   --------------------------------------------------------------------------------------------- */
:root {
    --bs-font-sans-serif: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);

    /* --bs-body-bg stays white on purpose: Bootstrap paints cards, inputs, list groups and
       modals with it. The grey admin canvas is set on .sw-body instead. */
    --bs-body-color: #1c2536;
    --bs-body-color-rgb: 28, 37, 54;
    --bs-emphasis-color: #1c2536;
    --bs-emphasis-color-rgb: 28, 37, 54;
    --bs-secondary-color: #68707e;
    --bs-secondary-color-rgb: 104, 112, 126;
    --bs-tertiary-bg: #f2f4f7;
    --bs-border-color: #e3e7ef;
    --bs-border-color-translucent: rgba(26, 35, 50, .08);
    --bs-border-radius: 6px;

    --bs-primary: #2e5cff;
    --bs-primary-rgb: 46, 92, 255;
    --bs-primary-text-emphasis: #1a3799;
    --bs-primary-bg-subtle: #e9eeff;
    --bs-primary-border-subtle: #c0cdff;
    --bs-success: #189a51;
    --bs-success-rgb: 24, 154, 81;
    --bs-success-text-emphasis: #0f5e31;
    --bs-success-bg-subtle: #e2f5ea;
    --bs-success-border-subtle: #a9dcbf;
    --bs-danger: #d6414b;
    --bs-danger-rgb: 214, 65, 75;
    --bs-danger-text-emphasis: #8a1f26;
    --bs-danger-bg-subtle: #fbe7e8;
    --bs-danger-border-subtle: #f1b8bc;
    --bs-warning: #d99a2b;
    --bs-warning-rgb: 217, 154, 43;
    --bs-warning-text-emphasis: #7a5510;
    --bs-warning-bg-subtle: #faf1dd;
    --bs-warning-border-subtle: #efd49c;

    --bs-link-color: #267da8;
    --bs-link-color-rgb: 38, 125, 168;
    --bs-link-hover-color: #1d658a;
    --bs-link-hover-color-rgb: 29, 101, 138;
    --bs-focus-ring-color: rgba(46, 92, 255, .25);
    --bs-form-invalid-color: #d6414b;
    --bs-form-invalid-border-color: #d6414b;

    --sw-card-radius: 10px;
    --sw-card-shadow: rgba(28, 37, 54, .04) 0 2px 4px 0;
    --sw-card-shadow-hover: rgba(28, 37, 54, .10) 0 4px 12px 0;
    --sw-canvas: #f2f4f8;
    --sw-selected-bg: #eef1f6;
    --sw-nav-shell: #17151a;
}

/* Buttons - Bootstrap 5.3 compiles its own blue/green/red into each variant. */
.btn-primary {
    --bs-btn-bg: #2e5cff;
    --bs-btn-border-color: #2e5cff;
    --bs-btn-hover-bg: #204ae0;
    --bs-btn-hover-border-color: #204ae0;
    --bs-btn-active-bg: #1c41c4;
    --bs-btn-active-border-color: #1c41c4;
    --bs-btn-disabled-bg: #2e5cff;
    --bs-btn-disabled-border-color: #2e5cff;
    --bs-btn-focus-shadow-rgb: 46, 92, 255;
}

.btn-outline-primary {
    --bs-btn-color: #2e5cff;
    --bs-btn-border-color: #2e5cff;
    --bs-btn-hover-bg: #2e5cff;
    --bs-btn-hover-border-color: #2e5cff;
    --bs-btn-active-bg: #2e5cff;
    --bs-btn-active-border-color: #2e5cff;
    --bs-btn-disabled-color: #2e5cff;
    --bs-btn-disabled-border-color: #2e5cff;
    --bs-btn-focus-shadow-rgb: 46, 92, 255;
}

/* Neutral controls read as "a selected control, not a call to action" - the admin portal's
   #eef1f6 selected fill with ink text, not a solid grey. */
.btn-outline-secondary {
    --bs-btn-color: #1c2536;
    --bs-btn-border-color: #d0d6e0;
    --bs-btn-hover-color: #1c2536;
    --bs-btn-hover-bg: #eef1f6;
    --bs-btn-hover-border-color: #c3cad6;
    --bs-btn-active-color: #1c2536;
    --bs-btn-active-bg: #e3e7ef;
    --bs-btn-active-border-color: #b6bfcd;
    --bs-btn-disabled-color: #68707e;
    --bs-btn-disabled-border-color: #d0d6e0;
    --bs-btn-focus-shadow-rgb: 104, 112, 126;
}

.btn-secondary {
    --bs-btn-bg: #68707e;
    --bs-btn-border-color: #68707e;
    --bs-btn-hover-bg: #5a616e;
    --bs-btn-hover-border-color: #5a616e;
    --bs-btn-active-bg: #4f5561;
    --bs-btn-active-border-color: #4f5561;
    --bs-btn-disabled-bg: #68707e;
    --bs-btn-disabled-border-color: #68707e;
}

.btn-success {
    --bs-btn-bg: #189a51;
    --bs-btn-border-color: #189a51;
    --bs-btn-hover-bg: #148445;
    --bs-btn-hover-border-color: #148445;
    --bs-btn-active-bg: #11723c;
    --bs-btn-active-border-color: #11723c;
    --bs-btn-disabled-bg: #189a51;
    --bs-btn-disabled-border-color: #189a51;
    --bs-btn-focus-shadow-rgb: 24, 154, 81;
}

.btn-outline-success {
    --bs-btn-color: #189a51;
    --bs-btn-border-color: #189a51;
    --bs-btn-hover-bg: #189a51;
    --bs-btn-hover-border-color: #189a51;
    --bs-btn-active-bg: #189a51;
    --bs-btn-active-border-color: #189a51;
    --bs-btn-disabled-color: #189a51;
    --bs-btn-disabled-border-color: #189a51;
    --bs-btn-focus-shadow-rgb: 24, 154, 81;
}

.btn-danger {
    --bs-btn-bg: #d6414b;
    --bs-btn-border-color: #d6414b;
    --bs-btn-hover-bg: #bf343e;
    --bs-btn-hover-border-color: #bf343e;
    --bs-btn-active-bg: #a92e37;
    --bs-btn-active-border-color: #a92e37;
    --bs-btn-disabled-bg: #d6414b;
    --bs-btn-disabled-border-color: #d6414b;
    --bs-btn-focus-shadow-rgb: 214, 65, 75;
}

.btn-outline-danger {
    --bs-btn-color: #d6414b;
    --bs-btn-border-color: #d6414b;
    --bs-btn-hover-bg: #d6414b;
    --bs-btn-hover-border-color: #d6414b;
    --bs-btn-active-bg: #d6414b;
    --bs-btn-active-border-color: #d6414b;
    --bs-btn-disabled-color: #d6414b;
    --bs-btn-disabled-border-color: #d6414b;
    --bs-btn-focus-shadow-rgb: 214, 65, 75;
}

.btn-outline-warning {
    --bs-btn-color: #b07a17;
    --bs-btn-border-color: #d99a2b;
    --bs-btn-hover-color: #1c2536;
    --bs-btn-hover-bg: #d99a2b;
    --bs-btn-hover-border-color: #d99a2b;
    --bs-btn-active-color: #1c2536;
    --bs-btn-active-bg: #d99a2b;
    --bs-btn-active-border-color: #d99a2b;
    --bs-btn-disabled-color: #d99a2b;
    --bs-btn-disabled-border-color: #d99a2b;
    --bs-btn-focus-shadow-rgb: 217, 154, 43;
}

/* Focus rings and checked states - also compiled as Bootstrap blue. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #97aeff;
    box-shadow: 0 0 0 .25rem rgba(46, 92, 255, .25);
}

.form-check-input:checked {
    background-color: #2e5cff;
    border-color: #2e5cff;
}

/* Mandatory fields, as in BMS (Brad, 2026-09-25): a red * after the label and a red border on an
   empty one when the form is submitted - no message, no tooltip (site.js does the checking).
   The class names are Web's own: .bms-label-required from bms-overrides.css, and Bootstrap's
   .is-invalid with its inline error icon removed, as Web does. */
.bms-label-required::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: 600;
}

.form-control.is-invalid,
textarea.form-control.is-invalid {
    background-image: none;
    padding-right: .75rem;
}

/* A select keeps its dropdown arrow; only the second, error-icon image goes. */
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: none;
    padding-right: 2.25rem;
}

.list-group {
    --bs-list-group-active-bg: #2e5cff;
    --bs-list-group-active-border-color: #2e5cff;
    --bs-list-group-action-hover-bg: #eef1f6;
    --bs-list-group-action-active-bg: #e3e7ef;
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: #1c2536;
}

.card {
    --bs-card-border-radius: var(--sw-card-radius);
    --bs-card-inner-border-radius: calc(var(--sw-card-radius) - 1px);
}

* {
    -webkit-tap-highlight-color: transparent;
}

html, body {
    /* Guards against any single wide element (a long job number, an un-wrapped table) forcing
       horizontal scroll on narrow phones - every content block in this portal is meant to fit the
       viewport width. */
    overflow-x: hidden;
}

.sw-body {
    background-color: var(--sw-canvas);
    min-height: 100vh;
    min-height: 100dvh;
}

.sw-topbar {
    /* The admin portal's navigation shell colour and 1px light edge (bms-color-scheme.css). */
    background: var(--sw-nav-shell);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
    /* iOS notch/status-bar safe area - the topbar sits flush against the top of the screen with no
       browser chrome once "Add to Home Screen"'d (apple-mobile-web-app-capable in _Layout). */
    padding-top: calc(0.5rem + env(safe-area-inset-top));
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
}

.sw-topbar .btn {
    /* Apple/Google's ~44px minimum recommended touch target - btn-sm alone measures shorter. */
    min-height: 44px;
}

/* Header, following classic's tablet-portal header (3PC.app-header.svelte): brand on the left;
   the date, the site's name and Log Out on the right; and on phones a single menu button that
   opens the job side menu drawer on job screens and the main menu drawer everywhere else. */
.sw-topbar .navbar-brand {
    font-weight: 600;
}

.sw-nav-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.sw-nav-toggle:hover,
.sw-nav-toggle:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .28);
}

.sw-header-meta {
    text-align: right;
    line-height: 1.25;
}

.sw-header-date {
    color: #c9d3e0;
    font-size: .8rem;
    white-space: nowrap;
}

.sw-header-site {
    color: #fff;
    font-weight: 600;
    font-size: .875rem;
    max-width: 48vw;
}

/* Job side menu (JobNavViewComponent), following classic's job sidebar: large stacked items, one
   per job screen, in the navigation shell colour. Below md it is a Bootstrap offcanvas drawer
   opened from the header; from md up (iPad and desktop) it is a rail down the left of the page. */
.sw-jobnav {
    --bs-offcanvas-width: min(280px, 85vw);
    --bs-offcanvas-bg: var(--sw-nav-shell);
    --bs-offcanvas-color: #fff;
}

.sw-jobnav .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-top: calc(1rem + env(safe-area-inset-top));
}

.sw-jobnav .offcanvas-title {
    font-size: 1rem;
    font-weight: 600;
}

.sw-jobnav-body {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.sw-jobnav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 88px;
    padding: .75rem .5rem;
    color: rgba(255, 255, 255, .78);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sw-jobnav-link .bi {
    font-size: 1.5rem;
}

.sw-jobnav-link:hover,
.sw-jobnav-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

/* The admin portal's selected-item colour (bms-color-scheme.css .bms-nav-link.active). */
.sw-jobnav-link.active {
    color: #fff;
    background: #323f54;
}

/* Main menu rows in the phone drawer (_MainNavLinks) - one line each, icon then label, so they
   read as a list under the job's larger items. */
.sw-nav-heading {
    padding: 1rem 1.25rem .35rem;
    color: rgba(255, 255, 255, .5);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sw-mainnav-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 52px;
    padding: .75rem 1.25rem;
    color: rgba(255, 255, 255, .78);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sw-mainnav-link .bi {
    font-size: 1.25rem;
}

.sw-mainnav-link:hover,
.sw-mainnav-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.sw-mainnav-link.active {
    color: #fff;
    background: #323f54;
}

@media (min-width: 768px) {
    .sw-shell-jobnav {
        display: flex;
        align-items: stretch;
    }

    .sw-jobnav-rail {
        flex: 0 0 180px;
        width: 180px;
        color: #fff;
        background: var(--sw-nav-shell);
        box-shadow: 1px 0 0 rgba(255, 255, 255, .06);
    }

    /* Keeps the menu in view while a long page scrolls. */
    .sw-jobnav-rail .sw-jobnav {
        position: sticky;
        top: 0;
    }

    .sw-shell-jobnav .sw-main {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.sw-main {
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Sticky bottom action bar - used by the Job Detail/Shift Detail pages (task #215) for primary
   actions (Complete Shift, Save Adjustment, etc.) so they stay reachable with one thumb on a tall
   scrolling page, a standard mobile-app pattern. Add sw-action-bar-space to the scrollable
   content container above it so the bar never covers the last few rows. */
.sw-action-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--bs-border-color);
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 8px rgba(28, 37, 54, .06);
    z-index: 5;
}

.sw-action-bar-space {
    padding-bottom: 5rem;
}

.sw-action-bar .btn {
    min-height: 48px;
}

/* Same navy-to-accent gradient as the admin portal's login panel (Web Views/Account/Login.cshtml). */
.sw-login-bg {
    background: linear-gradient(135deg, #0f1e3f 0%, #163464 55%, #00A1D6 140%);
}

.sw-login-card {
    width: 100%;
    max-width: 420px;
}

.sw-menu-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 140px;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--sw-card-radius);
    box-shadow: var(--sw-card-shadow);
    text-decoration: none;
    color: var(--bs-body-color);
    font-weight: 600;
    text-align: center;
    padding: 1rem;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}

.sw-menu-tile:hover {
    border-color: var(--bs-primary-border-subtle);
    box-shadow: var(--sw-card-shadow-hover);
    transform: translateY(-2px);
    color: var(--bs-body-color);
}

.sw-menu-tile .bi {
    font-size: 2.2rem;
    color: var(--bs-primary);
}

/* 2x2 Menu - keeps the four tiles a sensible size on a wide monitor. */
.sw-menu {
    max-width: 720px;
}

/* Small phones (iPhone SE/mini width and below) - the fixed 140px tile height plus 2.2rem icon
   started to crowd a 2-column grid at ~360px wide, so both shrink slightly below the `sm` (576px)
   breakpoint. Bootstrap's own col-6 grid handles the column count; this only handles tile
   proportions within a column. */
@media (max-width: 575.98px) {
    .sw-menu-tile {
        height: 110px;
        padding: .75rem;
        font-size: .9rem;
    }

    .sw-menu-tile .bi {
        font-size: 1.8rem;
    }
}

.sw-joblist .list-group-item {
    padding: 1rem 1.25rem;
}

/* Job List rows became clickable in the Job Detail follow-up (task #215) - min-height keeps the
   whole row a comfortable tap target even when the description line is short, and text-truncate on
   the description (applied in JobList.cshtml) stops a long work description from pushing the
   time/status column off-screen on narrow phones. */
.sw-joblist .list-group-item-action {
    min-height: 64px;
}

.sw-joblist .job-row-number {
    font-weight: 700;
}

.sw-joblist .job-row-time {
    color: var(--bs-secondary-color);
    font-size: .9rem;
}

/* Classic's "Tap to approve" hint under a Completed job. */
.sw-joblist .job-row-hint {
    color: var(--bs-primary);
    font-size: .8rem;
    font-style: italic;
    margin-top: .15rem;
}

/* An Approved job - classic didn't open these, so the row isn't a link. */
.sw-joblist .sw-joblist-locked {
    min-height: 64px;
    background: var(--bs-tertiary-bg);
}

/* Shared "detail page" pattern - Job Detail / Shift Detail (task #215) and every future vertical
   (Worksheets, Kiosk, etc., tasks #216-#220) that needs a scrolling record view with grouped
   sections. Cards stack full-width on phones (default) and stay comfortably readable up to
   desktop-browser widths too (task: "must be responsive... mobile, tablets and browsers") - no
   fixed max-width so this doesn't feel like a phone app stretched thin on a desktop monitor, but
   long lines of text still wrap via Bootstrap's normal block flow instead of overflowing. */
.sw-detail-header {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--sw-canvas);
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.sw-detail-section {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--sw-card-radius);
    box-shadow: var(--sw-card-shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.sw-detail-section h6 {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .75rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    margin-bottom: .75rem;
}

.sw-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--sw-selected-bg);
}

.sw-stat-row:last-child {
    border-bottom: none;
}

.sw-stat-row .label {
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}

.sw-stat-row .value {
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* Every interactive control on this portal should clear the 44px touch-target minimum regardless
   of Bootstrap size class, since staff use this on a mix of phones/tablets/desktop browsers and a
   btn-sm-only affordance (fine with a mouse) is too small to reliably tap. */
.sw-body .btn,
.sw-body .form-control,
.sw-body .form-select {
    min-height: 44px;
}

.sw-body .btn-sm {
    min-height: 38px;
}

/* Bootstrap 5 has no min-width-0 utility out of the box - needed on any flex child that contains
   text-truncate (JobDetail/ShiftDetail rows), otherwise the flex item refuses to shrink below its
   content's natural width and truncation never kicks in on narrow phone screens. */
.min-width-0 {
    min-width: 0;
}

/* ---------------------------------------------------------------------------------------------
   Job screens (ShiftWorksheets:JobScreens = Job, Brad 2026-09-28) - the JobWorksheets screens
   brought into this site: Jobs/Details, Jobs/SignOff and the Activities form. Same palette and
   section cards as everything above; these are only the pieces those screens need that the Shift
   screens never did.
   --------------------------------------------------------------------------------------------- */

/* A field the server refused (ModelState, via asp-for) looks exactly like an empty mandatory one. */
.form-control.input-validation-error,
.form-select.input-validation-error {
    border-color: var(--bs-form-invalid-border-color);
}

/* "Staff on site" header doubling as its collapse toggle. */
.sw-section-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
}

.sw-section-chevron {
    transition: transform .15s;
}

.sw-section-toggle:not(.collapsed) .sw-section-chevron {
    transform: rotate(180deg);
}

.sw-chip {
    display: inline-flex;
    align-items: center;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--sw-selected-bg);
    border: 1px solid var(--bs-border-color);
    font-weight: 600;
    font-size: .875rem;
}

/* Activities / Qty / Cartons strip. */
.sw-totals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}

.sw-totals > div {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--sw-card-radius);
    box-shadow: var(--sw-card-shadow);
    padding: .75rem;
    text-align: center;
}

.sw-totals-n {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.sw-totals-l {
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* "Who worked this activity" - a whole row is the tap target, not just the tick box. */
.sw-pick-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .5rem;
}

.sw-pick {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .5rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: #fff;
    cursor: pointer;
    font-weight: 600;
}

.sw-pick:has(input:checked) {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
}

/* Signature pad on the sign-off - a fixed 900x340 bitmap shown full width. */
.sw-sigpad {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 340;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: #fff;
    touch-action: none;
}

.sw-sigpad.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

/* Activity and damage photos (activity-photos.js). */
.sw-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .75rem;
}

.sw-photo-cell {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.sw-photo-open {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.sw-photo-open img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sw-photo-actions {
    display: flex;
    gap: .35rem;
}

.sw-photo-actions .btn {
    flex: 1 1 0;
}

.sw-photo-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-height: 110px;
    padding: 1rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--sw-card-radius);
    background: var(--sw-canvas);
    cursor: pointer;
    text-align: center;
}

.sw-photo-drop .bi {
    font-size: 1.75rem;
    color: var(--bs-primary);
}

.sw-photo-drop.is-over {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.sw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: rgba(15, 20, 30, .94);
    color: #fff;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.sw-lightbox[hidden] {
    display: none;
}

.sw-lightbox-open {
    overflow: hidden;
}

.sw-lightbox-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
}

.sw-lightbox-counter {
    font-weight: 600;
}

.sw-lightbox-stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 .5rem;
}

.sw-lightbox-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sw-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.25rem;
}

.sw-lightbox-nav.prev {
    left: .75rem;
}

.sw-lightbox-nav.next {
    right: .75rem;
}

.sw-lightbox-nav[hidden] {
    display: none;
}

.sw-lightbox-actions {
    display: flex;
    justify-content: center;
    gap: .75rem;
    padding: .75rem 1rem 1rem;
}

/* Boxed action bar (Brad, 2026-09-29: "make the Add Activity and Finish and Sign Off buttons in a
   box the same width as the Activities Logged"). Still sticky at the bottom, but the bar itself is
   see-through and its buttons sit in a card inside a .container - the same container and padding
   as the sections above, so the box lines up with them at every width. Used by the Job screens. */
.sw-action-bar.sw-action-bar-boxed {
    background: transparent;
    border-top: 0;
    box-shadow: none;
    padding: 0 0 calc(.75rem + env(safe-area-inset-bottom));
    pointer-events: none;
}

.sw-action-box {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--sw-card-radius);
    box-shadow: 0 -2px 12px rgba(28, 37, 54, .08), var(--sw-card-shadow);
    padding: .75rem 1.25rem;
    pointer-events: auto;
}

/* Side-by-side buttons in the box are the same width, whatever their labels. */
.sw-action-box .flex-fill {
    flex: 1 1 0;
}