/* The sidebar's 1px top border pushed the whole sidebar (logo included) down 1px,
   so its divider sat 1px below the header's. Nothing renders above the sidebar,
   so dropping just the top border lets the logo band align flush with the header. */
.sidebar-area {
    border-top: 0 !important;
}
.sidebar-area .logo {
    text-align: center;
    /* Lock the logo area to the same 66px band as the top header (in every
       state — expanded wordmark / collapsed icon, both themes) and centre its
       contents, so the divider lines up with the header's and the mark doesn't
       jump size or position. The template's 24/20 padding otherwise inflates the
       collapsed rail to ~74px and shifts the line 6-8px below the header. */
    height: 4.125rem !important;
    min-height: 4.125rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.sidebar-area .logo > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Fixed icon size: the collapsed turbine was clamped by max-width to the rail's
   content width, so it rendered 30px on dark (80px rail) but 26px on light
   (76px rail). Pin it so it's identical in both themes. */
[sidebar-data-theme="sidebar-hide"] .sidebar-area .logo .logo-icon {
    width: 1.875rem !important;
    height: 1.875rem !important;
    max-width: none !important;
}

.sidebar-area .logo .logo-text {
    display: block;
    margin: 0 auto;
}

.logo-ctext {
    display: block;
    font-size: 1.125rem !important;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.5rem;
    margin-bottom: 0;
    color: #111827;
    text-align: center;
    letter-spacing: 0;
}

:root {
    --sidebar-resizable-width: 17.5rem;
    /* Density knob: the app's own CSS is authored in rem, and the compact look
       comes from the 80% root font on html below. --island-zoom is its
       reciprocal, used by the few surfaces that render at native 100% (the
       "island" rules: login, booking pages, the wide scan/assign modals).
       The two values must stay reciprocal (80% <-> 1.25). */
    --island-zoom: 1.25;
}

/* Compact view, properly: the root font drops to 80% (12.8px) and every
   rem-authored rule follows. Unlike the old document-zoom hack, viewport
   units, fixed positioning, auto-margin centring and the browser's font-size
   accessibility setting all keep working natively. PDF exports use inline px
   styles only, so print stays full-size. */
html {
    font-size: 80%;
}

/* The full-height shells size against the real viewport again (the old zoom
   needed 100vh counter-scaling here). The theme gives .sidebar-area its
   100vh; .main-content keeps an explicit floor. */
.main-content {
    min-height: 100vh;
}

/* The template forces `overflow-y: scroll` on .sidebar-area (style.css), which
   paints an always-on scrollbar down the rail's right edge — in light mode a
   white track that crops the minimised rail's icons. (fluent-dark.css already
   hides it, but only for dark.) The real scroller is the inner .layout-menu,
   so the container never needs its own scrollbar — hide it in every theme. */
.sidebar-area {
    scrollbar-width: none;
}
.sidebar-area::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

/* (The old zoom-era .modal-backdrop 100vw/100vh counter-scaling and the
   body.modal-open padding cancellation are gone: with no html zoom,
   Bootstrap's own backdrop sizing and scrollbar compensation are correct.) */

/* select2 dropdowns are anchored to their select's parent (see
   includes/select2 — historically a zoom-era positioning fix, retained so
   every dropdown keeps its known-good anchoring). Anchored inside the page,
   the option <li>s inherit the form's list styling — notably
   `.gtaform-container .card ul li { margin-left:-20px }` in style.css — which
   shoves the option text left and clips it. Neutralise that leak with a rule
   of higher specificity, scoped to the select2 results so real page lists are
   untouched. */
.select2-dropdown .select2-results .select2-results__option {
    margin-left: 0 !important;
    color: inherit;
}

/* The Scan & Confirm modals show a wide 10-column tool table (name, part, serial,
   RFID, calibration, condition, storage/target/current location, op status). Give
   them more room than Bootstrap's modal-lg; the table itself stays inside its
   .table-responsive wrapper so it scrolls horizontally rather than pushing the
   page. (These dialogs live inside a zoomed island, where viewport units scale
   by the island factor — divide them back so 96vw means 96% of the screen.) */
.modal-dialog.scan-modal-wide {
    max-width: min(100rem, calc(96vw / var(--island-zoom)));
}

/* ISLANDS: a few surfaces render their content at native 100% — they were
   compact by design (or are their own full-screen layout) and read too small
   at the 80% root. CSS zoom scales their rem-rendered content back up:
   12.8px root × 1.25 = 16px effective. Zooming a full-width block does NOT
   overflow — the box still fits its parent, only its contents scale. The
   caveat: viewport units INSIDE a zoomed island render ×1.25, so island
   rules using vw/vh divide by var(--island-zoom). `.compact-exempt` is the
   opt-in hook; login (own split layout, uses 100vh) and the booking request
   page opt in by their existing class. */
.login-page,
.booking-request-page,
.compact-exempt {
    zoom: var(--island-zoom);
}

.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -0.25rem;
    z-index: 30;
    width: 0.5rem;
    height: 100%;
    cursor: ew-resize;
    touch-action: none;
}

.sidebar-resize-handle::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0.1875rem;
    width: 0.125rem;
    height: 100%;
    background: transparent;
    transition: background-color 0.2s ease;
}

.sidebar-resize-handle:hover::after,
body.sidebar-is-resizing .sidebar-resize-handle::after {
    background: #3b82f6;
}

body.sidebar-is-resizing {
    cursor: ew-resize;
    user-select: none;
}

body.sidebar-is-resizing .sidebar-area,
body.sidebar-is-resizing .main-content {
    transition: none !important;
}

body[sidebar-data-theme="sidebar-hide"] .sidebar-resize-handle {
    display: none;
}

.notifications .notification-count {
    position: absolute;
    top: -0.4375rem;
    right: -0.4375rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 62.4375rem;
    background: #ef4444;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
}

.notifications .dropdown-item {
    white-space: normal;
}

.notifications .notification-menu .dropdown-item {
    cursor: pointer;
}

.notification-activity-item {
    cursor: pointer;
}

.notifications-modal .modal-header {
    align-items: flex-start;
}

.notification-activity-item {
    display: flex;
    gap: 0.875rem;
    padding: 0.9375rem 0;
    border-bottom: 0.0625rem solid #edf0f4;
}

.notification-activity-item:first-child {
    padding-top: 0;
}

.notification-activity-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.notification-activity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.625rem;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
    background: #eef4ff;
}

.notification-activity-icon .material-symbols-outlined {
    font-size: 1.4375rem;
}

.notification-activity-content p {
    margin: 0 0 0.3125rem;
    color: #111827;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.notification-activity-content span {
    color: #6b7280;
    font-size: 0.8125rem;
}

#work-order-list {
    max-height: 32.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

#work-order-list::-webkit-scrollbar {
    width: 0.375rem;
}

#work-order-list::-webkit-scrollbar-thumb {
    border-radius: 62.4375rem;
    background: #cbd5e1;
}

.work-order-task-filter-form .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    min-height: 2.625rem;
    height: 2.625rem;
    padding: 0 2.125rem 0 0.875rem;
}

.work-order-task-filter-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding: 0;
    color: #292929;
    font-size: 1rem;
    line-height: 1.25;
}

.work-order-task-filter-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 0.625rem;
    transform: translateY(-50%);
}

.work-order-task-filter-form .form-control {
    min-height: 2.625rem;
    line-height: 1.25;
}

.work-order-create-tasks .task-card>.row,
.work-order-create-tasks .sub-task {
    row-gap: 0.625rem;
}

.work-order-create-tasks .work-order-task-actions {
    align-items: center;
    flex-wrap: wrap;
}

.work-order-create-tasks .work-order-task-actions .cbtn {
    min-width: 2.125rem;
    min-height: 2rem;
    padding: 0.4375rem 0.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
}

.work-order-create-tasks .work-order-task-actions .cbtn-red {
    padding-left: 0.6875rem;
    padding-right: 0.6875rem;
}

/* "Add Sub Task" adds a row BELOW the task, so it sits under the task row,
   indented flush with the sub-task rows it creates — not floating in the
   leftover column space at the row's right edge. Ghost style: visible as an
   affordance, quiet next to the real form controls. */
.work-order-create-tasks .add-subtask-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    border: 0.0625rem dashed #93c5fd;
    border-radius: 0.5rem;
    background: transparent;
    color: #3B82F6;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.work-order-create-tasks .add-subtask-btn i {
    font-size: 1rem;
    line-height: 1;
}

.work-order-create-tasks .add-subtask-btn:hover {
    background: #eff6ff;
    border-style: solid;
    border-color: #3B82F6;
}

/* Avatar chips across the work-order pages: the user's uploaded profile
   picture when set (img.avatar-photo via userAvatarHtml), initials otherwise.
   .wo-crew lays out a whole crew; .wo-crew-avatar is also used standalone
   wherever a single name was paired with the old stock photo (workload
   cards, kanban cards, execution headers). */
.wo-crew {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.875rem;
}

.wo-crew .wo-crew-member {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.wo-crew-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: #6c757d;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Photo variant of any avatar chip (uploaded profile picture). */
img.avatar-photo {
    object-fit: cover;
    background-color: #e1dfdd;
}

#addTaskWrapper .add-btn {
    min-width: 6rem;
}

.wt-kanban-grid {
    /* The fade and the hint chip are positioned against this box. */
    position: relative;
}

.wt-kanban-grid>.d-flex {
    overflow-x: auto;
    padding-bottom: 0.625rem;
}

/* The board was inheriting the template's global bar (style.css:20369) — 0.3125rem
   of #888, which on a touch device is an overlay that only exists mid-gesture. So
   nothing said the board scrolls. Same greys and pill as the lane's own bar below. */
.wt-kanban-grid>.d-flex {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.wt-kanban-grid>.d-flex::-webkit-scrollbar {
    height: 0.5rem;
}

.wt-kanban-grid>.d-flex::-webkit-scrollbar-track {
    background: transparent;
}

.wt-kanban-grid>.d-flex::-webkit-scrollbar-thumb {
    border-radius: 62.4375rem;
    background: #cbd5e1;
}

/* Fade and chip appear only while there is genuinely more board to reach —
   kanban-scroll.js owns the three classes. An affordance on a board that fits is
   pure decoration, the same rule the back-to-top button follows. Both stop short
   of the rail's 0.625rem bottom padding so neither covers the scrollbar. */
.wt-kanban-grid::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0.625rem;
    width: 3rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    /* Reads the same token the panel paints itself with, so one rule covers both
       themes and there is no literal to drift from it. */
    background: linear-gradient(to right, transparent, var(--fl-bg-surface, #ffffff));
}

.wt-kanban-grid.is-scrollable:not(.is-at-end)::after {
    opacity: 1;
}

.wt-scroll-hint {
    position: absolute;
    right: 0.5rem;
    bottom: 1.125rem;
    display: none;
    padding: 0.25rem 0.625rem;
    border-radius: 62.4375rem;
    background: rgba(17, 24, 39, 0.78);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wt-scroll-hint::after {
    content: " \203A";
    font-weight: 700;
}

/* Only where "swipe" is the true verb; on a desktop the visible bar and the fade
   already carry it. */
@media (max-width: 991.98px) {
    .wt-kanban-grid.is-scrollable .wt-scroll-hint {
        display: block;
    }

    .wt-kanban-grid.is-scrollable.is-at-start .wt-scroll-hint {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .wt-kanban-grid::after,
    .wt-scroll-hint {
        transition: none;
    }
}

@media print {

    .wt-kanban-grid::after,
    .wt-scroll-hint {
        display: none !important;
    }
}

/* The lane scrollbar; the lanes themselves are .wo-lane (the .stats-card rules that
   used to live here predated that rename and matched nothing). */
.wo-lane {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.wo-lane::-webkit-scrollbar {
    width: 0.375rem;
}

.wo-lane::-webkit-scrollbar-thumb {
    border-radius: 62.4375rem;
    background: #cbd5e1;
}

.provisioning-table thead th {
    color: #111827;
    font-weight: 700;
    background: #fff !important;
}

.provisioning-table .form-control {
    min-width: 10rem;
    height: 2.25rem;
    font-size: 0.8125rem;
}

#start-task-link.disabled {
    opacity: 0.6;
    pointer-events: auto;
    cursor: not-allowed;
}

.asset-summary-grid .col-6 {
    min-width: 9.375rem;
}

.asset-info-card {
    min-height: 5.375rem;
    gap: 0.625rem;
}
 
.asset-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    font-size: 1.125rem;
}

/* KPI card icons: keep the colour, drop the filled background chip (design
   preference) in both themes; a slightly larger glyph keeps visual weight. */
.asset-kpi-card .asset-info-icon {
    background: transparent !important;
    box-shadow: none !important;
}
.asset-kpi-card .asset-info-icon .material-symbols-outlined {
    font-size: 1.875rem;
}
.asset-info-icon-blue {
    color: #2563eb;
    background: #dbeafe;
}

.asset-info-icon-green {
    color: #059669;
    background: #d1fae5;
}

.asset-info-icon-purple {
    color: #7c3aed;
    background: #ede9fe;
}

.asset-info-icon-orange {
    color: #ea580c;
    background: #ffedd5;
}

.asset-info-icon-amber {
    color: #d97706;
    background: #fef3c7;
}

.asset-info-icon-red {
    color: #dc2626;
    background: #fee2e2;
}

.task-card-section-card {
    border: 0.0625rem solid #e2e8f0;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.125rem 0.4375rem rgba(15, 23, 42, 0.12);
    padding: 1.75rem 2rem;
}

.task-card-section-title {
    margin: 0 0 1.625rem;
    color: #111827;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0;
}

.procedure-subsection {
    margin-bottom: 1.375rem;
}

.procedure-subsection:last-child {
    margin-bottom: 0;
}

.procedure-subsection-title {
    margin: 0 0 0.5rem;
    color: #111827;
    font-size: 0.9375rem;
    font-weight: 800;
}

.procedure-step-line {
    margin: 0 0 0.4375rem;
    color: #111827;
    font-size: 0.875rem;
    line-height: 1.55;
}

.procedure-step-line p {
    margin-bottom: 0.4375rem;
}

.final-step-line {
    margin: 0;
    color: #111827;
    font-size: 0.875rem;
    line-height: 1.55;
}

.final-step-empty {
    margin: 0.75rem 0 0 2rem;
    color: #111827;
    font-size: 0.875rem;
}

@media (min-width: 1200px) {
    body:not([sidebar-data-theme="sidebar-hide"]) .asset-summary-grid {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.375rem;
    }

    body:not([sidebar-data-theme="sidebar-hide"]) .sidebar-area {
        width: var(--sidebar-resizable-width) !important;
    }

    body:not([sidebar-data-theme="sidebar-hide"]) .main-content {
        padding-left: calc(var(--sidebar-resizable-width) + 0.75rem) !important;
    }
}

/* Shown only below 992px, where the GTA logo is hidden. */
.header-wordmark-item {
    display: none;
}

@media (max-width: 1199.98px) {
    .sidebar-resize-handle {
        display: none;
    }

    /* The header items are addressed by class, not :nth-child — a positional
       selector breaks silently the day an item is added or reordered. */
    .left-header-content .hburger-menu-mobile {
        display: block;
    }

    .left-header-content .right-header-content li.header-burger-item,
    .left-header-content .right-header-content li.header-logo-item {
        display: block;
    }

    .left-header-content .right-header-content li.header-brand-item {
        display: none;
    }

    .logo-mobile a img {
        width: 9.75rem;
        height: auto;
        display: block;
    }
}

/* The row's only flexible item is the search box, and it is hidden below 992px —
   so justify-content-between had free space to spread the four survivors evenly
   across the bar. The auto margin below is what splits it back into two groups:
   an auto margin consumes the free space BEFORE justify-content sees it, which
   is why the bar anchors even though the ul keeps Bootstrap's
   .justify-content-between (a utility, so space-between is !important and
   cannot be overridden from here). One gap owns the spacing. */
@media (max-width: 991.98px) {
    .left-header-content .right-header-content {
        gap: 0.75rem;
    }

    .left-header-content .right-header-content li {
        margin-right: 0;
    }

    .left-header-content .right-header-content li.header-notification-item {
        margin-left: auto;
    }

    /* The 8.9:1 wordmark earns its width on a tablet, not on a phone. The fixed
       HELIOS mark takes its place so the bar still says where you are. */
    .left-header-content .right-header-content li.header-logo-item {
        display: none;
    }

    .left-header-content .right-header-content li.header-wordmark-item {
        display: block;
    }
}

@media (max-width: 575.98px) {
    .left-header-content .right-header-content {
        gap: 0.5rem;
    }

    /* The theme shoves this menu 7.625rem to the right (style.css:21211, :21224)
       — fixed offsets from before Popper placed it, and !important, so they beat
       Bootstrap's inline transform and hang it 29px off the right edge. Pin it to
       the viewport: the bell sits close enough to the edge that right-aligning a
       20rem menu to the BUTTON would clip it on the left instead.
       Selector must carry .noti to match the theme's (0,5,0) — one class short and
       only `position` here applies, which moves the menu without unclipping it. */
    .right-header-content .header-right-item .notifications.noti.dropdown .dropdown-menu {
        position: fixed !important;
        top: var(--app-header-h, 3.25rem) !important;
        right: 0.75rem !important;
        left: auto !important;
        transform: none !important;
        width: min(20rem, calc(100vw - 1.5rem));
    }
}

.login-page {
    /* Island: 100vh renders ×zoom inside it — divide back to the real screen. */
    min-height: calc(100vh / var(--island-zoom));
    background: #fff;
}

/* ===== Sign-in card (Fluent 2 — tokens from fluent-tokens.css) ===== */
.login-card {
    width: min(25rem, 100%);
    padding: var(--fl-32) var(--fl-32) 1.75rem;
    border: none;
    border-radius: var(--fl-radius-lg);
    background: var(--fl-bg-surface);
    box-shadow: var(--fl-shadow-16);
}

.login-card h2 {
    margin: 0 0 0.25rem;
    color: var(--fl-fg);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.login-card>p {
    margin: 0 0 var(--fl-24);
    color: var(--fl-fg-secondary);
    font-size: 0.875rem;
}

.login-card .label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--fl-fg);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Fluent 2 field: neutral stroke with a darker bottom edge; focus paints the
   brand underline inside the box (inset shadow, so the control never reflows). */
.login-card .form-control {
    height: var(--fl-control-h);
    border: 0.0625rem solid var(--fl-stroke-strong);
    border-bottom-color: #8a8886;
    border-radius: var(--fl-radius-sm);
    background: var(--fl-bg-surface);
    color: var(--fl-fg);
    font-size: 0.875rem;
    transition: box-shadow 0.1s ease, border-color 0.1s ease;
}

.login-card .form-control::placeholder {
    color: var(--fl-fg-disabled);
}

.login-card .form-control:focus {
    border-color: var(--fl-stroke-strong);
    box-shadow: inset 0 -0.125rem 0 0 var(--fl-brand);
}

/* Show/hide password: a real button, quiet until needed. */
.login-card .eye-password-icon {
    border: 0;
    padding: 0.375rem 0.5625rem;
    background: transparent;
    color: var(--fl-fg-secondary);
    border-radius: var(--fl-radius-sm);
    cursor: pointer;
}

.login-card .eye-password-icon:hover {
    color: var(--fl-fg);
}

.login-card .eye-password-icon:focus-visible {
    outline: 0.125rem solid var(--fl-brand);
    outline-offset: 0.0625rem;
}

.login-submit {
    height: var(--fl-control-h);
    border: 0;
    border-radius: var(--fl-radius-sm);
    background: var(--fl-brand);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Compliance line under the action — true statement: auth events are audited. */
.login-audit-note {
    margin: var(--fl-16) 0 0;
    padding-top: var(--fl-12);
    border-top: 0.0625rem solid var(--fl-stroke);
    color: var(--fl-fg-secondary);
    font-size: 0.7813rem;
    line-height: 1.5;
}

.login-footer {
    width: 100%;
    text-align: center;
}

.combined-footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.125rem;
    width: fit-content;
    max-width: min(32.5rem, 92vw);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.25rem;
}

.combined-footer-logo-gta {
    width: min(18.75rem, 56vw);
    height: auto;
    object-fit: contain;
}

.combined-footer-logo-x {
    color: #6b7280;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.combined-footer-logo-amic {
    width: min(7.875rem, 24vw);
    height: auto;
    object-fit: contain;
}

.footer-area .combined-footer-logo.footer-top-img {
    width: fit-content;
    height: auto !important;
}

/* .footer-area .combined-footer-logo img {
  width: auto;
} */

.footer-area .combined-footer-logo-gta {
    width: min(20rem, 44vw);
}

.footer-area .combined-footer-logo-amic {
    width: min(7rem, 22vw);
}

.login-combaine-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.875rem;
}

.login-combaine-logo {
    width: min(14.6875rem, 62vw);
    height: auto;
    object-fit: contain;
}

.login-footer p {
    margin: 0;
    color: #8f98a8;
    font-size: 0.8125rem;
    line-height: 1.2;
}

/* Pin the in-app footer to the bottom. .main-content is a flex column (min-height:100vh),
   but its .main-content-container child was a plain block, so the footer never reached the
   bottom. Make the container a growing flex column and let the footer push down with an
   auto top margin, while padding-top guarantees a gap above it even when content is tall. */
.main-content-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.main-content-container .login-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

@media (max-width: 768px) {
    .login-card {
        padding: 1.5rem 1.25rem 1.75rem;
    }

    .combined-footer-logo {
        gap: 1.25rem;
        margin-top: 2.5rem;
    }
}

/* ===== Split-screen login (Fluent 2 shell) ===== */
.login-split-page {
    overflow-x: hidden;
    margin: 0;
}

.login-split {
    display: flex;
    min-height: 100vh;
    box-sizing: border-box;
    font-family: var(--fl-font);
}

.login-split * {
    box-sizing: border-box;
}

/* Brand panel: engineered navy with a brand-blue glow rising from the turbine
   disc corner. Content is a left-aligned column — identity up top, the HELIOS
   wordmark as the centrepiece, the pilot's module register along the bottom. */
.login-aside {
    position: relative;
    flex: 0 0 42%;
    max-width: 42%;
    display: flex;
    padding: 3rem 2.75rem 2.5rem;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 88% 108%, rgba(0, 128, 208, 0.32) 0%, rgba(0, 128, 208, 0) 55%),
        linear-gradient(160deg, #10365e 0%, #0c294a 55%, #081d36 100%);
}

.login-aside-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.login-aside-logo {
    align-self: flex-start;
    width: min(15rem, 62%);
    height: auto;
    filter: brightness(0) invert(1);
}

.login-aside-hero {
    margin: auto 0;
    padding: 3rem 0;
}

.login-aside-title {
    margin: 0 0 0.625rem;
    color: #fff;
    font-size: 2.875rem;
    font-weight: 700;
    letter-spacing: 0.5rem;
    line-height: 1;
}

.login-aside-tagline {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9375rem;
    line-height: 1.5;
    max-width: 36ch;
}

/* The module register: the three pilot modules as placard rows — real product
   structure, not decoration. The short dash is a dimension-mark, not a bullet. */
.login-aside-modules {
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-aside-modules li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6875rem 0;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8438rem;
    letter-spacing: 0.025rem;
}

.login-aside-modules li::before {
    content: "";
    flex: 0 0 auto;
    width: 1rem;
    height: 0.125rem;
    background: #3aa0dd;
}

/* Turbine disc bleeding off the panel edge — the one loud thing on the page.
   Vector (turbine-disc.svg, white fill), so it stays crisp at any size. */
.login-aside-watermark {
    position: absolute;
    right: -11.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 35rem;
    height: auto;
    opacity: 0.07;
    z-index: 1;
    pointer-events: none;
}

/* Working side: Fluent subtle canvas so the elevated card reads as a surface. */
.login-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
    background: var(--fl-bg-subtle);
}

.login-content-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-input-wrap {
    position: relative;
}

.login-card .login-input-wrap .form-control {
    padding-right: 2.75rem;
}

.login-card .login-input-wrap .eye-password-icon {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
}

.login-submit {
    box-shadow: none;
    transition: background 0.1s ease;
}

.login-submit:hover {
    background: var(--fl-brand-hover);
}

.login-submit:active {
    background: var(--fl-brand-pressed);
}

.login-submit:focus-visible {
    outline: 0.125rem solid var(--fl-fg);
    outline-offset: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
    .login-card .form-control,
    .login-submit {
        transition: none;
    }
}

@media (max-width: 900px) {
    .login-split {
        flex-direction: column;
    }

    .login-aside {
        flex: none;
        max-width: 100%;
        min-height: 12.5rem;
        padding: 1.875rem 1.375rem;
    }

    .login-aside-inner {
        align-items: center;
        text-align: center;
    }

    .login-aside-logo {
        align-self: center;
        width: min(13.125rem, 60%);
    }

    .login-aside-hero {
        padding: 1.25rem 0 0.375rem;
    }

    .login-aside-title {
        font-size: 2.125rem;
        letter-spacing: 0.3125rem;
    }

    /* The register is panel furniture — on a phone the panel is a compact band. */
    .login-aside-modules {
        display: none;
    }

    .login-aside-watermark {
        width: 18.75rem;
        right: -6.875rem;
    }

    .login-content {
        padding: 1.5rem 1.125rem 1.875rem;
        min-width: 0;
    }

    .login-content-body {
        min-width: 0;
    }

    .login-card {
        min-width: 0;
        padding: 1.625rem 1.375rem 1.875rem;
    }
}

















































/* book out book in css */
.table-responsive {
    border-radius: 0.25rem !important;
}

.ali-assigned-tools-table thead th,
.task-table-ali thead th,
.table-location thead th,
.table-quarantine thead th,
.custom-table thead th {
    background: #e9e0fd !important;
    color: #333 !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    padding: 0.625rem 0.5rem !important;
    border-right: 0.0625rem solid #c7bfdc !important;
    border-bottom: 0.0625rem solid #c7bfdc !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.ali-assigned-tools-table tbody td,
.task-table-ali tbody td,
.table-location tbody td,
.table-quarantine tbody td,
.custom-table tbody td {
    font-size: 0.6875rem !important;
    color: #333 !important;
    padding: 0.625rem 0.5rem !important;
    border-right: 0.0625rem solid #e0e0e0 !important;
    border-bottom: 0.0625rem solid #e0e0e0 !important;
    vertical-align: top !important;
    background: #fff !important;
    line-height: 1.3 !important;
}

#scan-tools-table thead th,
.custom-table-book-in-manager thead th {
    background: #d8d0ea !important;
    color: #222 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.875rem 0.625rem !important;
    border-right: 0.0625rem solid #bfb7d3 !important;
    border-bottom: 0.0625rem solid #bfb7d3 !important;
    text-align: left !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

#scan-tools-table tbody td,
.custom-table-book-in-manager tbody td {
    background: #d7dadd;
    color: #222 !important;
    font-size: 0.75rem !important;
    padding: 0.875rem 0.625rem !important;
    border-right: 0.0625rem solid #bfc3c7 !important;
    border-bottom: 0.0625rem solid #bfc3c7 !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}

.btn-segment-group {
    display: inline-flex;
    background-color: #e9ecef;
    border-radius: 0.625rem;
    padding: 0.25rem;
    gap: 0.125rem;
}

.segment-btn {
    padding: 0.375rem 1.125rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.segment-btn:hover {
    color: #333;
    text-decoration: none;
}

.segment-btn.active {
    background-color: #4A90E2;
    color: #fff;
    box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.15);
}


.wo-filter-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 1.25rem;
    margin-bottom: 0.625rem;
}

.wo-filter-label {
    font-size: 0.8125rem;
    color: #6b7280;
    white-space: nowrap;
}

.wo-filter-select {
    flex: 1;
    font-size: 0.8125rem;
    color: #111827;
    background: #f9fafb;
    border: 0.0625rem solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.4375rem 1.875rem 0.4375rem 0.625rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    cursor: pointer;
    outline: none;
}

.scroll-request-container {
    max-height: 31.25rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.booking-request-page {
    color: #111827;
    max-width: 73.75rem;
}

.booking-request-heading {
    align-items: flex-start;
}

.booking-request-heading h2 {
    margin: 0 0 0.3125rem;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.2;
}

.booking-request-heading p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.75rem;
}

.booking-request-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1.375rem;
    color: #0f172a;
    font-size: 1.125rem;
    text-decoration: none;
}

.booking-request-layout {
    display: grid;
    grid-template-columns: 16.5rem 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

.booking-request-sidebar,
.booking-request-detail-card,
.booking-stat-card {
    border: 0.0625rem solid #dce3ee !important;
    border-radius: 0.375rem !important;
    background: #fff;
    box-shadow: 0 0.1875rem 0.3125rem rgba(15, 23, 42, 0.22);
}

.booking-request-sidebar {
    max-width: none;
    height: auto;
    overflow: hidden;
}

.booking-request-sidebar-head {
    padding: 1.125rem 1.125rem 0.875rem;
    border-bottom: 0.0625rem solid #edf1f6;
}

.booking-request-sidebar-head h5 {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 800;
}

.booking-request-sidebar-head p {
    margin: 0 0 0.875rem;
    color: #64748b;
    font-size: 0.6875rem;
}

.booking-request-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0.25rem;
    border-radius: 0.25rem;
    background: #f1f3f7;
}

.booking-request-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    border-radius: 0.1875rem;
    color: #111827;
    font-size: 0.625rem;
    line-height: 1.1;
    text-decoration: none;
}

.booking-request-tabs a.active {
    background: #3b82f6;
    color: #fff;
}

/* The list's height ties to the viewport with a readable floor: short laptop
   screens always show several cards (the page scrolls instead of the list
   collapsing to zero, which the old fixed-height flex sidebar did), and tall
   screens fill the window like before. */
.booking-request-list {
    height: clamp(21.25rem, calc(100vh - 35rem), 87.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.booking-request-feed-filters {
    display: grid;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 0.0625rem solid #edf1f6;
}

.booking-request-feed-filters .form-control,
.booking-request-feed-filters .form-select {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
}

.booking-request-feed-selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.booking-request-feed-dates label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 600;
}

.booking-request-feed-dates .form-control {
    flex: 1;
    min-width: 0;
}

.booking-request-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-top: 0.0625rem solid #edf1f6;
    color: #64748b;
    font-size: 0.75rem;
}

.booking-request-list-footer button {
    border: 0.0625rem solid #dce3ee;
    border-radius: 0.375rem;
    background: #fff;
    padding: 0.3125rem 0.875rem;
    color: #111827;
    font-size: 0.75rem;
    font-weight: 600;
}

.booking-request-list-head {
    display: grid;
    grid-template-columns: 1fr 5.375rem;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem 0.5rem;
    color: #64748b;
    font-size: 0.75rem;
    border-bottom: 0.0625rem solid #edf1f6;
}

.booking-request-list::-webkit-scrollbar {
    width: 0.375rem;
}

.booking-request-list::-webkit-scrollbar-thumb {
    border-radius: 62.4375rem;
    background: #cbd5e1;
}

.booking-request-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.375rem;
    gap: 0.625rem;
    padding: 0.75rem 0.75rem;
    border-bottom: 0.0625rem solid #e6ebf3;
    cursor: pointer;
}

.booking-request-item:hover,
.booking-request-item.is-active {
    background: #eaf3ff;
}

.booking-request-item-main strong {
    display: block;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.3;
}

.booking-request-item-main span {
    display: block;
    margin-top: 0.125rem;
    color: #2563eb;
    font-size: 0.75rem;
}

.booking-request-item-main small,
.booking-request-item-side small {
    display: block;
    color: #64748b;
    font-size: 0.6875rem;
    line-height: 1.3;
}

.booking-request-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.3125rem;
    color: #111827;
    font-size: 0.5625rem;
    font-weight: 700;
}

.booking-request-main {
    min-width: 0;
}

.booking-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.booking-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 5rem;
    padding: 0.875rem;
}

.booking-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.booking-stat-icon-orange {
    color: #d97706;
    background: #fef3c7;
}

.booking-stat-icon-green {
    color: #16a34a;
    background: #dcfce7;
}

.booking-stat-icon-teal {
    color: #0f766e;
    background: #ccfbf1;
}

.booking-stat-icon-blue {
    color: #2563eb;
    background: #dbeafe;
}

.booking-stat-icon-red {
    color: #ef4444;
    background: #fee2e2;
}

.booking-stat-card strong {
    position: absolute;
    top: 1.125rem;
    left: 4.5rem;
    font-size: 1.375rem;
    font-weight: 800;
}

.booking-stat-card small {
    color: #334155;
    font-size: 0.625rem;
    line-height: 1.3;
    text-transform: capitalize;
}

.booking-request-detail-card {
    min-height: 22.5rem;
    padding: 1.25rem 1rem 1rem;
}

.booking-request-detail-head h6,
.booking-tool-section h6 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
}

.booking-request-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.375rem;
    margin: 1.25rem 0 1.25rem;
}

.booking-request-meta span {
    display: block;
    color: #64748b;
    font-size: 0.6875rem;
}

.booking-request-meta strong {
    display: block;
    margin-top: 0.25rem;
    color: #111827;
    font-size: 0.8125rem;
    font-weight: 700;
}

.booking-select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    margin: 0;
    color: #334155;
    font-size: 0.4375rem;
    font-weight: 500;
}

.booking-tools-table-wrap {
    min-height: 7.5rem;
    border: 0;
    border-radius: 0;
    overflow: auto;
}

.booking-tools-table {
    margin: 0;
    min-width: 45rem;
    border: 0.0625rem solid #c7cdd6;
}

.booking-tools-table thead th {
    background: #f8fafc !important;
    color: #111827 !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    padding: 0.625rem 0.5rem !important;
    border-right: 0.0625rem solid #c7cdd6 !important;
    border-bottom: 0.0625rem solid #c7cdd6 !important;
}

.booking-tools-table tbody td {
    color: #111827 !important;
    font-size: 0.75rem !important;
    font-weight: 600;
    padding: 0.625rem 0.5rem !important;
    border-right: 0.0625rem solid #c7cdd6 !important;
    border-bottom: 0.0625rem solid #c7cdd6 !important;
    vertical-align: middle !important;
}

/* style.css strips the first/last cell insets on every card table
   (.gtaform-container .card table tr td:first-child { padding-left: 0 !important },
   plus a 15px !important bottom) — that suits its old flush tables, but in this
   BORDERED grid it jams the first column against the table edge. Restore the
   inset with the specificity to win. */
.gtaform-container .card .booking-tools-table tr th,
.gtaform-container .card .booking-tools-table tr td,
.gtaform-container .card .booking-tools-table tr th:first-child,
.gtaform-container .card .booking-tools-table tr td:first-child,
.gtaform-container .card .booking-tools-table tr th:last-child,
.gtaform-container .card .booking-tools-table tr td:last-child {
    padding: 0.625rem 0.5rem !important;
}

.booking-pill,
.booking-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0.8125rem;
    border-radius: 62.4375rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.375rem;
    font-weight: 800;
    white-space: nowrap;
}

.booking-pill-red {
    color: #dc2626;
    background: #fee2e2;
}

.booking-pill-green {
    color: #16a34a;
    background: #dcfce7;
}

.booking-pill-yellow {
    color: #92400e;
    background: #fef3c7;
}

.booking-status-badge {
    color: #fff;
    background: #334155;
}

/* The "already processed" notice is a full sentence, not a tag — readable size
   and a soft info surface instead of the 8px white-on-slate pill. */
.booking-processed-note,
.manager-booking-request .booking-detail-actions .booking-processed-note {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    background: #eef2ff;
    padding: 0.5rem 0.875rem;
    color: #3730a3;
    font-size: 0.75rem;
    font-weight: 600;
}

.booking-notes-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: end;
    margin-top: 0.875rem;
}

.booking-notes {
    margin: 0;
    color: #64748b;
    font-size: 0.6875rem;
    line-height: 1.35;
}

.booking-detail-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.booking-detail-actions span {
    margin-right: 0.5rem;
    color: #2563eb;
    font-size: 0.6875rem;
}

.booking-detail-actions button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.75rem;
    border: 0;
    font-size: 0.6875rem;
    font-weight: 700;
}

.booking-request-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.625rem;
    min-height: 1.25rem;
    border-radius: 62.4375rem;
    padding: 0.1875rem 0.5625rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

.booking-request-status-green {
    color: #16a34a;
    background: #dcfce7;
}

.booking-request-status-yellow {
    color: #92400e;
    background: #fef3c7;
}

.booking-request-status-red {
    color: #dc2626;
    background: #fee2e2;
}

/* Mixed line-level outcome: some tools approved, some rejected. */
.booking-request-status-amber {
    color: #c2410c;
    background: #ffedd5;
}

.manager-booking-request {
    max-width: none;
}

.manager-booking-request .booking-request-layout {
    grid-template-columns: minmax(13.125rem, 28%) 1fr;
    gap: 0.875rem;
}

.manager-booking-request .booking-request-list {
    height: clamp(21.25rem, calc(100vh - 40rem), 87.5rem);
}

.manager-booking-request .booking-request-sidebar-head {
    padding: 0.875rem 0.625rem 0.5rem;
}


.manager-booking-request .booking-request-sidebar-head p {
    margin-bottom: 0.625rem;
    font-size: 0.6875rem;
}

.manager-booking-request .booking-request-tabs a {
    min-height: 1.5rem;
    font-size: 0.625rem;
}

.manager-booking-request .booking-request-filter {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
}

.manager-booking-request .booking-request-filter select {
    height: 1.75rem;
    min-height: 1.75rem;
    border: 0.0625rem solid #d6dde8;
    border-radius: 0.1875rem;
    color: #475569;
    font-size: 0.6875rem;
    padding: 0 1.125rem 0 0.375rem;
}


.manager-booking-request .booking-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.875rem;
    margin-bottom: 0.75rem;
}

.manager-booking-request .booking-stat-card {
    display: grid;
    grid-template-columns: 2rem auto 1fr;
    align-items: center;
    gap: 0.625rem;
    min-height: 3.875rem;
    padding: 0.75rem 0.875rem;
}

.manager-booking-request .booking-stat-card strong {
    position: static;
    font-size: 1.5rem;
}

.manager-booking-request .booking-stat-card small {
    font-size: 0.625rem;
    text-transform: none;
}

.manager-booking-request .booking-request-detail-card {
    min-height: 20.375rem;
    padding: 1.125rem 1.375rem 0.875rem;
}


.manager-booking-request .booking-request-meta {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.875rem;
    margin: 1.125rem 0 0.875rem;
}


.manager-booking-request .booking-request-detail-head p {
    margin: 0 0 0.75rem;
    color: #64748b;
    font-size: 0.8125rem;
}


.manager-booking-request .booking-request-status {
    min-height: 1.3125rem;
    font-size: 0.5625rem;
}


.manager-booking-request .booking-pill,
.manager-booking-request .booking-status-badge {
    font-size: 0.625rem;
}

.manager-booking-request .booking-notes {
    font-size: 0.5625rem;
}

.manager-booking-request .booking-detail-actions span,
.manager-booking-request .booking-detail-actions button,
.manager-booking-request .booking-select-all-label {
    font-size: 0.75rem;
}

.technical-detail-inner {
    padding: 1.25rem 1rem 1rem;
}

.technical-detail-title {
    margin: 0;
    color: #111827;
    font-size: 1.125rem;
    font-weight: 800;
}

.technical-detail-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(6.5625rem, 1fr));
    gap: 1.375rem;
    margin: 1.25rem 0 1.25rem;
    color: #64748b;
    font-size: 0.75rem;
}

.technical-detail-meta .text-dark {
    display: block;
    margin-top: 0.25rem;
    color: #111827 !important;
    font-size: 0.6875rem;
    font-weight: 700;
}

.technical-tool-title {
    margin: 0 0 0.625rem;
    color: #111827;
    font-size: 1.0625rem;
    font-weight: 800;
}

/* Match the manager page: span the full viewport instead of the 1180px
   .booking-request-page cap, with the same proportional sidebar column. */
.technical-booking-request {
    max-width: none;
}

.technical-booking-request .booking-request-layout {
    grid-template-columns: minmax(13.125rem, 28%) 1fr;
    gap: 0.875rem;
}

.technical-booking-request .booking-request-heading h2 {
    font-size: 1.25rem;
}

.technical-booking-request .booking-request-heading p {
    font-size: 0.8125rem;
}


.technical-booking-request .booking-request-sidebar-head p,
.technical-booking-request .booking-request-tabs a,

.technical-booking-request .booking-request-status {
    font-size: 0.5625rem;
}

.technical-booking-request .booking-stat-card strong {
    font-size: 1.5rem;
}

.technical-booking-request .booking-stat-card small {
    font-size: 0.6875rem;
}


.technical-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.375rem;
    border-radius: 62.4375rem;
    padding: 0.1875rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 800;
    white-space: nowrap;
}

.technical-status-operational {
    color: #2563eb;
    background: #dbeafe;
}

.technical-status-condition {
    color: #16a34a;
    background: #dcfce7;
}

/* Graduated breakpoints so laptops and iPads keep a usable two-column layout
   before stacking (matches the .asset-stat-grid precedent). */
@media (max-width: 1399.98px) {
    .booking-request-layout,
    .manager-booking-request .booking-request-layout,
    .technical-booking-request .booking-request-layout {
        grid-template-columns: minmax(15.625rem, 32%) 1fr;
    }

    .booking-request-meta,
    .manager-booking-request .booking-request-meta,
    .technical-detail-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.875rem;
    }
}

@media (max-width: 1199.98px) {
    html,
    body {
        overflow-x: clip;
    }

    .booking-request-layout,
    .manager-booking-request .booking-request-layout,
    .technical-booking-request .booking-request-layout {
        grid-template-columns: minmax(15rem, 36%) 1fr;
    }

    .booking-stats-grid,
    .manager-booking-request .booking-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .booking-request-layout,
    .manager-booking-request .booking-request-layout,
    .technical-booking-request .booking-request-layout {
        grid-template-columns: 1fr;
    }

    .booking-request-list,
    .manager-booking-request .booking-request-list {
        height: auto;
        max-height: 26.25rem;
    }

    .booking-request-meta,
    .manager-booking-request .booking-request-meta,
    .technical-detail-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 575.98px) {

    .booking-stats-grid,
    .booking-request-meta,
    .technical-detail-meta,
    .booking-notes-actions,
    .booking-request-feed-selects {
        grid-template-columns: 1fr;
    }

    .booking-detail-actions {
        flex-wrap: wrap;
    }
}

.custom-tool-table {
    border: 0.0625rem solid #e9e9e9;
    border-radius: 0.875rem;
    overflow: hidden;
}

.custom-tool-table thead {
    background: #f8f9fb;
}

.custom-tool-table th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6c757d;
    padding: 1rem;
    border-bottom: 0.0625rem solid #e9e9e9;
    white-space: nowrap;
}

.custom-tool-table td {
    padding: 1.125rem 1rem;
    vertical-align: middle;
    font-size: 0.875rem;
    color: #333;
    border-bottom: 0.0625rem solid #f1f1f1;
}

.custom-tool-table tbody tr:last-child td {
    border-bottom: none;
}

.bg-danger-subtle {
    background: #fdeaea;
}

.bg-success-subtle {
    background: #def7e5;
}

/* Same concept as #assigntool: an ISLAND — the modal text renders at native
   100% (island zoom over the 80% root), widened and centred explicitly
   (left:50% + negative half-width margin — auto margins mis-centre inside a
   zoomed container). Viewport units render ×zoom inside the island, so every
   vw/vh divides by var(--island-zoom). */
#bookoutTechnician.modal,
#bookinTechnical.modal,
#bookoutManager.modal,
#bookinManager.modal {
    zoom: var(--island-zoom);
}

.technical-bookout-modal .modal-dialog,
.manager-bookout-modal .modal-dialog,
.manager-bookin-modal .modal-dialog {
    position: fixed;
    top: 1rem;
    left: 50%;
    width: min(90rem, calc(100vw / var(--island-zoom) - 2rem));
    max-width: none;
    margin: 0 0 0 calc(min(90rem, 100vw / var(--island-zoom) - 2rem) / -2);
    height: calc(100vh / var(--island-zoom) - 2rem);
}

.technical-bookout-modal .modal-content,
.manager-bookout-modal .modal-content,
.manager-bookin-modal .modal-content {
    display: flex;
    max-height: 100%;
    min-height: 0;
    height: 100%;
}

/* The Scan & Confirm modals (book-out approval, direct book-out and book-in
   scans) get the same island treatment: native-size content, widened,
   centred explicitly, vw/vh divided by the island factor, and the body
   scrolls inside the fixed-height dialog. */
#approvalScanConfirmModal.modal,
#bookoutScanConfirmModal.modal,
#bookInScanConfirmModal.modal {
    zoom: var(--island-zoom);
}

.manager-bookout-scan-modal .modal-dialog {
    position: fixed;
    top: 1rem;
    left: 50%;
    width: min(90rem, calc(100vw / var(--island-zoom) - 2rem));
    max-width: none;
    margin: 0 0 0 calc(min(90rem, 100vw / var(--island-zoom) - 2rem) / -2);
    height: calc(100vh / var(--island-zoom) - 2rem);
}

.manager-bookout-scan-modal .modal-content {
    display: flex;
    max-height: 100%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.manager-bookout-scan-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.technical-bookout-modal .modal-content {
    border: 0.0625rem solid #d7deea;
    border-radius: 0.3125rem;
    box-shadow: 0 0.1875rem 0.4375rem rgba(15, 23, 42, 0.22);
}

.technical-bookout-modal .modal-header {
    align-items: flex-start;
    border: 0;
    padding: 1.75rem 2rem 0;
}

.technical-bookout-modal .modal-title {
    margin: 0 0 1.5rem;
    color: #292929;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
}

.technical-bookout-modal .modal-header p {
    margin: 0;
    color: #292929;
    font-size: 1.0625rem;
}

.technical-bookout-modal .modal-body {
    padding: 1.75rem 2rem 1.125rem;
}

.technical-bookout-field label,
.technical-bookout-section h6 {
    display: block;
    margin: 0 0 0.625rem;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 700;
}

.technical-bookout-section h6 {
    color: #292929;
    font-size: 1rem;
    font-weight: 500;
}

.technical-bookout-search {
    position: relative;
}

.technical-bookout-search i {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 2;
    color: #475569;
    font-size: 1.0625rem;
    transform: translateY(-50%);
}

.technical-bookout-search .form-control {
    height: 2.875rem;
    border: 0.0625rem solid #2563eb;
    border-radius: 0.375rem;
    padding-left: 2.625rem;
    color: #334155;
    font-size: 0.9375rem;
}

.technical-bookout-section {
    margin-top: 2.75rem;
}

.technical-bookout-table-wrap {
    overflow-x: auto;
}

.technical-bookout-table {
    width: 100%;
    min-width: 38.75rem;
    border-collapse: collapse;
}

.technical-bookout-table th,
.technical-bookout-table td {
    border: 0.0625rem solid #bfc3ca;
    padding: 0.75rem 0.8125rem;
    color: #111827;
    font-size: 0.75rem;
    line-height: 1.3;
    vertical-align: middle;
}

.technical-bookout-table th {
    background: #e8ddff;
    font-weight: 800;
}

.technical-bookout-table td {
    background: #fff;
}

.technical-bookout-table tr.is-selected td {
    background: #edf1f5;
}

.technical-bookout-table .select-task-btn-technical,
.technical-bookout-table .select-book-in-technical {
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 0.75rem;
    text-decoration: underline;
}

.technical-bookout-table .select-task-btn-technical.active,
.technical-bookout-table .select-book-in-technical.active {
    font-weight: 700;
    text-decoration: none;
}

/* Island (same pattern as .booking-request-page): the dense search results
   and selected list render at native 100% over the 80% root. */
#assigntool.modal {
    zoom: var(--island-zoom);
}

/* Wide and centred so the tool search, filters and selected list read comfortably.
   Centred explicitly (left:50% + negative half-width margin) rather than with auto
   margins: inside a zoomed container Chrome resolves the auto-margin containing
   block inconsistently, parking the dialog off-centre. left% and the width resolve
   in the same coordinate space, so this centres regardless. Viewport units render
   ×zoom inside the island, hence the / var(--island-zoom). */
#assigntool .modal-dialog {
    position: fixed;
    top: 1rem;
    left: 50%;
    width: min(90rem, calc(100vw / var(--island-zoom) - 2rem));
    max-width: none;
    margin: 0 0 0 calc(min(90rem, 100vw / var(--island-zoom) - 2rem) / -2);
}

#assigntool .modal-content {
    min-height: min(53.75rem, calc(84vh / var(--island-zoom)));
    max-height: calc(100vh / var(--island-zoom) - 2rem);
    border: 0;
    border-radius: 0;
    background: #fff;
    padding: 1.125rem 1.75rem 1.5rem;
    box-shadow: 0 1rem 2.8125rem rgba(15, 23, 42, 0.18);
}

#assigntool .modal-header {
    align-items: flex-start;
    padding: 0;
    margin-bottom: 1.125rem;
}

#assigntool .modal-title {
    margin: 0 0 0.625rem;
    color: #111827;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.2;
}

#assigntool .modal-header p,
#assigntool .modal-body > span,
#assigntool .modal-body h6 {
    margin: 0;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
}

#assigntool .modal-header p {
    color: #111827;
}

#assigntool .btn-close {
    display: none;
}

#assigntool .modal-body {
    padding: 0;
    overflow-y: auto;
}

#assigntool .search-tool-task {
    height: 2.75rem;
    margin: 0.5rem 0 2.125rem !important;
    border: 0.0625rem solid #2563eb;
    border-radius: 0.3125rem;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.875rem 50%;
    padding-left: 2.5rem;
    color: #334155;
    font-size: 0.8125rem;
}

#assigntool .modal-body h6 {
    margin-top: 0 !important;
    color: #111827;
}

#assigntool .hr-dark {
    margin: 0.75rem 0 1rem;
    border-color: #94a3b8;
    opacity: 1;
}

#assigntool #search-results,
#assigntool #selected-tools {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

#assigntool .asset-item,
#assigntool .purple-box {
    min-height: 5.25rem;
    border: 0.0625rem solid #e3e8f0 !important;
    border-radius: 0.5rem !important;
    background: #fff;
    padding: 0.75rem 1rem !important;
    box-shadow: 0 0.125rem 0.3125rem rgba(15, 23, 42, 0.05);
}

#assigntool .purple-box {
    border-color: #ddd2ff !important;
    background: #e7dcff;
    box-shadow: none;
}

#assigntool .purple-tag {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    margin-top: 0 !important;
    border-radius: 0.5rem !important;
    background: #f0e9ff;
    color: #8b5cf6;
    padding: 0 !important;
}

#assigntool .purple-tag i {
    color: #8b5cf6;
    font-size: 1.125rem !important;
}

#assigntool .asset-id h5,
#assigntool .purple-box h5 {
    margin: 0 0 0.125rem !important;
    color: #111827;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
}

#assigntool .rfid {
    display: block;
    margin-bottom: 0.125rem;
    color: #10b981 !important;
    font-size: 0.6875rem !important;
    font-weight: 800 !important;
    line-height: 1.2;
}

#assigntool .asset-id p,
#assigntool .purple-box p {
    margin: 0;
    color: #475569;
    font-size: 0.625rem;
    line-height: 1.35;
}

#assigntool .select-tool {
    min-width: 5.75rem;
    min-height: 2.125rem;
    justify-content: center;
    border: 0 !important;
    border-radius: 0.375rem !important;
    background: #e5e7eb !important;
    color: #111827 !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none !important;
}

#assigntool .select-tool.bg-secondary,
#assigntool .select-tool:disabled {
    background: #d1d5db !important;
    color: #374151 !important;
    opacity: 1;
}

#assigntool .remove-tool {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    align-self: center;
    color: #111827;
    font-size: 1rem;
}

#assigntool .remove-tool i {
    color: #111827;
}

#assigntool #selected-tools {
    margin-bottom: 1.625rem;
}

#assigntool .bg-flash-white.border-darkgrey {
    margin-bottom: 2.25rem;
    border-color: #aeb6c2 !important;
    border-radius: 0;
    background: #f8fafc !important;
}

#assigntool .bg-flash-white.border-darkgrey h6 {
    margin: 0;
    color: #111827;
    font-size: 0.75rem;
    font-weight: 700;
}

#assigntool .inuse-btn {
    background: #fee2d5 !important;
    color: #f97316 !important;
    font-size: 0.6875rem;
}

#assigntool .modal-footer {
    padding: 0;
    gap: 1.625rem !important;
}

#assigntool .modal-footer .bg-grey,
#assigntool .modal-footer .cbtn-green {
    min-width: 5.625rem;
    min-height: 2.375rem;
    border: 0;
    border-radius: 0.375rem !important;
    font-size: 0.75rem;
    font-weight: 500;
}

#assigntool .modal-footer .bg-grey {
    background: #e5e7eb !important;
    color: #374151;
}

#assigntool .modal-footer .cbtn-green {
    min-width: 11.125rem;
    background: #10b981 !important;
    color: #fff !important;
}

@media (max-width: 575.98px) {
    #assigntool .modal-content {
        padding: 1rem;
    }

    #assigntool .select-tool {
        width: 100%;
    }
}

/* Booking modals on tablets (≤991.98px): the dialog itself already shrinks to
   100vw - 32px, but the inner flex-sm-row clusters (loan dates, header rows)
   keep a side-by-side layout from 576px up — too cramped inside a ~780px
   dialog. Stack them until lg, trim the 32px gutters, and let the reason-tab
   strip wrap instead of forcing its 108px-per-tab row. */
@media (max-width: 991.98px) {
    .technical-bookout-modal .modal-header,
    .technical-bookout-modal .modal-body,
    .technical-bookout-modal .modal-footer,
    .manager-bookout-scan-modal .modal-body,
    .book-in-calibration .modal-body {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .technical-bookout-modal .modal-body .d-flex.flex-sm-row,
    .manager-bookout-scan-modal .bookout-info-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .technical-bookout-modal .btn-grid-popup {
        flex-wrap: wrap;
    }

    .technical-bookout-modal .btn-grid-popup .nav-item {
        min-width: 0;
        flex: 1 1 auto;
    }
}

.technical-bookout-tools-section {
    min-height: 13.125rem;
}

.technical-bookout-tools-section h6 {
    border-bottom: 0.0625rem solid #94a3b8;
    padding-bottom: 0.625rem;
}

.technical-bookout-help {
    margin: 0;
    color: #64748b;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.technical-bookout-tools-table {
    width: 100%;
    min-width: 32.5rem;
    border-collapse: collapse;
    margin-top: 1.125rem;
}

.technical-bookout-tools-table th,
.technical-bookout-tools-table td {
    border: 0.0625rem solid #bfc3ca;
    padding: 0.6875rem 0.8125rem;
    color: #111827;
    font-size: 0.75rem;
    line-height: 1.3;
}

.technical-bookout-tools-table th {
    background: #e8ddff;
    font-weight: 800;
}

.technical-bookout-location-section {
    margin-top: 1.625rem;
}

.technical-bookout-location-section h6 {
    margin-bottom: 0.375rem;
}

.technical-bookout-location-section .form-select {
    width: min(100%, 13.75rem);
    height: 2.375rem;
    border: 0.0625rem solid #2563eb;
    border-radius: 0.3125rem;
    color: #64748b;
    font-size: 0.875rem;
}

.technical-bookout-cancel,
.technical-bookout-submit {
    min-width: 5.75rem;
    min-height: 2.375rem;
    border: 0;
    border-radius: 0.375rem;
    padding: 0.5625rem 1.125rem;
    font-size: 0.8125rem;
}

.technical-bookout-cancel {
    background: #e5e7eb;
    color: #374151;
}

.technical-bookout-submit {
    min-width: 11.25rem;
    background: #059669;
    color: #fff;
}

.technical-bookin-modal .modal-content {
    min-height: 94vh;
}

.technical-bookin-modal .technical-bookout-tools-section {
    min-height: 15.3125rem;
}

.technical-success-modal .modal-dialog {
    max-width: 26.25rem;
}

.technical-success-modal .modal-content {
    border: 0;
    border-radius: 0.625rem;
    box-shadow: 0 0.9375rem 2.8125rem rgba(15, 23, 42, 0.2);
}

.technical-success-modal .modal-body {
    padding: 2.125rem 1.875rem 1.875rem;
    text-align: center;
}

.technical-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.75rem;
    height: 4.75rem;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    font-size: 2.125rem;
}

.technical-success-title {
    margin: 0 0 0.625rem;
    color: #111827;
    font-size: 1.25rem;
    font-weight: 800;
}

.technical-success-message {
    margin: 0 auto 1.5rem;
    max-width: 18.75rem;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.45;
}

.technical-success-modal .book-out-success-modal {
    min-width: 7.375rem;
    min-height: 2.375rem;
    border: 0;
    border-radius: 0.375rem;
    background: #10b981;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
}

.manager-bookout-modal .modal-content,
.manager-bookout-scan-modal .modal-content,
.manager-bookout-success-modal .modal-content {
    border: 0.0625rem solid #dbe7ff;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.75rem rgba(22, 34, 66, 0.16);
}

.manager-bookout-modal .modal-header,
.manager-bookout-modal .modal-body,
.manager-bookout-modal .modal-footer {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}

.manager-bookout-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.manager-bookout-modal .modal-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #fff;
}

.manager-bookout-modal .modal-header {
    padding-top: 2.25rem !important;
}

.manager-bookout-modal .modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2f2f34;
}

.manager-bookout-tabs h6,
.manager-bookout-search span,
.manager-bookout-modal .tab-pane>span,
.manager-bookout-modal .tab-pane>h6 {
    color: #667085;
    font-size: 0.875rem;
    font-weight: 600;
}

.manager-bookout-modal .btn-grid-popup {
    background: #f0f1f3;
    border-radius: 0.5rem;
    padding: 0;
    overflow: hidden;
    border: 0;
}

.manager-bookout-modal .btn-grid-popup .nav-item {
    min-width: 6.75rem;
}

.manager-bookout-modal .btn-grid-popup .nav-link {
    width: 100%;
    height: 2.375rem;
    border-radius: 0;
    color: #111827;
    font-size: 0.8125rem;
    background: transparent;
    border-right: 0.0625rem solid #d9dce2 !important;
}

.manager-bookout-modal .btn-grid-popup .nav-item:last-child .nav-link {
    border-right: 0 !important;
}

.manager-bookout-modal .btn-grid-popup .nav-link.active {
    background: #2f80ed;
    color: #fff;
    border-radius: 0.375rem;
    box-shadow: 0 0.375rem 0.75rem rgba(47, 128, 237, 0.25);
}

.manager-bookout-searchbox {
    position: relative;
    margin-top: 0.625rem;
}

.manager-bookout-searchbox i {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #536b8f;
    font-size: 1.375rem;
}

.manager-bookout-searchbox .form-control {
    height: 3.625rem;
    border: 0.0625rem solid #2e67c7;
    border-radius: 0.4375rem;
    padding-left: 3.5rem;
    color: #31415f;
    font-size: 1rem;
}

.manager-bookout-table-wrap {
    overflow-x: auto;
}

.manager-bookout-table,
.manager-bookout-modal .task-table,
.manager-bookout-modal .assigned-tools-table,
.manager-bookout-modal .selected-loan-tools-table,
.manager-bookout-scan-modal .scan-tools-table {
    border-collapse: separate;
    border-spacing: 0;
    border: 0.0625rem solid #bfc3cc;
    border-radius: 0.25rem;
    overflow: hidden;
    background: #fff;
}

.manager-bookout-table th,
.manager-bookout-table td,
.manager-bookout-modal .task-table th,
.manager-bookout-modal .task-table td,
.manager-bookout-modal .assigned-tools-table th,
.manager-bookout-modal .assigned-tools-table td,
.manager-bookout-modal .selected-loan-tools-table th,
.manager-bookout-modal .selected-loan-tools-table td,
.manager-bookout-scan-modal .scan-tools-table th,
.manager-bookout-scan-modal .scan-tools-table td {
    border-right: 0.0625rem solid #bfc3cc;
    border-bottom: 0.0625rem solid #bfc3cc;
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    color: #111827;
    vertical-align: middle;
}

.manager-bookout-table th,
.manager-bookout-modal .task-table th,
.manager-bookout-modal .assigned-tools-table th,
.manager-bookout-modal .selected-loan-tools-table th,
.manager-bookout-scan-modal .scan-tools-table th {
    background: #e9ddff;
    font-weight: 700;
}

.manager-bookout-task-row.is-selected td,
.manager-bookout-table .is-selected td,
.manager-bookout-table tr.is-selected td {
    background: #e9ecef;
}

.manager-bookout-modal .select-task-btn-manager,
.manager-bookout-modal .select-asset-btn {
    border: 0;
    background: transparent;
    color: #111827;
    text-decoration: underline;
    font-weight: 500;
    padding: 0;
}

.manager-bookout-modal .select-task-btn-manager.selected,
.manager-bookout-modal .select-asset-btn:disabled {
    color: #111827;
    opacity: 1;
}

.manager-bookout-modal .remove-selected-btn {
    width: 1.625rem;
    height: 1.625rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #446a27;
    font-size: 1.125rem;
}

.manager-bookout-modal .tab-content {
    min-height: 35rem;
}

.manager-bookout-modal .target-location-id,
.manager-bookout-modal .ho-card-1,
.manager-bookout-modal .f-input,
.manager-bookout-modal .form-select-location {
    max-width: 16.25rem;
    min-height: 2.75rem;
    border-radius: 0.4375rem;
    border: 0.0625rem solid #d7dce5;
}

.manager-bookout-cancel,
.manager-bookout-submit,
.manager-bookout-scan-modal .btn-cancel-custom,
.manager-bookout-scan-modal .btn-continue-custom {
    min-width: 8.25rem;
    height: 3rem;
    border: 0;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

.manager-bookout-cancel,
.manager-bookout-scan-modal .btn-cancel-custom {
    background: #e4e7eb;
    color: #333942;
}

.manager-bookout-submit,
.manager-bookout-scan-modal .btn-continue-custom {
    background: #12b981;
    color: #fff;
    margin-right: 0.9375rem;
}

.manager-bookout-modal.technical-bookout-modal .modal-content {
    border: 0.0625rem solid #d7deea;
    border-radius: 0.3125rem;
    box-shadow: 0 0.1875rem 0.4375rem rgba(15, 23, 42, 0.22);
}

.manager-bookout-modal.technical-bookout-modal .modal-header,
.manager-bookout-modal.technical-bookout-modal .modal-body,
.manager-bookout-modal.technical-bookout-modal .modal-footer {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.manager-bookout-modal.technical-bookout-modal .modal-header {
    align-items: flex-start;
    padding-top: 1.75rem !important;
}

.manager-bookout-modal.technical-bookout-modal .modal-body {
    padding-top: 1.75rem;
    padding-bottom: 1.125rem;
}

.manager-bookout-modal.technical-bookout-modal .modal-footer {
    position: static;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.manager-bookout-modal.technical-bookout-modal .modal-title {
    margin: 0 0 1.5rem;
    color: #292929;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
}

.manager-bookout-modal.technical-bookout-modal .modal-header p {
    margin: 0;
    color: #292929;
    font-size: 1.0625rem;
}

.manager-bookout-modal.technical-bookout-modal .manager-bookout-tabs {
    margin-top: 0;
}

.manager-bookout-modal.technical-bookout-modal .manager-bookout-tabs h6 {
    color: #292929;
    font-size: 1rem;
    font-weight: 500;
}

.manager-bookout-modal.technical-bookout-modal .btn-grid-popup {
    border-radius: 0.375rem;
}

.manager-bookout-modal.technical-bookout-modal .btn-grid-popup .nav-link {
    height: 2.25rem;
    font-size: 0.75rem;
}

.manager-bookout-modal.technical-bookout-modal .manager-bookout-search {
    margin-top: 1.75rem;
    margin-bottom: 0;
}

.manager-bookout-modal.technical-bookout-modal .manager-bookout-searchbox {
    margin-top: 0;
}

.manager-bookout-modal.technical-bookout-modal .manager-bookout-searchbox i {
    left: 1rem;
    color: #475569;
    font-size: 1.0625rem;
}

.manager-bookout-modal.technical-bookout-modal .manager-bookout-searchbox .form-control {
    height: 2.875rem;
    border: 0.0625rem solid #2563eb;
    border-radius: 0.375rem;
    padding-left: 2.625rem;
    color: #334155;
    font-size: 0.9375rem;
}

.manager-bookout-modal.technical-bookout-modal .tab-content {
    min-height: 0;
}

.manager-bookout-modal.technical-bookout-modal .technical-bookout-section {
    margin-top: 2.75rem;
}

.manager-bookout-modal.technical-bookout-modal .technical-bookout-table,
.manager-bookout-modal.technical-bookout-modal .technical-bookout-tools-table,
.manager-bookout-modal.technical-bookout-modal .manager-bookout-table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.manager-bookout-modal.technical-bookout-modal .technical-bookout-table th,
.manager-bookout-modal.technical-bookout-modal .technical-bookout-table td,
.manager-bookout-modal.technical-bookout-modal .technical-bookout-tools-table th,
.manager-bookout-modal.technical-bookout-modal .technical-bookout-tools-table td,
.manager-bookout-modal.technical-bookout-modal .manager-bookout-table th,
.manager-bookout-modal.technical-bookout-modal .manager-bookout-table td {
    border: 0.0625rem solid #bfc3ca;
    padding: 0.75rem 0.8125rem;
    color: #111827;
    font-size: 0.75rem;
    line-height: 1.3;
    vertical-align: middle;
}

.manager-bookout-modal.technical-bookout-modal .technical-bookout-table th,
.manager-bookout-modal.technical-bookout-modal .technical-bookout-tools-table th,
.manager-bookout-modal.technical-bookout-modal .manager-bookout-table th {
    background: #e8ddff;
    font-weight: 800;
}

.manager-bookout-modal.technical-bookout-modal .select-task-btn-manager,
.manager-bookout-modal.technical-bookout-modal .select-asset-btn {
    font-size: 0.75rem;
    font-weight: 400;
}

.manager-bookout-modal.technical-bookout-modal .select-task-btn-manager.selected,
.manager-bookout-modal.technical-bookout-modal .select-asset-btn:disabled {
    font-weight: 700;
    text-decoration: none;
}

.manager-bookout-modal.technical-bookout-modal .target-location-id,
.manager-bookout-modal.technical-bookout-modal .ho-card-1,
.manager-bookout-modal.technical-bookout-modal .f-input,
.manager-bookout-modal.technical-bookout-modal .form-select-location {
    max-width: 16.25rem;
    min-height: 2.375rem;
    border: 0.0625rem solid #2563eb;
    border-radius: 0.3125rem;
    color: #64748b;
    font-size: 0.875rem;
}

.manager-bookout-modal.technical-bookout-modal .technical-bookout-cancel,
.manager-bookout-modal.technical-bookout-modal .technical-bookout-submit {
    min-width: 5.75rem;
    min-height: 2.375rem;
    height: auto;
    border-radius: 0.375rem;
    padding: 0.5625rem 1.125rem;
    font-size: 0.8125rem;
    font-weight: 400;
    margin-right: 0;
}

.manager-bookout-modal.technical-bookout-modal .technical-bookout-submit {
    min-width: 11.25rem;
    background: #059669;
}

.manager-bookout-scan-modal .scan-image {
    width: 33.75rem;
    max-height: 15rem;
    object-fit: cover;
    border-radius: 1.5rem !important;
}

.manager-bookout-scan-modal .scan-subtitle {
    color: #475467;
    font-size: 0.875rem;
    line-height: 1.45;
}

.manager-bookout-scan-modal .steps-label,
.manager-bookout-scan-modal .non-rfid-label {
    margin-bottom: 0.375rem;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 700;
}

.manager-bookout-scan-modal .steps-list {
    margin-bottom: 1.125rem;
    padding-left: 1.25rem;
    color: #374151;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.manager-bookout-scan-modal .non-rfid-text {
    margin-bottom: 1.125rem;
    color: #475467;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.manager-bookout-scan-modal .scan-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.manager-bookout-scan-modal #scan-tools-table th,
.manager-bookout-scan-modal #scan-tools-table td {
    border-right: 0.0625rem solid #bfc3cc !important;
    border-bottom: 0.0625rem solid #bfc3cc !important;
    padding: 0.875rem 1rem !important;
    color: #111827 !important;
    font-size: 0.8125rem !important;
    text-align: left !important;
    vertical-align: middle !important;
    background: #fff !important;
}

.manager-bookout-scan-modal #scan-tools-table th {
    background: #e9ddff !important;
    font-weight: 700 !important;
}

.manager-bookout-success-modal .modal-content {
    max-width: 40rem;
    margin: 0 auto;
    padding: 3.375rem 1.5rem !important;
}

.manager-bookout-success-icon {
    width: 9.375rem;
    height: 9.375rem;
    object-fit: contain;
}

.manager-bookout-success-fallback {
    display: inline-flex;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: #6b95ff;
    color: #fff;
    font-size: 5.25rem;
    box-shadow: inset -0.375rem -0.5rem 0 rgba(0, 0, 0, 0.12);
}

.manager-bookin-quarantine-modal .modal-dialog {
    width: calc(100vw - 2rem);
    max-width: 66.25rem;
    height: calc(100vh - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.manager-bookin-modal .modal-content,
.manager-bookin-quarantine-modal .modal-content {
    display: flex;
    max-height: 100%;
    min-height: 0;
    height: 100%;
    border: 0.0625rem solid #dbe7ff;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.5rem 1.75rem rgba(22, 34, 66, 0.16);
}

.manager-bookin-modal .modal-header,
.manager-bookin-modal .modal-body,
.manager-bookin-modal .modal-footer,
.manager-bookin-quarantine-modal .modal-header,
.manager-bookin-quarantine-modal .modal-body,
.manager-bookin-quarantine-modal .modal-footer {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}

.manager-bookin-modal .modal-title,
.manager-bookin-quarantine-modal .modal-title {
    color: #2f2f34;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.manager-bookin-modal .text-muted,
.manager-bookin-quarantine-modal .intro-text {
    color: #667085 !important;
    font-size: 0.8125rem;
}

.manager-bookin-modal .table-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.625rem;
    margin-bottom: 0.625rem;
    padding-bottom: 0.625rem;
    border-bottom: 0.0625rem solid #aab2c0;
}

.manager-bookin-modal .manager-bookin-reason-filter {
    width: 11.875rem;
    min-height: 2.375rem;
    border-radius: 0.375rem;
    border: 0.0625rem solid #d7dce5;
    color: #344054;
    font-size: 0.8125rem;
}

.manager-bookin-tools-table,
.manager-bookin-selected-table,
.manager-bookin-quarantine-modal .table-quarantine,
.manager-bookin-quarantine-modal .table-location {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 0.0625rem solid #bfc3cc;
    border-radius: 0.25rem;
    overflow: hidden;
    background: #fff;
}

.manager-bookin-tools-table th,
.manager-bookin-tools-table td,
.manager-bookin-selected-table th,
.manager-bookin-selected-table td,
.manager-bookin-quarantine-modal .table-quarantine th,
.manager-bookin-quarantine-modal .table-quarantine td,
.manager-bookin-quarantine-modal .table-location th,
.manager-bookin-quarantine-modal .table-location td {
    border-right: 0.0625rem solid #bfc3cc;
    border-bottom: 0.0625rem solid #bfc3cc;
    padding: 0.75rem 0.875rem;
    color: #111827;
    font-size: 0.75rem;
    vertical-align: middle;
}

.manager-bookin-tools-table th,
.manager-bookin-selected-table th,
.manager-bookin-quarantine-modal .table-quarantine th,
.manager-bookin-quarantine-modal .table-location th {
    background: #e9ddff;
    font-weight: 700;
}

.manager-bookin-tool-row.is-selected td,
.manager-bookin-selected-row td {
    background: #e9ecef;
}

.manager-bookin-select-tool,
.manager-bookin-unselect,
.manager-bookin-quarantine-unselect {
    border: 0;
    background: transparent;
    color: #111827;
    text-decoration: underline;
    padding: 0;
    font-weight: 500;
}

.manager-bookin-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.manager-bookin-modal .modal-footer,
.manager-bookin-quarantine-modal .modal-footer {
    gap: 1.25rem;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #fff;
    border-top: 0;
}

.manager-bookin-modal #btn-send-to-quarantine-v2 {
    min-width: 11.25rem;
    height: 3rem;
    border: 0;
    border-radius: 0.5rem;
    background: #f04444;
    color: #fff;
}

.manager-bookin-modal #confirm-manager-bookin-v2,
.manager-bookin-quarantine-modal #btn-confirm-quarantine-v2 {
    min-width: 11.25rem;
    height: 3rem;
    border: 0;
    border-radius: 0.5rem;
    background: #12b981;
    color: #fff;
}

.manager-bookin-modal .cbtn-grey,
.manager-bookin-quarantine-modal .btn-cancel {
    min-width: 6.875rem;
    height: 3rem;
    border: 0;
    border-radius: 0.5rem;
    background: #e4e7eb;
    color: #333942;
}

.manager-bookin-quarantine-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.manager-bookin-quarantine-modal .section-title {
    margin-top: 1.75rem;
    margin-bottom: 0.625rem;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 600;
}

.manager-bookin-quarantine-modal .reason-input {
    width: 14.375rem;
    min-height: 2.75rem;
    border: 0.0625rem solid #d7dce5;
    border-radius: 0.4375rem;
    padding: 0.5rem 0.75rem;
}

.manager-bookin-modal.technical-bookout-modal .modal-content {
    border: 0.0625rem solid #d7deea;
    border-radius: 0.3125rem !important;
    box-shadow: 0 0.1875rem 0.4375rem rgba(15, 23, 42, 0.22);
}

.manager-bookin-modal.technical-bookout-modal .modal-header,
.manager-bookin-modal.technical-bookout-modal .modal-body,
.manager-bookin-modal.technical-bookout-modal .modal-footer {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.manager-bookin-modal.technical-bookout-modal .modal-header {
    align-items: flex-start;
    padding-top: 1.75rem !important;
}

.manager-bookin-modal.technical-bookout-modal .modal-body {
    padding-top: 1.75rem;
    padding-bottom: 1.125rem;
}

.manager-bookin-modal.technical-bookout-modal .modal-footer {
    position: static;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.manager-bookin-modal.technical-bookout-modal .modal-title {
    margin: 0 0 1.5rem;
    color: #292929;
    font-size: 1.375rem !important;
    font-weight: 800 !important;
    line-height: 1.2;
}

.manager-bookin-modal.technical-bookout-modal .modal-header p {
    margin: 0;
    color: #292929 !important;
    font-size: 1.0625rem;
}

.manager-bookin-modal.technical-bookout-modal .container-bookin {
    width: 100%;
}

.manager-bookin-modal.technical-bookout-modal .manager-bookout-searchbox {
    margin-top: 0;
}

.manager-bookin-modal.technical-bookout-modal .manager-bookout-searchbox i {
    left: 1rem;
    color: #475569;
    font-size: 1.0625rem;
}

.manager-bookin-modal.technical-bookout-modal .manager-bookout-searchbox .form-control {
    height: 2.875rem;
    border: 0.0625rem solid #2563eb;
    border-radius: 0.375rem;
    padding-left: 2.625rem;
    color: #334155;
    font-size: 0.9375rem;
}

.manager-bookin-modal.technical-bookout-modal .table-title-row {
    margin-top: 0;
    margin-bottom: 0.875rem;
    padding-bottom: 0;
    border-bottom: 0;
}

.manager-bookin-modal.technical-bookout-modal .table-title {
    margin: 0;
    color: #292929;
    font-size: 1rem;
    font-weight: 500;
}

.manager-bookin-modal.technical-bookout-modal .manager-bookin-reason-filter {
    width: 11.875rem;
    min-height: 2.375rem;
    border: 0.0625rem solid #2563eb;
    border-radius: 0.3125rem;
    color: #64748b;
    font-size: 0.875rem;
}

.manager-bookin-modal.technical-bookout-modal .manager-bookin-tools-table,
.manager-bookin-modal.technical-bookout-modal .manager-bookin-selected-table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.manager-bookin-modal.technical-bookout-modal .manager-bookin-tools-table th,
.manager-bookin-modal.technical-bookout-modal .manager-bookin-tools-table td,
.manager-bookin-modal.technical-bookout-modal .manager-bookin-selected-table th,
.manager-bookin-modal.technical-bookout-modal .manager-bookin-selected-table td {
    border: 0.0625rem solid #bfc3ca;
    padding: 0.75rem 0.8125rem;
    color: #111827;
    font-size: 0.75rem;
    line-height: 1.3;
    vertical-align: middle;
}

.manager-bookin-modal.technical-bookout-modal .manager-bookin-tools-table th,
.manager-bookin-modal.technical-bookout-modal .manager-bookin-selected-table th {
    background: #e8ddff;
    font-weight: 800;
}

.manager-bookin-modal.technical-bookout-modal .manager-bookin-select-tool,
.manager-bookin-modal.technical-bookout-modal .manager-bookin-unselect {
    font-size: 0.75rem;
    font-weight: 400;
}

.manager-bookin-modal.technical-bookout-modal .manager-bookin-tool-row.is-selected td,
.manager-bookin-modal.technical-bookout-modal .manager-bookin-selected-row td {
    background: #edf1f5;
}

.manager-bookin-modal.technical-bookout-modal #btn-send-to-quarantine-v2,
.manager-bookin-modal.technical-bookout-modal #confirm-manager-bookin-v2,
.manager-bookin-modal.technical-bookout-modal .cbtn-grey {
    min-width: 5.75rem;
    min-height: 2.375rem;
    height: auto;
    border: 0;
    border-radius: 0.375rem;
    padding: 0.5625rem 1.125rem !important;
    font-size: 0.8125rem;
    font-weight: 400;
}

.manager-bookin-modal.technical-bookout-modal #btn-send-to-quarantine-v2 {
    min-width: 10rem;
    background: #f04444;
    color: #fff;
}

.manager-bookin-modal.technical-bookout-modal #confirm-manager-bookin-v2 {
    min-width: 10rem;
    background: #059669;
    color: #fff;
}

.manager-bookin-modal.technical-bookout-modal .cbtn-grey {
    background: #e5e7eb;
    color: #374151;
}

@media only screen and (max-width: 576px) {

    .technical-bookout-modal .modal-header,
    .technical-bookout-modal .modal-body,
    .technical-bookout-modal .modal-footer {
        padding-left: 1.125rem;
        padding-right: 1.125rem;
    }

    .technical-bookout-modal .modal-footer {
        gap: 0.75rem;
    }

    .technical-bookin-modal .technical-bookout-tools-section,
    .technical-bookin-note {
        margin-top: 2.625rem;
    }
}

/* ── Work order left panel — task status mini pills ──────────────────── */
.wo-task-counts {
    border-top: 0.0625rem solid #e5e7eb;
    padding-top: 0.5rem;
}

.wo-task-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    border-radius: 62.4375rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}

.wo-task-pill i {
    font-size: 0.6875rem;
}

.wo-task-pill-green {
    background: #d1fae5;
    color: #065f46;
}

.wo-task-pill-yellow {
    background: #fef3c7;
    color: #92400e;
}

.wo-task-pill-orange {
    background: #ffedd5;
    color: #9a3412;
}

.wo-task-pill-grey {
    background: #f3f4f6;
    color: #374151;
}
/* ─────────────────────────────────────────────────────────────────────── */

/* ── Solid status badges (work order left panel) ──────────────────────── */
.solid-grey-tag {
    background: #6C757D !important;
    color: #fff !important;
    border-radius: 1.25rem;
    padding: 0.3125rem 0.9375rem !important;
    font-size: 0.75rem;
    font-weight: 500;
    display: initial;
    white-space: nowrap;
}

.solid-yellow-tag {
    background: #F59E0B !important;
    color: #fff !important;
    border-radius: 1.25rem;
    padding: 0.3125rem 0.9375rem !important;
    font-size: 0.75rem;
    font-weight: 500;
    display: initial;
    white-space: nowrap;
}

.solid-orange-tag {
    background: #F97316 !important;
    color: #fff !important;
    border-radius: 1.25rem;
    padding: 0.3125rem 0.9375rem !important;
    font-size: 0.75rem;
    font-weight: 500;
    display: initial;
    white-space: nowrap;
}

/* Item 11 (redux): completed actions in the execution/sign-off strips.
   (The dark rule predates this — only the light fill was missing.) */
.solid-green-tag {
    background: #16A34A !important;
    color: #fff !important;
    border-radius: 1.25rem;
    padding: 0.3125rem 0.9375rem !important;
    font-size: 0.75rem;
    font-weight: 500;
    display: initial;
    white-space: nowrap;
}

/* Item 11: rework gets its own colour — it used to share the pending-review
   orange, hiding "rejected, being redone" behind "waiting for review". */
.solid-red-tag {
    background: #DC2626 !important;
    color: #fff !important;
    border-radius: 1.25rem;
    padding: 0.3125rem 0.9375rem !important;
    font-size: 0.75rem;
    font-weight: 500;
    display: initial;
    white-space: nowrap;
}

/* Item 11: slim per-task progress bar — "3 of 40" as a glance, not just
   grey text. Sits under the task meta on the WO task lists. */
.task-mini-progress {
    width: 9rem;
    max-width: 100%;
    height: 0.375rem;
    background: #E5E7EB;
    border-radius: 0.25rem;
    overflow: hidden;
}
.task-mini-progress > span {
    display: block;
    height: 100%;
    background: #2563EB;
    border-radius: 0.25rem;
}

/* Item 11: per-status task breakdown chips on the WO card. */
.wo-status-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}
.wo-status-breakdown .wo-chip {
    font-size: 0.6875rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 0.625rem;
    background: #F3F4F6;
    color: #374151;
    white-space: nowrap;
}
/* Priority chip on the WO list cards — self-sufficient (it sits beside the
   status pill, outside .wo-status-breakdown). Same tones as the technician
   picker's scoped wo-chip--priority. */
.wo-chip--priority {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 0.625rem;
    background: #f0f0f0;
    color: #424242;
    white-space: nowrap;
}
/* ─────────────────────────────────────────────────────────────────────── */

/* Work order management dashboard */
.workflow-badge {
    padding: 0.375rem 0.625rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    color: #fff;
}

.workflow-badge[data-status="completed"] {
    background: #198754;
}

.workflow-badge[data-status="in-progress"] {
    background: #fd7e14;
}

.workflow-badge[data-status="need-review"] {
    background: #0d6efd;
}

.workflow-badge[data-status="rejected"] {
    background: #dc3545;
}

.workflow-badge[data-status="pending"] {
    background: #6c757d;
}

.work-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

/* Activity feed rows are links to the action they describe; the token carries
   the dark theme, so one rule covers both. */
a.activity-row {
    border-radius: var(--fl-radius-md);
    padding: 0.25rem 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

a.activity-row:hover,
a.activity-row:focus-visible {
    background-color: var(--fl-bg-hover);
}

.work-stats-grid .stats-card {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.work-stats-grid .stats-card > p {
    min-height: 2.5rem;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.work-stats-grid .task-content {
    gap: 0.625rem;
}

.work-stats-grid .t-name,
.work-stats-grid .t-time {
    min-width: 0;
}

.work-stats-grid .t-name p,
.work-stats-grid .t-time p,
.work-stats-grid .stats-list p {
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 1199.98px) {
    .work-stats-grid {
        grid-template-columns: repeat(2, minmax(16.25rem, 1fr));
    }
}

@media (max-width: 575.98px) {
    .work-stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .work-stats-grid .stats-card > p {
        min-height: auto;
    }

    .work-stats-grid .task-content {
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    .work-order-page-header,
    .work-order-list-header {
        align-items: stretch !important;
        flex-direction: column;
        gap: 1rem;
    }

    .work-order-page-header h2,
    .work-order-list-header h2 {
        text-align: left !important;
        line-height: 1.15;
    }

    .work-order-page-header p {
        max-width: 16.25rem;
        line-height: 1.45;
    }

    .work-order-page-header .btn-group-top,
    .work-order-list-header .btn-group-top {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 0.625rem;
        margin-left: 0 !important;
    }

    .work-order-page-header .btn-view-grid {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.375rem;
        padding: 0.375rem;
    }

    .work-order-page-header .btn-view-grid a,
    .work-order-page-header .btn-group-top > .btn,
    .work-order-list-header .btn-group-top > .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.75rem;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }
}

/* The assigned-work-order picker is the primary control on this page — it gets
   its own full-width band so every assigned order is visible at once, instead of
   being squeezed into a third of the row with an inner scroller. The two KPI
   cards share the row beneath it. */
.work-order-technician-page .work-order-tech-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(13.75rem, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.work-order-technician-page .work-order-tech-stats > .wo-card {
    grid-column: 1 / -1;
}

.work-order-technician-page .wo-card {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.work-order-technician-page .stats-card {
    min-width: 0;
}

.work-order-technician-page .work-order-tech-table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.work-order-technician-page #taskTable,
.work-order-technician-page .dataTables_wrapper,
.work-order-technician-page .dataTables_scroll,
.work-order-technician-page .dataTables_scrollHead,
.work-order-technician-page .dataTables_scrollBody {
    width: 100% !important;
}

@media (max-width: 1199.98px) {
    .work-order-technician-page .work-order-tech-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-order-technician-page .wo-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .work-order-technician-page .work-order-tech-header,
    .work-order-technician-page .work-order-tech-list-header,
    .work-order-technician-page .card.bg-white > .d-flex.align-items-center.justify-content-between {
        align-items: stretch !important;
        flex-direction: column;
        gap: 0.875rem;
    }

    .work-order-technician-page .btn-group-top {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 0.625rem;
        margin-left: 0 !important;
    }

    .work-order-technician-page .btn-view-grid {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.375rem;
        padding: 0.375rem;
    }

    .work-order-technician-page .btn-view-grid a,
    .work-order-technician-page .btn-group-top > .btn,
    .work-order-technician-page .work-order-tech-list-header .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.75rem;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    .work-order-technician-page .work-order-tech-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .work-order-technician-page .dropdown-item {
        flex-direction: column;
        gap: 0.625rem;
    }

    .work-order-technician-page .item-left,
    .work-order-technician-page .item-right {
        width: 100%;
        max-width: none;
        min-width: 0;
        text-align: left;
    }

    .work-order-technician-page .meta {
        line-height: 1.45;
    }

    .work-order-technician-page #taskFilterForm {
        width: 100%;
    }

    .work-order-technician-page #taskFilterForm > div {
        flex-basis: 100%;
    }

    .work-order-technician-page .dataTables_wrapper .dataTables_info,
    .work-order-technician-page .dataTables_wrapper .dataTables_paginate {
        float: none;
        width: 100%;
        text-align: left;
    }

    .work-order-technician-page .dataTables_wrapper .pagination {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 0.375rem;
    }
}

.asset-management-page .asset-table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.asset-management-page #assetsTable {
    width: 100% !important;
}

.asset-management-page .dataTables_wrapper {
    width: 100%;
}

.asset-management-page .dataTables_scroll,
.asset-management-page .dataTables_scrollHead,
.asset-management-page .dataTables_scrollBody {
    width: 100% !important;
}

@media (max-width: 767.98px) {
    .asset-management-page > .d-flex:first-child,
    .asset-management-page .card > .d-flex.align-items-center.justify-content-between {
        align-items: stretch !important;
        flex-direction: column;
        gap: 0.875rem;
    }

    .asset-management-page .btn-group-top,
    .asset-management-page .card > .d-flex .d-flex.flex-column.flex-sm-row {
        width: 100%;
        margin-left: 0 !important;
    }

    .asset-management-page .btn-group-top .btn,
    .asset-management-page .card > .d-flex .d-flex.flex-column.flex-sm-row .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.75rem;
        white-space: normal;
        text-align: center;
    }

    .asset-management-page .card > .d-flex.align-items-center.justify-content-between h4 {
        margin-bottom: 0;
    }

    .asset-management-page #reset_btn,
    .asset-management-page #apply_filter_btn {
        width: 100%;
        margin-top: 0.5rem;
    }

    .asset-management-page .dataTables_wrapper .dataTables_paginate,
    .asset-management-page .dataTables_wrapper .dataTables_info {
        float: none;
        width: 100%;
        text-align: left;
    }

    .asset-management-page .dataTables_wrapper .pagination {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 0.375rem;
    }
}

/* ===== Sidebar refresh ===== */
/* Flex column so the menu fills below the logo + profile and the account group pins to the bottom.
   overflow-y:hidden removes the original always-on sidebar scrollbar (it squashed the narrow
   collapsed icon rail); the menu itself scrolls only when it actually overflows. */
.sidebar-area {
    display: flex;
    flex-direction: column;
    overflow-y: hidden !important;
}
.sidebar-area .layout-menu {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
}
/* Account group (Settings, Role & Permissions, Profile Setting, Logout) pinned to the bottom,
   with a divider line above it separating it from the modules. */
.sidebar-area .layout-menu .menu-account {
    margin-top: auto;
    border-top: 0.0625rem solid #e8ecf1;
    padding-top: 0.875rem;
}

/* Every sidebar menu icon is now an inline Fluent UI System Icon (regular/outline) sharing this
   class — vector, so they stay crisp at any resolution and are uniform in size (replacing the old
   mixed 16-20px raster PNGs that blurred when scaled and never matched each other). One source of
   truth for size + colour; `fill: currentColor` makes each icon follow its menu text colour, so the
   active/hover "light up" states (defined in settings-fluent) recolour the icon automatically. Note:
   <svg> is immune to the `img { max-width:100% }` cap that distorted the PNGs. */
.menu-vertical .menu-item .menu-link .menu-svg-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    fill: currentColor;
    flex-shrink: 0;
    transition: fill 0.2s ease;
}

/* Thin, light-but-visible scrollbar inside the sidebar menu (no native arrows, minimal width so
   it doesn't squash the collapsed icons). */
.sidebar-area .layout-menu::-webkit-scrollbar {
    width: 0.375rem;
}
.sidebar-area .layout-menu::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 0.625rem;
}
.sidebar-area .layout-menu::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-area .layout-menu {
    scrollbar-color: #cbd5e1 transparent;
    scrollbar-width: thin;
}

/* Push the account group nearer the very bottom (the theme left large bottom padding). */
.sidebar-area {
    padding-bottom: 0.625rem !important;
}
.sidebar-area .layout-menu {
    padding-bottom: 0.5rem !important;
}

/* Module-name flyout shown only when the sidebar is minimised. We position a single
   body-level element ourselves (see master.blade.php) rather than use a Bootstrap/Popper
   tooltip: under the global compact zoom, Popper's computed position is scaled a second time
   by the zoomed document, so its tooltips drift onto the wrong icon. Body-level keeps it clear
   of the sidebar's overflow clipping. */
.sidebar-nav-tip {
    position: fixed;
    z-index: 1090;
    transform: translateY(-50%);
    pointer-events: none;
    white-space: nowrap;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    background: #1e293b;
    color: #fff;
    box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
}
.sidebar-nav-tip.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   Sidebar fixes — scrollable menu, collapsed-group expand, small-screen drawer
   ============================================================ */

/* Fix 1 — the menu must SCROLL when a group (Settings) expands, so the items below it
   (Role & Permissions, Profile Setting, Logout) stay reachable. .layout-menu is the scroll region
   (overflow-y:auto), but the menu library makes BOTH .menu-inner lists `flex: 1 1 auto`, so they
   shrink to fit the visible height while their content overflows invisibly below — the menu never
   scrolls. Pinning the lists to their natural height (flex:0 0 auto) makes .layout-menu overflow and
   scroll; .menu-account keeps margin-top:auto, so it still sits at the bottom when there is room. */
.sidebar-area .layout-menu .menu-inner {
    flex: 0 0 auto;
    height: auto;
}

/* Fix 2 — collapsed icon-rail (DESKTOP only): never render the broken absolutely-positioned submenu
   the theme left behind ([sidebar-hide] .menu-sub { opacity:0; position:absolute }, style.css).
   Clicking a group in the rail expands the sidebar (custom.js), so the submenu shows inline once
   expanded. Scoped to >= 1200px because below that the same [sidebar-hide] attribute drives the OPEN
   drawer, where the submenus must remain visible. */
@media (min-width: 1200px) {
    [sidebar-data-theme="sidebar-hide"] .sidebar-area .menu-vertical .menu-sub {
        display: none !important;
    }
}

/* Fix 3 — small screens (< 1200px): the theme already turns the sidebar into a left-based off-canvas
   drawer (default left:-350px; [sidebar-hide] -> left:0 = open). It just lacked a backdrop, so an
   open drawer floated over undimmed content with no easy way to dismiss it. Add a dimmed backdrop
   shown only while the drawer is open, sitting just below the drawer; clicking it closes (custom.js). */
.sidebar-backdrop {
    display: none;
}
@media (max-width: 1199px) {
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area {
        z-index: 1050;
    }
    body[sidebar-data-theme="sidebar-hide"] .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1040;
    }
}

/* Fix 4 — the top-level menu icons are bare <img> with no size in a flex .menu-link, so flexbox
   SQUASHES them when space is tight (worst in the ~768-1199px drawer: the icon shrank to ~20px,
   collapsing its padding so the label jammed against it). Pin them to a fixed box that never shrinks,
   with a consistent gap, so the icon↔label spacing is identical at every resolution. */
.sidebar-area .menu-vertical .menu-item .menu-link > img {
    width: 1.375rem;
    height: 1.375rem;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 0.625rem;
}

/* ============================================================
   Create / Edit Task Card page
   ============================================================ */

/* View Type toggle: a contained inline-flex segmented control so the pills no
   longer spill past the rounded border (the base rule is display:inline with
   0 horizontal padding, which let the inner pill corners poke out). */
.btn-view-type {
    display: inline-flex;
    align-items: stretch;
    padding: 0.1875rem;
    overflow: hidden;
    vertical-align: middle;
}

.btn-view-type a {
    padding: 0.375rem 2rem;
    border-radius: 1rem;
    line-height: 1.3 !important;
    display: inline-flex;
    align-items: center;
}

/* Bold the field titles in Task Card Information (scoped to the task-card
   create/edit form so the shared .form-label elsewhere is untouched). */
#task-card-form .form-label {
    font-weight: 600;
}

/* Action buttons: one right-aligned cluster — the workflow actions first, then
   the exit/destructive pair (Cancel, Delete) trailing behind a subtle divider. */
.btn-group-top.btn-group-actions {
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.btn-group-actions .tc-btn-history,
.btn-group-actions .tc-btn-workflow,
.btn-group-actions .tc-btn-exit {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.btn-group-actions .tc-btn-history {
    gap: 0.25rem;
    margin-right: 0.375rem;
    padding-right: 1rem;
    border-right: 0.0625rem solid #e2e8f0;
}

.btn-group-actions .tc-btn-history .cbtn {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.btn-group-actions .tc-btn-history .cbtn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.btn-group-actions .tc-btn-exit {
    margin-left: 0.375rem;
    padding-left: 1rem;
    border-left: 0.0625rem solid #e2e8f0;
}

/* Subsection name input grows to fill the row beside its Save button. */
.subsec-name-row .form-control {
    flex: 1 1 auto;
}

/* Provisioning / step tables: the cells default to a white background, which
   frames each (grey) input with a white halo against the grey .step-card. Make
   the table and its cells transparent so the inputs sit flush on the card. */
#task-card-form .step-card .table,
#task-card-form .step-card .table > :not(caption) > * > * {
    background-color: transparent;
    box-shadow: none;
}

/* Top header row: View Type (left) and action buttons (right) share one
   full-width flex row, wrapping gracefully on narrow viewports. */
.tc-header-row {
    column-gap: 1rem;
    row-gap: 0.75rem;
}

.tc-view-type {
    display: inline-flex;
    align-items: center;
}

/* Auto-assigned subsection letter (A., B., C. ...) shown read-only beside the name. */
.subsec-letter {
    flex: 0 0 auto;
    min-width: 1.75rem;
    font-weight: 700;
    font-size: 1rem;
    color: #3A4252;
    text-align: center;
    white-space: nowrap;
}

/* Final Step "Not Applicable / Has Steps" segmented toggle. */
.fs-mode-toggle {
    display: inline-flex;
    align-items: stretch;
    padding: 0.1875rem;
    border: 0.125rem solid #3B82F6;
    border-radius: 1.25rem;
    overflow: hidden;
}

.fs-mode-toggle .fs-mode-btn {
    padding: 0.375rem 1.375rem;
    text-decoration: none;
    color: #2E2E2E;
    border-radius: 1rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.fs-mode-toggle .fs-mode-btn.active {
    background: #3B82F6;
    color: #fff;
}

.finalstep-na-placeholder .final-step-empty {
    color: #64748b;
    font-style: italic;
    margin: 0.5rem 0;
}

[data-bs-theme="dark"] .btn-group-actions .tc-btn-history {
    border-right-color: #3a444e;
}

[data-bs-theme="dark"] .btn-group-actions .tc-btn-exit {
    border-left-color: #3a444e;
}

@media (max-width: 768px) {
    .btn-group-top.btn-group-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-group-actions .tc-btn-workflow,
    .btn-group-actions .tc-btn-exit {
        flex-direction: column;
        width: 100%;
    }

    .btn-group-actions .tc-btn-history {
        margin-right: 0;
        padding-right: 0;
        border-right: 0;
        justify-content: center;
        width: 100%;
    }

    .btn-group-actions .tc-btn-exit {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        border-top: 0.0625rem solid #e2e8f0;
        padding-top: 0.625rem;
        margin-top: 0.25rem;
    }
}

/* ============================================================
   Fluent 2 card (<x-fluent-card>) — a reusable surface component (header / body / footer)
   modelled on the Microsoft Fluent 2 Card. Compact, responsive, enterprise look: 8px radius,
   hairline stroke, soft elevation, Segoe-first type. Values are inlined (not the
   body.settings-fluent --fl-* tokens, which are scoped to Settings) so the card renders the same
   on every page.
   ============================================================ */
.fl-card {
    display: flex;
    flex-direction: column;
    min-width: 0; /* lets the card shrink inside grid/flex without overflowing */
    background: #fff;
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.5rem;
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06), 0 0 0.0625rem rgba(0, 0, 0, 0.12);
    color: #242424;
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Inter", "Roboto", sans-serif;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.fl-card--filled {
    background: #faf9f8;
}

.fl-card--subtle {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.fl-card:hover {
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.10), 0 0 0.125rem rgba(0, 0, 0, 0.08);
}

.fl-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 0.0625rem solid #f0eff0;
}

.fl-card__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.0063rem;
    color: #242424;
}

.fl-card__title--accent {
    color: #0080d0; /* Global Turbine brand blue, matches the HELIOS wordmark */
}

.fl-card__body {
    flex: 1 1 auto;
    padding: 0.75rem 0.875rem;
}

.fl-card__footer {
    padding: 0.625rem 0.875rem;
    border-top: 0.0625rem solid #f0eff0;
}

/* --- Work Order dashboard stat cards: compact the existing inner content for the Fluent card,
       and keep the four header titles aligned (one of them wraps to two lines). --- */
.work-stats-grid .fl-card__header {
    min-height: 2.75rem; /* aligns 1-line and 2-line titles so the bodies start level */
}
.work-stats-grid .fl-card .stats-card-content {
    padding: 0;
}
.work-stats-grid .fl-card .stats-c-content > p {
    font-size: 0.75rem;
    color: #605e5c;
    margin: 0 0 0.125rem;
}
.work-stats-grid .fl-card .stats-c-content h4 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}
.work-stats-grid .fl-card .stats-card-icon i {
    color: #0080d0;
    font-size: 1.25rem;
}
.work-stats-grid .fl-card .stats-list {
    margin-top: 0.625rem;
}
.work-stats-grid .fl-card .stats-list p {
    font-size: 0.8125rem;
    line-height: 1.85;
    margin: 0;
    color: #242424;
}
.work-stats-grid .fl-card .task-content .t-name img {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    object-fit: cover;
}
.work-stats-grid .fl-card .task-content .t-name p {
    font-size: 0.8125rem;
    margin: 0;
}
.work-stats-grid .fl-card .task-content .t-time p {
    font-size: 0.75rem;
    margin: 0;
}
.work-stats-grid .fl-card .task-progress.progress {
    height: 0.375rem;
    border-radius: 0.25rem;
    background: #f0eff0;
}
.work-stats-grid .fl-card .task-content-grid:last-child {
    margin-bottom: 0 !important;
}

/* --- Dashboard (/account/dashboard): give every card the same Fluent 2 surface as
       <x-fluent-card> — hairline stroke, 8px radius, soft elevation — replacing the heavy
       floaty drop-shadow, for one cohesive enterprise look. Scoped to `.fl-dashboard` so it
       only touches the dashboard, and only the surface (not the cards' inner layout). --- */
.fl-dashboard .card {
    border: 0.0625rem solid #e1dfdd !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06), 0 0 0.0625rem rgba(0, 0, 0, 0.12) !important;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.fl-dashboard .card:hover {
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.10), 0 0 0.125rem rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================
   Asset Management — Fluent 2 dashboard + compact bordered asset table.
   Scoped to `.asset-management-page` (the dashboard + the standalone Asset List both carry it)
   and to the asset table's class hook `.table-s-one` / id `#assetsTable`. Inlined Fluent hex
   (NOT the body.settings-fluent --fl-* tokens, which are scoped to Settings) so it renders the
   same here without whitelisting the route — i.e. no collateral restyle of the booking modals.
   Fluent palette in use: brand #0080d0, stroke #e1dfdd, strong-stroke #c7cdd6, fg #242424,
   fg-secondary #605e5c, hover #f3f6fb, header band #f8fafc, Segoe-first type.
   ============================================================ */

/* Page heading */
.asset-management-page h2 {
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Inter", "Roboto", sans-serif;
    color: #242424;
    font-weight: 600;
    font-size: 1.375rem;
}

/* --- Stat cards: Fluent surface (flat white, hairline stroke, 8px radius, soft shadow),
       replacing the heavy floaty drop-shadow. The six color-coded icon chips are kept. --- */
.asset-management-page .asset-info-card {
    min-height: 4.5rem;
    background: #fff;
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.5rem !important; /* beats the .rounded-4 utility (!important) */
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06), 0 0 0.0625rem rgba(0, 0, 0, 0.12) !important; /* beats .box-shadow */
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Inter", "Roboto", sans-serif;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.asset-management-page .asset-info-card:hover {
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.10), 0 0 0.125rem rgba(0, 0, 0, 0.08) !important;
}
/* KPI label: small, uppercase, muted — the "enterprise" caption treatment. */
.asset-management-page .asset-info-card h5 {
    color: #605e5c;
    font-weight: 600;
    font-size: 0.7188rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.125rem;
}
/* KPI value is the hero: larger, anchored at the bottom of the equal-height card. */
.asset-management-page .asset-info-card h4 {
    color: #242424;
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.1;
    margin: 0;
}
/* Balanced KPI strip: an explicit column count so six tiles never wrap to a lopsided
   5+1 orphan — one row of 6 on wide screens, an even 3+3 on laptops, 2+2+2 on phones. */
.asset-management-page .asset-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.875rem;
}
@media (max-width: 1399.98px) {
    .asset-management-page .asset-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 575.98px) {
    .asset-management-page .asset-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* KPI icon chips — colour is reserved for MEANING, not decoration: brand for counts,
   success/warning/danger for the semantic buckets, neutral grey for the rest. Retuned to
   the Fluent status palette used across the redesign. */
.asset-management-page .asset-info-icon-blue {
    color: #0080d0;
    background: #e4f3fb;
}
.asset-management-page .asset-info-icon-green {
    color: #0e700e;
    background: #dff6dd;
}
.asset-management-page .asset-info-icon-amber,
.asset-management-page .asset-info-icon-orange {
    color: #835300;
    background: #fff4ce;
}
.asset-management-page .asset-info-icon-red {
    color: #c50f1f;
    background: #fde7e9;
}
.asset-management-page .asset-info-icon-grey,
.asset-management-page .asset-info-icon-purple {
    color: #605e5c;
    background: #f0f0f0;
}
/* Anchor the value to the bottom of each (equal-height) card so the numbers stay aligned across the
   row even if a label wraps to two lines. */
.asset-management-page .asset-info-card > .d-flex.flex-column {
    justify-content: space-between;
    flex: 1 1 auto;
    min-width: 0;
}

/* --- The "Asset List" / "Filter" panel: Fluent surface + breathing room. Tagged with the
       dedicated .fl-panel class in the Blade so it can't touch the booking modals' cards. --- */
.asset-management-page .fl-panel {
    background: #fff;
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06), 0 0 0.0625rem rgba(0, 0, 0, 0.12);
    padding: 1.125rem 1.25rem;
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Inter", "Roboto", sans-serif;
}
.asset-management-page .fl-panel .font-18 {
    color: #242424;
    font-weight: 600;
    font-size: 1rem !important;
}
.asset-management-page .fl-panel hr.hr-grey {
    border-color: #f0eff0 !important;
    margin: 0.875rem 0;
}

/* --- Buttons: Fluent shape (6px radius, 600 weight), semantic colors kept. cbtn-blue → brand. --- */
.asset-management-page .cbtn {
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}
.asset-management-page .cbtn-blue {
    background: #0080d0;
    border-color: #0080d0;
}
.asset-management-page .cbtn-blue:hover {
    color: #0080d0;
    border-color: #0080d0;
}
/* Secondary (Fluent "Default") button: white surface, neutral stroke, dark text. One filled
   brand button is the primary in each cluster; the rest use this so the page isn't a rainbow. */
.asset-management-page .cbtn-secondary {
    background: #fff;
    color: #242424;
    border: 0.0625rem solid #c7cdd6;
}
.asset-management-page .cbtn-secondary:hover {
    background: #f3f6fb;
    border-color: #c7cdd6;
    color: #242424;
}

/* Status as a coloured WORD (not a pill) — the calm, single language shared with the asset
   detail page. Both status columns (Operational Status + Condition) use it, so the grid reads
   consistently. Colour decided centrally by App\Support\AssetStatusBadge::fluentModifier(). */
.asset-management-page .asset-cell-status {
    font-weight: 600;
    white-space: nowrap;
}
.asset-management-page .asset-cell-status--success {
    color: #0e700e;
}
.asset-management-page .asset-cell-status--warning {
    color: #835300;
}
.asset-management-page .asset-cell-status--danger {
    color: #c50f1f;
}
.asset-management-page .asset-cell-status--info {
    color: #0080d0;
}
.asset-management-page .asset-cell-status--neutral {
    color: #605e5c;
}

/* "Filter" reduced from a heading to a small uppercase micro-label, so the heading ramp
   (page title → panel title → label) steps down cleanly instead of competing. */
.asset-management-page .asset-filter-label {
    text-transform: uppercase;
    font-size: 0.7188rem;
    letter-spacing: 0.04em;
    color: #605e5c;
    font-weight: 600;
    margin: 0;
}

/* Page subtitle under the H2 — muted, for orientation (mirrors the M365 page-header pattern). */
.asset-management-page .asset-page-subtitle {
    color: #605e5c;
    font-size: 0.8125rem;
    margin: 0.125rem 0 0;
}

/* Clickable KPI tiles: pointer + a brand ring on the bucket currently filtering the grid. */
.asset-management-page .asset-kpi-card {
    cursor: pointer;
}
.asset-management-page .asset-kpi-card:hover {
    border-color: #c7cdd6;
}
.asset-management-page .asset-kpi-card:focus-visible {
    outline: 0.125rem solid #0080d0;
    outline-offset: 0.125rem;
}
.asset-management-page .asset-kpi-card.asset-kpi-card--active {
    border-color: #0080d0;
    box-shadow: 0 0 0 0.0625rem #0080d0, 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06) !important;
}

/* Vivid booking-action buttons — saturated fills (the pale outline look is gone). */
.asset-management-page .cbtn-orange {
    background: #e8850c;
    border-color: #e8850c;
    color: #fff;
}
.asset-management-page .cbtn-orange:hover {
    background: #cf760a;
    border-color: #cf760a;
    color: #fff;
}
.asset-management-page .cbtn-green {
    background: #1aa64b;
    border-color: #1aa64b;
    color: #fff;
}
.asset-management-page .cbtn-green:hover {
    background: #168a3f;
    border-color: #168a3f;
    color: #fff;
}

/* Filters on their own calm grey surface, separate from the white table and collapsible so the
   grid stays the focus. Starts expanded so the select2 controls size correctly. */
.asset-management-page .asset-filter-panel {
    background: #f6f8fa;
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.5rem;
    padding: 0.875rem 1.125rem;
}
.asset-management-page .asset-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 0;
    padding: 0;
    color: #242424;
    font-weight: 600;
    font-size: 0.875rem;
}
.asset-management-page .asset-filter-toggle .material-symbols-outlined {
    font-size: 1.25rem;
    color: #605e5c;
}
.asset-management-page .asset-filter-chevron {
    transition: transform 0.15s ease;
}
.asset-management-page .asset-filter-toggle[aria-expanded="false"] .asset-filter-chevron {
    transform: rotate(180deg);
}
.asset-management-page .asset-filter-panel .form-label {
    margin-bottom: 0.25rem;
}

/* ===== Top-nav profile (avatar relocated here from the sidebar) ============================= */
.topnav-profile__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    /* !important defeats the themed header-button padding (10px) that otherwise inflates the
       whole top bar — keep the trigger as tall as the avatar so the navbar holds its 66px floor. */
    padding: 0.125rem 0.375rem !important;
    border-radius: 0.5rem;
    cursor: pointer;
    line-height: 1.1;
}
/* Keep the trigger neutral in every state — override the themed button fill that otherwise
   turns it solid blue while the dropdown is open/focused. */
.topnav-profile__trigger,
.topnav-profile__trigger:focus,
.topnav-profile__trigger:active,
.topnav-profile__trigger:focus-visible,
.topnav-profile__trigger.show,
.topnav-profile__trigger[aria-expanded="true"] {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none;
}
.topnav-profile__trigger:hover {
    background-color: #f3f6fb !important;
}
.topnav-avatar {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.topnav-avatar--lg {
    width: 2.375rem;
    height: 2.375rem;
}
/* Initials variant of the topbar avatar (no photo uploaded yet). */
span.topnav-avatar {
    background-color: #6c757d;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}
span.topnav-avatar--lg {
    font-size: 0.9375rem;
}
.topnav-profile__meta {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    text-align: left;
}
.topnav-profile__name {
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.15;
    color: #242424;
}
.topnav-profile__role {
    font-size: 0.6875rem;
    line-height: 1.15;
    color: #605e5c;
}
.topnav-profile__caret {
    font-size: 1.125rem;
    line-height: 1;
    color: #605e5c;
}
.topnav-profile__menu {
    min-width: 16.25rem;
    padding: 0;
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
.topnav-profile__id {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.875rem 1rem;
    background: #f8fafc;
}
.topnav-profile__id-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}
.topnav-profile__email {
    font-size: 0.75rem;
    color: #605e5c;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topnav-profile__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #242424;
}
.topnav-profile__item .topnav-profile__icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    fill: #605e5c;
}
/* Theme toggle: show the moon in light mode (clicking goes dark), the sun in
   dark mode (clicking goes light) — mirrors the swapped "Dark/Light mode" label. */
.topnav-profile__theme .topnav-profile__icon--sun {
    display: none;
}
[data-bs-theme="dark"] .topnav-profile__theme .topnav-profile__icon--moon {
    display: none;
}
[data-bs-theme="dark"] .topnav-profile__theme .topnav-profile__icon--sun {
    display: inline-block;
}
/* Same moon/sun swap for the sidebar theme toggle (.theme-icon--*). */
.theme-icon--sun {
    display: none;
}
[data-bs-theme="dark"] .theme-icon--moon {
    display: none;
}
[data-bs-theme="dark"] .theme-icon--sun {
    display: inline-block;
}
.topnav-profile__item:hover {
    background: #f3f6fb;
    color: #242424;
}
.topnav-profile__signout {
    color: #c50f1f;
}
.topnav-profile__signout .topnav-profile__icon {
    fill: #c50f1f;
}
.topnav-profile__signout:hover {
    background: #fde7e9;
    color: #c50f1f;
}
.topnav-profile__badge {
    margin-left: auto;
    background: #c50f1f;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 0.5625rem;
    padding: 0.0625rem 0.4375rem;
}

/* ===== Sidebar "Main Menu" header (replaces the relocated avatar) ========================== */
.sidebar-area .custom-profile-menu {
    padding: 0.375rem 1.375rem !important;
}
.sidebar-menu-head {
    min-height: 1.625rem;
}
.sidebar-menu-label {
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: #8a8f98;
    white-space: nowrap;
}
/* Minimized (icon-only) sidebar: drop the label and centre the expand toggle. */
body[sidebar-data-theme="sidebar-hide"] .sidebar-menu-head {
    justify-content: center !important;
}
body[sidebar-data-theme="sidebar-hide"] .sidebar-menu-label {
    display: none;
}

/* --- Filter controls: Fluent inputs/labels/select2. --- */
.asset-management-page .form-label {
    color: #605e5c;
    font-weight: 600;
    font-size: 0.7813rem;
    margin-bottom: 0.25rem;
}
.asset-management-page .form-control {
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.375rem;
    height: 2.5rem;
    font-size: 0.875rem;
    color: #242424 !important;
    padding: 0.5rem 0.75rem;
}
.asset-management-page .form-control:focus {
    border-color: #0080d0;
    box-shadow: 0 0 0 0.0625rem #0080d0;
}
.asset-management-page .select2-container--default .select2-selection--single {
    height: 2.5rem;
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.375rem;
}
.asset-management-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.375rem;
    color: #242424;
    font-size: 0.875rem;
}
.asset-management-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.375rem;
}

/* --- The compact, fully-bordered asset table (the Process-Booking "Tool List" look the user
       likes), at a readable ~12.5px tier with a Fluent hover. With scrollX on, DataTables splits
       the visible header (a clone) from the data body, and the clone loses the #id but keeps the
       class — so target the CLASS `.table-s-one`, not `#assetsTable`, to style both. `!important`
       is required to beat the base `.table-s td/th { border:none; background:transparent }`
       (the same house style as .booking-tools-table). --- */
.asset-management-page .table-s-one {
    border-collapse: collapse;
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Inter", "Roboto", sans-serif;
}
.asset-management-page .table-s-one thead th {
    background-color: #f8fafc !important;
    color: #111827 !important;
    font-size: 0.7813rem !important;
    font-weight: 700 !important;
    padding: 0.5rem 0.625rem !important;
    white-space: nowrap;
    border: 0.0625rem solid #c7cdd6 !important;
    vertical-align: middle;
}
.asset-management-page .table-s-one tbody td {
    background-color: #fff !important;
    color: #242424 !important;
    font-size: 0.7813rem !important;
    line-height: 1.3 !important;
    padding: 0.3125rem 0.625rem !important;
    border: 0.0625rem solid #c7cdd6 !important;
    vertical-align: middle !important;
}
/* keep the row-action eye icon from inflating the compact row height */
.asset-management-page .table-s-one tbody td a i,
.asset-management-page .table-s-one tbody td .btn {
    font-size: 1rem;
    line-height: 1;
}
.asset-management-page .table-s-one tbody tr:hover td {
    background-color: #f3f6fb !important;
}
/* in-table status/condition badges → rounded Fluent pills (colors stay from the controller) */
.asset-management-page .table-s-one .badge {
    border-radius: 62.4375rem;
    font-weight: 700;
    font-size: 0.6875rem;
    padding: 0.1875rem 0.5625rem;
}

/* No (first) and Action (last) columns: centre header + cells, and give No a tidy fixed width so
   the row numbers sit centred instead of jammed against the border (the base .table-s rule forces
   left-align, so !important is needed). */
.asset-management-page .table-s-one thead th:first-child,
.asset-management-page .table-s-one tbody td:first-child,
.asset-management-page .table-s-one thead th:last-child,
.asset-management-page .table-s-one tbody td:last-child {
    text-align: center !important;
}
.asset-management-page .table-s-one thead th:first-child,
.asset-management-page .table-s-one tbody td:first-child {
    width: 3.25rem;
}

/* Action column "View" link — Fluent text + icon link. min-height gives a
   tappable box; the row is taller than the text line either way. */
.asset-management-page .table-s-one .asset-view-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 2.5rem;
    padding: 0 0.375rem;
    color: #0080d0;
    font-size: 0.7813rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
/* Misplaced chip — the -tag suffix exempts it from fluent-dark's td-badge neutralizer. */
.misplaced-tag {
    background: rgba(197, 15, 31, 0.1);
    color: #c50f1f;
}

.asset-management-page .table-s-one .asset-view-link:hover {
    color: #0070ba;
    text-decoration: underline;
}
.asset-management-page .table-s-one .asset-view-link .material-symbols-outlined {
    font-size: 1.125rem;
    line-height: 1;
}

/* Fluent (Material Symbols) icons sized for the stat-card chips and the action buttons. */
.asset-management-page .asset-info-icon .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
}
.asset-management-page .cbtn .material-symbols-outlined {
    font-size: 1.125rem;
    line-height: 1;
    vertical-align: middle;
}

/* --- DataTables footer chrome (info + pagination) to match the Fluent palette. --- */
.asset-management-page .dataTables_wrapper .dataTables_info {
    color: #605e5c;
    font-size: 0.8125rem;
}
.asset-management-page .dataTables_wrapper .pagination .page-link {
    color: #242424;
    border-color: #e1dfdd;
    font-size: 0.8125rem;
    border-radius: 0.375rem;
    margin: 0 0.125rem;
}
.asset-management-page .dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: #0080d0;
    border-color: #0080d0;
    color: #fff;
}

/* =====================================================================
   Asset Management — Fluent 2 detail ("Show Asset") page.
   Scoped to `.asset-detail-page` (co-class with `.asset-management-page`, so it
   also inherits the .fl-panel / .cbtn / .form-control / .table-s-one rules
   above). Same inlined Fluent palette: brand #0080d0, stroke #e1dfdd, strong
   stroke #c7cdd6, fg #242424, fg-secondary #605e5c, hover #f3f6fb, divider
   #f0eff0, brand-tint #e4f3fb, plus the Fluent status pairs (success
   #dff6dd/#0e700e, danger #fde7e9/#c50f1f, warning #fff4ce/#835300).
   ===================================================================== */

.asset-detail-page {
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Inter", "Roboto", sans-serif;
    color: #242424;
}

/* --- Header band: title + subtitle on the left, status + actions on the right. --- */
.asset-detail-page .asset-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.asset-detail-page .asset-detail-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    color: #242424;
    word-break: break-word;
}
.asset-detail-page .asset-detail-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: #605e5c;
}
.asset-detail-page .asset-detail-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.asset-detail-page .asset-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.875rem;
}

/* --- Status as a labelled, colour-on-the-word indicator (Condition / Operational
       Status) — a calm Fluent presence dot + coloured text, not a filled pill.
       Colour decided centrally in App\Support\AssetStatusBadge. --- */
.asset-detail-page .asset-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 2rem;
}
.asset-detail-page .asset-status {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}
.asset-detail-page .asset-status__label {
    font-size: 0.7188rem;
    font-weight: 600;
    letter-spacing: 0.0125rem;
    text-transform: uppercase;
    color: #605e5c;
}
.asset-detail-page .asset-status__value {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: #605e5c;
}
.asset-detail-page .asset-status__value::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.asset-detail-page .asset-status__value--success { color: #0e700e; }
.asset-detail-page .asset-status__value--warning { color: #835300; }
.asset-detail-page .asset-status__value--danger { color: #c50f1f; }
.asset-detail-page .asset-status__value--info { color: #005a9e; }
.asset-detail-page .asset-status__value--neutral { color: #605e5c; }

/* --- One aligned, content-aware key-facts grid (replaces the two uneven rows). --- */
.asset-detail-page .asset-detail-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.125rem, 1fr));
    gap: 1.125rem 1.5rem;
}
.asset-detail-page .asset-fact {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
}
.asset-detail-page .asset-fact__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: #e4f3fb;
    color: #0080d0;
}
.asset-detail-page .asset-fact__icon .material-symbols-outlined {
    font-size: 1.1875rem;
    line-height: 1;
}
.asset-detail-page .asset-fact__body { min-width: 0; }
.asset-detail-page .asset-fact__label {
    font-size: 0.7188rem;
    font-weight: 600;
    letter-spacing: 0.0125rem;
    text-transform: uppercase;
    color: #605e5c;
    margin: 0 0 0.125rem;
}
.asset-detail-page .asset-fact__value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #242424;
    line-height: 1.35;
    word-break: break-word;
}

/* --- Section titles (one consistent level, replacing the flat <h3>s). --- */
.asset-detail-page .asset-section-title {
    margin: 0 0 0.875rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #242424;
}

/* --- Read-only fields shown as plain labelled text (not disabled inputs). --- */
.asset-detail-page .asset-readfield + .asset-readfield { margin-top: 1rem; }
.asset-detail-page .asset-readfield__label {
    font-size: 0.7188rem;
    font-weight: 600;
    letter-spacing: 0.0125rem;
    text-transform: uppercase;
    color: #605e5c;
    margin: 0 0 0.25rem;
}
.asset-detail-page .asset-readfield__value {
    font-size: 0.875rem;
    color: #242424;
    line-height: 1.5;
    white-space: pre-line;
    word-break: break-word;
}
.asset-detail-page .asset-readfield__value--muted { color: #a19f9d; }

/* --- Asset image frame. --- */
.asset-detail-page .asset-detail-image {
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.5rem;
    background: #faf9f8;
    padding: 0.5rem;
    display: inline-block;
    max-width: 100%;
}
.asset-detail-page .asset-detail-image img {
    display: block;
    max-width: 100%;
    max-height: 20rem;
    border-radius: 0.25rem;
    object-fit: contain;
}

/* --- Activity log timeline (migrated from the page's inline <style>). --- */
.asset-detail-page .asset-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 0.0625rem solid #f0eff0;
}
.asset-detail-page .asset-activity-item:first-child {
    padding-top: 0;
    border-top: none;
}
.asset-detail-page .asset-activity-avatar {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e4f3fb;
    color: #0080d0;
}
.asset-detail-page .asset-activity-avatar .material-symbols-outlined { font-size: 1.1875rem; }
.asset-detail-page .asset-activity-text {
    font-size: 0.8438rem;
    color: #242424;
    line-height: 1.4;
}
.asset-detail-page .asset-activity-text strong { font-weight: 600; }
.asset-detail-page .asset-activity-time {
    font-size: 0.75rem;
    color: #605e5c;
    margin-top: 0.125rem;
}

/* --- Attachments list. --- */
.asset-detail-page .asset-attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.5rem;
    color: #242424;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.asset-detail-page .asset-attachment-item + .asset-attachment-item { margin-top: 0.5rem; }
.asset-detail-page .asset-attachment-item:hover {
    background: #f3f6fb;
    border-color: #c7cdd6;
}
.asset-detail-page .asset-attachment-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.8438rem;
    font-weight: 500;
}
.asset-detail-page .asset-attachment-name span.label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.asset-detail-page .asset-attachment-name .material-symbols-outlined { color: #605e5c; font-size: 1.25rem; }
.asset-detail-page .asset-attachment-meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 0 0 auto;
    color: #605e5c;
    font-size: 0.75rem;
}
.asset-detail-page .asset-attachment-meta .material-symbols-outlined { color: #0080d0; font-size: 1.25rem; }

/* --- Bordered Fluent grid for the calibration-history table — the same look as
       the asset list's .table-s-one, minus the list-only No/Action column rules. --- */
.asset-detail-page .asset-detail-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
.asset-detail-page .asset-detail-table thead th {
    background: #f8fafc;
    color: #111827;
    font-size: 0.7813rem;
    font-weight: 700;
    padding: 0.5rem 0.625rem;
    white-space: nowrap;
    border: 0.0625rem solid #c7cdd6;
    vertical-align: middle;
}
.asset-detail-page .asset-detail-table tbody td {
    background: #fff;
    color: #242424;
    font-size: 0.7813rem;
    line-height: 1.3;
    padding: 0.375rem 0.625rem;
    border: 0.0625rem solid #c7cdd6;
    vertical-align: middle;
}
.asset-detail-page .asset-detail-table tbody tr:hover td { background: #f3f6fb; }
.asset-detail-page .asset-detail-table a { color: #0080d0; text-decoration: none; }
.asset-detail-page .asset-detail-table a:hover { text-decoration: underline; }
.asset-detail-page .asset-detail-table .asset-status__value { font-size: 0.7813rem; }

/* Document/certificate download link — a verb + icon, never the opaque
   on-disk (non-guessable) filename. */
.asset-detail-page .asset-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #0080d0;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.asset-detail-page .asset-doc-link:hover { text-decoration: underline; }
.asset-detail-page .asset-doc-link .material-symbols-outlined { font-size: 1.125rem; }

/* --- A calm empty-state line. --- */
.asset-detail-page .asset-empty {
    color: #605e5c;
    font-size: 0.8438rem;
    margin: 0;
}

/* --- Action buttons that aren't the brand cbtn (Edit = neutral default). --- */
.asset-detail-page .cbtn-default {
    background: #fff;
    border: 0.0625rem solid #c7cdd6;
    color: #242424;
}
.asset-detail-page .cbtn-default:hover {
    background: #f3f6fb;
    border-color: #b3b9c4;
    color: #242424;
}

/* =====================================================================
   Asset Management — Fluent 2 create/edit form (`.asset-form-page`).
   Reuses the .asset-management-page input/button/panel rules; adds the
   form-only bits: Fluent checkboxes, dropify framing, the attachment
   chip, and a right-aligned action bar.
   ===================================================================== */
/* Checkbox rows as a clean flex pair — the base theme floats the input with a
   negative margin into a zero padding-left (it lands in the gutter) and rounds it
   to a circle; reset both so the box sits beside its label and reads as a checkbox. */
.asset-form-page .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
    margin-bottom: 0;
    min-height: auto;
}
.asset-form-page .form-check .form-check-input {
    float: none;
    margin: 0;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border-color: #c7cdd6;
}
.asset-form-page .form-check .form-check-input:checked {
    background-color: #0080d0;
    border-color: #0080d0;
}
.asset-form-page .form-check .form-check-input:focus {
    border-color: #0080d0;
    box-shadow: 0 0 0 0.0625rem #0080d0;
}
.asset-form-page .form-check .form-check-label {
    color: #242424;
    font-size: 0.875rem;
    margin: 0;
    cursor: pointer;
}

/* The Bootstrap validation-error summary, Fluent-toned. */
.asset-form-page .alert-danger {
    background: #fde7e9;
    border: 0.0625rem solid #f1bcc2;
    color: #c50f1f;
    border-radius: 0.5rem;
}
.asset-form-page .alert-danger .material-symbols-outlined { font-size: 1.25rem; }

/* Dropify drop-zones framed like the other Fluent inputs. */
.asset-form-page .dropify-wrapper {
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.5rem;
    background: #faf9f8;
}
.asset-form-page .dropify-wrapper:hover {
    border-color: #c7cdd6;
}
/* Stack the dropify icon above its prompt (default overlaps them). */
.asset-form-page .dropify-wrapper .dropify-message span.file-icon {
    display: block;
    margin-bottom: 0.625rem;
}
.asset-form-page .dropify-wrapper .dropify-message p {
    font-size: 0.9375rem;
    line-height: 1.4 !important;
    margin: 0;
    color: #605e5c;
}

/* Selected-attachment chips (the JS-rendered preview list). */
.asset-form-page .asset-attachment-chip {
    background: #e4f3fb;
    border: 0.0625rem solid #cfe6f7;
    border-radius: 62.4375rem;
    font-size: 0.8125rem;
    color: #005a9e;
}
.asset-form-page .asset-attachment-chip .material-symbols-outlined { font-size: 1.0625rem; }
.asset-form-page .asset-attachment-chip .chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 13.75rem;
}
.asset-form-page .asset-attachment-chip .remove-file,
.asset-form-page .asset-attachment-chip .remove-existing,
.asset-form-page .asset-attachment-chip .remove-new {
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
}

/* Right-aligned form action bar. */
.asset-form-page .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* =====================================================================
   Task Card Library — the document register (`.task-card-page`).
   The page borrows the wo-* command-bar / panel / kebab vocabulary
   (custom.css 7898+); only register-specific pieces live here. All rem;
   colours ride the --fl-* tokens so dark mode needs no extra rules
   except where noted.
   ===================================================================== */
.task-card-page {
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Inter", "Roboto", sans-serif;
    color: var(--fl-fg, #242424);
}

/* The header's Add button: keep the + icon on the text line (the sizing
   rule lived in the retired list block; without it the raw icon size
   inflates and misaligns the button). */
.task-card-page .cbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.task-card-page .cbtn .material-symbols-outlined {
    font-size: 1.125rem;
    line-height: 1;
}

/* The merged technician card carries a roster, so it takes two of the four columns
   rather than being squeezed into one. Below 1200px the grid is already 2-up, where a
   2-span would be the whole row anyway — so the span only applies at the 4-up size. */
@media (min-width: 1200px) {
    .work-stats-grid .wo-tech-card {
        grid-column: span 2;
    }
}

/* Cap overflow. Set on the row rather than relying on [hidden] alone, which loses to
   the display declarations these rows inherit. */
.wo-tech-roster .wo-tech-row[hidden],
.wo-tech-more[hidden] {
    display: none;
}

.wo-tech-more {
    font-size: 0.75rem;
    color: #605e5c;
    gap: 0.75rem;
}

/* .cbtn-default carries a light-mode rule only under .asset-detail-page, so the button
   reads as plain text everywhere else in light while dark styles it globally. Same
   values as that rule, scoped here rather than changing the shared class. */
.wo-tech-more .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
    background: #fff;
    border: 0.0625rem solid #c7cdd6;
    color: #242424;
}

/* The library band is 3-up (the wo grid default is 4-up). */
.work-stats-grid.tcl-stats-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1199.98px) {
    .work-stats-grid.tcl-stats-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .work-stats-grid.tcl-stats-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* KPI rows that double as quick filters. */
.tcl-kpi-filter {
    cursor: pointer;
    border-radius: 0.25rem;
}
.tcl-kpi-filter:hover,
.tcl-kpi-filter:focus-visible {
    background: var(--fl-bg-hover, #f3f6fb);
}
.tcl-kpi-scroll {
    max-height: 10.5rem;
    overflow-y: auto;
}
.tcl-kpi-ata {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--fl-fg-secondary, #605e5c);
    min-width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

/* The register's identity cell: number + ref + status, then the title. */
.tcl-card {
    min-width: 16rem;
}
.tcl-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.625rem;
}
.tcl-doc-id {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--fl-fg, #242424);
    white-space: nowrap;
}
.tcl-ref {
    font-size: 0.8125rem;
    color: var(--fl-fg-secondary, #605e5c);
    white-space: nowrap;
}
.tcl-title {
    font-size: 1rem;
    line-height: 1.35;
    color: var(--fl-fg, #242424);
    margin-top: 0.125rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Lifecycle as a quiet dot + word, not a shouting pill. */
.tcl-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.tcl-status .tcl-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.tcl-status-published {
    color: var(--fl-success, #107c10);
}
.tcl-status-draft {
    color: var(--fl-fg-secondary, #8a8886);
}

/* ATA cell: the task number's own coordinates, uninterpreted. */
.tcl-ata-num {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
}

.tcl-chip-engine {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    border-radius: 62.4375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--fl-bg-subtle, #f3f6fb);
    border: 0.0625rem solid var(--fl-stroke, #e1dfdd);
    color: var(--fl-fg-secondary, #605e5c);
}
.tcl-contents {
    font-size: 0.9375rem;
    color: var(--fl-fg-secondary, #605e5c);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tcl-rev {
    font-size: 0.8125rem;
    color: var(--fl-fg-secondary, #605e5c);
    white-space: nowrap;
}
.tcl-muted {
    color: var(--fl-fg-disabled, #a19f9d);
}

/* Chapter band rows injected by the table's drawCallback. */
#task-card-library-table tr.tcl-group td {
    text-align: left;
    background: var(--fl-bg-band, #f8fafc);
    color: var(--fl-fg-secondary, #605e5c);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.4375rem 0.75rem;
    border-top: 0.0625rem solid var(--fl-stroke-strong, #c7cdd6);
    border-bottom: 0.0625rem solid var(--fl-stroke, #e1dfdd);
}
#task-card-library-table td {
    vertical-align: middle;
    padding: 0.5rem 0.75rem;
}
/* Below laptop width the register scrolls sideways inside .table-responsive
   instead of crushing its nowrap columns into each other. */
#task-card-library-table {
    min-width: 64rem;
}
/* Balanced columns: identity ~1/3 of the row, the rest share the slack
   instead of being squashed by an unconstrained first column.
   Order: Task Card · Status · Engine · ATA System · Contents · Revision · ⋯ */
#task-card-library-table thead th:nth-child(1) { width: 34%; }
#task-card-library-table thead th:nth-child(2) { width: 9%; }
#task-card-library-table thead th:nth-child(3) { width: 12%; }
#task-card-library-table thead th:nth-child(4) { width: 12%; }
#task-card-library-table thead th:nth-child(5) { width: 15%; }
#task-card-library-table thead th:nth-child(6) { width: 14%; }
#task-card-library-table thead th:nth-child(7) { width: 4%; }

/* Dark twins for the rules whose look leans on the light fallbacks. */
[data-bs-theme="dark"] .tcl-kpi-filter:hover,
[data-bs-theme="dark"] .tcl-kpi-filter:focus-visible {
    background: var(--fl-bg-hover, #323130);
}
[data-bs-theme="dark"] #task-card-library-table tr.tcl-group td {
    background: var(--fl-bg-band, #2d2c2b);
    border-top-color: var(--fl-stroke-strong, #4a4948);
    border-bottom-color: var(--fl-stroke, #3b3a39);
}

/* ============================================================
   Task-card authoring shell (create/edit): a two-pane editor —
   sticky outline tree on the left, one section panel at a time
   on the right ("Show all" stacks every panel back into the old
   single-scroll layout). Scoped to .tc-authoring-shell.
   ============================================================ */
.tc-authoring-shell {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.tc-outline {
    position: sticky;
    /* Below the measured app header + command bar (both content-sized and
       published in px by the master layout) — a guessed constant let the
       execution bar overlap the outline head. */
    top: calc(var(--app-header-h) + var(--tc-cmdbar-h) + 0.625rem);
    flex: 0 0 17rem;
    max-height: calc(100vh - var(--app-header-h) - var(--tc-cmdbar-h) - 1.25rem);
    overflow-y: auto;
    background: #fff;
    border: 0.0625rem solid #e3e6ea;
    border-radius: 0.625rem;
    padding: 0.875rem 0.75rem;
}

.tc-editor-pane {
    flex: 1 1 auto;
    min-width: 0;
}

.tc-outline-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.375rem 0.625rem 0.375rem;
    border-bottom: 0.0625rem solid #eceff2;
    margin-bottom: 0.5rem;
}

.tc-outline-title {
    font-weight: 700;
    font-size: 0.875rem;
    color: #333;
}

.tc-outline-showall {
    font-size: 0.75rem;
    color: #0080d0;
    text-decoration: none;
}

.tc-outline-showall.active {
    font-weight: 700;
}

.tc-outline-tree,
.tc-outline-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-outline-tree .tc-subtree {
    margin-left: 0.875rem;
    border-left: 0.0625rem solid #eceff2;
    padding-left: 0.375rem;
}

.tc-node,
.tc-subnode {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.5rem;
    margin: 0.0625rem 0;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #444;
    text-decoration: none;
    cursor: pointer;
}

.tc-node {
    font-weight: 600;
}

.tc-subnode {
    font-size: 0.7813rem;
}

.tc-node:hover,
.tc-subnode:hover {
    background: #f2f6fa;
    color: #0080d0;
}

.tc-node.active,
.tc-subnode.active {
    background: #e7f3fb;
    color: #0080d0;
}

.tc-subnode-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tc-count {
    margin-left: auto;
    background: #eef1f4;
    color: #555;
    border-radius: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.1875rem 0.4375rem;
}

.tc-count:empty {
    display: none;
}

.tc-node.active .tc-count,
.tc-subnode.active .tc-count {
    background: #cfe8f7;
    color: #056dab;
}

/* One panel at a time; "Show all" reveals the stack. */
.tc-authoring-shell .tc-panel {
    display: none;
}

.tc-authoring-shell .tc-panel.active,
.tc-authoring-shell.tc-show-all .tc-panel {
    display: block;
}

/* Landing highlight when a subnode scrolls to its block. */
.tc-anchor-flash {
    animation: tc-anchor-flash 1.2s ease-out;
    border-radius: 0.5rem;
}

@keyframes tc-anchor-flash {
    0% { box-shadow: 0 0 0 0.1875rem rgba(0, 128, 208, 0.45); }
    100% { box-shadow: 0 0 0 0.1875rem rgba(0, 128, 208, 0); }
}

/* Tablets and small laptops: the outline collapses to a horizontal
   chip strip above the editor (module ≤991.98 convention). */
@media (max-width: 991.98px) {
    .tc-authoring-shell {
        flex-direction: column;
    }

    .tc-outline {
        position: static;
        flex: 1 1 auto;
        width: 100%;
        max-height: none;
        overflow-x: auto;
        padding: 0.625rem;
    }

    .tc-outline-tree {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        white-space: nowrap;
    }

    .tc-outline-tree .tc-subtree {
        display: none; /* subsections stay reachable via their parent panel */
    }

    .tc-editor-pane {
        width: 100%;
    }
}

[data-bs-theme="dark"] .tc-outline {
    background: #1f2429;
    border-color: #2c333a;
}

[data-bs-theme="dark"] .tc-outline-title {
    color: #d7dde3;
}

[data-bs-theme="dark"] .tc-node,
[data-bs-theme="dark"] .tc-subnode {
    color: #b8c0c8;
}

[data-bs-theme="dark"] .tc-node:hover,
[data-bs-theme="dark"] .tc-subnode:hover,
[data-bs-theme="dark"] .tc-node.active,
[data-bs-theme="dark"] .tc-subnode.active {
    background: #14313f;
    color: #58b5e8;
}

[data-bs-theme="dark"] .tc-count {
    background: #2c333a;
    color: #aab3bb;
}

/* ============================================================
   Typed step-item editor (task-card authoring): each step is an
   ordered list of typed items — action / caution / warning /
   note / figure — instead of one rich-text blob.
   ============================================================ */
.step-item {
    border: 0.0625rem solid #e3e6ea;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.625rem;
    background: #fff;
}

.step-item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.step-item-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    border-radius: 0.625rem;
    padding: 0.1875rem 0.625rem;
    background: #eef1f4;
    color: #555;
}

.si-badge-action { background: #e7f3fb; color: #056dab; }
.si-badge-caution { background: #fde7bf; color: #b26a00; }
.si-badge-warning { background: #fdd9d3; color: #b3261e; }
.si-badge-note { background: #eef1f4; color: #555; }
.si-badge-figure { background: #ece7fb; color: #5b3fb5; }
.si-badge-table { background: #ddf3ec; color: #0d7a5c; }
.si-badge-field { background: #e3ecfb; color: #2f5cb8; }

.step-item[data-type="caution"] { border-color: #f0b35a; }
.step-item[data-type="warning"] { border-color: #e8837a; }

.step-item-tools button {
    border: none;
    background: transparent;
    color: #888;
    padding: 0.125rem 0.3125rem;
    border-radius: 0.3125rem;
    line-height: 1;
}

.step-item-tools button:hover {
    background: #f2f6fa;
    color: #0080d0;
}

.step-item-tools .si-remove:hover {
    color: #dc3545;
    background: #fdecea;
}

/* The action's print number, live in the editor header. */
.step-item-head .si-num {
    margin-left: 0.5rem;
    margin-right: auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
}

[data-bs-theme="dark"] .step-item-head .si-num {
    color: #9aa4af;
}

.step-item[data-type="action"] textarea.step-item-text {
    min-height: 5rem;
    overflow: hidden;
}

.step-item textarea.step-item-text {
    resize: vertical;
    min-height: 3.625rem;
}

.step-item-preview {
    max-height: 20rem;
    border-radius: 0.375rem;
    display: block;
}

.step-item-addbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 0.125rem 0.5rem 0.125rem;
}

.step-item-addlabel {
    font-size: 0.75rem;
    font-weight: 600;
    color: #777;
}

.step-item-addbar .si-add {
    border: 0.0625rem dashed #c3cdd6;
    background: transparent;
    border-radius: 1rem;
    font-size: 0.7813rem;
    color: #445;
    padding: 0.25rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
}

.step-item-addbar .si-add:hover {
    border-color: #0080d0;
    color: #0080d0;
    background: #f2f8fc;
}

.step-legacy-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #8a6d3b;
    background: #fcf4e3;
    border: 0.0625rem solid #f0dcb4;
    border-radius: 0.625rem;
    padding: 0.1875rem 0.625rem;
    margin-right: auto;
}

[data-bs-theme="dark"] .step-item {
    background: #1f2429;
    border-color: #2c333a;
}

[data-bs-theme="dark"] .step-item-tools button:hover {
    background: #14313f;
}

[data-bs-theme="dark"] .step-item-addbar .si-add {
    border-color: #3a444e;
    color: #b8c0c8;
}

.step-title-bar {
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 0.625rem;
    padding-bottom: 0.375rem;
    border-bottom: 0.0625rem solid #eceff2;
}

[data-bs-theme="dark"] .step-title-bar {
    border-color: #2c333a;
}

/* ---- typed TABLE item: authoring grid editor ---- */
.si-table-editor .si-grid {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.375rem;
}

.si-table-editor .si-grid th,
.si-table-editor .si-grid td {
    border: 0.0625rem solid #dfe3e8;
    padding: 0.125rem;
    vertical-align: top;
}

.si-table-editor .si-grid th.si-grid-rowtools,
.si-table-editor .si-grid td.si-grid-rowtools {
    border: 0;
    width: 1.625rem;
    text-align: center;
    vertical-align: middle;
}

.si-table-editor .si-col,
.si-table-editor .si-cell {
    width: 100%;
    border: 0;
    background: transparent;
    font-size: 0.8125rem;
    padding: 0.25rem 0.375rem;
    resize: vertical;
    min-height: 1.875rem;
}

.si-table-editor .si-col {
    font-weight: 700;
    min-height: auto;
}

.si-table-editor .si-col:focus,
.si-table-editor .si-cell:focus {
    outline: 0.125rem solid #9ecbe8;
    outline-offset: -0.125rem;
    border-radius: 0.1875rem;
}

.si-table-editor .si-row-del,
.si-field-editor .si-field-del {
    border: none;
    background: transparent;
    color: #999;
    border-radius: 0.3125rem;
    padding: 0.125rem 0.3125rem;
    line-height: 1;
}

.si-table-editor .si-row-del:hover,
.si-field-editor .si-field-del:hover {
    color: #dc3545;
    background: #fdecea;
}

.si-table-editor .si-grid-bar {
    display: flex;
    gap: 0.5rem;
}

.si-table-editor .si-grid-bar button,
.si-field-editor .si-field-add {
    border: 0.0625rem dashed #c3cdd6;
    background: transparent;
    border-radius: 0.875rem;
    font-size: 0.75rem;
    color: #445;
    padding: 0.1875rem 0.625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.si-table-editor .si-grid-bar button:hover,
.si-field-editor .si-field-add:hover {
    border-color: #0080d0;
    color: #0080d0;
    background: #f2f8fc;
}

/* ---- typed FIELD item: capture-box editor ---- */
.si-field-editor .si-field-group {
    margin-bottom: 0.5rem;
}

.si-field-editor .si-field-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.375rem;
}

.si-field-editor .si-field-label {
    flex: 1 1 auto;
    min-width: 0;
}

.si-field-editor .si-field-label,
.si-field-editor .si-field-control {
    border: 0.0625rem solid #dfe3e8;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    padding: 0.3125rem 0.5rem;
    background: #fff;
}

.si-field-editor .si-field-add {
    margin-top: 0.125rem;
}

.si-field-editor .si-field-preview {
    margin-top: 0.25rem;
}

.si-field-editor .si-field-preview .step-field-box {
    margin: 0.25rem 0 0;
}

[data-bs-theme="dark"] .si-table-editor .si-grid th,
[data-bs-theme="dark"] .si-table-editor .si-grid td,
[data-bs-theme="dark"] .si-field-editor .si-field-label,
[data-bs-theme="dark"] .si-field-editor .si-field-control {
    border-color: #3a444e;
}

[data-bs-theme="dark"] .si-table-editor .si-col,
[data-bs-theme="dark"] .si-table-editor .si-cell,
[data-bs-theme="dark"] .si-field-editor .si-field-label,
[data-bs-theme="dark"] .si-field-editor .si-field-control {
    color: #d7dde3;
    background: transparent;
}

[data-bs-theme="dark"] .si-table-editor .si-grid-bar button,
[data-bs-theme="dark"] .si-field-editor .si-field-add {
    border-color: #3a444e;
    color: #b8c0c8;
}

/* ---- compiled typed content: embedded data table + fill-in field box
       (rendered from procedure_steps.description on the view/execution
       pages; same classes the PDF styles for print) ---- */
.step-data { margin: 0.625rem 0; }

.step-data-caption {
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.step-data-table {
    width: 100%;
    border-collapse: collapse;
}

.step-data-table th,
.step-data-table td {
    border: 0.0625rem solid #444;
    padding: 0.3125rem 0.5rem;
    vertical-align: top;
    font-size: 0.8438rem;
}

.step-data-table th {
    font-weight: 700;
    text-align: center;
    background: #f4f6f8;
}

.step-field-box {
    border: 0.0938rem dashed #666;
    border-collapse: separate;
    min-width: 16.25rem;
    max-width: 100%;
    margin: 0.625rem 0;
}

.step-field-box td {
    border: 0;
    padding: 0.25rem 0.625rem;
}

.step-field-box .step-field-title {
    font-weight: 700;
}

.step-field-box .step-field-label {
    font-weight: 600;
    white-space: nowrap;
    width: 1%;
    padding-right: 0.75rem;
}

.step-field-box .step-field-value {
    border-bottom: 0.0625rem solid #888;
    min-width: 10rem;
}

[data-bs-theme="dark"] .step-data-table th {
    background: #232a31;
}

[data-bs-theme="dark"] .step-data-table th,
[data-bs-theme="dark"] .step-data-table td {
    border-color: #56606a;
}

[data-bs-theme="dark"] .step-field-box {
    border-color: #7c868f;
}

/* Execution page: the capture box's live inputs sit ON the ruled value line —
   borderless and transparent so the box still reads as the printed template.
   Scoped under .step-field-box to outrank the .gtaform-container input skin. */
.step-field-box .step-field-input {
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    min-width: 9rem;
    font: inherit;
    color: inherit;
    padding: 0.125rem 0.375rem;
}

.step-field-box .step-field-input[type="checkbox"] {
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    accent-color: #0080d0;
}

.step-field-value:focus-within {
    border-bottom-color: #0080d0;
    background: rgba(0, 128, 208, 0.06);
}

[data-bs-theme="dark"] .step-field-box .step-field-input {
    color-scheme: dark;
    border: 0;
    background: transparent;
}

/* Side by Side: the source-document drop hint only had its light value
   (style.css #292929) — dark-on-dark, unreadable. */
[data-bs-theme="dark"] #droptext {
    color: #aeb7c0;
}

[data-bs-theme="dark"] .step-field-value:focus-within {
    border-bottom-color: #4db4ec;
    background: rgba(77, 180, 236, 0.10);
}

/* ==========================================================================
   Task-card document canvas (create/edit): the authoring surface is an
   A4-styled sheet; every section stacks on it and the outline scroll-spies.
   ========================================================================== */
.tc-authoring-shell.tc-canvas .tc-panel {
    display: block;
}

.tc-authoring-shell.tc-canvas .tc-outline-showall {
    display: none;
}

.tc-canvas .tc-page {
    width: min(100%, 58.75rem);
    margin: 0 auto;
    background: #fff;
    border: 0.0625rem solid #e2e6ea;
    border-radius: 0.125rem;
    box-shadow: 0 0.125rem 0.875rem rgba(0, 0, 0, 0.12);
    padding: 2.5rem 3rem 3.5rem;
}

.tc-canvas .tc-page .tc-panel + .tc-panel {
    margin-top: 0.5rem;
}

/* Centre the sheet in the content area with the outline anchored to the far
   left. The base shell is a flex row [outline | editor-pane]; on its own the
   940px page centres inside the pane, but the 272px outline shoves the pane
   right so the sheet hugs the right edge (worst on tablets/laptops where the
   right gutter collapses). Instead lay the canvas out as a 3-track grid —
   [left margin | sheet | right margin] — with equal side margins (minmax so
   they never fall below the outline's 272px + gap), so .tc-page sits dead-centre
   at every width ≥992px. The outline pins to the start of the left margin
   (justify-self:start) rather than floating in the slack, which keeps wide
   screens balanced. Below 992px the outline is a top chip-strip and the page is
   full-width (shared shell ≤991.98 rule), so no centring work is needed. */
@media (min-width: 992px) {
    .tc-authoring-shell.tc-canvas:not(.tc-sbs) {
        display: grid;
        grid-template-columns: minmax(18.25rem, 1fr) minmax(0, 58.75rem) minmax(18.25rem, 1fr);
        align-items: start;
        gap: 0;
    }

    .tc-authoring-shell.tc-canvas:not(.tc-sbs) .tc-outline {
        grid-column: 1;
        justify-self: start;
        width: 17rem;
    }

    .tc-authoring-shell.tc-canvas:not(.tc-sbs) .tc-editor-pane {
        grid-column: 2;
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 991.98px) {
    .tc-canvas .tc-page {
        padding: 1.125rem 0.875rem 1.75rem;
    }
}

/* Big-monitor readability: the sheet keeps its 940px A4 geometry but scales
   up as a whole (text, lanes, borders together) once the viewport has room,
   instead of sitting as a small hard-to-read strip in the slack. The outline
   rail scales by the SAME factor so the two panes stay proportional, and the
   grid tracks grow to (contents × zoom) so the sheet stays centred. (CSS
   zoom, like the app-wide html zoom.) */
@media (min-width: 1500px) {
    .tc-authoring-shell.tc-canvas:not(.tc-sbs) {
        grid-template-columns: minmax(21rem, 1fr) minmax(0, 67.5625rem) minmax(21rem, 1fr);
    }

    .tc-canvas:not(.tc-sbs) .tc-page,
    .tc-authoring-shell.tc-canvas:not(.tc-sbs) .tc-outline { zoom: 1.15; }
}

@media (min-width: 1800px) {
    .tc-authoring-shell.tc-canvas:not(.tc-sbs) {
        grid-template-columns: minmax(22.5rem, 1fr) minmax(0, 73.4375rem) minmax(22.5rem, 1fr);
    }

    .tc-canvas:not(.tc-sbs) .tc-page,
    .tc-authoring-shell.tc-canvas:not(.tc-sbs) .tc-outline { zoom: 1.25; }
}

@media (min-width: 2200px) {
    .tc-authoring-shell.tc-canvas:not(.tc-sbs) {
        grid-template-columns: minmax(24.75rem, 1fr) minmax(0, 79.3125rem) minmax(24.75rem, 1fr);
    }

    .tc-canvas:not(.tc-sbs) .tc-page,
    .tc-authoring-shell.tc-canvas:not(.tc-sbs) .tc-outline { zoom: 1.35; }
}

/* ---- Side by Side transcription mode (tc-sbs) ----
   The editor shell shares the row with the source-PDF pane, so it only has
   half the viewport: the viewport-width grid/zoom rules above are opted out
   (:not(.tc-sbs)) and the shell lays out for its narrow column instead —
   the outline collapses to a sticky chip strip above the sheet (same idea as
   the <992px layout) and the page fills the pane edge to edge. */
.tc-authoring-shell.tc-canvas.tc-sbs {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.tc-authoring-shell.tc-canvas.tc-sbs .tc-outline {
    position: sticky;
    top: 4.6875rem;
    z-index: 5;
    flex: 1 1 auto;
    width: 100%;
    /* The strip hugs the same column as the sheet below it, so the pane
       reads as one document column — which is now the full pane. */
    max-width: none;
    margin: 0;
    max-height: none;
    overflow-x: auto;
    padding: 0.625rem;
}

.tc-authoring-shell.tc-canvas.tc-sbs .tc-outline-tree {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.tc-authoring-shell.tc-canvas.tc-sbs .tc-outline-tree .tc-subtree {
    display: none; /* subsections stay reachable inside their panel */
}

.tc-authoring-shell.tc-canvas.tc-sbs .tc-editor-pane {
    width: 100%;
}

.tc-authoring-shell.tc-canvas.tc-sbs .tc-page {
    width: 100%;
    /* Fill the pane. The sheet used to keep the Standard view's 58.75rem cap
       and centre the slack, which on a wide monitor left the editor floating
       in the middle of its half with a dead gap either side while the source
       pane beside it filled its own edge to edge — the two halves read as
       wildly unequal even though the columns were 5/7. In Side by Side the
       pane IS the document column. */
    max-width: none;
    margin: 0;
    padding: 1.75rem 2rem 2.5rem;
    zoom: 1;
}

/* The source-PDF pane keeps the whole document in view beside the editor:
   pinned under the app header at viewport height (the legacy 150vh drop-card
   ran past the fold and scrolled away with the page). Only visible in
   Side by Side — Standard hides .standard-grid entirely. */
.standard-grid {
    top: 4.6875rem;
    z-index: 1;
}

.standard-grid .drop-card {
    height: calc(100vh - 12.5rem);
    min-height: 25rem;
}

/* Until the print re-skin (canvas chrome stage), the sheet follows the app
   theme in dark mode so the section cards do not sit dark-on-paper. */
[data-bs-theme="dark"] .tc-canvas .tc-page {
    background: #1a1f24;
    border-color: #2c333a;
    box-shadow: 0 0.125rem 0.875rem rgba(0, 0, 0, 0.45);
}

/* ---- canvas procedure box: the template's S/N | TASK | CS grid ---- */
.tc-canvas .tc-proc-grid {
    border: 0.075rem solid #111;
    background: #fff;
    margin-bottom: 0.75rem;
}

.tc-canvas .tc-proc-head {
    display: flex;
    font-weight: 700;
    text-align: center;
    border-bottom: 0.0625rem solid #111;
}

.tc-canvas .tc-proc-head > div {
    padding: 0.3125rem 0.4375rem;
}

.tc-canvas .tc-sn-cell {
    flex: 0 0 7%;
    text-align: center;
    font-weight: 700;
    border-right: 0.0625rem solid #111;
}

.tc-canvas .tc-task-cell {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.1875rem 0.5rem;
}

.tc-canvas .tc-proc-head .tc-task-cell {
    padding: 0.3125rem 0.4375rem;
}

.tc-canvas .tc-cs-cell {
    flex: 0 0 10%;
    border-left: 0.0625rem solid #111;
}

.tc-canvas .tc-proc-subsecrow {
    display: flex;
    border-top: 0.075rem solid #111;
    border-bottom: 0.075rem solid #111;
}

.tc-canvas .tc-proc-grid > .procedure-subsec-card:first-of-type .tc-proc-subsecrow,
.tc-canvas .tc-final-grid .tc-proc-subsecrow {
    border-top: 0;
}

.tc-canvas .tc-proc-subsecrow .tc-sn-cell {
    padding: 0.25rem 0.125rem;
}

/* the subsection title reads as printed bold text until interaction */
.tc-canvas .subsec-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tc-canvas .subsec-name-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-weight: 700;
    font-size: 0.9063rem;
    padding: 0.125rem 0.25rem;
    color: inherit;
}

.tc-canvas .subsec-name-input:hover {
    background: #f2f8fc;
    border-radius: 0.1875rem;
}

.tc-canvas .subsec-name-input:focus {
    outline: 0.125rem solid #9ecbe8;
    outline-offset: -0.0625rem;
    background: #fff;
    border-radius: 0.1875rem;
}

.tc-canvas .subsec-save-btn {
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.tc-canvas .tc-proc-subsecrow:hover .subsec-save-btn,
.tc-canvas .subsec-name-input:focus ~ .subsec-save-btn {
    opacity: 1;
}

/* TASK column body with the continuous column verticals */
.tc-canvas .tc-proc-body {
    position: relative;
    /* No column padding: each row (subsecrow + step cards) carries its own 7%
       S/N and 10% CS lanes so a per-step CS sign-off box lines up with the
       header CS column. Non-row children below stay inset to the TASK lane. */
    padding: 0.5rem 0 0.625rem 0;
}

.tc-canvas .tc-proc-body > .btn-group-top {
    margin-left: calc(7% + 0.625rem);
    margin-right: calc(10% + 0.625rem);
}

.tc-canvas .tc-proc-body::before,
.tc-canvas .tc-proc-body::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 0.0625rem solid #111;
}

/* The row cells above (head + subsection) draw their 1px column strokes just
   INSIDE the 7%/90% boundaries (border-right/-left of a border-box cell); pull
   the body's continuous lines onto the same side so the strokes stack into one
   unbroken vertical instead of jogging 1px at every subsection row. */
.tc-canvas .tc-proc-body::before { left: 7%; margin-left: -0.0625rem; }
.tc-canvas .tc-proc-body::after { right: 10%; margin-right: -0.0625rem; }

/* Each printed item is its own row — S/N spacer | TASK content | CS box —
   aligned to the header columns. The auto (n) numbering identifies the step, so
   the "Step N" grouping label is dropped. The CS box is the mechanic's
   per-action sign-off (blank on screen exactly as it prints): actions get a
   box, the inline caution/note/table/field rows keep the lane blank. */
.tc-canvas .tc-proc-body .step-title-bar { display: none; }

.tc-canvas .tc-proc-body .si-print {
    display: flex;
    align-items: flex-start;
    padding: 0;
}

.tc-canvas .tc-proc-body .si-print .sip-sn { flex: 0 0 7%; }

.tc-canvas .tc-proc-body .si-print .sip-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.125rem 0.625rem;
}

.tc-canvas .tc-proc-body .si-print .sip-cs {
    flex: 0 0 10%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.125rem;
}

.tc-canvas .tc-cs-box {
    display: block;
    width: 100%;
    max-width: 4.125rem;
    min-height: 1.375rem;
    border: 0.0625rem solid #6b7680;
    border-radius: 0.125rem;
    background: #fff;
}

[data-bs-theme="dark"] .tc-canvas .tc-cs-box {
    border-color: #7c8791;
    background: transparent;
}

/* An executed action stamps its own box — the performer's stamp, name and
   time, as the paper card is stamped. It takes the full CS lane and grows with
   its content; the blank box keeps its fixed size so outstanding rows stay
   uniform and obvious. */
.tc-canvas .tc-cs-box.tc-cs-done {
    max-width: none;
    padding: 0.125rem 0.1875rem;
    text-align: center;
    line-height: 1.15;
}

.tc-canvas .tc-cs-stamp {
    display: block;
    max-width: 100%;
    max-height: 1.5rem;
    margin: 0 auto 0.125rem;
    object-fit: contain;
}

.tc-canvas .tc-cs-meta {
    display: block;
    font-size: 0.5rem;
    color: #3b444c;
    overflow-wrap: anywhere;
}

.tc-canvas .tc-cs-meta > span {
    display: block;
}

/* One signature block. An action a handover sent back for re-work carries two
   — the outgoing technician above the rule, the incoming below. */
.tc-canvas .tc-cs-sign + .tc-cs-sign {
    display: block;
    margin-top: 0.1875rem;
    padding-top: 0.1875rem;
    border-top: 0.0625rem dashed #98a2ac;
}

.tc-canvas .tc-cs-sign-prior {
    opacity: 0.85;
}

.tc-canvas .tc-cs-handover {
    font-style: italic;
    color: #6b7680;
}

[data-bs-theme="dark"] .tc-canvas .tc-cs-sign + .tc-cs-sign {
    border-top-color: #6b7680;
}

[data-bs-theme="dark"] .tc-canvas .tc-cs-handover {
    color: #9aa5b0;
}

.tc-canvas .tc-cs-name {
    font-weight: 600;
}

.tc-canvas .tc-cs-approved {
    color: #1a7f47;
}

[data-bs-theme="dark"] .tc-canvas .tc-cs-meta {
    color: #c3ccd5;
}

[data-bs-theme="dark"] .tc-canvas .tc-cs-approved {
    color: #4ac07d;
}

/* A stamp is dark ink: on the dark sheet it needs its paper back or it
   disappears into the background. */
[data-bs-theme="dark"] .tc-canvas .tc-cs-stamp {
    background: #f4f6f8;
    border-radius: 0.0625rem;
    padding: 0.0625rem;
}

/* Editing chrome (open editor, per-step delete, legacy step) sits in the TASK
   lane so only the printed action rows use the S/N and CS lanes. */
.tc-canvas .tc-proc-body .step-item.si-open,
.tc-canvas .tc-proc-body .step-card > .btn-group-top,
.tc-canvas .tc-proc-body .step-legacy {
    margin-left: calc(7% + 0.625rem);
    margin-right: calc(10% + 0.625rem);
}

/* Decluttered add controls: the per-step "Add:" type bar is hidden — each
   subsection carries a subtle "Add step" (a numbered action) plus an "Insert"
   menu for the other item types, and the procedure one "Add subsection" —
   dashed ghost pills, not heavy full-width blocks. */
.tc-canvas .tc-proc-body .step-item-addbar { display: none; }

.tc-canvas .tc-add-step-btn,
.tc-canvas .tc-add-subsec-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 0.0625rem dashed #c3cdd6;
    background: transparent;
    color: #5a6b7b;
    font-size: 0.7813rem;
    font-weight: 600;
    padding: 0.3125rem 0.875rem;
    border-radius: 1rem;
}

.tc-canvas .tc-add-step-btn:hover,
.tc-canvas .tc-add-subsec-btn:hover {
    border-color: #0080d0;
    color: #0080d0;
    background: #f2f8fc;
}

.tc-canvas .tc-add-subsec-row { margin-top: 0.625rem; }

[data-bs-theme="dark"] .tc-canvas .tc-add-step-btn,
[data-bs-theme="dark"] .tc-canvas .tc-add-subsec-btn {
    border-color: #3a444e;
    color: #b8c0c8;
}

[data-bs-theme="dark"] .tc-canvas .tc-add-step-btn:hover,
[data-bs-theme="dark"] .tc-canvas .tc-add-subsec-btn:hover {
    border-color: #4a9fd8;
    color: #4a9fd8;
    background: #14313f;
}

/* subtle destructive control for a dynamically added subsection */
.tc-canvas .tc-del-subsec-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 0.0625rem dashed #e3bcbc;
    background: transparent;
    color: #b05656;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3125rem 0.75rem;
    border-radius: 1rem;
    margin-left: 0.5rem;
}

.tc-canvas .tc-del-subsec-btn:hover {
    border-color: #d84a4a;
    color: #d84a4a;
    background: #fdf3f3;
}

[data-bs-theme="dark"] .tc-canvas .tc-del-subsec-btn {
    border-color: #5a3a3a;
    color: #cc8888;
}

[data-bs-theme="dark"] .tc-canvas .tc-del-subsec-btn:hover {
    border-color: #cc6666;
    color: #e29999;
    background: #2a1717;
}

/* final block variant */
.tc-canvas .tc-final-grid .tc-final-letter { font-weight: 700; }
.tc-canvas .tc-final-grid .tc-final-title { font-weight: 700; font-size: 0.9063rem; }
.tc-canvas .tc-final-grid .final-step-empty { font-weight: 400; font-style: italic; }

/* step cards flatten into the TASK column */
.tc-canvas .tc-proc-body .step-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0 0 0.25rem;
}

.tc-canvas .tc-proc-body .step-title-bar {
    border-bottom: 0;
    margin-bottom: 0.125rem;
    padding-bottom: 0;
}

.tc-canvas .tc-proc-body .step-title {
    font-size: 0.6563rem;
    font-weight: 700;
    letter-spacing: 0.0313rem;
    text-transform: uppercase;
    color: #98a2ad;
}

.tc-canvas .tc-proc-body .step-search-group {
    max-width: 20rem;
}

.tc-canvas .tc-proc-body .step-search {
    font-size: 0.75rem;
    padding: 0.1875rem 0.5625rem;
    border-radius: 0.75rem;
}

/* ---- click-to-edit item slots ---- */
.tc-canvas .step-item {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0 0 0.125rem;
}

.tc-canvas .step-item .si-editor { display: none; }

.tc-canvas .step-item.si-open {
    border: 0.0625rem solid #9ecbe8;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.625rem 0.75rem;
    margin: 0.5rem 0;
}

.tc-canvas .step-item.si-open .si-editor { display: block; }
.tc-canvas .step-item.si-open .si-print { display: none; }

.si-print {
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
}

.si-print:hover {
    background: #f2f8fc;
    box-shadow: inset 0 0 0 0.0625rem #cfe4f3;
}

.si-print-empty {
    color: #9aa4ae;
    font-style: italic;
    font-size: 0.8125rem;
}

.step-item-tools .si-done {
    color: #1c8a51;
}

.step-item-tools .si-done:hover {
    background: #e3f5ec;
    color: #106b3c;
}

/* ---- printed item language (mirrors pdf.blade.php's classes) ---- */
.si-print .tcp-line {
    display: flex;
    gap: 0.5rem;
    margin: 0.25rem 0;
    font-size: 0.8438rem;
}

.si-print .tcp-no {
    flex: 0 0 2.125rem;
    white-space: nowrap;
}

.si-print .tcp-body { min-width: 0; }

.si-print .hl {
    background: #ffe100;
    color: #111;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 0.125rem;
}

.si-print .hl-line { margin: 0.375rem 0; }

.si-print .note-hl { margin: 0.375rem 0; }

.si-print .note-word {
    background: #ffe100;
    color: #111;
    font-weight: 700;
    font-style: italic;
    text-decoration: underline;
}

.si-print .note-em {
    background: #ffe100;
    color: #111;
    font-weight: 700;
}

.si-print .step-figure { text-align: center; }

.si-print .figure-img {
    max-width: 80%;
    max-height: 27.5rem;
}

.si-print .fig-caption {
    font-weight: 700;
    text-align: center;
    margin: 0.25rem 0 0.5rem;
}

/* ---- read-only document view (view.blade.php): the same sheet without the
   editing affordances — rows are not click-to-edit, values are static text. */
.tc-view .si-print {
    cursor: default;
}

.tc-view .si-print:hover,
[data-bs-theme="dark"] .tc-view .si-print:hover {
    background: transparent;
    box-shadow: none;
}

.tc-view .tc-view-doctitle {
    font-weight: 700;
    font-size: 0.9375rem;
    text-transform: uppercase;
    text-align: center;
    padding: 0.25rem 0.375rem 0;
}

.tc-view .tc-view-subsec {
    font-weight: 700;
    font-size: 0.9063rem;
    padding: 0.125rem 0.25rem;
    display: inline-block;
}

/* legacy rich-text step content inside the numbered row */
.tc-view .tc-view-legacy p { margin: 0 0 0.25rem; }

.tc-view .tc-view-legacy img {
    max-width: 100%;
    height: auto;
}

/* the reference Warning/Caution rich text keeps its authored flow */
.tc-view .tc-view-warntext { text-align: left; }

.tc-view .tc-view-warntext p:last-child { margin-bottom: 0; }

/* ---- dark theme ---- */
[data-bs-theme="dark"] .tc-canvas .tc-proc-grid {
    background: #1f2429;
    border-color: #aab4be;
}

[data-bs-theme="dark"] .tc-canvas .tc-proc-head,
[data-bs-theme="dark"] .tc-canvas .tc-sn-cell,
[data-bs-theme="dark"] .tc-canvas .tc-cs-cell,
[data-bs-theme="dark"] .tc-canvas .tc-proc-subsecrow,
[data-bs-theme="dark"] .tc-canvas .tc-proc-body::before,
[data-bs-theme="dark"] .tc-canvas .tc-proc-body::after {
    border-color: #7c8791;
}

[data-bs-theme="dark"] .tc-canvas .subsec-name-input:hover { background: #14313f; }
[data-bs-theme="dark"] .tc-canvas .subsec-name-input:focus { background: #1f2429; }

[data-bs-theme="dark"] .tc-canvas .step-item.si-open {
    background: #1f2429;
    border-color: #2c5a75;
}

[data-bs-theme="dark"] .si-print:hover {
    background: #14313f;
    box-shadow: inset 0 0 0 0.0625rem #2c5a75;
}

@media (max-width: 991.98px) {
    /* Zero horizontal padding so the step rows span the grid like the header/
       subsecrow — their S/N and CS cells then line up with the header columns
       (the ::before/::after verticals are hidden here). */
    .tc-canvas .tc-proc-body {
        padding-left: 0;
        padding-right: 0;
    }
    .tc-canvas .tc-proc-body::before,
    .tc-canvas .tc-proc-body::after { display: none; }
    .tc-canvas .tc-sn-cell,
    .tc-canvas .tc-proc-body .si-print .sip-sn { flex-basis: 2.125rem; }
    .tc-canvas .tc-cs-cell,
    .tc-canvas .tc-proc-body .si-print .sip-cs { flex-basis: 2.5rem; }
    .tc-canvas .tc-proc-body > .btn-group-top,
    .tc-canvas .tc-proc-body .step-item.si-open,
    .tc-canvas .tc-proc-body .step-card > .btn-group-top,
    .tc-canvas .tc-proc-body .step-legacy {
        margin-left: 2.125rem;
        margin-right: 2.5rem;
    }
}

/* ---- canvas document chrome: running header + page-1 meta tables ---- */
.tc-canvas .tc-page {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8438rem;
    color: #16191c;
}

.tc-canvas .tc-page h4 {
    font-size: 0.9375rem;
    font-weight: 700;
}

.tc-doc-props {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #f5f7f9;
    border: 0.0625rem dashed #c8d1d9;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1.125rem;
}

.tc-doc-props .tc-prop {
    flex: 1 1 50%;
    min-width: 0;
}

.tc-doc-props .tc-prop-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    color: #6c7680;
    margin-bottom: 0.1875rem;
}

.tc-doc-header {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.625rem;
}

.tc-doc-header > tbody > tr > td {
    border: 0.0938rem solid #111;
    vertical-align: middle;
    padding: 0.25rem 0.375rem;
}

.tc-doc-header .tc-doc-logo {
    width: 24%;
    text-align: center;
}

.tc-doc-header .tc-doc-logo img {
    max-height: 3.25rem;
    max-width: 10rem;
}

.tc-doc-header .tc-doc-titlecell {
    width: 50%;
    text-align: center;
}

.tc-canvas .tc-doc-title {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.4;
    /* textarea so a long title wraps to fit the header cell like the printed
       template, instead of clipping in a single line */
    resize: none;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}

.tc-doc-engineline {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 0.125rem;
}

.tc-doc-header .tc-doc-gridcell {
    width: 26%;
    padding: 0;
    vertical-align: top;
}

.tc-doc-grid {
    width: 100%;
    border-collapse: collapse;
}

.tc-doc-grid td {
    border: 0.0625rem solid #111;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    text-align: center;
}

.tc-canvas .tc-lbl {
    font-weight: 700;
    text-align: center;
}

.tc-canvas .tc-lbl-sm {
    font-weight: 700;
    font-size: 0.75rem;
}

.tc-cell-center { text-align: center; }

.tc-meta-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.625rem;
}

.tc-meta-table td {
    border: 0.0625rem solid #111;
    padding: 0.25rem 0.4375rem;
    vertical-align: middle;
}

.tc-meta-table .tc-exec-blank td { height: 1.375rem; }

/* flat "printed value" inputs: invisible until interaction */
.tc-cell-input,
.tc-cell-select {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0.0625rem 0.1875rem;
    border-radius: 0.1875rem;
}

.tc-cell-input::placeholder { color: #a7b0b9; font-weight: 400; text-transform: none; }

.tc-cell-input:hover,
.tc-cell-select:hover {
    background: #f2f8fc;
}

.tc-cell-input:focus,
.tc-cell-select:focus {
    outline: 0.125rem solid #9ecbe8;
    outline-offset: -0.0625rem;
    background: #fff;
}

/* ---- authoring controls: one typographic voice ----
   The sheet previously mixed three control skins at three inherited sizes:
   Bootstrap .form-control/.form-select in the props strip (~1rem), the flat
   print-cell inputs (1rem in the meta table but 0.75rem inside the doc grid)
   and the provisioning entry inputs. Every text control now reads at the
   sheet's 0.8125rem body size in the app font; the doc-grid cells keep their
   smaller printed size and the title keeps its heading size (re-asserted
   below, AFTER this rule, because :not() raises its specificity). */
.tc-canvas .tc-page input:not([type="checkbox"]):not([type="radio"]),
.tc-canvas .tc-page select,
.tc-canvas .tc-page textarea {
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.tc-canvas .tc-page .tc-doc-grid .tc-cell-input {
    font-size: 0.75rem;
}

.tc-canvas .tc-page textarea.tc-doc-title {
    font-size: 0.9375rem;
}

/* Dropdowns match the text controls: the select2 boxes (engine type, tool
   pickers, banner type) take the .tc-prov-in border/height/typography so a
   picker and an input sit flush in the same row. Native print-cell selects
   stay flat by design — they only share the font. */
.tc-canvas .select2-container--default .select2-selection--single {
    height: 2.125rem;
    border: 0.0625rem solid #cfd8e0;
    border-radius: 0.375rem;
}

.tc-canvas .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2rem;
    font-size: 0.8125rem;
}

.tc-canvas .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2rem;
}

[data-bs-theme="dark"] .tc-canvas .select2-container--default .select2-selection--single {
    background: #1f2429;
    border-color: #3a444e;
}

/* style.css's legacy gtaform table-control skin (grey #E8ECEF, slate border,
   italic, 1rem) outranks all of the above inside the section .cards — the
   provisioning/reference tables — leaving those dropdowns as white boxes on
   dark and their text italic. Re-assert the sheet skin at matching-or-higher
   specificity (custom.css loads after style.css, so the tie goes to us). */
.tc-canvas .card table input:not([type="checkbox"]),
.tc-canvas .card table select,
.tc-canvas .card table textarea {
    font-style: normal;
    font-size: 0.8125rem;
    color: inherit;
    background: #fff;
    border: 0.0625rem solid #cfd8e0;
    border-radius: 0.375rem;
}

.tc-canvas .card table .select2-container--default .select2-selection--single,
.tc-canvas .card table .select2-container--default .select2-selection--multiple {
    font-style: normal;
    background: #fff;
    border: 0.0625rem solid #cfd8e0;
    border-radius: 0.375rem;
}

[data-bs-theme="dark"] .tc-canvas .card table input:not([type="checkbox"]),
[data-bs-theme="dark"] .tc-canvas .card table select,
[data-bs-theme="dark"] .tc-canvas .card table textarea {
    background: #1f2429;
    border-color: #3a444e;
}

[data-bs-theme="dark"] .tc-canvas .card table .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .tc-canvas .card table .select2-container--default .select2-selection--multiple {
    background: #1f2429;
    border-color: #3a444e;
}

/* ---- provisioning / references print skin ---- */
/* !important: .gtaform-container .card and .shadow-sm both carry !important
   shadows, which painted a 15px-rounded white halo over the square tables. */
.tc-canvas #panel-provisioning .card,
.tc-canvas #panel-references .card {
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    padding: 0;
}

.tc-canvas #panel-provisioning h3,
.tc-canvas #panel-references h4 + div {
    margin-left: 0;
}

/* section band as a table row, so its box shares the data columns' borders */
.tc-canvas #panel-provisioning .table .tc-prov-band th,
.tc-canvas #panel-references .table .tc-prov-band th {
    text-align: left;
    text-transform: uppercase;
    font-size: 0.8438rem;
    padding: 0.3125rem 0.5rem !important;
}

.tc-canvas #panel-provisioning .tc-prov-block { margin-top: 0.875rem; }

/* Not Applicable toggle inside the section band, and the greyed body line a
   marked section shows in place of its rows */
.tc-canvas .tc-prov-na-toggle {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 400;
    text-transform: none;
    font-size: 0.8125rem;
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.tc-canvas .tc-prov-na-check {
    cursor: pointer;
    margin: 0;
}

.tc-canvas .tc-prov-na-row td {
    text-align: center;
    color: #7a8699;
    font-style: italic;
    background: #f7f9fb;
}

[data-bs-theme="dark"] .tc-canvas .tc-prov-na-row td { background: #1b2129; color: #96a0ae; }

.tc-canvas #panel-provisioning h3 {
    font-size: 0.9063rem;
    font-weight: 700;
    padding: 0.625rem 0 0.25rem;
    margin: 0;
}

.tc-canvas #panel-provisioning .step-card,
.tc-canvas #panel-references .step-card,
.tc-canvas #panel-references .warning-step-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0 0 0.375rem;
}

.tc-canvas #panel-provisioning .table,
.tc-canvas #panel-references .table {
    border-collapse: collapse;
    margin-bottom: 0.25rem;
}

.tc-canvas #panel-provisioning .table th,
.tc-canvas #panel-provisioning .table td,
.tc-canvas #panel-references .table th,
.tc-canvas #panel-references .table td {
    border: 0.0625rem solid #111;
    /* !important counters the legacy .gtaform-container table skin
       (padding-bottom:15px / first-cell padding-left:0, both !important),
       which un-centres the printed cells and glues text to the borders */
    padding: 0.25rem 0.4375rem !important;
    font-size: 0.8125rem;
    background: transparent;
}

.tc-canvas #panel-provisioning .table th,
.tc-canvas #panel-references .table th {
    font-weight: 700;
    text-align: center;
}

.tc-canvas #panel-provisioning .table tfoot td,
.tc-canvas #panel-references .table tfoot td {
    background: #fafbfc;
}

/* ==========================================================================
   Editable provisioning / reference tables (tc-prov): one generic component —
   saved rows show as plain text, a subtle entry row at the bottom adds new
   items, edit/delete are inline icon buttons. All columns are consistent
   (thead/tbody/tfoot align), so no runtime "Action" column and no post-edit
   overflow; long values wrap instead of widening the table.
   ========================================================================== */
.tc-canvas .tc-prov-table {
    width: 100%;
    margin-bottom: 0.375rem;
}

.tc-canvas .tc-prov-table td,
.tc-canvas .tc-prov-table th {
    word-break: break-word;
    vertical-align: middle;
}

/* Match the printed template's alignment: free-text columns (descriptions,
   tool names, task titles) read left; code/number/qty/date columns centre
   under their centred headings. */
.tc-canvas .tc-prov-table tbody td { text-align: center; }

.tc-canvas .tc-prov-table tbody td[data-col="description"],
.tc-canvas .tc-prov-table tbody td[data-col="id"], /* standard-tool name */
.tc-canvas .tc-prov-table tbody td[data-col="task_title"] { text-align: left; }

/* actions column: a slim borderless editing gutter, not part of the grid */
.tc-canvas .tc-prov-table th.tc-prov-actions,
.tc-canvas .tc-prov-table td.tc-prov-actions {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    border: 0;
    background: transparent;
    padding-left: 0.5rem;
}

/* the entry row reads as a subtle "add new item" band */
.tc-canvas .tc-prov-table tfoot .tc-prov-entry > td {
    background: #f5f9fc;
}

.tc-canvas .tc-prov-in,
.tc-canvas .tc-prov-edit-in {
    width: 100%;
    max-width: 100%;
    border: 0.0625rem solid #cfd8e0;
    border-radius: 0.375rem;
    padding: 0.3125rem 0.5625rem;
    font: inherit;
    background: #fff;
    color: inherit;
}

.tc-canvas .tc-prov-in:focus,
.tc-canvas .tc-prov-edit-in:focus {
    outline: 0.125rem solid #9ecbe8;
    outline-offset: -0.0625rem;
    border-color: #9ecbe8;
}

.tc-canvas .tc-prov-table .select2-container { width: 100% !important; }

/* subtle "Add" pill, matching the canvas add controls */
.tc-canvas .tc-prov-add {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    border: 0.0625rem dashed #c3cdd6;
    background: transparent;
    color: #5a6b7b;
    font-size: 0.7813rem;
    font-weight: 600;
    padding: 0.3125rem 0.8125rem;
    border-radius: 1rem;
}

.tc-canvas .tc-prov-add:hover {
    border-color: #0080d0;
    color: #0080d0;
    background: #f2f8fc;
}

/* inline row controls: quiet icon buttons that colour on hover */
.tc-canvas .tc-prov-edit,
.tc-canvas .tc-prov-del,
.tc-canvas .tc-prov-confirm {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid transparent;
    border-radius: 0.375rem;
    background: transparent;
    color: #6c7680;
    font-size: 0.9375rem;
    margin: 0 0.0625rem;
}

.tc-canvas .tc-prov-edit:hover { background: #eef4fb; color: #0080d0; }
.tc-canvas .tc-prov-confirm:hover { background: #e7f6ee; color: #1c8a51; }
.tc-canvas .tc-prov-del:hover { background: #fdeeee; color: #d84a4a; }

[data-bs-theme="dark"] .tc-canvas .tc-prov-table tfoot .tc-prov-entry > td { background: #1b2129; }

[data-bs-theme="dark"] .tc-canvas .tc-prov-in,
[data-bs-theme="dark"] .tc-canvas .tc-prov-edit-in {
    background: #1f2429;
    border-color: #3a444e;
}

[data-bs-theme="dark"] .tc-canvas .tc-prov-add {
    border-color: #3a444e;
    color: #b8c0c8;
}

[data-bs-theme="dark"] .tc-canvas .tc-prov-add:hover {
    border-color: #4a9fd8;
    color: #4a9fd8;
    background: #14313f;
}

[data-bs-theme="dark"] .tc-canvas .tc-prov-edit,
[data-bs-theme="dark"] .tc-canvas .tc-prov-del,
[data-bs-theme="dark"] .tc-canvas .tc-prov-confirm { color: #9aa4ae; }

.tc-canvas .btn-group-top.justify-content-end {
    gap: 0.5rem;
}

/* dark theme for the chrome */
[data-bs-theme="dark"] .tc-canvas .tc-page { color: #d7dde3; }

[data-bs-theme="dark"] .tc-doc-props {
    background: #232a31;
    border-color: #3a444e;
}

[data-bs-theme="dark"] .tc-doc-header > tbody > tr > td,
[data-bs-theme="dark"] .tc-doc-grid td,
[data-bs-theme="dark"] .tc-meta-table td,
[data-bs-theme="dark"] .tc-canvas #panel-provisioning .table th,
[data-bs-theme="dark"] .tc-canvas #panel-provisioning .table td,
[data-bs-theme="dark"] .tc-canvas #panel-references .table th,
[data-bs-theme="dark"] .tc-canvas #panel-references .table td {
    border-color: #7c8791;
    background: transparent;
}

[data-bs-theme="dark"] .tc-canvas #panel-provisioning .table tfoot td { background: #1a2027; }

[data-bs-theme="dark"] .tc-cell-input:hover,
[data-bs-theme="dark"] .tc-cell-select:hover { background: #14313f; }

[data-bs-theme="dark"] .tc-cell-input:focus,
[data-bs-theme="dark"] .tc-cell-select:focus { background: #1f2429; }

[data-bs-theme="dark"] .tc-cell-select option { background: #1f2429; }

@media (max-width: 991.98px) {
    .tc-doc-props { flex-direction: column; }
    .tc-doc-header .tc-doc-logo { display: none; }
}

/* The app stacks every .table's cells into blocks on narrow screens; that
   pattern loses the printed grid (unlabelled fields, striped borders). Inside
   the document canvas keep the provisioning/reference tables as real grids and
   let their card scroll horizontally if a wide table can't fit — faithful to
   the printed layout on iPad portrait and phones. */
@media (max-width: 768px) {
    .tc-canvas #panel-provisioning .step-card,
    .tc-canvas #panel-references .step-card {
        overflow-x: auto;
    }
    .tc-canvas #panel-provisioning .table,
    .tc-canvas #panel-references .table {
        display: table;
        width: 100%;
        min-width: 30rem;
    }
    .tc-canvas #panel-provisioning .table thead,
    .tc-canvas #panel-references .table thead { display: table-header-group; }
    .tc-canvas #panel-provisioning .table tbody,
    .tc-canvas #panel-references .table tbody { display: table-row-group; }
    .tc-canvas #panel-provisioning .table tfoot,
    .tc-canvas #panel-references .table tfoot { display: table-footer-group; }
    .tc-canvas #panel-provisioning .table tr,
    .tc-canvas #panel-references .table tr { display: table-row; }
    .tc-canvas #panel-provisioning .table th,
    .tc-canvas #panel-provisioning .table td,
    .tc-canvas #panel-references .table th,
    .tc-canvas #panel-references .table td { display: table-cell; }
}

/* provisioning row actions: inline icons, not stacked blocks */
.tc-canvas #panel-provisioning .table td .edit-row-btn,
.tc-canvas #panel-provisioning .table td .delete-row-btn,
.tc-canvas #panel-references .table td .edit-row-btn,
.tc-canvas #panel-references .table td .delete-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    margin: 0 0.125rem 0 0;
    border-radius: 0.375rem;
}

.tc-canvas #panel-provisioning .table td[width="20%"]:last-child,
.tc-canvas #panel-references .table td[width="20%"]:last-child {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

/* ---- per-subsection Insert menu (local item palette) ---- */
.tc-canvas .tc-insert-menu {
    position: relative;
    display: inline-flex;
}

.tc-canvas .tc-insert-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 0.0625rem dashed #c3cdd6;
    background: transparent;
    color: #5a6b7b;
    font-size: 0.7813rem;
    font-weight: 600;
    padding: 0.3125rem 0.875rem;
    border-radius: 1rem;
}

.tc-canvas .tc-insert-btn:hover {
    border-color: #0080d0;
    color: #0080d0;
    background: #f2f8fc;
}

.tc-canvas .tc-insert-list {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.25rem);
    z-index: 30;
    min-width: 9.25rem;
    background: #fff;
    border: 0.0625rem solid #dfe4e9;
    border-radius: 0.625rem;
    box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.12);
    padding: 0.3125rem;
    font-family: Arial, Helvetica, sans-serif;
}

.tc-canvas .tc-insert-list.open { display: block; }

.tc-canvas .tc-insert-list .tc-ins-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 0.7813rem;
    color: #445;
    padding: 0.375rem 0.625rem;
    border-radius: 0.4375rem;
}

.tc-canvas .tc-insert-list .tc-ins-item:hover {
    background: #f2f8fc;
    color: #0080d0;
}

[data-bs-theme="dark"] .tc-canvas .tc-insert-btn {
    border-color: #3a444e;
    color: #b8c0c8;
}

[data-bs-theme="dark"] .tc-canvas .tc-insert-btn:hover {
    border-color: #4a9fd8;
    color: #4a9fd8;
    background: #14313f;
}

[data-bs-theme="dark"] .tc-canvas .tc-insert-list {
    background: #1f2429;
    border-color: #2c333a;
}

[data-bs-theme="dark"] .tc-canvas .tc-insert-list .tc-ins-item { color: #b8c0c8; }

[data-bs-theme="dark"] .tc-canvas .tc-insert-list .tc-ins-item:hover {
    background: #14313f;
    color: #4a9fd8;
}

/* The read-only document outline (view / execution / sign-off) is slimmer
   than the authoring one — the execution page shares its column with the
   side rail, so the sheet keeps its width. */
.tc-outline-doc {
    flex: 0 0 14.0625rem;
}

/* This rule sits AFTER the shared <=991.98px chip-strip block, so without the
   override its 14.0625rem flex-basis wins there — and in the column-direction
   shell that basis resolves against the HEIGHT axis: a rigid 225px box with
   one 44px row of chips in it. Content-height strip instead. */
@media (max-width: 991.98px) {
    .tc-authoring-shell .tc-outline-doc {
        flex: 1 1 auto;
    }
}

.tc-outline-doc .tc-subnode-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════ Execution page 3-zone layout: [outline | sheet | side rail] ══
   Three viewing targets, pinned explicitly:
     TV / large monitor  (≥1600px): rail 380px, sheet 940px dead-centre in
                                    the middle zone, symmetric slack.
     Laptop / medium     (1200–1599px): rail 320px, sheet flexes down from
                                    940px, still centred.
     iPad / small        (<1200px): rail stacks BELOW the sheet full-width;
                                    <992px the shared shell rule additionally
                                    turns the outline into a top chip strip.
   The canvas's own 3-track centring grid (and its big-monitor zoom scaling)
   is for FULL-WIDTH pages (create / view / sign-off) — inside this layout it
   would overflow the sheet zone, so both are neutralised here and the sheet
   centres with plain flex + margin auto. */
.tc-exec-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* Stacked layouts (tablet and below): the document runs to many screens, so
   the page re-sequences around it — state + action cards first, the document,
   then the reference cards (Attachments, Activities). display:contents lifts
   every card and sheet child into ONE grid so they interleave; DOM order never
   changes (it is load-bearing — Save Provisioning submits the sheet's form via
   form=). Cards pair up two per row; sheet children span the row. */
@media (max-width: 1199.98px) {
    .tc-exec-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .tc-exec-sheet,
    .tc-exec-rail {
        display: contents;
    }

    .tc-exec-sheet > * {
        grid-column: 1 / -1;
        order: 10;
    }

    .tc-exec-rail > .card {
        margin-bottom: 0 !important;
        order: 1;
    }

    .tc-exec-rail > .tc-rail-attachments,
    .tc-exec-rail > .tc-rail-activities {
        grid-column: 1 / -1;
        order: 20;
    }

    .tc-exec-rail > .tc-rail-activities {
        max-height: 22rem;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    /* The vital-signs card: dense facts, not padded boxes, before the work. */
    #task-identity > .d-flex {
        margin-bottom: 0.75rem !important;
    }

    #task-identity .bg-darkgrey {
        padding: 0.5rem 0.75rem !important;
    }

    #task-identity .bg-darkgrey p:first-child {
        margin-bottom: 0.125rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 767.98px) {
    .tc-exec-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 2x2 identity tiles instead of four stacked full-width boxes. */
    #task-identity .row > [class*='col-'] {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }
}

/* Stacked layouts keep the Sections strip in reach: the technician's target
   is "3. Procedure", not the top of the page. Same move as .tc-sbs. */
@media (max-width: 991.98px) {
    .tc-exec-sheet .tc-outline-doc {
        position: sticky;
        top: calc(var(--app-header-h, 3.25rem) + var(--tc-cmdbar-h, 3.5rem));
        z-index: 5;
        background: var(--fl-bg-canvas, #fff);
    }
}

@media (max-width: 767.98px) {
    /* The command bar goes static here, so the strip parks under the header. */
    .tc-exec-sheet .tc-outline-doc {
        top: var(--app-header-h, 3.25rem);
    }
}

@media (min-width: 1200px) {
    .tc-exec-layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }
}

@media (min-width: 1600px) {
    .tc-exec-layout {
        grid-template-columns: minmax(0, 1fr) 23.75rem;
    }
}

.tc-exec-sheet,
.tc-exec-rail {
    min-width: 0;
}

/* Inside the sheet zone: flex [outline | pane]; the 940px sheet centres in
   the pane via its base margin:auto. Overrides the canvas grid + zoom at
   EVERY width (higher specificity than the base and big-monitor rules). */
@media (min-width: 992px) {
    .tc-exec-sheet .tc-authoring-shell.tc-canvas {
        display: flex;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .tc-exec-sheet .tc-authoring-shell.tc-canvas .tc-outline {
        width: auto;
    }

    .tc-exec-sheet .tc-authoring-shell.tc-canvas .tc-editor-pane {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }
}

.tc-exec-sheet .tc-canvas .tc-page,
.tc-exec-sheet .tc-authoring-shell.tc-canvas .tc-outline {
    zoom: 1;
}

/* Big-monitor readability inside the 3-zone layout: the sheet + outline
   scale up together (as the full-width canvas does) so the document doesn't
   sit as a small strip between two slabs of dead space on a 27" display.
   Safe here — unlike the canvas grid's fixed 940px track, the flexed pane
   absorbs the zoomed width, and each threshold leaves the pane wider than
   sheet × zoom even with the app sidebar expanded. */
@media (min-width: 1480px) {
    .tc-exec-sheet .tc-canvas .tc-page,
    .tc-exec-sheet .tc-authoring-shell.tc-canvas .tc-outline { zoom: 1.1; }
}

@media (min-width: 1800px) {
    .tc-exec-sheet .tc-canvas .tc-page,
    .tc-exec-sheet .tc-authoring-shell.tc-canvas .tc-outline { zoom: 1.2; }
}


/* The release certificate is the last block of the card, so it lines up with the
   sheet instead of spanning the outline rail too.

   Two elements, because one cannot do it: the ZONE reserves the outline's width
   on the left, and the FORM centres in what is left — which is exactly how
   .tc-page centres inside the flexed editor pane. With the offset on the form
   itself it left-aligns instead, and drifts ~190px off the sheet on a wide
   monitor where the pane is wider than the 940px cap.

   The zone is zoomed with the same factors as .tc-page/.tc-outline, so the offset
   and the cap scale by whatever the sheet scales by. (The flex gap is not zoomed,
   so the reservation runs ~4px long at 1.35 — half of that after centring, which
   is below the threshold of noticing and well inside the measured tolerance.)

   .signoff-actionbar is deliberately NOT in here: it is sticky against
   .tc-exec-sheet, and confining it to this wrapper would make it vanish when
   scrolled away from the certificate. */
.tc-exec-cert {
    max-width: 58.75rem;
    margin-inline: auto;
}

/* The certificate is a page of the same document: the sheet's square corners
   and quiet shadow, not the gtaform card's 15px + heavy !important shadow. */
.tc-exec-cert .card {
    border: 0.0625rem solid #e2e6ea;
    border-radius: 0.125rem;
    box-shadow: 0 0.125rem 0.875rem rgba(0, 0, 0, 0.12) !important;
}

[data-bs-theme="dark"] .tc-exec-cert .card {
    border-color: #2c333a;
    box-shadow: 0 0.125rem 0.875rem rgba(0, 0, 0, 0.45) !important;
}

@media (min-width: 992px) {
    /* The outline only becomes a flex sibling at this width. */
    .tc-exec-sheet > .tc-exec-cert-zone {
        padding-left: calc(14.0625rem + 1.25rem);
    }
}

@media (min-width: 1480px) {
    .tc-exec-sheet > .tc-exec-cert-zone { zoom: 1.1; }
}

@media (min-width: 1800px) {
    .tc-exec-sheet > .tc-exec-cert-zone { zoom: 1.2; }
}

@media (min-width: 2200px) {
    .tc-exec-sheet > .tc-exec-cert-zone { zoom: 1.35; }
}

@media (min-width: 2200px) {
    .tc-exec-sheet .tc-canvas .tc-page,
    .tc-exec-sheet .tc-authoring-shell.tc-canvas .tc-outline { zoom: 1.35; }

    .tc-exec-layout {
        grid-template-columns: minmax(0, 1fr) 26.25rem;
    }
}

/* Execution side rail: sticky like the outline, scrolling internally, so
   Readiness / actions / activities stay at hand while the long sheet
   scrolls. Only when the zones sit side by side. */
@media (min-width: 1200px) {
    .tc-exec-rail {
        position: sticky;
        /* Same offset as .tc-outline: under the measured header + command bar. */
        top: calc(var(--app-header-h) + var(--tc-cmdbar-h) + 0.625rem);
        max-height: calc(100vh - var(--app-header-h) - var(--tc-cmdbar-h) - 1.25rem);
        overflow-y: auto;
        padding-right: 0.125rem;
    }
}

/* --------------------------------------------------------------------------
   Unified task execution page (the document sheet with execution overlay).
   The .tc-action wrapper carries ONE numbered action's live status (the (n)
   lines are the real procedure steps); .tc-action-strip is the compact
   control strip directly under its printed row. Existing si-print/sip-*
   metrics are untouched — document-mode output is pinned by the view
   snapshot test.
   -------------------------------------------------------------------------- */
.tc-action {
    display: block;
}

.tc-action[data-status="rejected"] {
    background: #fdf3f4;
    outline: 0.0625rem solid #f1aeb5;
    outline-offset: -0.0625rem;
}

.tc-action[data-status="in_progress"] {
    background: #fffdf5;
}

/* Item 11 (redux): awaiting-review and finished actions get their own row
   tints too — the status pill alone was easy to scan past on a long sheet. */
.tc-action[data-status="pending_approval"] {
    background: #fffbeb;
}

.tc-action[data-status="completed"] {
    background: #f4fbf6;
}

.tc-action-strip {
    background: #f8f9fa;
    border-top: 0.0625rem dashed #d2d0ce;
}

.tc-action-strip .sip-body {
    padding: 0.25rem 0.625rem;
}

.tc-action-strip .tc-step-status p {
    white-space: nowrap;
}

.tc-action-strip .tc-step-remark {
    max-width: 20rem;
    flex: 1 1 11.25rem;
}

[data-bs-theme="dark"] .tc-action-strip {
    background: var(--fl-bg-subtle, #2d2c2b);
    border-top-color: var(--fl-stroke, #4a4948);
}

[data-bs-theme="dark"] .tc-action[data-status="rejected"] {
    background: rgba(220, 53, 69, 0.12);
    outline-color: rgba(220, 53, 69, 0.45);
}

[data-bs-theme="dark"] .tc-action[data-status="in_progress"] {
    background: rgba(255, 193, 7, 0.06);
}

[data-bs-theme="dark"] .tc-action[data-status="pending_approval"] {
    background: rgba(255, 193, 7, 0.1);
}

[data-bs-theme="dark"] .tc-action[data-status="completed"] {
    background: rgba(25, 135, 84, 0.08);
}

/* ============================================================
   Figure lightbox (shared document sheet). Every image inside
   the printed card enlarges in a fixed overlay; delegated JS in
   partials/document/lightbox.blade.php.
   ============================================================ */
.tc-page img {
    cursor: zoom-in;
}

/* No loaded stylesheet styles [hidden], so without this rule the class's
   display:flex overrides the UA's [hidden]{display:none} and the overlay
   renders open (and undismissable) on every document page. */
.tc-lightbox[hidden] {
    display: none;
}

.tc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 18, 0.82);
    cursor: zoom-out;
}

.tc-lightbox-body {
    margin: 0;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.tc-lightbox-body img {
    max-width: 92vw;
    max-height: 82vh;
    background: #fff; /* engineering line art is drawn for paper */
    border-radius: 0.375rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    cursor: default;
}

.tc-lightbox-caption {
    color: #f3f4f6;
    font-size: 0.9375rem;
    text-align: center;
    max-width: 60rem;
}

.tc-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    border: 0;
    background: transparent;
    color: #f3f4f6;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}

body.tc-lightbox-open {
    overflow: hidden;
}

/* Revision history panel (library view): mark the revision being viewed. */
.tc-revision-history .tc-revision-current-row td {
    background: rgba(0, 128, 208, 0.08);
}

[data-bs-theme="dark"] .tc-revision-history .tc-revision-current-row td {
    background: rgba(0, 128, 208, 0.18);
}

/* =====================================================================
   Checkboxes under .gtaform-container — restore the real control.
   style.css paints EVERY input in the container with a `background`
   SHORTHAND (`.gtaform-container .card input { background: transparent;
   border-radius: 0.625rem; }`), which wipes Bootstrap's checked fill AND
   the checkmark background-image — checkboxes rendered as outline-only
   circles that barely changed when ticked. Token-driven, so dark mode
   themes automatically.
   ===================================================================== */
.gtaform-container .form-check-input[type="checkbox"],
.gtaform-container .card .form-check-input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    background-color: var(--fl-bg-surface);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 0.125rem solid var(--fl-stroke-strong);
    border-radius: var(--fl-radius-sm);
    cursor: pointer;
}

.gtaform-container .form-check-input[type="checkbox"]:checked,
.gtaform-container .card .form-check-input[type="checkbox"]:checked {
    background-color: var(--fl-brand);
    border-color: var(--fl-brand);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.gtaform-container .form-check-input[type="checkbox"]:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.125rem var(--fl-bg-surface), 0 0 0 0.25rem var(--fl-brand);
}

/* =====================================================================
   Summary sign-off — certification card, release declaration and the
   sticky action bar (the TOTP step-up + submit stay visible through the
   whole review scroll; controls associate via form="signoff-form").
   ===================================================================== */
.signoff-declaration {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border: 0.0625rem solid var(--fl-stroke);
    border-left: 0.25rem solid var(--fl-brand);
    border-radius: var(--fl-radius-md);
    background: var(--fl-bg-subtle);
}

.signoff-declaration .form-check-input {
    margin-top: 0.125rem;
}

.signoff-declaration .form-check-label {
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--fl-fg);
}

.signoff-declaration-error {
    border-color: var(--fl-danger);
    border-left-color: var(--fl-danger);
}

.signoff-actionbar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--fl-bg-surface);
    border: 0.0625rem solid var(--fl-stroke);
    border-radius: var(--fl-radius-lg);
    box-shadow: var(--fl-shadow-16);
}

.signoff-actionbar-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.signoff-actionbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-left: auto;
}

.signoff-actionbar-actions .form-control {
    max-width: 15rem;
}

.signoff-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border: 0;
    border-radius: 62.4375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
}

.signoff-chip-ok {
    background: var(--fl-success-subtle);
    color: var(--fl-success);
}

.signoff-chip-warning {
    background: var(--fl-warning-subtle);
    color: var(--fl-warning);
    cursor: pointer;
}

.signoff-chip-danger {
    background: var(--fl-danger-subtle);
    color: var(--fl-danger);
}

/* A blocked or in-flight submit must LOOK blocked (the template never
   styled its disabled state, so it kept the full call-to-action green). */
.cbtn-green:disabled,
.cbtn-green[disabled] {
    opacity: 0.55;
    filter: saturate(0.55);
    cursor: not-allowed;
}

/* Nested sub-steps inside an action body (document/execution views), per the
   template: (a)/(b) inset one level, bare-numeral sub-sub-steps a second. */
.tcp-body .sub-step {
    margin-left: 1.25rem;
}

.tcp-body .sub-step-2 {
    margin-left: 2.5rem;
}

/* Card-level safety banners (template language): WARNING = red, CAUTION =
   amber, NOTE = yellow italic. Fixed template colours in both themes — this
   is a facsimile of the printed document, like the PDF itself. */
.tc-banner {
    text-align: center;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    font-weight: 700;
}

.tc-banner .tc-banner-title {
    display: block;
    text-decoration: underline;
}

.tc-banner-warning {
    background: #ff0000;
    color: #111;
}

.tc-banner-caution {
    background: #ffc000;
    color: #111;
}

.tc-banner-note {
    background: #ffe100;
    color: #111;
}

.tc-banner-note .tc-banner-text {
    font-style: italic;
    font-weight: 400;
}

/* Select2 pre-init FOUC: until select2 dresses a `.select2` select (it stamps
   `select2-hidden-accessible` on init), the browser paints the raw native
   control — a multi-select renders as a tall option LIST for a beat (seen on
   the Task Card Library filters). Keep the slot, hide the flash, and pin the
   height so the toolbar doesn't jump when the styled control swaps in. */
select.select2:not(.select2-hidden-accessible) {
    visibility: hidden;
    height: 2.375rem;
}

/* --- WORK ORDER MANAGEMENT: "List Of Active Work Order" panel -----------------
   This panel used to opt into the zoom island (`.compact-exempt`), which renders
   its contents at 1.25x while the KPI cards above it stay at the page's density.
   Two things went wrong on a laptop:

     1. everything inside read 25% larger than the cards it sits under, and
     2. the theme's fluid headings — h2 is calc(1.3274rem + 0.9288vw) below
        1200px — take their vw term from a viewport that a zoomed island
        inflates, so the heading grew again exactly where space was tightest.
        Above 1200px h2 is a flat 2.024rem, which is why a desktop looked fine
        and a laptop did not.

   The panel now renders at the page density like every other surface, and its
   type/controls are pinned in rem to the same scale as the Fluent KPI cards
   (.fl-card__title is 0.8125rem), so laptop and desktop agree. Rem only — no
   viewport units — per the density retokenisation rules. */
.work-order-list-panel {
    padding: 1.25rem;
}

.work-order-list-panel .work-order-list-header h2 {
    /* Section heading: clearly below the page title, above the card titles. */
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.0063rem;
    margin-bottom: 0;
    color: #242424;
}

/* One flat surface: a stroked panel, not a card floating cards. Shadows are
   reserved for things that genuinely float (menus, dialogs). */
.work-order-list-panel {
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.5rem;
    box-shadow: none;
}

/* Command bar — search + inline filters on one row (replaces the filter rail
   and the DataTables "Show N / Search:" furniture). */
.wo-toolbar .wo-search {
    position: relative;
}

.wo-toolbar .wo-search i {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: #605e5c;
    font-size: 0.9375rem;
    pointer-events: none;
}

.wo-toolbar .wo-search input {
    width: 16rem;
    max-width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem 0 2rem;
    font-size: 0.8125rem;
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.375rem;
    background: #fff;
}

.wo-toolbar .wo-search input:focus {
    outline: none;
    border-color: #0f6cbd;
}

/* Inline filter selects: fixed compact width, overriding the theme's
   .select2-container { width: 100% !important }. */
.wo-toolbar .select2-container {
    width: 11rem !important;
}

/* Multi selects (status / ATA / level) render as the same compact 2.5rem
   control as the single Engine select — an empty multi shows only its
   placeholder, never an open tag box; chosen values become small tokens. */
.wo-toolbar .select2-container--default .select2-selection--multiple {
    min-height: 2.5rem;
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.375rem;
    padding: 0.1875rem 0.5rem;
    display: flex;
    align-items: center;
}
.wo-toolbar .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #0080d0;
}
.wo-toolbar .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}
.wo-toolbar .select2-selection--multiple .select2-search--inline {
    margin: 0;
}
.wo-toolbar .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0;
    height: 2rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: #242424;
}
.wo-toolbar .select2-selection--multiple .select2-search__field::placeholder {
    color: #605e5c;
}
.wo-toolbar .select2-selection--multiple .select2-selection__choice {
    background: #f3f6fb;
    border: 0.0625rem solid #e1dfdd;
    border-radius: 62.4375rem;
    padding: 0 0.5rem 0 0.25rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.375rem;
    color: #242424;
}
.wo-toolbar .select2-selection--multiple .select2-selection__choice__remove {
    color: #605e5c;
    margin-right: 0.25rem;
}

[data-bs-theme="dark"] .wo-toolbar .select2-container--default .select2-selection--multiple {
    background: var(--fl-bg-surface, #292827);
    border-color: var(--fl-stroke, #3b3a39);
}
[data-bs-theme="dark"] .wo-toolbar .select2-selection--multiple .select2-search--inline .select2-search__field {
    color: var(--fl-fg, #f3f2f1);
    background: transparent;
}
[data-bs-theme="dark"] .wo-toolbar .select2-selection--multiple .select2-search__field::placeholder {
    color: var(--fl-fg-secondary, #a19f9d);
}
[data-bs-theme="dark"] .wo-toolbar .select2-selection--multiple .select2-selection__choice {
    background: var(--fl-bg-subtle, #323130);
    border-color: var(--fl-stroke, #3b3a39);
    color: var(--fl-fg, #f3f2f1);
}

.wo-toolbar .wo-clear-link {
    border: none;
    background: transparent;
    color: #0f6cbd;
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.wo-toolbar .wo-clear-link:hover {
    background: #f3f6fb;
}

/* Controls: one height, one type size, across selects, buttons and inputs. */
.work-order-list-panel .form-control,
.work-order-list-panel .select2-container .select2-selection--single,
.work-order-list-panel .dataTables_wrapper .dataTables_filter input,
.work-order-list-panel .dataTables_wrapper .dataTables_length select {
    min-height: 2rem;
    font-size: 0.8125rem;
}

/* The vendored select2 sheet hard-sets height: 45px on the closed control —
   an explicit height (not just min-height) is needed to compact it. The
   gtaform grey-field skin also forces 1rem text; pin the panel's 0.8125rem. */
.work-order-list-panel .select2-container .select2-selection--single {
    height: 2.5rem;
    display: flex;
    align-items: center;
}

.work-order-list-panel .select2-container .select2-selection--single .select2-selection__rendered,
.work-order-list-panel .grey-field .select2-container--default .select2-selection--single .select2-selection__rendered,
.work-order-list-panel .grey-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: 0.8125rem;
    line-height: 1.5;
}

.work-order-list-panel .select2-container .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
}

/* The gtaform sheet skin (this page's wrapper) leaks into the DataTable card:
   .gtaform-container .card .table pads the table box by 0.625rem — every row
   stopped 8px short of the table's edge — and forces 1rem/600 cells with the
   printed sheet's dark #374151 rules. The list is app chrome, not a sheet. */
.work-order-list-panel .default-table-area .table {
    padding: 0;
}

.work-order-list-panel .default-table-area .table thead tr th {
    font-size: 0.75rem;
    font-weight: 600;
}

.work-order-list-panel .default-table-area .table tbody tr td {
    font-size: 0.8125rem;
    font-weight: 400;
    border-top: none;
    border-bottom: 0.0625rem solid #eceef2;
}

/* The table ALWAYS spans its container: DataTables can write an inline pixel
   width measured while the view was still sliding open (arrive on Kanban →
   switch to Table), freezing the table at a fraction of the panel. */
.work-order-list-panel table.dataTable {
    width: 100% !important;
}

/* Fill the row: pin the fixed-content columns (No, Engine, Priority, Status,
   Due Date) to content-sized widths so the two columns with real text — W/O
   Name and Assignee — stretch to absorb ALL leftover width. Without this the
   browser split the surplus across every column, scattering dead voids
   through the middle of each row. */
#workOrderTable th:nth-child(1) {
    width: 3rem;
}

#workOrderTable th:nth-child(3) {
    width: 9rem;
}

#workOrderTable th:nth-child(4) {
    width: 7rem;
}

#workOrderTable th:nth-child(6) {
    width: 9.5rem;
}

#workOrderTable th:nth-child(7) {
    width: 8rem;
}

/* The Action column is last, so it absorbed all leftover table width while
   its links stayed left-aligned — a dead strip down the right edge. Shrink
   it to its content and keep the links on one line, flush right. */
#workOrderTable tr th:last-child,
#workOrderTable tr td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* DataTables renders the empty state as the ONLY cell in its row, so the rule
   above matches it too and drove the message into the right edge — width 1% and
   nowrap with it. Put all three back; the vendor's own centring rule is a class
   selector and loses to the id above. */
#workOrderTable tbody td.dataTables_empty {
    width: auto;
    white-space: normal;
    text-align: center;
}

/* ===== Work Order & Task List: rows that split text from controls =====
   A flex child is min-width:auto by default, so a growing text column refuses
   to shrink below its content and shoves its sibling straight out of the card.
   That is why Task Details / Hand Over hung outside the task card between 576
   and 767px, and why the assigned date was clipped in the order list. */
.wo-split-row>.flex-grow-1 {
    min-width: 0;
}

/* Only the TEXT side may shrink. Letting the control column shrink too just
   moves the overflow inside it — the status tag and the buttons then hang out
   of their own container instead. */
.wo-split-row>.text-end {
    flex-shrink: 0;
}

/* The row's controls read as one set: same width, same rhythm. They used to be
   squat two-line blocks ("Task<br>Details") of differing widths beside a single
   line of text. */
.wo-task-row .text-end .wo-btn,
.wo-split-row .text-end .wo-btn {
    min-width: 7.5rem;
    white-space: nowrap;
}

/* The status tag sits with them, so it shares the measure. */
.wo-task-row .text-end>p[class*='-tag'] {
    min-width: 7.5rem;
    text-align: center;
}

/* Tools Used and Attachments list everything booked to the job, and had no
   ceiling: 40 tools measured a 4,768px card against a 900px viewport, beside a
   middle column a fraction of its height. Bounded and scrolled inside, the same
   shape as the board's lanes — sized against the viewport, with the measured
   header height, and a floor so a short list is not a slot. */
.wo-side-scroll {
    max-height: calc(100vh - var(--app-header-h, 3.25rem) - 26rem);
    min-height: 9rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.wo-side-scroll::-webkit-scrollbar {
    width: 0.375rem;
}

.wo-side-scroll::-webkit-scrollbar-thumb {
    border-radius: 62.4375rem;
    background: #cbd5e1;
}

[data-bs-theme="dark"] .wo-side-scroll {
    scrollbar-color: #55534f transparent;
}

[data-bs-theme="dark"] .wo-side-scroll::-webkit-scrollbar-thumb {
    background: #55534f;
}

/* 3rem between a paragraph and its buttons is a desktop measurement. */
@media (max-width: 991.98px) {
    .wo-task-row {
        gap: 1rem;
    }
}

/* The three panels are 30/45/25% — on a 768px iPad that is a sliver each, so
   they stack below lg (d-lg-flex); these widths must let go there too, or the
   cards stay 30% wide as blocks. */
@media (max-width: 991.98px) {

    .wo-card-1,
    .wo-card-2,
    .wo-card-3 {
        max-width: 100%;
        flex: 1 1 auto;
    }
}

/* Between lg and xl the centre panel is ~470px and a depth-2 row keeps only a
   few words of title beside the fixed action column — pull the tree in. */
@media (max-width: 1199.98px) {

    .wo-subtask-list {
        margin-left: 0.375rem;
        padding-left: 1.25rem !important;
    }

    .wo-subtask-item::before {
        left: -1.25rem;
        width: 0.875rem;
    }

    .wo-subtask-item:not(:last-child)::after {
        left: -1.25rem;
    }
}

/* Panels sit side by side here but the centre one is still ~460px — the
   controls go under the text like on a phone. Below lg the panels stack and
   the row fits again, so this band alone. */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .wo-task-row {
        flex-direction: column;
    }

    .wo-task-row > .text-end {
        width: 100%;
    }
}

/* On a phone the controls go under the task instead of beside it: at 320px
   there is no honest way to fit a title and two buttons on one line. */
@media (max-width: 575.98px) {

    /* Only flex-direction: the element also carries .align-items-end and
       .text-end, which are Bootstrap utilities and therefore !important — a
       plain align-items or text-align here is silently dead. The controls stay
       right-aligned as a set, which is what they should look like anyway. */
    .wo-task-row {
        flex-direction: column;
    }

    /* Stacked, the fixed 10rem box parks the controls on the LEFT edge —
       full width keeps them right-aligned as a set. */
    .wo-task-row > .text-end {
        width: 100%;
    }
}

/* Task → sub-task tree: a rail drops from the parent card and each sub-task
   joins it with an elbow, so the relationship reads at a glance instead of
   living in a ps-4 indent. Sub cards also get a real card surface — they used
   to float on the page background. */
.wo-subtask-list {
    /* nested uls fall back to native markers (disc/circle/SQUARE by depth) */
    list-style: none;
    position: relative;
    margin-left: 1.25rem;
    padding-left: 1.75rem !important;
}

.wo-subtask-item {
    position: relative;
}

/* One width for the task action column, main and sub rows alike, and ONE
   size for every button in it: Task Details and Hand Over render identical
   (the d-block buttons used to fill whatever the column's widest line was —
   a long handover note ballooned the sub-task's Task Details). The notes
   wrap centred under the buttons instead of sizing them. */
.wo-task-row > .text-end {
    flex: 0 0 auto;
    width: 10rem;
}

.wo-task-row > .text-end .wo-btn {
    width: 8.75rem;
    margin-left: auto;
}

.wo-task-row > .text-end p.font-12 {
    text-align: center;
    line-height: 1.4;
}

/* Every stroke anchors on the LI at the same left, so the pieces cannot
   drift apart. The elbow's vertical reaches UP through the gap above the
   item (ul margin-top for the first, li margin-bottom for the rest) to touch
   the parent card / previous segment, then curves into this card. */
.wo-subtask-item::before {
    content: '';
    position: absolute;
    left: -1.75rem;
    top: -1.1rem;
    width: 1.375rem;
    height: 3rem;
    border-left: 0.125rem solid #c9d3dd;
    border-bottom: 0.125rem solid #c9d3dd;
    border-bottom-left-radius: 0.625rem;
}

/* The rail passes through every item except the last, bridging its own gap
   below, so it ends exactly at the final elbow. */
.wo-subtask-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: -1.75rem;
    top: -1.1rem;
    bottom: -1.05rem;
    border-left: 0.125rem solid #c9d3dd;
}

.wo-subtask-item > .wo-task-row {
    background: #f5f7fa;
    border: 0.0625rem solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

[data-bs-theme="dark"] .wo-subtask-item::before,
[data-bs-theme="dark"] .wo-subtask-item:not(:last-child)::after {
    /* One step brighter than the card border: the rail is the point here. */
    border-color: #4d5966;
}

[data-bs-theme="dark"] .wo-subtask-item > .wo-task-row {
    background: #1f2429;
    border-color: #2c333a;
}

/* Enterprise row actions: the row itself opens the order; secondary actions
   sit in a per-row kebab (⋯) menu, destructive Void quarantined at the
   bottom. Read-only roles render no kebab. */
tr.wo-row-link {
    cursor: pointer;
}

tr.wo-row-link:hover td {
    background-color: #f5f8fc;
}

.wo-kebab,
.wo-row-menu > button.wo-kebab {
    /* the doubled selector outweighs the template's `.dropdown>button` blue fill */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: #424242;
}

.wo-kebab:hover,
.wo-row-menu > button.wo-kebab:hover {
    background-color: #e8ecef;
}

.wo-kebab .material-symbols-outlined {
    font-size: 1.25rem;
}

/* Every declaration is explicit: the menu renders inside .gtaform-container
   .card, whose sheet skin styles bare ul/li/hr (margin-left -1.25rem
   !important on li pushed items out of the menu box; hr got the sheet's
   dark #292929 rule). */
.wo-row-menu .dropdown-menu {
    font-size: 0.8125rem;
    min-width: 10rem;
    padding: 0.25rem 0;
    background-color: #fff;
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
}

.wo-row-menu .dropdown-menu li,
.gtaform-container .card .wo-row-menu .dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important;
    width: auto;
    list-style: none;
}

.wo-row-menu .dropdown-divider {
    margin: 0.25rem 0;
    border-top: 0.0625rem solid #eceef2;
    opacity: 1;
}

.wo-row-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.4375rem 0.875rem;
    background-color: transparent;
    color: #242424;
}

.wo-row-menu .dropdown-item:hover {
    background-color: #f3f6fb;
}

.wo-row-menu .dropdown-item.text-danger {
    color: #c50f1f;
}

.wo-row-menu .dropdown-item.text-danger:hover {
    background-color: #fdf3f4;
}

.wo-row-menu .dropdown-item .material-symbols-outlined {
    font-size: 1.125rem;
}

[data-bs-theme="dark"] .wo-row-menu .dropdown-menu {
    background-color: var(--fl-bg-surface, #2d2c2b);
    border-color: var(--fl-stroke, #4a4948);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .wo-row-menu .dropdown-item {
    color: var(--fl-fg, #f3f2f1);
}

[data-bs-theme="dark"] .wo-row-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .wo-row-menu .dropdown-divider {
    border-top-color: var(--fl-stroke, #4a4948);
}

/* ── WO management page: enterprise pass ─────────────────────────────────
   Type ramp discipline (the KPI numbers are the biggest thing on screen,
   not the page title), one primary action, segmented view toggle, KPI
   stage bars in the Kanban's own colours, quiet table footer. */
.gtaform-container .work-order-page-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: #242424;
    margin-bottom: 0.125rem;
}

.gtaform-container .work-order-page-header p {
    font-size: 0.8125rem;
    color: #605e5c;
    margin-bottom: 0;
}

/* Secondary command: quiet outline, so Create keeps the only primary blue. */
.wo-btn-secondary {
    background: #fff !important;
    border: 0.0625rem solid #d1d1d1 !important;
    color: #242424 !important;
}

.wo-btn-secondary:hover {
    background: #f5f5f5 !important;
    color: #242424 !important;
}

/* Primary command for the list header: Work Order & Task List is the module's
   main working page, so its entry point reads as the one filled button in
   this cluster (Create owns the header cluster's blue, this owns the list's). */
.wo-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #0080d0 !important;
    border: 0.0625rem solid #0080d0 !important;
    color: #fff !important;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 128, 208, 0.35);
}

.wo-btn-primary:hover {
    background: #006bb0 !important;
    border-color: #006bb0 !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .wo-btn-primary {
    box-shadow: 0 0.125rem 0.375rem rgba(0, 128, 208, 0.25);
}

/* Kanban/Table as ONE segmented control, not a floating white pill. */
.gtaform-container .btn-view-grid {
    display: inline-flex;
    padding: 0.125rem;
    border: 0.0625rem solid #d1d1d1;
    border-radius: 0.375rem;
    background: #fff;
    box-shadow: none;
}

.gtaform-container .btn-view-grid a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.875rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    /* The template pins line-height: 0 !important on these anchors. */
    line-height: 1.2 !important;
    color: #424242;
    background: transparent;
}

.gtaform-container .btn-view-grid a.active {
    background: #ebf3fc;
    color: #0f6cbd;
    font-weight: 600;
}

/* KPI cards: tabular numbers carry the weight… */
.wo-kpi-number {
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #242424;
}

/* …and the stage bar is a miniature of the Kanban board below. */
.wo-stage-bar {
    display: flex;
    gap: 0.125rem;
    height: 0.375rem;
    border-radius: 62.5rem;
    overflow: hidden;
    margin: 0.625rem 0 0.75rem;
}

.wo-stage-bar span {
    display: block;
    min-width: 0.375rem;
}

.wo-seg-grey { background: #6c757d; }
.wo-seg-amber { background: #f59e0b; }
.wo-seg-yellow { background: #eab308; }
.wo-seg-orange { background: #f97316; }
.wo-seg-red { background: #dc2626; }
.wo-seg-green { background: #16a34a; }
.wo-seg-empty { background: #e5e7eb; }

.wo-kpi-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wo-kpi-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #424242;
}

.wo-kpi-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.wo-kpi-label {
    flex: 1 1 auto;
}

.wo-kpi-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #242424;
}

/* Kanban board: lanes are recessed grey surfaces in their stage colour;
   cards are white surfaces sitting ON them, separated by gaps — not rules.
   Cards follow the table-row pattern: the card opens the order. */
.wo-lane {
    flex: 1 1 17.5rem;
    min-width: 17.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem;
    background: #f6f7f9;
    border: 0.0625rem solid #eceef2;
    border-radius: 0.5rem;
    /* Long lanes scroll inside themselves instead of stretching the page;
       kebab menus escape this clip via their fixed-strategy Popper. Sized against
       the viewport rather than a flat 35rem, which left a tall monitor scrolling
       inside a short lane with empty page beneath it. The floor keeps a laptop
       usable; --app-header-h is measured, with the same fallback it declares. */
    max-height: calc(100vh - var(--app-header-h, 3.25rem) - 21rem);
    min-height: 20rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.wo-lane-header {
    padding: 0 0.25rem;
}

/* Names the true total when the lane body is capped, so a short lane is never
   mistaken for the whole record. */
.wo-lane-note {
    margin: -0.25rem 0.25rem 0;
    font-size: 0.6875rem;
    color: #605e5c;
}

.wo-lane-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #424242;
    margin-bottom: 0;
}

.wo-lane-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.wo-lane-count {
    min-width: 1.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 62.5rem;
    background: #e8ecef;
    color: #424242;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.wo-lane-card {
    background: #fff;
    border: 0.0625rem solid #e1dfdd;
    border-radius: 0.375rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: box-shadow 0.1s ease;
}

.wo-lane-card:hover {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.12);
}

.wo-card-eyebrow {
    font-size: 0.75rem;
    color: #605e5c;
    margin-bottom: 0;
}

.wo-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #242424;
    margin-bottom: 0.5rem;
}

.wo-card-footer {
    font-size: 0.75rem;
    color: #605e5c;
}

.wo-card-footer i {
    font-size: 0.875rem;
    line-height: 1;
}

/* The board's one red signal. */
.wo-due-overdue {
    color: #c50f1f;
    font-weight: 600;
}

.wo-lane-empty {
    margin: auto 0;
    padding: 2.5rem 0;
    text-align: center;
    font-size: 0.8125rem;
    color: #8a8886;
}

/* Dark mirrors. */
[data-bs-theme="dark"] .wo-lane {
    background: var(--fl-bg-subtle, #2d2c2b);
    border-color: var(--fl-stroke, #4a4948);
}

[data-bs-theme="dark"] .wo-lane-title {
    color: var(--fl-fg, #f3f2f1);
}

[data-bs-theme="dark"] .wo-lane-note {
    color: var(--fl-fg-secondary, #c8c6c4);
}

[data-bs-theme="dark"] .wo-lane-count {
    background: rgba(255, 255, 255, 0.08);
    color: var(--fl-fg-secondary, #d6d6d6);
}

[data-bs-theme="dark"] .wo-lane-card {
    background: var(--fl-bg-surface, #201f1e);
    border-color: var(--fl-stroke, #4a4948);
}

[data-bs-theme="dark"] .wo-lane-card:hover {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4);
}

/* No dark override for .wt-kanban-grid::after — it reads --fl-bg-surface, which
   already re-resolves per theme and per nesting level. */
[data-bs-theme="dark"] .wt-kanban-grid>.d-flex {
    scrollbar-color: #55534f transparent;
}

[data-bs-theme="dark"] .wt-kanban-grid>.d-flex::-webkit-scrollbar-thumb {
    background: #55534f;
}

[data-bs-theme="dark"] .wt-scroll-hint {
    background: rgba(255, 255, 255, 0.86);
    color: #1f1f1f;
}

[data-bs-theme="dark"] .wo-card-title {
    color: var(--fl-fg, #f3f2f1);
}

[data-bs-theme="dark"] .wo-card-eyebrow,
[data-bs-theme="dark"] .wo-card-footer,
[data-bs-theme="dark"] .wo-lane-empty {
    color: var(--fl-fg-secondary, #a19f9d);
}

/* Quiet table footer: info + page size + pager on one line, all sitting on
   the same baseline (DataTables gives each fragment its own padding). */
.wo-table-footer {
    padding-top: 0.75rem;
    font-size: 0.8125rem;
    color: #605e5c;
}

.wo-table-footer .dataTables_info,
.wo-table-footer .dataTables_length,
.wo-table-footer .dataTables_paginate {
    padding: 0 !important;
    margin: 0;
    display: flex;
    align-items: center;
}

.wo-table-footer .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.8125rem;
}

/* Dark mirrors. */
[data-bs-theme="dark"] .work-order-list-panel {
    border-color: var(--fl-stroke, #4a4948);
}

[data-bs-theme="dark"] .gtaform-container .work-order-page-header h2,
[data-bs-theme="dark"] .wo-kpi-number,
[data-bs-theme="dark"] .wo-kpi-count {
    color: var(--fl-fg, #f3f2f1);
}

[data-bs-theme="dark"] .wo-btn-secondary,
[data-bs-theme="dark"] .gtaform-container .btn-view-grid {
    background: var(--fl-bg-surface, #2d2c2b) !important;
    border-color: var(--fl-stroke, #4a4948) !important;
    color: var(--fl-fg, #f3f2f1) !important;
}

[data-bs-theme="dark"] .gtaform-container .btn-view-grid a {
    background: transparent;
    color: var(--fl-fg-secondary, #d6d6d6) !important;
}

[data-bs-theme="dark"] .gtaform-container .btn-view-grid a.active {
    background: rgba(15, 108, 189, 0.25);
    color: #6cb8f6;
}

[data-bs-theme="dark"] .wo-toolbar .wo-search input {
    background: var(--fl-bg-surface, #2d2c2b);
    border-color: var(--fl-stroke, #4a4948);
    color: var(--fl-fg, #f3f2f1);
}

[data-bs-theme="dark"] .wo-seg-empty {
    background: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .wo-kpi-row {
    color: var(--fl-fg-secondary, #d6d6d6);
}

[data-bs-theme="dark"] tr.wo-row-link:hover td {
    background-color: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .wo-kebab,
[data-bs-theme="dark"] .wo-row-menu > button.wo-kebab {
    color: var(--fl-fg-secondary, #d6d6d6);
}

[data-bs-theme="dark"] .wo-kebab:hover,
[data-bs-theme="dark"] .wo-row-menu > button.wo-kebab:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.work-order-list-panel .btn,
.work-order-list-panel .cbtn {
    font-size: 0.8125rem;
    padding: 0.4375rem 0.875rem;
}

/* DataTable chrome: "Show N entries", "Search:", info line and pager all sit at
   the card-title size instead of inheriting the theme's larger body scale. */
.work-order-list-panel .dataTables_wrapper .dataTables_length,
.work-order-list-panel .dataTables_wrapper .dataTables_filter,
.work-order-list-panel .dataTables_wrapper .dataTables_info,
.work-order-list-panel .dataTables_wrapper .dataTables_paginate {
    font-size: 0.8125rem;
}

.work-order-list-panel table.dataTable thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.0125rem;
    text-transform: none;
    color: #424242;
}

.work-order-list-panel table.dataTable tbody td {
    font-size: 0.8125rem;
    vertical-align: middle;
}

/* --- TECHNICIAN WORK ORDER: "Selected Work Order" panel ----------------------
   Same standardisation as .work-order-list-panel on the manager page. The
   heading here rendered at the theme's fluid h2 — calc(1.3274rem + 0.9288vw)
   below 1200px — so on a laptop it read almost as large as the page title and
   dwarfed the compact KPI cards directly above it. Pinned in rem to the same
   scale as the Fluent card titles (.fl-card__title, 0.8125rem). */
.work-order-selected-panel .work-order-tech-list-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.0063rem;
    margin-bottom: 0.25rem;
    color: #242424;
}

.work-order-selected-panel .work-order-tech-list-header h2 span {
    font-size: inherit;
}

.work-order-selected-panel .selected-panel-subtitle {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: #616161;
}

.work-order-selected-panel .btn,
.work-order-selected-panel .cbtn {
    font-size: 0.8125rem;
    padding: 0.4375rem 0.875rem;
}

/* ── Back to top ───────────────────────────────────────────────────────────────
   Long documents — an execution card runs to a dozen screens — need a way home
   that is not a long scroll back. The script in the master layout reveals it
   only once the page is genuinely scrolled, so short pages never show it.

   Sizes are rem against the 80% root above, so 3.5rem is ~45px: the comfortable
   touch target, and it tracks the user's own browser font setting rather than
   pinning to a device pixel size. */
.scroll-top-btn {
    position: fixed;
    /* env() keeps it off a phone's rounded corner and home indicator; the 0px
       fallback is what every desktop browser resolves. */
    right: calc(1.5rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    /* Below the modal (1055), its backdrop (1050) and the mobile sidebar drawer,
       so it can never float over an open dialog or the drawer's scrim. */
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 0.0625rem solid var(--fl-stroke, #e1dfdd);
    border-radius: 50%;
    background: var(--fl-bg-surface, #ffffff);
    color: var(--fl-brand, #0080d0);
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: var(--fl-shadow-8, 0 0.25rem 0.5rem rgba(0, 0, 0, .10));
    cursor: pointer;
    /* Hidden without display:none, so the fade has something to animate and the
       button stays out of the tab order while invisible. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity .18s ease, transform .18s ease, visibility .18s,
        background-color .18s ease, color .18s ease;
}

.scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: var(--fl-bg-hover, #f3f6fb);
    color: var(--fl-brand-hover, #0070ba);
}

.scroll-top-btn:active {
    color: var(--fl-brand-pressed, #0063a3);
    transform: translateY(0.0625rem);
}

.scroll-top-btn:focus-visible {
    outline: 0.125rem solid var(--fl-brand, #0080d0);
    outline-offset: 0.125rem;
}

/* Phones: smaller and tucked closer in, so it covers less of a narrow column. */
@media (max-width: 575.98px) {
    .scroll-top-btn {
        right: calc(0.875rem + env(safe-area-inset-right, 0px));
        bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
    }
}

/* A short landscape phone has no room for a floating control over the content. */
@media (max-height: 26rem) {
    .scroll-top-btn {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-top-btn {
        transition: none;
    }
}

@media print {
    .scroll-top-btn {
        display: none !important;
    }
}

/* ── Task-card editor command bar ──────────────────────────────────────────────
   The workflow actions (Save Draft / Publish / Cancel / Delete) used to be
   rendered twice — once here and once at the foot of the sheet — so there were
   two sources of one action and neither was reachable from the middle of a
   document that runs a dozen screens. They live here only, and the strip sticks
   under the app header so it is in reach wherever the reader is.

   Top matches the app header's own height (it is position:sticky, top:0,
   z-index:12); this sits just under it in the stack, above the page but below
   every dialog. */
:root {
    /* Shared by the bar and by anything that has to stick BELOW it.
       --app-header-h is a FALLBACK only: the header is content-sized, so the
       master layout measures the real element and overwrites this in px. A
       constant here was what left a gap under the header with the page
       scrolling through it. */
    --tc-cmdbar-h: 3.5rem;
    --app-header-h: 3.25rem;
}

.tc-command-bar {
    position: sticky;
    top: var(--app-header-h);
    z-index: 11;
    background: var(--fl-bg-canvas, #ffffff);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 0.0625rem solid var(--fl-stroke, #e1dfdd);
}

/* Below the sticky threshold the bar is just a row; on a narrow screen it wraps
   and would otherwise eat most of a short viewport. When the exec bar's button
   cluster wraps to its own line, justify-content-between has nothing left to
   distribute and the buttons sit ragged under the title — give them the line:
   full width, split equally (the .tc-view-bar reflow, same idea). */
@media (max-width: 767.98px) {
    .tc-command-bar {
        position: static;
    }
}

/* 768px INCLUSIVE, matching the legacy style.css rule that stacks every
   .btn-group-top into a column at exactly this width — here the pair reads
   better as one full-width row split equally (the .tc-view-bar reflow). */
@media (max-width: 768px) {
    .tx-exec-bar .btn-group-top {
        flex-direction: row;
        width: 100%;
    }

    .tx-exec-bar .btn-group-top .btn {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* Side by Side collapses the outline into a sticky chip strip. It parked at the
   header height, which is now where the command bar sits — drop it below. */
.tc-authoring-shell.tc-canvas.tc-sbs .tc-outline {
    top: calc(var(--app-header-h) + var(--tc-cmdbar-h));
}

@media print {
    .tc-command-bar {
        display: none !important;
    }
}

/* The document view's header: back · title · actions.
   It was a justify-content-between flex row, so the title landed wherever its
   two unequal neighbours left it — visibly off to the left, because the action
   cluster is several times wider than the back arrow. Three tracks with equal
   side columns centre the title against the PAGE instead of against whatever
   happens to sit either side of it. It carries .tc-command-bar too, so the
   actions stay in reach down a document that runs many screens. */
.tc-view-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
}

.tc-view-bar > :first-child {
    justify-self: start;
}

.tc-view-bar > .tc-page-title {
    justify-self: center;
    margin: 0;
}

.tc-view-bar > :last-child {
    justify-self: end;
}

/* Too narrow for three tracks: back and actions share the top line, the title
   drops beneath them rather than being crushed between the two. */
@media (max-width: 767.98px) {
    .tc-view-bar {
        grid-template-columns: auto 1fr;
        row-gap: 0.5rem;
    }

    .tc-view-bar > .tc-page-title {
        grid-column: 1 / -1;
        order: 3;
        justify-self: start;
    }
}

/* ── Action remarks, folded ────────────────────────────────────────────────────
   A remark is the exception, so it does not get a permanent full-width input on
   every action: that doubled the height of every row, and on a 29-step card it
   was most of the page spent on boxes that stay empty. The control is a quiet
   chip that expands into the real field on click and folds back on the way out,
   carrying the text on its own label so a recorded remark still reads at a
   glance. */
.tc-remark {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.tc-remark-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 22rem;
    min-height: 1.5rem; /* tap floor — measured 20px */
    padding: 0.1875rem 0.625rem;
    border: 0.0625rem dashed var(--fl-stroke-strong, #d2d0ce);
    border-radius: 62.4375rem;
    background: transparent;
    color: var(--fl-fg-secondary, #605e5c);
    font-size: 0.8125rem;
    line-height: 1.3;
    cursor: pointer;
}

.tc-remark-toggle:hover {
    background: var(--fl-bg-hover, #f3f6fb);
    color: var(--fl-fg, #242424);
}

/* A recorded remark is content, not a prompt — solid border, normal text. */
.tc-remark.has-remark .tc-remark-toggle {
    border-style: solid;
    border-color: var(--fl-stroke, #e1dfdd);
    background: var(--fl-bg-subtle, #f5f5f4);
    color: var(--fl-fg, #242424);
}

.tc-remark-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Expanded: the field takes the room the chip was saving, and no more. */
.tc-remark .tc-step-remark {
    min-width: 16rem;
    max-width: 28rem;
}

/* The reviewer's side: the remark as text, never an input they cannot use. */
.tc-remark-read {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--fl-fg-secondary, #605e5c);
}

/* ---------------------------------------------------------------------------
   Special Tools provisioning cell: serial box + register picker.

   The serial used to be transcribed from the asset register by hand, because the
   card names a tool the OEM's way and the register names it GTA's way. Find
   opens the picker; Last used offers the pairing someone already established on
   an earlier job.
   --------------------------------------------------------------------------- */
.tp-serial-cell {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tp-serial-cell .tp-serial {
    min-width: 0;
}

.tp-find-tool {
    flex-shrink: 0;
    border: 0.0625rem solid #e3e8f0;
    border-radius: 0.375rem;
    background: #f8fafc;
    color: #334155;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.2;
    white-space: nowrap;
}

.tp-find-tool:hover {
    background: #eef2f7;
    color: #0f172a;
}

.tp-use-last {
    display: inline-block;
    max-width: 100%;
    margin-top: 0.25rem;
    border: 0.0625rem dashed #cbd5e1;
    border-radius: 0.375rem;
    background: transparent;
    color: #475569;
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    line-height: 1.3;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-use-last:hover {
    border-color: #94a3b8;
    color: #0f172a;
}

/* The picker renders the same result cards as #assigntool, but that block is
   id-scoped so none of it reaches here. Restated rather than re-selectored:
   editing ~20 live rules to add a second id risks the assign modal for cosmetics
   on a new one. Values deliberately identical — the two lists must look the same. */
/* Bootstrap's default dialog is 500px, which the app's 80% root zoom renders at
   400 — too narrow for a name, a part number and a serial on one line, so the
   card list overflowed sideways and the dialog carried a permanent h-scrollbar. */
#toolpicker .modal-dialog {
    max-width: 42rem;
}

#toolpicker .modal-content {
    overflow-x: hidden;
    padding: 1.25rem;
}

#toolpicker .modal-body {
    overflow-x: hidden;
}

/* Long tool names and part numbers are data, not layout: let them wrap rather
   than widen the dialog. */
#toolpicker .asset-id {
    min-width: 0;
    overflow-wrap: anywhere;
}

#toolpicker .modal-title {
    margin: 0 0 0.25rem;
    color: #111827;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.2;
}

#toolpicker .tp-row-label {
    margin: 0;
    color: #64748b;
    font-size: 0.75rem;
}

#toolpicker .modal-footer {
    margin-top: 0.75rem;
    padding: 0.75rem 0 0;
}

#toolpicker .modal-header p,
#toolpicker .modal-body > span {
    margin: 0;
    color: #64748b;
    font-size: 0.75rem;
}

#toolpicker .asset-item {
    min-height: 5.25rem;
    border: 0.0625rem solid #e3e8f0 !important;
    border-radius: 0.5rem !important;
    background: #fff;
    padding: 0.75rem 1rem !important;
    box-shadow: 0 0.125rem 0.3125rem rgba(15, 23, 42, 0.05);
}

#toolpicker .purple-tag {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    margin-top: 0 !important;
    border-radius: 0.5rem !important;
    background: #f0e9ff;
    color: #8b5cf6;
    padding: 0 !important;
}

#toolpicker .purple-tag i {
    color: #8b5cf6;
    font-size: 1.125rem !important;
}

#toolpicker .asset-id h5 {
    margin: 0 0 0.125rem !important;
    color: #111827;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
}

#toolpicker .rfid {
    display: block;
    margin-bottom: 0.125rem;
    color: #10b981 !important;
    font-size: 0.6875rem !important;
    font-weight: 800 !important;
    line-height: 1.2;
}

#toolpicker .asset-id p {
    margin: 0;
    color: #475569;
    font-size: 0.625rem;
    line-height: 1.35;
}

#toolpicker .select-tool {
    min-width: 5.75rem;
    min-height: 2.125rem;
    justify-content: center;
    border: 0 !important;
    border-radius: 0.375rem !important;
    background: #e5e7eb !important;
    color: #111827 !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Task execution: the sticky bar condenses once it parks under the app header.

   At rest it is the page's heading — 24px title over the job reference, 108px
   tall. Stuck, that is 161px of a 900px viewport spent on a heading you have
   already read, on a page that runs ~13 screens. Condensed it keeps the same
   information at a size that reads as a toolbar rather than a title.
   --------------------------------------------------------------------------- */
.tx-exec-bar h2,
.tx-exec-bar > div > div > p {
    transition: font-size 0.12s ease;
}

.tx-exec-bar.is-stuck {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.tx-exec-bar.is-stuck h2 {
    font-size: 1.0625rem;
    line-height: 1.25;
}

.tx-exec-bar.is-stuck > div > div > p {
    font-size: 0.625rem;
}

/* Nothing to condense where the bar does not stick. */
@media (max-width: 767.98px) {
    .tx-exec-bar.is-stuck {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .tx-exec-bar.is-stuck h2 {
        font-size: inherit;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tx-exec-bar h2,
    .tx-exec-bar > div > div > p {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Book Out Tools, from the task execution page.

   Same card list as #assigntool / #toolpicker; those blocks are id-scoped so
   none of it reaches here. Values match deliberately — three tool lists that
   look different would read as three different features.
   --------------------------------------------------------------------------- */
#bookouttask .modal-dialog {
    max-width: 42rem;
}

#bookouttask .modal-content {
    overflow-x: hidden;
    padding: 1.25rem;
}

#bookouttask .modal-title {
    margin: 0 0 0.25rem;
    color: #111827;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.2;
}

#bookouttask .modal-header p,
#bookouttask .modal-body > span {
    margin: 0;
    color: #64748b;
    font-size: 0.75rem;
}

#bookouttask .modal-body h6 {
    margin-top: 0;
    color: #111827;
    font-size: 0.8125rem;
    font-weight: 700;
}

#bookouttask .asset-item {
    min-height: 4rem;
    border: 0.0625rem solid #e3e8f0 !important;
    border-radius: 0.5rem !important;
    background: #fff;
    padding: 0.75rem 1rem !important;
    cursor: pointer;
}

/* An already-dispatched tool stays visible so its whereabouts are readable, but
   must not look pickable. */
#bookouttask .asset-item.bo-unavailable {
    background: #f8fafc;
    cursor: default;
    opacity: 0.75;
}

#bookouttask .asset-id {
    min-width: 0;
    overflow-wrap: anywhere;
}

#bookouttask .asset-id h5 {
    margin: 0 0 0.125rem !important;
    color: #111827;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

#bookouttask .asset-id p {
    margin: 0;
    color: #475569;
    font-size: 0.625rem;
    line-height: 1.35;
}

#bookouttask .modal-footer {
    margin-top: 0.75rem;
    padding: 0.75rem 0 0;
}

/* Data-pack download progress. Indeterminate by design — the build is synchronous
   and reports no percentage, and a bar that invents one is worse than none. */

/* Centred explicitly: under the global html{zoom} Chrome resolves a fixed dialog's
   auto margins against an inconsistent containing block, which lands this at the
   top-left. Same treatment as #assigntool. */
#dataPackBuilding .modal-dialog {
    position: fixed;
    top: 30vh;
    left: 50%;
    width: min(24rem, calc(100vw - 2rem));
    max-width: none;
    margin: 0 0 0 calc(min(24rem, 100vw - 2rem) / -2);
}

.dp-card {
    padding: 1.75rem;
}

.dp-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.dp-ref {
    font-size: 0.8125rem;
    color: var(--fl-fg-secondary, #6B7280);
    margin: 0.25rem 0 1.5rem;
}

/* Same track and radius as .task-mini-progress so it reads as the app's own. */
.dp-bar {
    height: 0.375rem;
    background: #E5E7EB;
    border-radius: 0.25rem;
    overflow: hidden;
}

.dp-bar > span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 0.25rem;
    background: #2563EB;
    animation: dp-slide 1.4s ease-in-out infinite;
}

.dp-note {
    font-size: 0.8125rem;
    color: var(--fl-fg-secondary, #6B7280);
    margin: 1rem 0 0;
}

.dp-note + .dp-note {
    margin-top: 0.375rem;
}

@keyframes dp-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .dp-bar > span { animation: none; width: 100%; }
}

/* In-flight state for the per-action buttons. Complete posts on a single click now,
   so the busy state is the only feedback between the click and the row updating —
   and the disabled attribute is what stops a second POST. */
.step-btn-loading {
    opacity: 0.65;
    cursor: progress;
    pointer-events: none;
}

/* ============ 2026-08-12 responsive sweep (WO + task-card modules) ============ */

/* Provisioning tables clipped at phone width: no ancestor scrolled, and the
   page root is overflow-x: clip, so the Add button and action icons were
   simply cut off. The block scrolls its own overflow now. */
.tc-prov-block {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* NRC table: Finding is prose and was crushed to 85px; the wrapper scrolled
   with no visible bar, so clipped columns read as missing data. */
.wo-nrc-scroll {
    scrollbar-width: thin;
}
.wo-nrc-table {
    min-width: 40rem;
}
.wo-nrc-table td:nth-child(2) {
    min-width: 14rem;
}
/* The gtaform skin zeroes horizontal cell padding with (0,2,3) !important —
   NRC No. and Finding rendered as one run-on string. Three classes to outrank. */
.table-responsive.wo-nrc-scroll .wo-nrc-table thead th,
.table-responsive.wo-nrc-scroll .wo-nrc-table tbody td {
    padding: 0.375rem 0.75rem !important;
}

/* The technician task list borrows .table-s-one markup whose cell rules are
   scoped to .asset-management-page, and the gtaform skin zeroes horizontal cell
   padding with !important — cells touched at tablet widths. !important to beat
   it; the id out-specifies it among important rules. */
.work-order-technician-page #taskTable thead th,
.work-order-technician-page #taskTable tbody td {
    padding: 0.375rem 0.75rem !important;
}
.work-order-technician-page .work-order-tech-table-responsive {
    scrollbar-width: thin;
}

/* The section chip strip scrolls but gave no cue that chips continue. */
@media (max-width: 991.98px) {
    .tc-authoring-shell .tc-outline-doc,
    .tc-outline-doc {
        scrollbar-width: thin;
    }
}