/* /Components/Layout/ArchNavMenu.razor.rz.scp.css */
nav[b-t3gtsalmhz] {
    background-color: var(--FRONTENDCOLOR);
    position: relative;
    z-index: 1050;
}

    .nav-link.disabled[b-t3gtsalmhz], .nav-link:disabled[b-t3gtsalmhz] {
        color: darkgrey;
    }



.navbar-toggler[b-t3gtsalmhz] {
    background-color: white;
    flex: 0 0 auto;        /* keep its size; never shrink so the flag squishes instead */
    margin-left: auto;     /* push to the right edge of the flag row */
}

/* Flag + burger share one row on mobile */
.flag-toggler-row[b-t3gtsalmhz] {
    gap: 0.5rem;
    flex: 1 1 auto;  /* Grow to fill row, pushing burger (margin-left: auto) to far right */
}

/* Bootstrap's default toggler icon draws WHITE bars, invisible on our white button.
   Redraw the bars with a dark stroke so the hamburger is visible. */
.navbar-toggler-icon[b-t3gtsalmhz] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833,37,41,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Allow the wrapper + logo to shrink instead of forcing horizontal overflow */
.brand-flag-wrap[b-t3gtsalmhz] {
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
}

/* Logo keeps its natural 340px size on desktop; never squished */
.navbar-brand[b-t3gtsalmhz] {
    flex-shrink: 0;
}

.navbar-brand img[b-t3gtsalmhz] {
    height: auto;   /* preserve aspect ratio */
}

/* Custom breakpoint: navbar-expand-flag
   Default (below 1620px): hamburger menu is shown, brand/flag are stacked
   Above 1620px: full horizontal menu when flag is present
*/

/* Base: stacked brand-flag, collapsed menu */
.navbar-expand-flag .navbar-toggler[b-t3gtsalmhz] {
    display: block;
}

.navbar-expand-flag .navbar-collapse[b-t3gtsalmhz] {
    display: none;
}

.navbar-expand-flag .navbar-collapse.show[b-t3gtsalmhz] {
    display: block;
}

/* At 1620px and above, expand the menu and put brand/flag side-by-side */
@media (min-width: 820px) {
    .navbar-expand-flag .brand-flag-wrap[b-t3gtsalmhz] {
        flex-direction: row;
        align-items: center;
        width: auto;  /* Reset to auto width; only use full-width while collapsed */
    }

    .navbar-expand-flag .navbar-toggler[b-t3gtsalmhz] {
        display: none;
    }

    .navbar-expand-flag .navbar-collapse[b-t3gtsalmhz] {
        display: flex !important;
        flex-basis: auto;
    }
}

@media (max-width: 850px) {
    /* On narrow phones where logo+flag+burger no longer fit on one row,
       they wrap with flag+burger on row 2. Restore adjacent burger layout. */
    .flag-toggler-row[b-t3gtsalmhz] {
        flex: 0 0 auto;  /* Stop growing so burger doesn't push to far right */
    }

    .navbar-toggler[b-t3gtsalmhz] {
        margin-left: 0;  /* Adjacent to flag instead of far-right */
    }
}

@media (max-width: 819.98px) {
    .navbar-expand-flag .flag-toggler-row[b-t3gtsalmhz] {
        /* tighten left edge placement */
        gap: 0.35rem;          /* was 0.5rem */
    }

    .navbar-expand-flag .flag-toggler-row[b-t3gtsalmhz]  .flag-banner {
        margin-left: -2px;     /* nudges flag left to reduce blue gap */
    }

    .navbar-expand-flag .flag-toggler-row[b-t3gtsalmhz] {
        min-height: 52px; /* row height close to logo+flag visual balance */
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
        justify-content: flex-start; /* keep flag compact on left */
        align-items: center;
        gap: 0.5rem;
    }

    .navbar-expand-flag .navbar-toggler[b-t3gtsalmhz] {
        margin-left: auto; /* burger to right edge */
        flex: 0 0 auto;
    }

    .navbar-expand-flag .flag-toggler-row[b-t3gtsalmhz]  .flag-banner {
        max-width: none; /* stop forced full-row expansion */
    }
}

@media (max-width: 1199.98px) {
    /* Only let the logo scale down on narrow phones where it's stacked */
    .navbar-brand img[b-t3gtsalmhz] {
        max-width: 100%;
    }
}

.navbar-collapse[b-t3gtsalmhz] {
    flex-grow: 0;
}

.dropend:hover .dropdown-menu[b-t3gtsalmhz] {
    display: block;
    left: 100%;
    top: 0;
}
.dropstart:hover .dropdown-menu[b-t3gtsalmhz] {
    display: block;
    right: 100%;
    top: 0;
}
/*.nav-item:last-of-type ::deep .nav-link:hover {
    color: red;
}*/

.nav-item[b-t3gtsalmhz]  .nav-link {
    color: white;
    white-space: nowrap;
}

.nav-item[b-t3gtsalmhz]  a.active {
    color: aquamarine;
}

.nav-item[b-t3gtsalmhz]  .nav-link:hover {
    color: wheat;
}
.nav-item[b-t3gtsalmhz]  .nav-link.sign-in:hover {
    color: greenyellow;
}
.nav-item.sign-out[b-t3gtsalmhz]  .nav-link:hover {
    color: red;
}
/* /Components/Layout/EmbedLayout.razor.rz.scp.css */
#blazor-error-ui[b-wdfzfviaje] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-wdfzfviaje] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-1aobyv78wp] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-1aobyv78wp] {
    flex: 1;
}

.sidebar[b-1aobyv78wp] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-1aobyv78wp] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-1aobyv78wp]  a, .top-row[b-1aobyv78wp]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row[b-1aobyv78wp]  a:hover, .top-row[b-1aobyv78wp]  .btn-link:hover {
            text-decoration: underline;
        }

@media (max-width: 640.98px) {
    .top-row[b-1aobyv78wp] {
        justify-content: space-between;
    }

        .top-row[b-1aobyv78wp]  a, .top-row[b-1aobyv78wp]  .btn-link {
            margin-left: 0;
        }
}

@media (min-width: 641px) {
    /*    .page {
        flex-direction: row;
    }*/

    .sidebar[b-1aobyv78wp] {
        /*        width: 250px;
        height: 100vh;*/
        position: sticky;
        top: 0;
    }

    .top-row[b-1aobyv78wp] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-1aobyv78wp]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-1aobyv78wp], article[b-1aobyv78wp] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-1aobyv78wp] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-1aobyv78wp] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-igcc5muvlm] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-igcc5muvlm] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-igcc5muvlm] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-igcc5muvlm] {
    font-size: 1.1rem;
}

.bi[b-igcc5muvlm] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-igcc5muvlm] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-igcc5muvlm] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-igcc5muvlm] {
        padding-bottom: 1rem;
    }

    .nav-item[b-igcc5muvlm]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-igcc5muvlm]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-igcc5muvlm]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-igcc5muvlm] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-igcc5muvlm] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-igcc5muvlm] {
        display: none;
    }

    .nav-scrollable[b-igcc5muvlm] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/NoMenuLayout.razor.rz.scp.css */
#blazor-error-ui[b-5vppgc9taw] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-5vppgc9taw] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ShippingLayout.razor.rz.scp.css */
.page[b-sf8jjjluj9] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-sf8jjjluj9] {
    flex: 1;
}

.sidebar[b-sf8jjjluj9] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-sf8jjjluj9] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-sf8jjjluj9]  a, .top-row[b-sf8jjjluj9]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row[b-sf8jjjluj9]  a:hover, .top-row[b-sf8jjjluj9]  .btn-link:hover {
            text-decoration: underline;
        }

@media (max-width: 640.98px) {
    .top-row[b-sf8jjjluj9] {
        justify-content: space-between;
    }

        .top-row[b-sf8jjjluj9]  a, .top-row[b-sf8jjjluj9]  .btn-link {
            margin-left: 0;
        }
}

@media (min-width: 641px) {
    /*    .page {
        flex-direction: row;
    }*/

    .sidebar[b-sf8jjjluj9] {
        /*        width: 250px;
        height: 100vh;*/
        position: sticky;
        top: 0;
    }

    .top-row[b-sf8jjjluj9] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-sf8jjjluj9]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-sf8jjjluj9], article[b-sf8jjjluj9] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-sf8jjjluj9] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-sf8jjjluj9] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ShippingMenu.razor.rz.scp.css */
nav[b-y8thkaa9jp] {
    background-color: var(--FRONTENDCOLOR);
}


    .nav-link.disabled[b-y8thkaa9jp], .nav-link:disabled[b-y8thkaa9jp] {
        color: darkgrey;
    }

.navbar-toggler[b-y8thkaa9jp] {
    background-color: white;
}

.navbar-collapse[b-y8thkaa9jp] {
    flex-grow: 0;
}

.dropend:hover .dropdown-menu[b-y8thkaa9jp] {
    display: block;
    left: 100%;
    top: 0;
}

nav-item[b-y8thkaa9jp] {

}

.nav-item:first-of-type[b-y8thkaa9jp] {
   
}

.nav-item:last-of-type[b-y8thkaa9jp]  .nav-link:hover {
    color: red;
}

.nav-item[b-y8thkaa9jp]  .nav-link {
    color: white;
    white-space: nowrap;
}

.nav-item[b-y8thkaa9jp]  a.active {
    color: aquamarine;
}

.nav-item[b-y8thkaa9jp]  .nav-link:hover {
    color: wheat;
}

@media (min-width: 1839px) {
    .navbar-collapse[b-y8thkaa9jp] {
        display: none !important;
    }

    .navbar-toggler[b-y8thkaa9jp] {
        display: block;
    }
}
@media (min-width: 1840px) {
    .navbar-collapse.collapse[b-y8thkaa9jp] {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-toggler[b-y8thkaa9jp] {
        display: none;
    }
}
/* /Components/Layout/TravelerLayout.razor.rz.scp.css */
#blazor-error-ui[b-voxn3zofol] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-voxn3zofol] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/AnyProductionBoard.razor.rz.scp.css */
/* ==================================================================
   AnyProductionBoard.razor.css

   DEFAULT    - everything below until the divider. Untouched.
   .skin-8bit - the arcade skin, gated behind the .skin-8bit class and
                inert without it. Turn on with Skin="skin-8bit".
   ================================================================== */


/* ==================================================================
   DEFAULT SKIN
   ================================================================== */

table[b-tceydhizyh] {
    color: black;
    table-layout: fixed;
    width: 100%;
}

thead[b-tceydhizyh] {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* ===== COLUMN WIDTHS =====
   Percentages, one set from 1200px and one below. Both were fitted on
   real board data (Main board) so that at every width the rows are no
   taller, and no word gets split more often, than with the original
   widths. Like the original they add up to 105 - Chromium scales them
   to the table - so the optional Price column just squeezes the rest. */

col.col-job[b-tceydhizyh]      { width: 9%; }
col.col-part[b-tceydhizyh]     { width: 11.5%; }
col.col-material[b-tceydhizyh] { width: 9%; }
col.col-finish[b-tceydhizyh]   { width: 12.5%; }
col.col-qty[b-tceydhizyh]      { width: 3.5%; }
col.col-customer[b-tceydhizyh] { width: 16%; }
col.col-lastwc[b-tceydhizyh]   { width: 12.5%; }
col.col-currwc[b-tceydhizyh]   { width: 12%; }
col.col-nextwc[b-tceydhizyh]   { width: 11%; }
col.col-price[b-tceydhizyh]    { width: 6%; }
col.col-sr[b-tceydhizyh]       { width: 3.5%; }
col.col-date[b-tceydhizyh]     { width: 4.5%; }

/* Below 1200px the table only shows when picked with the view switch.
   Short columns first get room for their longest word (Aluminum,
   DRILLPRESS, K.C.), and under 992px the type drops a size - at 768px
   the original widths left ~60 cells overlapping their neighbours. */
@media (max-width: 1199.98px) {
    col.col-job[b-tceydhizyh]      { width: 8.5%; }
    col.col-part[b-tceydhizyh]     { width: 12%; }
    col.col-material[b-tceydhizyh] { width: 10%; }
    col.col-finish[b-tceydhizyh]   { width: 12.5%; }
    col.col-qty[b-tceydhizyh]      { width: 3%; }
    col.col-customer[b-tceydhizyh] { width: 15%; }
    col.col-lastwc[b-tceydhizyh]   { width: 11.5%; }
    col.col-currwc[b-tceydhizyh]   { width: 11.5%; }
    col.col-nextwc[b-tceydhizyh]   { width: 11.5%; }
    col.col-sr[b-tceydhizyh]       { width: 5%; }
    col.col-date[b-tceydhizyh]     { width: 4.5%; }
}

@media (max-width: 991.98px) {
    table[b-tceydhizyh] {
        font-size: 0.875rem;
    }
}

/* long unbroken part numbers / finish codes wrap instead of spilling
   into the next cell */
tbody td[b-tceydhizyh] {
    overflow-wrap: anywhere;
}

td:nth-child(5)[b-tceydhizyh],
td:nth-child(10)[b-tceydhizyh] {
    text-indent: 0;
}

.job-cell[b-tceydhizyh] {
    /*transition: background-color 0.2s ease, transform 0.2s;*/
    transition: transform 0.2s;
}

    .job-cell:hover[b-tceydhizyh] {
        outline: 2px dashed red;
        /* faux bold: the shadow thickens the strokes without making the
           text wider, so a hovered row can't re-wrap and push the rows
           below it down */
        text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor;
        transform: scale(1.01);
    }

input[type="search"]:not(:placeholder-shown)[b-tceydhizyh],
select.form-select:has(option[value]:not([value=""]):checked)[b-tceydhizyh] {
    background-image: linear-gradient(90deg, #ffc107 50%, transparent 50%), linear-gradient(90deg, #ffc107 50%, transparent 50%), linear-gradient(0deg, #ffc107 50%, transparent 50%), linear-gradient(0deg, #ffc107 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 1rem 0.25rem, 1rem 0.25rem, 0.25rem 1rem, 0.25rem 1rem;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: search-border-dance-b-tceydhizyh 8s infinite linear;
    padding: 0.375rem 0.75rem;
}

@keyframes search-border-dance-b-tceydhizyh {
    0% {
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }

    100% {
        background-position: 20rem 0, -20rem 100%, 0 -20rem, 100% 20rem;
    }
}

.finish-swatch[b-tceydhizyh] {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.35em;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 2px;
    /* middle centers on the x-height, which reads low next to capitals
       and digits ("PC (7004..."); this centers it on cap height */
    vertical-align: -0.1em;
}

.finish-swatch--custom[b-tceydhizyh] {
    background: conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red);
}


/* ==================================================================
   CARD VIEW - default below 1200px, or at any width above phone via
   the view toggle (which view shows is set by Bootstrap d-* classes
   from CardViewClass / TableViewClass in the .razor).
   Same card and same order everywhere - Job, Part, Material, Finish,
   Qty, Customer, work centers, SR, Date - it just uses fewer lines as
   the card gets wider:
     < 992px    3 lines
     992-1799   2 lines
     1800+      1 line, fields in aligned columns
   Nothing is truncated - long values wrap.
   ================================================================== */

.mobile-accordion[b-tceydhizyh] {
    padding: 0.5rem;
}

#searchAccordion .accordion-body[b-tceydhizyh] {
    display: grid;
    gap: 0.5rem;
}

/* Phones: filters behind the blue "Search & Filters" bar */
@media (max-width: 767.98px) {
    #searchAccordion .accordion-item[b-tceydhizyh],
    #searchAccordion .accordion-button[b-tceydhizyh],
    #searchAccordion .accordion-button.collapsed[b-tceydhizyh] {
        background-color: #0d6efd !important;
        color: white !important;
        font-weight: 600;
    }

        #searchAccordion .accordion-button:not(.collapsed)[b-tceydhizyh] {
            background-color: #0b5ed7 !important;
            color: white !important;
        }

        #searchAccordion .accordion-button[b-tceydhizyh]::after {
            filter: brightness(0) invert(1);
        }

    .accordion-item[b-tceydhizyh] {
        margin-bottom: 0.5rem;
        border-radius: 0.375rem !important;
        overflow: hidden;
    }
}

/* Tablets: filters always open, two rows of three
     Job name     Part number   Customer
     Material     Finish        Refresh [xls] */
@media (min-width: 768px) {
    #searchAccordion .accordion-header[b-tceydhizyh] {
        display: none;
    }

    #searchFilters.collapse[b-tceydhizyh] {
        display: block; /* beats Bootstrap's .collapse:not(.show) */
    }

    #searchAccordion .accordion-body[b-tceydhizyh] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 0.75rem;
        padding: 0.75rem;
    }
}

.job-cards[b-tceydhizyh] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #212529;
}

.job-card[b-tceydhizyh] {
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    line-height: 1.25;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.jc-top[b-tceydhizyh] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.jc-job[b-tceydhizyh] {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 0.85rem;
}

.jc-customer[b-tceydhizyh] {
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: right;
}

.jc-mid[b-tceydhizyh], .jc-bot[b-tceydhizyh] {
    display: flex;
    gap: 0.25rem;
    font-size: 0.7rem;
}

.jc-mid[b-tceydhizyh] {
    flex-wrap: wrap;
    align-items: center;
}

.jc-bot[b-tceydhizyh] {
    justify-content: space-between;
    align-items: baseline;
}

.jc-flow[b-tceydhizyh] {
    min-width: 0; /* wraps before it pushes the meta off the card */
}

.jc-meta[b-tceydhizyh] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.25rem;
    opacity: 0.85;
}

.jc-sep[b-tceydhizyh] {
    opacity: 0.5;
}

.jc-last[b-tceydhizyh] {
    opacity: 0.7;
}

/* Arrow in front of every work center that has one before it, so an
   empty Last/Curr/Next never leaves a dangling arrow. The spans sit
   back to back in the markup, so the arrow carries the spacing: a
   no-break space before it (stays with the previous step) and a normal
   space after it, so a long chain wraps between steps instead of
   splitting a word ("INSPE / CT") */
.jc-flow > :not(:empty) ~ :not(:empty)[b-tceydhizyh]::before {
    content: "\a0\2192\20";
    font-weight: 400;
    opacity: 0.7;
}

/* Small phones: no room for the previous step - Curr and Next only */
@media (max-width: 575.98px) {
    .jc-last[b-tceydhizyh] {
        display: none;
    }

    .jc-flow > :not(:empty) ~ :not(:empty)[b-tceydhizyh]::before {
        content: none;
    }

    .jc-flow > :not(.jc-last):not(:empty) ~ :not(:empty)[b-tceydhizyh]::before {
        content: "\a0\2192\20";
    }
}

/* Tablets: same card, bigger type */
@media (min-width: 768px) {
    .job-cards[b-tceydhizyh] {
        gap: 4px;
    }

    .job-card[b-tceydhizyh] {
        padding: 0.45rem 0.75rem;
        line-height: 1.3;
    }

    .jc-job[b-tceydhizyh]      { font-size: 1.1rem; }
    .jc-customer[b-tceydhizyh] { font-size: 1rem; }

    .jc-mid[b-tceydhizyh], .jc-bot[b-tceydhizyh] {
        gap: 0.35rem;
        font-size: 0.95rem;
    }
}

/* 992-1799: two lines. Job becomes a fixed left column, so the part and
   work-center lines start at the same x on every card
     Job  Part · Material · Finish · ×Qty             Customer
          Last → Curr → Next                       SR · Date      */
@media (min-width: 992px) {
    .job-card[b-tceydhizyh] {
        --jc-job-w: 19ch; /* 15-char job at the bigger bold size */
        display: grid;
        grid-template-columns: var(--jc-job-w) minmax(0, 1fr) fit-content(40%);
        grid-template-areas:
            "job mid customer"
            "job bot bot";
        column-gap: 1rem;
        align-items: baseline;
    }

    .jc-top[b-tceydhizyh] {
        display: contents;
    }

    .jc-job[b-tceydhizyh]      { grid-area: job; }
    .jc-mid[b-tceydhizyh]      { grid-area: mid; }
    .jc-customer[b-tceydhizyh] { grid-area: customer; }
    .jc-bot[b-tceydhizyh]      { grid-area: bot; }
}

/* 1800+: one line, each field in its own column so they line up
   down the list like a table
     Job  Part · Material · Finish · ×Qty  Customer  Last → Curr → Next  SR · Date */
@media (min-width: 1800px) {
    .job-card[b-tceydhizyh] {
        --jc-meta-w: 15ch;
        grid-template-columns: var(--jc-job-w) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) var(--jc-meta-w);
        grid-template-areas: "job mid customer flow meta";
    }

    .with-price .job-card[b-tceydhizyh] {
        --jc-meta-w: 24ch; /* $123,457 · SR · date */
    }

    .jc-bot[b-tceydhizyh] {
        display: contents;
    }

    .jc-customer[b-tceydhizyh] { text-align: left; }
    .jc-flow[b-tceydhizyh]     { grid-area: flow; }
    .jc-meta[b-tceydhizyh]     { grid-area: meta; justify-content: flex-end; }
}

/* ===== BOARD TABS (signed-in users) =====
   Divider tabs on the right edge of the table. The active one is pulled
   out and takes the header color; the rest sit tucked behind the table. */

.board-layout[b-tceydhizyh] {
    display: flex;
    align-items: flex-start; /* keeps the rail short so sticky works */
}

    .board-layout > .table-mask-container[b-tceydhizyh] {
        flex: 1 1 auto;
        min-width: 0;
    }

.board-tabs[b-tceydhizyh] {
    position: sticky;
    top: 0;
    flex: 0 0 auto;
    flex-direction: column; /* display:flex comes from d-flex */
    gap: 3px;
    padding: 0.5rem 6px 0.25rem 0; /* right padding = room for the pulled-out tab */
    max-height: 100vh;
    overflow-y: auto;
    scrollbar-width: none;
}

.board-tab[b-tceydhizyh] {
    writing-mode: vertical-rl;
    padding: 0.8rem 0.35rem;
    border: 1px solid #adb5bd;
    border-left: 0;
    border-radius: 0 0.4rem 0.4rem 0;
    background: #e9ecef;
    color: #495057;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 5px 0 5px -4px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s, background-color 0.15s;
}

    .board-tab:hover[b-tceydhizyh] {
        background: #dee2e6;
        color: #212529;
        transform: translateX(2px);
    }

    .board-tab.active[b-tceydhizyh] {
        background: var(--FRONTENDCOLOR, #0d6efd);
        border-color: var(--FRONTENDCOLOR, #0d6efd);
        color: white;
        box-shadow: none;
        transform: translateX(4px);
        cursor: default;
    }

    .board-tab:focus-visible[b-tceydhizyh] {
        outline: 2px solid #ffc107;
        outline-offset: 1px;
    }

/* Card view: the same dividers laid along the top of the filters. The
   active one is pulled up and takes the header color. They wrap to a
   second row on narrow phones rather than scroll, so every board stays
   in sight. */
.board-tabs-top[b-tceydhizyh] {
    gap: 3px;
    padding: 4px 0.25rem 0; /* top padding = room for the pulled-up tab */
}

.board-tab-top[b-tceydhizyh] {
    padding: 0.35rem 0.7rem;
    border: 1px solid #adb5bd;
    border-bottom: 0;
    border-radius: 0.4rem 0.4rem 0 0;
    background: #e9ecef;
    color: #495057;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 -5px 5px -4px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s, background-color 0.15s;
}

    .board-tab-top:hover[b-tceydhizyh] {
        background: #dee2e6;
        color: #212529;
        transform: translateY(-2px);
    }

    .board-tab-top.active[b-tceydhizyh] {
        background: var(--FRONTENDCOLOR, #0d6efd);
        border-color: var(--FRONTENDCOLOR, #0d6efd);
        color: white;
        box-shadow: none;
        transform: translateY(-4px);
        cursor: default;
    }

    .board-tab-top:focus-visible[b-tceydhizyh] {
        outline: 2px solid #ffc107;
        outline-offset: 1px;
    }

/* Phones: tabs share the full width, so when they wrap both rows are
   filled edge to edge instead of leaving a ragged second row */
@media (max-width: 575.98px) {
    .board-tab-top[b-tceydhizyh] {
        flex: 1 1 auto;
        padding: 0.3rem 0.4rem;
        font-size: 0.75rem;
    }
}


/* ==================================================================
   ==================================================================
   8-BIT SKIN  -  active only under .skin-8bit
   ==================================================================
   ================================================================== */

/* ------------------------------------------------------------------
   1. PALETTE  (NES 2C02-ish hardware colors)
   Declared on the two component roots so the vars inherit down.
   :root does NOT work in Blazor scoped CSS - it gets rewritten to
   :root[b-xxxxx] and never matches.
   ------------------------------------------------------------------ */



.skin-8bit .table-mask-container[b-tceydhizyh],
.skin-8bit .mobile-accordion[b-tceydhizyh],
.skin-8bit .board-tabs[b-tceydhizyh] {
    --px-void: #0d0b1a; /* cabinet black          */
    --px-panel: #241f3d; /* header / chrome navy   */
    --px-panel-2: #17142c; /* zebra stripe           */
    --px-line: #4a3f7a; /* rules & dividers       */
    --px-white: #fcfcfc;
    --px-gray: #9c9cb4;
    --px-cyan: #3cbcfc; /* labels, selection      */
    --px-gold: #fcd800; /* focus, refresh, totals */
    --px-red: #f83800; /* late / hot             */
    --px-green: #00d800; /* done / clear           */
    --px-pink: #f878f8; /* accent                 */
    --px-orange: #fca044;
    --px: 4px; /* the pixel unit         */
    --px-display: "Press Start 2P", "Courier New", monospace;
    --px-body: "VT323", "Press Start 2P", "Courier New", monospace;
    font-family: var(--px-body);
}


/* ------------------------------------------------------------------
   2. TABLE SHELL
   border-collapse:separate keeps the sticky header's rules from being
   eaten by the browser; all "borders" are box-shadows on a 4px grid.
   ------------------------------------------------------------------ */



.skin-8bit .table-mask-container[b-tceydhizyh] {
    background: var(--px-void);
    box-shadow: 0 0 0 var(--px) var(--px-line), 0 0 0 calc(var(--px) * 2) var(--px-void);
    padding: var(--px);
}

.skin-8bit table[b-tceydhizyh] {
    color: var(--px-white);
    table-layout: fixed;
    width: 100%;
    background: var(--px-void);
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--px-body);
    font-size: 1.5rem; /* VT323 runs small & narrow */
    line-height: 1.1;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
}

/* Job and the Qty total are set in Press Start 2P, much wider than the
   table's VT323, so those two get fixed widths; the rest keep the
   default percentages and share what is left. */

.skin-8bit col.col-job[b-tceydhizyh]  { width: calc(11 * 0.8rem + 32px); } /* 11-char job + 20px cursor gutter; longer wrap at the hyphen */
.skin-8bit col.col-qty[b-tceydhizyh]  { width: calc(4 * 1rem + 16px); }    /* 4-digit total */

/* VT323 is monospace, so these short ones are exact in ch (which also
   follows the smaller table font below 1200px) */
.skin-8bit col.col-sr[b-tceydhizyh]   { width: calc(4ch + 16px); }   /* K.C. */
.skin-8bit col.col-date[b-tceydhizyh] { width: calc(6ch + 16px); }   /* 30 Sep */



/* ------------------------------------------------------------------
   3. HEADER ROWS
   ------------------------------------------------------------------ */



.skin-8bit thead[b-tceydhizyh] {
    position: sticky;
    top: 0;
    z-index: 3;
}

    /* Row 1 - column labels, native 8px arcade grid */


    .skin-8bit thead tr:first-child th[b-tceydhizyh] {
        background: var(--px-panel);
        color: var(--px-gold);
        font-family: var(--px-display);
        font-size: 0.8rem;
        font-weight: 400;
        line-height: 1.7;
        letter-spacing: 0;
        text-align: left;
        text-transform: uppercase;
        padding: 10px 6px;
        vertical-align: bottom;
        white-space: normal;
        word-break: break-word;
        text-shadow: 2px 2px 0 #000;
        box-shadow: inset 0 -2px 0 var(--px-line);
    }

        /* the running totals baked into the labels read as "score" */


        .skin-8bit thead tr:first-child th abbr[b-tceydhizyh] {
            border-bottom: 0;
            text-decoration: underline dotted var(--px-cyan);
            text-decoration-thickness: 2px;
            text-underline-offset: 5px;
            cursor: help;
        }

    /* Row 2 - filter controls */


    .skin-8bit thead tr:nth-child(2) th[b-tceydhizyh] {
        background: var(--px-panel-2);
        padding: 8px 6px;
        vertical-align: middle;
        box-shadow: inset 0 calc(var(--px) * -1) 0 var(--px-cyan);
    }

        /* the Qty total cell */


        .skin-8bit thead tr:nth-child(2) th:nth-child(5)[b-tceydhizyh] {
            font-family: var(--px-display);
            font-size: 1rem;
            color: var(--px-green);
            text-align: center;
        }


/* ------------------------------------------------------------------
   4. BODY CELLS
   ------------------------------------------------------------------ */ /* Cells carry NO background-color. Whatever @job.Color paints on the
   <tr> shows through; the gradient is a fixed scrim that knocks the
   site's light pastels down to a CRT-dark tint of the same hue, so
   white text stays readable without hard-coding any status class. */



.skin-8bit tbody td[b-tceydhizyh] {
    padding: 5px 6px;
    background-color: transparent;
    background-image: linear-gradient(rgba(13, 11, 26, 0.55), rgba(13, 11, 26, 0.55));
    box-shadow: inset 0 -2px 0 rgba(74, 63, 122, 0.55);
}

/* Fallback tint for rows with no status class. Lives on the container,
   not on tr/td, so it can never outrank a status class. */


.skin-8bit tbody[b-tceydhizyh] {
    background: var(--px-void);
}

    /* Job number gets the arcade face - it's the row's identity */


    .skin-8bit tbody td:first-child[b-tceydhizyh] {
        font-family: var(--px-display);
        font-size: 0.8rem;
        position: relative;
        padding-left: 20px; /* reserved for the selection cursor */
    }

/* preserve the original indent reset */


.skin-8bit td:nth-child(5)[b-tceydhizyh],
.skin-8bit td:nth-child(10)[b-tceydhizyh] {
    text-indent: 0;
}


/* ------------------------------------------------------------------
   5. SIGNATURE: the NES menu cursor
   The first block cancels the default skin's red dashed outline +
   scale(1.01) hover so the two treatments don't stack.
   Hovering a row selects it like a stage-select screen - the palette
   inverts and a blinking arrow drops into the reserved gutter.
   ------------------------------------------------------------------ */



.skin-8bit .job-cell[b-tceydhizyh] {
    cursor: pointer;
    transition: none;
}

    .skin-8bit .job-cell:hover[b-tceydhizyh] {
        outline: 0;
        text-shadow: none;
        transform: none;
    }

        .skin-8bit .job-cell:hover td[b-tceydhizyh] {
            background: var(--px-cyan);
            color: var(--px-void);
            box-shadow: inset 0 -2px 0 var(--px-void);
        }

            .skin-8bit .job-cell:hover td:first-child[b-tceydhizyh] {
                color: var(--px-void);
            }

                .skin-8bit .job-cell:hover td:first-child[b-tceydhizyh]::before {
                    content: "\25BA"; /* ► */
                    position: absolute;
                    left: 4px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-family: var(--px-body);
                    font-size: 1rem;
                    color: var(--px-void);
                    animation: px-blink-b-tceydhizyh 0.6s steps(1, end) infinite;
                }

@keyframes px-blink-b-tceydhizyh {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}


/* ------------------------------------------------------------------
   6. ROW STATUS COLORS
   Deliberately empty. The scrim above lets the existing @job.Color /
   @job.StatusClass backgrounds through automatically. Send me the real
   class names and this is where the vivid NES mapping goes - set
   background-color on `tbody tr.<name> td` to punch through the scrim.
   ------------------------------------------------------------------ */



.skin-8bit .job-cell:hover td[b-tceydhizyh] {
    background-color: var(--px-cyan) !important;
    background-image: none !important;
    color: var(--px-void) !important;
}


/* ------------------------------------------------------------------
   7. FORM CONTROLS - chunky pixel borders, notched corners
   ------------------------------------------------------------------ */



.skin-8bit input[type="search"].form-control[b-tceydhizyh],
.skin-8bit select.form-select[b-tceydhizyh] {
    background: var(--px-void);
    color: var(--px-white);
    font-family: var(--px-body);
    font-size: 1.5rem;
    border: 0;
    border-radius: 0;
    padding: 6px 8px;
    margin: var(--px);
    box-shadow: 0 calc(var(--px) * -1) 0 0 var(--px-line), 0 var(--px) 0 0 var(--px-line), calc(var(--px) * -1) 0 0 0 var(--px-line), var(--px) 0 0 0 var(--px-line);
    appearance: none;
    -webkit-appearance: none;
}

    .skin-8bit input[type="search"].form-control[b-tceydhizyh]::placeholder {
        color: var(--px-gray);
        opacity: 1;
    }

    .skin-8bit input[type="search"].form-control:focus[b-tceydhizyh],
    .skin-8bit select.form-select:focus[b-tceydhizyh] {
        outline: 0;
        background: var(--px-panel);
        color: var(--px-gold);
        box-shadow: 0 calc(var(--px) * -1) 0 0 var(--px-gold), 0 var(--px) 0 0 var(--px-gold), calc(var(--px) * -1) 0 0 0 var(--px-gold), var(--px) 0 0 0 var(--px-gold);
    }

    .skin-8bit select.form-select option[b-tceydhizyh] {
        background: var(--px-void);
        color: var(--px-white);
    }


    /* ------------------------------------------------------------------
   8. ACTIVE FILTER = marching pixels
   Same idea as the original search-border-dance, rebuilt on a 4px
   grid with steps() so the blocks jump instead of slide.
   ------------------------------------------------------------------ */



    .skin-8bit input[type="search"]:not(:placeholder-shown)[b-tceydhizyh],
    .skin-8bit select.form-select:has(option[value]:not([value=""]):checked)[b-tceydhizyh] {
        color: var(--px-gold);
        background-color: var(--px-panel);
        background-image: linear-gradient(90deg, var(--px-gold) 50%, transparent 50%), linear-gradient(90deg, var(--px-gold) 50%, transparent 50%), linear-gradient(0deg, var(--px-gold) 50%, transparent 50%), linear-gradient(0deg, var(--px-gold) 50%, transparent 50%);
        background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
        background-size: calc(var(--px) * 2) var(--px), calc(var(--px) * 2) var(--px), var(--px) calc(var(--px) * 2), var(--px) calc(var(--px) * 2);
        background-position: 0 0, 0 100%, 0 0, 100% 0;
        animation: px-march-b-tceydhizyh 1.6s infinite steps(8);
    }

@keyframes px-march-b-tceydhizyh {
    to {
        background-position: 64px 0, -64px 100%, 0 -64px, 100% 64px;
    }
}


/* ------------------------------------------------------------------
   9. BUTTONS - hard shadow, 4px travel on press
   ------------------------------------------------------------------ */



.skin-8bit .btn[b-tceydhizyh] {
    /* inline-flex + a fixed height is what keeps the text button and the
       icon button on the same line - as inline-block they aligned on the
       text baseline and the 25px <img> pushed one of them out. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    vertical-align: middle;
    height: 36px;
    padding: 0 12px;
    margin: 0 8px 4px 0;
    font-family: var(--px-display);
    font-size: 0.7rem;
    line-height: 1;
    border: 0;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0;
    box-shadow: var(--px) var(--px) 0 0 #000;
    transition: none;
}

    /* beats the width="25" height="25" attributes on the Excel icon */


    .skin-8bit .btn img[b-tceydhizyh] {
        display: block;
        width: 20px;
        height: 20px;
    }

.skin-8bit thead tr:nth-child(2) th:last-child[b-tceydhizyh] {
    white-space: nowrap;
}

.skin-8bit .btn:active:not(:disabled)[b-tceydhizyh] {
    transform: translate(var(--px), var(--px));
    box-shadow: 0 0 0 0 #000;
}

.skin-8bit .btn:focus-visible[b-tceydhizyh] {
    outline: var(--px) solid var(--px-cyan);
    outline-offset: var(--px);
    box-shadow: var(--px) var(--px) 0 0 #000;
}

.skin-8bit .btn-warning[b-tceydhizyh] {
    background: var(--px-gold);
    color: #000;
}

    .skin-8bit .btn-warning:hover:not(:disabled)[b-tceydhizyh] {
        background: var(--px-orange);
        color: #000;
    }

.skin-8bit .btn-success[b-tceydhizyh],
.skin-8bit .btn-outline-success[b-tceydhizyh] {
    background: var(--px-green);
    color: #000;
}

    .skin-8bit .btn-success:hover[b-tceydhizyh],
    .skin-8bit .btn-outline-success:hover[b-tceydhizyh] {
        background: var(--px-cyan);
        color: #000;
    }

.skin-8bit .btn-light[b-tceydhizyh] {
    background: var(--px-cyan);
    color: #000;
}

    .skin-8bit .btn-light:hover[b-tceydhizyh] {
        background: var(--px-white);
        color: #000;
    }

.skin-8bit .btn:disabled[b-tceydhizyh] {
    background: var(--px-gray);
    color: var(--px-panel);
    box-shadow: var(--px) var(--px) 0 0 #000;
    opacity: 1;
}

.skin-8bit .spinner-border[b-tceydhizyh] {
    width: 14px;
    height: 14px;
    border-width: 2px;
    border-radius: 0;
    border-style: dashed;
    animation-timing-function: steps(8);
}

/* keep the Excel icon crunchy instead of smoothed */


.skin-8bit img[b-tceydhizyh] {
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}


/* ------------------------------------------------------------------
   10. FINISH SWATCHES - hard square + highlight pixel
   ------------------------------------------------------------------ */



.skin-8bit .finish-swatch[b-tceydhizyh] {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 0;
    border-radius: 0;
    vertical-align: -0.1em;
    box-shadow: 0 0 0 2px #000, inset 2px 2px 0 rgba(255,255,255,0.45), inset -2px -2px 0 rgba(0,0,0,0.45);
}

/* hard-stop rainbow instead of a smooth conic sweep */


.skin-8bit .finish-swatch--custom[b-tceydhizyh] {
    background: conic-gradient( var(--px-red) 0deg 45deg, var(--px-orange) 45deg 90deg, var(--px-gold) 90deg 135deg, var(--px-green) 135deg 180deg, #00e8d8 180deg 225deg, var(--px-cyan) 225deg 270deg, #7c3cfc 270deg 315deg, var(--px-pink) 315deg 360deg );
}


/* ==================================================================
   11. CARD VIEW - job cards as inventory items
   Paint only. Layout comes from the default card rules, so nothing
   here sets display/flex/grid.
   ================================================================== */



.skin-8bit .mobile-accordion[b-tceydhizyh] {
    padding: var(--px);
    background: var(--px-void);
}

.skin-8bit #searchAccordion .accordion-item[b-tceydhizyh],
.skin-8bit #searchAccordion .accordion-button[b-tceydhizyh],
.skin-8bit #searchAccordion .accordion-button.collapsed[b-tceydhizyh] {
    background-color: var(--px-panel) !important;
    color: var(--px-gold) !important;
    font-family: var(--px-display);
    font-size: 8px;
    line-height: 1.8;
    text-transform: uppercase;
    border: 0;
    border-radius: 0 !important;
    box-shadow: var(--px) var(--px) 0 0 #000;
}

    .skin-8bit #searchAccordion .accordion-button:not(.collapsed)[b-tceydhizyh] {
        background-color: var(--px-cyan) !important;
        color: var(--px-void) !important;
    }

    .skin-8bit #searchAccordion .accordion-button[b-tceydhizyh]::after {
        filter: brightness(0) invert(1);
        transition: none;
    }

.skin-8bit #searchAccordion .accordion-body[b-tceydhizyh] {
    background: var(--px-panel-2);
    color: var(--px-white);
}

/* "Material" / "Finish" tags in front of the dropdowns */
.skin-8bit #searchAccordion .input-group-text[b-tceydhizyh] {
    margin: var(--px) 0 var(--px) var(--px);
    padding: 0 10px;
    background: var(--px-panel);
    color: var(--px-cyan);
    font-family: var(--px-display);
    font-size: 8px;
    text-transform: uppercase;
    border: 0;
    border-radius: 0;
    box-shadow: 0 calc(var(--px) * -1) 0 0 var(--px-line), 0 var(--px) 0 0 var(--px-line), calc(var(--px) * -1) 0 0 0 var(--px-line), var(--px) 0 0 0 var(--px-line);
}

    .skin-8bit #searchAccordion .input-group > .form-select[b-tceydhizyh] {
        margin-left: calc(var(--px) * 2); /* clear the tag's pixel border */
    }

.skin-8bit .accordion-item[b-tceydhizyh] {
    margin-bottom: 8px;
    border-radius: 0 !important;
    border: 0;
    overflow: visible;
}

.skin-8bit .job-cards[b-tceydhizyh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--px-white);
    font-family: var(--px-body);
    background: var(--px-void); /* fallback tint, see tbody note */
}

.skin-8bit .job-card[b-tceydhizyh] {
    position: relative;
    padding: 8px 10px 8px 20px;
    border-radius: 0;
    line-height: 1.2;
    cursor: pointer;
    background-color: transparent; /* let @job.Color through */
    background-image: linear-gradient(rgba(13, 11, 26, 0.5), rgba(13, 11, 26, 0.5));
    box-shadow: inset 0 0 0 2px var(--px-line), var(--px) var(--px) 0 0 #000;
}

    .skin-8bit .job-card:active[b-tceydhizyh] {
        transform: translate(var(--px), var(--px));
        box-shadow: inset 0 0 0 2px var(--px-cyan), 0 0 0 0 #000;
        background: var(--px-panel);
    }

        .skin-8bit .job-card:active[b-tceydhizyh]::before {
            content: "\25BA";
            position: absolute;
            left: 5px;
            top: 8px;
            color: var(--px-cyan);
        }

    .skin-8bit .job-card:hover[b-tceydhizyh]::before {
        content: "\25BA";
        position: absolute;
        left: 5px;
        top: 8px;
        color: var(--px-cyan);
        animation: px-blink-b-tceydhizyh 0.6s steps(1, end) infinite;
    }

.skin-8bit .jc-top[b-tceydhizyh] {
    gap: 8px;
    margin-bottom: 4px;
}

.skin-8bit .jc-job[b-tceydhizyh] {
    font-family: var(--px-display);
    font-size: 8px;
    font-weight: 400;
    color: var(--px-cyan);
}

.skin-8bit .jc-customer[b-tceydhizyh] {
    font-size: 0.95rem;
    color: var(--px-gold);
}

.skin-8bit .jc-mid[b-tceydhizyh],
.skin-8bit .jc-bot[b-tceydhizyh] {
    font-size: 0.95rem;
    gap: 4px;
}

.skin-8bit .jc-bot[b-tceydhizyh] {
    color: var(--px-gray);
}

.skin-8bit .jc-flow[b-tceydhizyh] {
    color: var(--px-white);
}

    .skin-8bit .jc-flow b[b-tceydhizyh] {
        color: var(--px-green);
        font-weight: 400;
    }

.skin-8bit .jc-meta[b-tceydhizyh] {
    opacity: 1;
    color: var(--px-gray);
}

.skin-8bit .jc-qty[b-tceydhizyh] {
    color: var(--px-gold);
}

.skin-8bit .jc-sep[b-tceydhizyh] {
    color: var(--px-line);
    opacity: 1;
}

.skin-8bit .jc-flow > :not(:empty) ~ :not(:empty)[b-tceydhizyh]::before {
    color: var(--px-pink);
    opacity: 1;
}

.skin-8bit .jc-last[b-tceydhizyh] {
    color: var(--px-gray);
    opacity: 1;
}

/* 768+: bigger type. Set on the card itself so the ch-based columns
   of the wide layouts measure VT323 at the size it is shown */
@media (min-width: 768px) {

    .skin-8bit .job-card[b-tceydhizyh] {
        --jc-job-w: calc(15 * 0.7rem + 8px); /* job is Press Start 2P */
        font-size: 1.3rem;
    }

    .skin-8bit .jc-job[b-tceydhizyh] {
        font-size: 0.7rem;
    }

    .skin-8bit .jc-customer[b-tceydhizyh],
    .skin-8bit .jc-mid[b-tceydhizyh],
    .skin-8bit .jc-bot[b-tceydhizyh] {
        font-size: inherit;
    }
}


/* ==================================================================
   12. CRT OVERLAY
   Fixed so it doesn't scroll with the table. z-index 1040 keeps it
   under Bootstrap's modal (1055) - bump to 2000 if you want the
   scanlines over the modals too.
   ================================================================== */



.skin-8bit .table-mask-container[b-tceydhizyh]::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1040;
    background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 4px );
    animation: px-flicker-b-tceydhizyh 8s steps(1) infinite;
}

@keyframes px-flicker-b-tceydhizyh {
    0%, 96%, 100% {
        opacity: 1;
    }

    97% {
        opacity: 0.55;
    }

    98% {
        opacity: 1;
    }

    99% {
        opacity: 0.7;
    }
}


/* ------------------------------------------------------------------
   13. QUALITY FLOOR
   ------------------------------------------------------------------ */



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

    /* Only the full-viewport brightness change gets suppressed - that's the
       one that can actually cause trouble. The marching border, the cursor
       blink and the 4px button travel are small, local, and either carry
       information or answer a direct click, so they stay. */

    .skin-8bit .table-mask-container[b-tceydhizyh]::after {
        animation: none;
    }
}

.skin-8bit tbody tr:focus-visible[b-tceydhizyh],
.skin-8bit .job-card:focus-visible[b-tceydhizyh] {
    outline: var(--px) solid var(--px-gold);
    outline-offset: calc(var(--px) * -1);
}


/* ------------------------------------------------------------------
   14. BOARD TABS - level select
   Palette vars are declared on .board-tabs in section 1, since the
   rail is a sibling of .table-mask-container and doesn't inherit them.
   ------------------------------------------------------------------ */

.skin-8bit .board-tabs[b-tceydhizyh] {
    gap: calc(var(--px) * 2);
    margin-left: calc(var(--px) * 3); /* clear the table's 8px frame */
    padding: var(--px) calc(var(--px) * 2) var(--px) 0; /* room for the hard shadow */
}

.skin-8bit .board-tab[b-tceydhizyh] {
    font-family: var(--px-display);
    font-size: 0.6rem;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    padding: 12px 8px;
    background: var(--px-panel);
    color: var(--px-gray);
    border: 0;
    border-radius: 0;
    box-shadow: var(--px) var(--px) 0 0 #000;
    transition: none;
}

    .skin-8bit .board-tab:hover[b-tceydhizyh] {
        background: var(--px-panel);
        color: var(--px-white);
        transform: none;
    }

    .skin-8bit .board-tab.active[b-tceydhizyh] {
        background: var(--px-gold);
        color: #000;
        transform: none;
    }

    .skin-8bit .board-tab:focus-visible[b-tceydhizyh] {
        outline: var(--px) solid var(--px-cyan);
        outline-offset: 2px;
    }

/* card view strip */
.skin-8bit .board-tabs-top[b-tceydhizyh] {
    gap: calc(var(--px) * 2);
    padding: 0 0 calc(var(--px) * 3);
}

.skin-8bit .board-tab-top[b-tceydhizyh] {
    font-family: var(--px-display);
    font-size: 0.6rem;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    padding: 10px 8px;
    background: var(--px-panel);
    color: var(--px-gray);
    border: 0;
    border-radius: 0;
    box-shadow: var(--px) var(--px) 0 0 #000;
    transition: none;
}

    .skin-8bit .board-tab-top:hover[b-tceydhizyh] {
        color: var(--px-white);
        transform: none;
    }

    .skin-8bit .board-tab-top.active[b-tceydhizyh] {
        background: var(--px-gold);
        color: #000;
        transform: none;
    }

    .skin-8bit .board-tab-top:focus-visible[b-tceydhizyh] {
        outline: var(--px) solid var(--px-cyan);
        outline-offset: 2px;
    }

/* ==================================================================
   FONTS - add to App.razor <head>, above the app's own stylesheet.

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">

   Self-hosted (safer behind the /ag/ virtual directory):
   @font-face { font-family:"Press Start 2P"; src:url("/ag/fonts/PressStart2P-Regular.woff2") format("woff2"); font-display:swap; }
   @font-face { font-family:"VT323"; src:url("/ag/fonts/VT323-Regular.woff2") format("woff2"); font-display:swap; }
   ================================================================== */


/* ==================================================================
   15. NARROW TABLE - below 1200px, only when picked with the view
   switch. Last in the file so it beats the size rules above. One size
   down across the board so words still fit their columns; the job
   number wraps at its hyphen here instead of getting a wide column.
   ================================================================== */

@media (max-width: 1199.98px) {
    .skin-8bit table[b-tceydhizyh] {
        font-size: 1.15rem;
    }

    .skin-8bit col.col-job[b-tceydhizyh] { width: calc(7 * 0.5rem + 28px); } /* "858202-" */
    .skin-8bit col.col-qty[b-tceydhizyh] { width: calc(4 * 0.75rem + 12px); }

    .skin-8bit tbody td:first-child[b-tceydhizyh] {
        font-size: 0.5rem; /* Press Start 2P's native 8px */
    }

    .skin-8bit thead tr:nth-child(2) th:nth-child(5)[b-tceydhizyh] {
        font-size: 0.75rem;
    }

    .skin-8bit thead tr:first-child th[b-tceydhizyh] {
        font-size: 0.5rem;
    }
}

@media (max-width: 991.98px) {
    .skin-8bit table[b-tceydhizyh] {
        font-size: 1rem;
    }
}
/* /Components/Pages/ArcCalculator.razor.rz.scp.css */
.bend-calculator-container[b-q2xhmziecz] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;

}

.bend-calculator-container h3[b-q2xhmziecz] {

    margin-bottom: 1rem;
    border-bottom: 0.1875rem solid #3498db;
    padding-bottom: 0.5rem;
}

/* Base layout - mobile first */
.calculator-layout[b-q2xhmziecz] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

/* Left column: Inputs */
.input-column[b-q2xhmziecz] {
    padding: 1.25rem;
    border-radius: 0.375rem;
    border: 0.0625rem solid #dee2e6;
}

    .input-column h4[b-q2xhmziecz] {
        margin-bottom: 1rem;
        font-size: 1rem;
        border-bottom: 0.125rem solid #3498db;
        padding-bottom: 0.5rem;
    }

.input-group[b-q2xhmziecz] {
    margin-bottom: 1rem;
}

    .input-group label[b-q2xhmziecz] {
        display: block;
        font-weight: 500;
        margin-bottom: 0.4rem;
        font-size: 0.9rem;
    }

.input-with-unit[b-q2xhmziecz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-control[b-q2xhmziecz] {
    flex: 1;
    padding: 0.5rem;
    border: 0.0625rem solid #ced4da;
    border-radius: 0.25rem;
    font-size: 0.95rem;
}

.input-with-unit .unit[b-q2xhmziecz] {
    color: #6c757d;
    font-weight: 500;
    min-width: 1.5rem;
    font-size: 0.9rem;
}

/* Center column: SVG */
.svg-column[b-q2xhmziecz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.svg-container[b-q2xhmziecz] {
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 0.0625rem solid #dee2e6;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .svg-container svg[b-q2xhmziecz] {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        border: 0.0625rem solid #dee2e6;
        border-radius: 0.25rem;
        background: white;
    }

/* Right column: Results */
.results-column[b-q2xhmziecz] {
    padding: 1.25rem;
    border-radius: 0.375rem;
    border: 0.0625rem solid #dee2e6;
}

    .results-column h4[b-q2xhmziecz] {
        margin-bottom: 1rem;
        font-size: 1rem;
        border-bottom: 0.125rem solid #3498db;
        padding-bottom: 0.5rem;
    }

.result-item[b-q2xhmziecz] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem;
    margin-bottom: 0.75rem;
    border-radius: 0.25rem;
    border-left: 0.25rem solid #3498db;
}

    .result-item:last-child[b-q2xhmziecz] {
        margin-bottom: 0;
    }

    .result-item.highlight-angle[b-q2xhmziecz] {
        border-left: 0.25rem solid #3498db;
        box-shadow: 0 0.125rem 0.25rem rgba(52, 152, 219, 0.2);
    }

        .result-item.highlight-angle .result-label[b-q2xhmziecz] {
            font-weight: 600;
        }

        .result-item.highlight-angle .result-value[b-q2xhmziecz] {
            font-weight: 700;
        }

.result-label[b-q2xhmziecz] {
    font-weight: 500;
    font-size: 0.8rem;
}

.result-value[b-q2xhmziecz] {
    font-weight: 600;
    font-size: 1rem;
}

.result-metric[b-q2xhmziecz] {
    font-size: 0.75rem;
}

/* Formulas section */
.formulas-section[b-q2xhmziecz] {
    margin-top: 1.5rem;
    padding: 0.8rem;
    background: #e7f3ff;
    border-radius: 0.375rem;
    border-left: 0.25rem solid #3498db;
}

    .formulas-section h4[b-q2xhmziecz] {
        color: #2c3e50;
        margin-bottom: 0.8rem;
        font-size: 0.95rem;
    }

    .formulas-section ul[b-q2xhmziecz] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .formulas-section li[b-q2xhmziecz] {
        padding: 0.5rem 0;
        margin-bottom: 0.4rem;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .formulas-section .formula-label[b-q2xhmziecz] {
        color: #495057;
        font-weight: 500;
        font-size: 0.8rem;
    }

    .formulas-section .formula-expression[b-q2xhmziecz] {
        color: #2c3e50;
        font-family: 'Courier New', monospace;
        font-size: 0.8rem;
        font-weight: 600;
    }

/* Responsive design */

/* Mobile screens (< 768px) - single column, SVG takes 60% of viewport */
@media (max-width: 47.9375rem) {
    .calculator-layout[b-q2xhmziecz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .svg-column[b-q2xhmziecz] {
        grid-column: 1;
        max-height: clamp(200px, 60vh, 400px);
    }

    .svg-container[b-q2xhmziecz] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .input-column[b-q2xhmziecz],
    .results-column[b-q2xhmziecz] {
        grid-column: 1;
    }
}

/* Tablet screens (768px to 1199px) - two column */
@media (min-width: 48rem) and (max-width: 74.9375rem) {
    .calculator-layout[b-q2xhmziecz] {
        grid-template-columns: 1fr 1.2fr;
        gap: 1.2rem;
    }

    .svg-column[b-q2xhmziecz] {
        grid-column: 2;
        grid-row: 1 / 3;
        position: sticky;
        top: 1rem;
        max-height: clamp(300px, calc(100vh - 8.5rem), calc(100vh - 6rem));
    }

    .svg-container[b-q2xhmziecz] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .input-column[b-q2xhmziecz] {
        grid-column: 1;
    }

    .results-column[b-q2xhmziecz] {
        grid-column: 1;
    }
}

/* Medium screens (1200px to 1400px) - three column, moderate SVG */
@media (min-width: 75rem) and (max-width: 87.4375rem) {
    .calculator-layout[b-q2xhmziecz] {
        grid-template-columns: 0.9fr 1.5fr 0.9fr;
        gap: 1.5rem;
    }

    .input-column[b-q2xhmziecz] {
        grid-column: 1;
    }

    .svg-column[b-q2xhmziecz] {
        grid-column: 2;
        position: sticky;
        top: 1rem;
        max-height: clamp(350px, calc(100vh - 9rem), calc(100vh - 7rem));
    }

    .svg-container[b-q2xhmziecz] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .results-column[b-q2xhmziecz] {
        grid-column: 3;
    }
}

/* Large screens (1400px to 1799px) - three column, generous SVG */
@media (min-width: 87.5rem) and (max-width: 112.4375rem) {
    .calculator-layout[b-q2xhmziecz] {
        grid-template-columns: 0.9fr 1.5fr 0.9fr;
        gap: 1.5rem;
    }

    .input-column[b-q2xhmziecz] {
        grid-column: 1;
    }

    .svg-column[b-q2xhmziecz] {
        grid-column: 2;
        position: sticky;
        top: 1rem;
        max-height: clamp(400px, calc(100vh - 9.5rem), calc(100vh - 7.5rem));
    }

    .svg-container[b-q2xhmziecz] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .results-column[b-q2xhmziecz] {
        grid-column: 3;
    }
}

/* Ultra-wide screens (1800px+) */
@media (min-width: 112.5rem) {
    .calculator-layout[b-q2xhmziecz] {
        grid-template-columns: 1fr 2fr 1fr;
        gap: 2rem;
    }

    .input-column[b-q2xhmziecz] {
        grid-column: 1;
    }

    .svg-column[b-q2xhmziecz] {
        grid-column: 2;
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 12.5rem);
    }

    .svg-container[b-q2xhmziecz] {
        width: 100%;
        height: calc(100vh - 12.5rem);
        min-height: 0;
    }

    .results-column[b-q2xhmziecz] {
        grid-column: 3;
    }
}
/* /Components/Pages/BarGrilleBuilder.razor.rz.scp.css */
/* ---- colors: Bootstrap's theme variables where they exist, brand colors with dark-mode values ---- */
.bg-mode[b-6ar4euyoax],
.bg-rail[b-6ar4euyoax],
.bg-layout[b-6ar4euyoax],
.bg-3d[b-6ar4euyoax],
.bg-zoom-backdrop[b-6ar4euyoax] {
    --bg-surface: var(--bs-body-bg, #fff);
    --bg-paper: var(--bs-tertiary-bg, #f4f6f9);
    --bg-line: var(--bs-border-color, #c9d1dc);
    --bg-muted: var(--bs-secondary-color, #5b6472);
    --bg-navy: #0a224d;          /* fills: selected cards, table headers */
    --bg-ink: #0a224d;           /* navy text */
    --bg-blue: #1785cf;
    --bg-tint: #e8f2fb;
    --bg-d-bar: #3d4554;
    --bg-d-cross: #9fb0c5;
}

[data-bs-theme=dark] .bg-mode[b-6ar4euyoax],
[data-bs-theme=dark] .bg-rail[b-6ar4euyoax],
[data-bs-theme=dark] .bg-layout[b-6ar4euyoax],
[data-bs-theme=dark] .bg-3d[b-6ar4euyoax],
[data-bs-theme=dark] .bg-zoom-backdrop[b-6ar4euyoax] {
    --bg-navy: #2f6db5;
    --bg-ink: #b8d3f2;
    --bg-blue: #4aa3df;
    --bg-tint: rgba(74, 163, 223, .16);
    --bg-d-bar: #c9d1dc;
    --bg-d-cross: #6b7c93;
}

/* line drawings are black on white: invert them in dark mode (photos and swatches stay as they are) */
[data-bs-theme=dark] .bg-img.drawing img[b-6ar4euyoax],
[data-bs-theme=dark] .bg-measure img[b-6ar4euyoax] {
    filter: invert(.9) hue-rotate(180deg);
}

[data-bs-theme=dark] .bg-img.drawing[b-6ar4euyoax],
[data-bs-theme=dark] .bg-measure[b-6ar4euyoax] {
    background: #1a1a1a;
}

/* ---- step rail ---- */
.bg-rail[b-6ar4euyoax] {
    display: flex;
    gap: .15rem;
    margin: 0 0 1.5rem;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    border-bottom: 1px solid var(--bg-line);
}

.bg-rail li[b-6ar4euyoax] {
    flex: 0 0 auto;
}

.bg-rail button[b-6ar4euyoax] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .6rem .6rem;
    white-space: nowrap;
    color: var(--bg-muted);
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
}

.bg-rail button:disabled[b-6ar4euyoax] {
    opacity: .5;
}

.bg-rail button:not(:disabled):hover[b-6ar4euyoax] {
    color: var(--bg-blue);
}

.bg-num[b-6ar4euyoax] {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    font-size: .8rem;
    font-weight: 600;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.bg-rail .done button[b-6ar4euyoax] {
    color: var(--bg-ink);
}

.bg-rail .done .bg-num[b-6ar4euyoax] {
    color: #fff;
    background: var(--bg-navy);
    border-color: var(--bg-ink);
}

.bg-rail .current button[b-6ar4euyoax] {
    font-weight: 600;
    color: var(--bg-ink);
    border-bottom-color: var(--bg-blue);
}

/* ---- step body ---- */
.bg-step h2[b-6ar4euyoax] {
    color: var(--bg-ink);
}

.bg-sub[b-6ar4euyoax] {
    margin-bottom: 1rem;
    color: var(--bg-muted);
}

.bg-label[b-6ar4euyoax] {
    margin-bottom: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--bg-ink);
}

.bg-note[b-6ar4euyoax] {
    margin-top: .75rem;
    padding: .5rem .75rem;
    font-size: .9rem;
    background: var(--bg-paper);
    border-left: 3px solid var(--bg-blue);
}

.bg-note.warn[b-6ar4euyoax] {
    border-left-color: #c0392b;
}

.bg-narrow[b-6ar4euyoax] {
    max-width: 12rem;
}

.bg-narrow-lg[b-6ar4euyoax] {
    max-width: 24rem;
}

/* ---- option cards ---- */
.bg-grid[b-6ar4euyoax] {
    display: grid;
    gap: .75rem;
}

/* card size follows the screen height: taller screens get bigger drawings, a full step still fits */
.bg-grid-2[b-6ar4euyoax] { grid-template-columns: repeat(auto-fill, minmax(clamp(170px, 19vh, 340px), 1fr)); }
.bg-grid-3[b-6ar4euyoax] { grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 17vh, 260px), 1fr)); }
.bg-grid-4[b-6ar4euyoax] { grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 14vh, 220px), 1fr)); }

.bg-card-wrap[b-6ar4euyoax] {
    position: relative;
}

.bg-card[b-6ar4euyoax] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0 0 .7rem;
    overflow: hidden;
    text-align: left;
    color: inherit;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: 4px;
    transition: border-color .15s;
}

.bg-card:hover[b-6ar4euyoax] {
    border-color: var(--bg-blue);
}

.bg-card:focus-visible[b-6ar4euyoax],
.bg-place:focus-visible[b-6ar4euyoax],
.bg-swatch:focus-visible[b-6ar4euyoax],
.bg-zoom:focus-visible[b-6ar4euyoax],
.bg-cell:focus-visible[b-6ar4euyoax] {
    outline: 3px solid var(--bg-blue);
    outline-offset: 2px;
}

.bg-card.selected[b-6ar4euyoax]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--bg-navy);
    border-radius: 4px;
    pointer-events: none;
}

.bg-card.selected[b-6ar4euyoax]::before {
    content: "✓";
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: var(--bg-navy);
    border-radius: 50%;
}

.bg-card-plain[b-6ar4euyoax] {
    justify-content: center;
    padding: 1rem 0;
    background: var(--bg-paper);
    border-style: dashed;
}

.bg-img[b-6ar4euyoax] {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--bg-paper);
    border-bottom: 1px solid var(--bg-line);
}

.bg-img img[b-6ar4euyoax] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* line drawings: big, on white, never cropped */
.bg-img.drawing[b-6ar4euyoax] {
    aspect-ratio: 16 / 10;
    background: var(--bg-surface);
}

.bg-img.drawing img[b-6ar4euyoax] {
    padding: .4rem;
    object-fit: contain;
}

.bg-img-none[b-6ar4euyoax] {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: .85rem;
    color: var(--bg-muted);
}

.bg-name[b-6ar4euyoax] {
    display: block;
    padding: .55rem .75rem 0;
    font-weight: 600;
    color: var(--bg-ink);
}

.bg-tip[b-6ar4euyoax] {
    display: block;
    padding: .15rem .75rem 0;
    font-size: .85rem;
    line-height: 1.35;
    color: var(--bg-muted);
}

.bg-clamp[b-6ar4euyoax] {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bg-zoom[b-6ar4euyoax] {
    position: absolute;
    top: .4rem;
    right: .4rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--bg-ink);
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    border: 1px solid var(--bg-line);
    border-radius: 4px;
}

.bg-zoom:hover[b-6ar4euyoax] {
    border-color: var(--bg-blue);
}

.bg-measure[b-6ar4euyoax] {
    display: block;
    width: 100%;
    padding: .25rem;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: 4px;
    cursor: zoom-in;
}

.bg-measure img[b-6ar4euyoax] {
    display: block;
    width: 100%;
}

/* ---- location and count buttons ---- */
.bg-places[b-6ar4euyoax] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.bg-place[b-6ar4euyoax] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    min-width: 6.5rem;
    padding: .6rem .8rem .5rem;
    font-weight: 600;
    color: var(--bg-ink);
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: 4px;
}

.bg-place.compact[b-6ar4euyoax] {
    min-width: 0;
    padding: .5rem .9rem;
}

.bg-place:hover[b-6ar4euyoax] {
    border-color: var(--bg-blue);
}

.bg-place.selected[b-6ar4euyoax] {
    color: #fff;
    background: var(--bg-navy);
    border-color: var(--bg-ink);
}

.bg-place.bad[b-6ar4euyoax] {
    border-color: #c0392b;
}

.bg-icon[b-6ar4euyoax] {
    width: 48px;
    height: 36px;
}

.bg-icon .room[b-6ar4euyoax] { fill: none; stroke: currentColor; stroke-width: 1; opacity: .45; }
.bg-icon .hit[b-6ar4euyoax] { stroke: var(--bg-blue); stroke-width: 3; }
.bg-icon .grille[b-6ar4euyoax] { fill: currentColor; }
.bg-icon .counter[b-6ar4euyoax] { fill: none; stroke: currentColor; stroke-width: 1.5; }
.bg-place.selected .bg-icon .hit[b-6ar4euyoax] { stroke: #8fd0ff; }

/* ---- swatches ---- */
.bg-swatches[b-6ar4euyoax] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .4rem;
    max-height: 22rem;
    padding: .25rem;
    overflow-y: auto;
}

.bg-swatch[b-6ar4euyoax] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    font-size: .85rem;
    text-align: left;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: 4px;
}

.bg-swatch.selected[b-6ar4euyoax] {
    border-color: var(--bg-ink);
    box-shadow: 0 0 0 2px var(--bg-navy);
}

.bg-chip[b-6ar4euyoax] {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.bg-chip.none[b-6ar4euyoax] {
    background: repeating-linear-gradient(45deg, #fff 0 4px, #e3e7ee 4px 8px);
}

/* ---- mount details, doors, sections ---- */
.bg-detail[b-6ar4euyoax] {
    margin-top: 1rem;
    padding: .9rem 1rem;
    background: var(--bg-paper);
    border-left: 3px solid var(--bg-navy);
}

.bg-detail-head[b-6ar4euyoax],
.bg-door-head[b-6ar4euyoax] {
    margin-bottom: .4rem;
    font-weight: 600;
    color: var(--bg-ink);
}

.bg-adv[b-6ar4euyoax] {
    margin-top: 1rem;
}

.bg-adv summary[b-6ar4euyoax] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--bg-blue);
    cursor: pointer;
}

.bg-adv[open] summary[b-6ar4euyoax] {
    margin-bottom: .6rem;
}

.bg-screws[b-6ar4euyoax] {
    font-size: .85rem;
    background: transparent;
}

.bg-door[b-6ar4euyoax] {
    margin-top: 1rem;
    padding: .75rem .9rem .9rem;
    border: 1px solid var(--bg-line);
    border-radius: 4px;
}

.bg-seg-wrap[b-6ar4euyoax] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.bg-arrow span[b-6ar4euyoax] {
    font-weight: 700;
}

.bg-split[b-6ar4euyoax] {
    display: flex;
    gap: 3px;
    margin-bottom: .5rem;
}

.bg-split span[b-6ar4euyoax] {
    min-width: 2.5rem;
    padding: .55rem .25rem;
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: var(--bg-navy);
    border-radius: 2px;
}

.bg-section-inputs[b-6ar4euyoax] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .5rem;
}

.bg-counter[b-6ar4euyoax] {
    max-width: 10rem;
}

.bg-counter .form-control[b-6ar4euyoax] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.bg-counter input[b-6ar4euyoax]::-webkit-inner-spin-button,
.bg-counter input[b-6ar4euyoax]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bg-addon[b-6ar4euyoax] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
}

.bg-addon .form-check[b-6ar4euyoax] {
    min-width: 12rem;
}

.bg-addon-qty[b-6ar4euyoax] {
    width: 5rem;
}

.bg-addon .form-control:not(.bg-addon-qty)[b-6ar4euyoax] {
    flex: 1 1 10rem;
}

.bg-desc[b-6ar4euyoax] {
    margin: 0;
    padding: .6rem .75rem;
    font-family: inherit;
    font-size: .85rem;
    white-space: pre-wrap;
    background: var(--bg-paper);
    border-left: 3px solid var(--bg-blue);
}

.bg-nav[b-6ar4euyoax] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.5rem;
    padding: .9rem 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--bg-line);
}

/* ---- summary panel ---- */
.bg-side[b-6ar4euyoax] {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bg-panel[b-6ar4euyoax] {
    padding: .9rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: 6px;
}

.bg-cap[b-6ar4euyoax] {
    margin-top: .35rem;
    font-size: .75rem;
    color: var(--bg-muted);
}

.bg-msum[b-6ar4euyoax] {
    margin-bottom: 1rem;
    padding: .6rem .8rem;
    background: var(--bg-paper);
    border: 1px solid var(--bg-line);
    border-radius: 6px;
}

.bg-msum summary[b-6ar4euyoax] {
    font-weight: 600;
    color: var(--bg-ink);
    cursor: pointer;
}

.bg-msum[open] summary[b-6ar4euyoax] {
    margin-bottom: .6rem;
}

.bg-block[b-6ar4euyoax] {
    width: 100%;
    font-size: .875rem;
    background: var(--bg-surface);
    border: 2px solid var(--bg-navy);
    border-collapse: collapse;
}

.bg-block thead th[b-6ar4euyoax] {
    padding: .5rem .75rem;
    font-weight: 600;
    color: #fff;
    background: var(--bg-navy);
}

.bg-block tbody th[b-6ar4euyoax] {
    width: 34%;
    padding: .4rem .75rem;
    font-weight: 500;
    vertical-align: top;
    color: var(--bg-muted);
    background: var(--bg-paper);
    border-top: 1px solid var(--bg-line);
    border-right: 1px solid var(--bg-line);
}

.bg-block td[b-6ar4euyoax] {
    padding: 0;
    vertical-align: top;
    border-top: 1px solid var(--bg-line);
}

.bg-block tr.current th[b-6ar4euyoax],
.bg-block tr.current td[b-6ar4euyoax] {
    background: var(--bg-tint);
}

.bg-cell[b-6ar4euyoax] {
    display: block;
    width: 100%;
    padding: .4rem .75rem;
    text-align: left;
    white-space: pre-line;
    color: inherit;
    background: none;
    border: 0;
}

button.bg-cell:disabled[b-6ar4euyoax] {
    color: inherit;
    opacity: 1;
}

button.bg-cell:not(:disabled):hover[b-6ar4euyoax] {
    background: var(--bg-tint);
}

/* ---- drawing ---- */
.bg-drawing[b-6ar4euyoax] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
}

.bg-drawing-empty[b-6ar4euyoax] {
    display: grid;
    place-items: center;
    min-height: 150px;
    font-size: .9rem;
    color: var(--bg-muted);
    background: var(--bg-paper);
    border: 1px dashed var(--bg-line);
}

.bg-d-core[b-6ar4euyoax] { fill: var(--bg-paper); }
.bg-d-bar[b-6ar4euyoax] { fill: var(--bg-d-bar); }
.bg-d-cross[b-6ar4euyoax] { fill: var(--bg-d-cross); }
.bg-d-frame[b-6ar4euyoax] { fill: none; stroke: var(--bg-ink); stroke-width: 1; }
.bg-d-frame.framed[b-6ar4euyoax] { stroke-width: 4; }
.bg-d-door[b-6ar4euyoax] { stroke: #1785cf; stroke-width: 1.5; stroke-dasharray: 4 2; }
.bg-d-door.solid[b-6ar4euyoax] { fill: rgba(23, 133, 207, .3) !important; }
.bg-d-hatch[b-6ar4euyoax] { stroke: #1785cf; stroke-width: 1.5; }
.bg-d-cut[b-6ar4euyoax] { stroke: #c0392b; stroke-width: 1.5; stroke-dasharray: 6 3; }
.bg-d-dim[b-6ar4euyoax] { stroke: var(--bg-muted); stroke-width: 1; }
.bg-d-arrow[b-6ar4euyoax] { fill: var(--bg-muted); }
.bg-d-text[b-6ar4euyoax] { font-size: 12px; fill: var(--bg-ink); font-weight: 600; }
.bg-d-label[b-6ar4euyoax] { font-size: 10px; fill: #1785cf; font-weight: 600; paint-order: stroke; stroke: var(--bg-surface); stroke-width: 3px; }

/* ---- zoom ---- */
.bg-zoom-backdrop[b-6ar4euyoax] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(10, 34, 77, .75);
}

.bg-zoom-box[b-6ar4euyoax] {
    position: relative;
    max-width: min(1000px, 95vw);
    margin: 0;
    padding: 1rem;
    background: var(--bg-surface);
    border-radius: 6px;
}

.bg-zoom-box img[b-6ar4euyoax] {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
}

.bg-zoom-box figcaption[b-6ar4euyoax] {
    margin-top: .5rem;
    font-weight: 600;
    text-align: center;
    color: #0a224d;
}

.bg-zoom-close[b-6ar4euyoax] {
    position: absolute;
    top: .5rem;
    right: .5rem;
}

@media (prefers-reduced-motion: reduce) {
    .bg-card[b-6ar4euyoax] {
        transition: none;
    }
}

.bg-icon .q[b-6ar4euyoax] { font-size: 18px; font-weight: 700; fill: currentColor; }

.bg-zoom-photo[b-6ar4euyoax] {
    top: 2.8rem;
    width: auto;
    padding: 0 .45rem;
    font-size: .75rem;
    font-weight: 600;
}

/* ---- layout: steps take the space, summary keeps a fixed width ---- */
.bg-layout[b-6ar4euyoax] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.bg-main[b-6ar4euyoax] {
    min-width: 0;
}

.bg-aside[b-6ar4euyoax] {
    display: none;
}

@media (min-width: 992px) {
    .bg-layout[b-6ar4euyoax] {
        grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 460px);
    }

    .bg-aside[b-6ar4euyoax] {
        display: block;
    }
}

.bg-made[b-6ar4euyoax] {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* short screens: flatter drawings and one line of detail so a whole step fits */
@media (min-width: 992px) and (max-height: 950px) {
    .bg-img.drawing[b-6ar4euyoax] {
        aspect-ratio: 2 / 1;
    }

    .bg-made[b-6ar4euyoax] {
        -webkit-line-clamp: 1;
    }

    .bg-sub[b-6ar4euyoax] {
        margin-bottom: .6rem;
    }

    .bg-rail[b-6ar4euyoax] {
        margin-bottom: 1rem;
    }
}

/* ---- 3D view ---- */
.bg-mode[b-6ar4euyoax] {
    justify-content: flex-end;
    margin: -.25rem 0 .5rem;
}

.bg-3d[b-6ar4euyoax] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .bg-3d[b-6ar4euyoax] {
        grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr);
    }

    .bg-3d-stage[b-6ar4euyoax] {
        position: sticky;
        top: 1rem;
        height: calc(100vh - 2rem);
        max-height: 1000px;
    }
}

.bg-3d-stage[b-6ar4euyoax] {
    position: relative;
    min-height: 460px;
    height: 60vh;
    overflow: hidden;
    background: var(--bg-paper);
    border: 1px solid var(--bg-line);
    border-radius: 6px;
}

.bg-scene[b-6ar4euyoax] {
    position: absolute;
    inset: 0;
}

.bg-3d-tools[b-6ar4euyoax] {
    position: absolute;
    top: .6rem;
    left: .6rem;
    right: .6rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.bg-3d-tools .btn-light[b-6ar4euyoax] {
    border: 1px solid var(--bg-line);
}

.bg-3d-note[b-6ar4euyoax] {
    position: absolute;
    bottom: .5rem;
    left: .6rem;
    right: .6rem;
    z-index: 2;
    padding: .35rem .6rem;
    font-size: .875rem;
    color: var(--bg-muted);
    background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
    border-radius: 3px;
}

.bg-3d-panel[b-6ar4euyoax] {
    min-width: 0;
}

.bg-3d-panel .bg-grid-2[b-6ar4euyoax] {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.bg-d-open[b-6ar4euyoax] { fill: none; stroke: var(--bg-ink); stroke-width: 1; stroke-dasharray: 2 2; }
.bg-d-pin[b-6ar4euyoax] { stroke: #c0392b; stroke-width: 1.5; }

/* the 3D stage is for dragging, not selecting: no text selection on its buttons and labels
   (a selected label turns the next drag into a browser text drag), and the toolbar/note rows only catch
   clicks on the buttons themselves, so drags pass through their empty space to the canvas */
.bg-3d-stage[b-6ar4euyoax] {
    -webkit-user-select: none;
    user-select: none;
}

.bg-3d-tools[b-6ar4euyoax],
.bg-3d-note[b-6ar4euyoax] {
    pointer-events: none;
}

.bg-3d-tools > *[b-6ar4euyoax] {
    pointer-events: auto;
}

/* ---- step bar: what was picked, under each step ---- */
.bg-rail-text[b-6ar4euyoax] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}

.bg-rail-choice[b-6ar4euyoax] {
    display: flex;
    align-items: center;
    gap: .3rem;
    max-width: 11rem;
    margin-top: .15rem;
    font-size: .75rem;
    font-weight: 400;
    color: var(--bg-muted);
}

.bg-rail-choice img[b-6ar4euyoax],
.bg-rail-chip[b-6ar4euyoax] {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--bg-line);
    border-radius: 3px;
}

.bg-rail-value[b-6ar4euyoax] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bg-noanim[b-6ar4euyoax] {
    padding: .2rem .5rem .2rem 2.6rem;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    border: 1px solid var(--bg-line);
    border-radius: 4px;
}

.bg-topbar[b-6ar4euyoax] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: -.25rem 0 .5rem;
}

.bg-topbar .bg-mode[b-6ar4euyoax] {
    margin: 0;
}

.bg-rail-svg[b-6ar4euyoax] {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 1.6rem;
    padding: 1px;
    fill: var(--bg-ink);
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: 3px;
}

.bg-confirm[b-6ar4euyoax] {
    max-width: 30rem;
    margin: 1rem;
    padding: 1.25rem 1.5rem;
    color: var(--bs-body-color, #212529);
    background: var(--bg-surface);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

/* ---- step bar, evened out: equal columns, the choice on its own line, bigger schematics ---- */
.bg-rail[b-6ar4euyoax] {
    gap: .25rem;
    align-items: stretch;
}

.bg-rail li[b-6ar4euyoax] {
    flex: 1 1 0;
    min-width: 7.5rem;
}

.bg-rail button[b-6ar4euyoax] {
    width: 100%;
    height: 100%;
    align-items: flex-start;
    gap: .55rem;
    padding: .5rem .5rem .6rem;
}

.bg-rail .bg-num[b-6ar4euyoax] {
    flex: 0 0 auto;
    margin-top: .05rem;
}

.bg-rail-text[b-6ar4euyoax] {
    flex: 1 1 auto;
    min-width: 0;
    gap: .2rem;
}

.bg-rail-choice[b-6ar4euyoax] {
    width: 100%;
    max-width: none;
    min-height: 2.2rem;
    margin-top: 0;
    font-size: .8rem;
}

.bg-rail-svg[b-6ar4euyoax] {
    width: 3rem;
    height: 2.2rem;
    padding: 2px;
}

.bg-rail-choice img[b-6ar4euyoax],
.bg-rail-chip[b-6ar4euyoax] {
    width: 1.8rem;
    height: 1.8rem;
}

.bg-extras[b-6ar4euyoax] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .15rem 1rem;
}

/* ---- filled in from a drawing ---- */
.bg-drawing-note[b-6ar4euyoax] {
    margin: 0 0 .75rem;
    padding: .6rem .9rem;
    background: var(--bs-info-bg-subtle, #e7f4fb);
    border-left: 3px solid var(--bs-info, #0dcaf0);
    border-radius: 4px;
}

/* things the 3D model can't show exactly */
.bg-3d-limit[b-6ar4euyoax] {
    margin-top: .2rem;
    font-weight: 600;
    color: #8a5300;
}

[data-bs-theme=dark] .bg-3d-limit[b-6ar4euyoax] {
    color: #f0b55a;
}

/* ---- step bar dropdowns: choose without leaving the current step (desktop) ---- */
.bg-rail li[b-6ar4euyoax] {
    position: relative;
    display: flex;
}

.bg-rail li > button:first-child[b-6ar4euyoax] {
    flex: 1 1 auto;
    min-width: 0;
}

.bg-rail .bg-rail-caret[b-6ar4euyoax] {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    align-self: flex-start;
    margin: .45rem .15rem 0 0;
    padding: .15rem .4rem;
    font-size: .8rem;
    line-height: 1;
    color: var(--bg-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
}

.bg-rail .bg-rail-caret:hover[b-6ar4euyoax],
.bg-rail .menu-open .bg-rail-caret[b-6ar4euyoax] {
    color: var(--bg-ink);
    background: var(--bg-surface);
    border-color: var(--bg-line);
}

.bg-rail-menu[b-6ar4euyoax] {
    position: absolute;
    top: calc(100% - .2rem);
    left: 0;
    z-index: 20;
    width: max-content;
    min-width: 15rem;
    max-width: 22rem;
    padding: .6rem .7rem;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.bg-rail li:nth-last-child(-n+2) .bg-rail-menu[b-6ar4euyoax] {
    right: 0;
    left: auto;
}

.bg-rail-backdrop[b-6ar4euyoax] {
    position: fixed;
    inset: 0;
    z-index: 15;
}

@media (min-width: 992px) {
    .bg-rail[b-6ar4euyoax] {
        position: relative;
        z-index: 16;
        overflow: visible;
    }
}

@media (max-width: 991.98px) {
    .bg-rail .bg-rail-caret[b-6ar4euyoax] {
        display: none;
    }
}

/* the underline marks the current step, not its dropdown button */
.bg-rail .current .bg-rail-caret[b-6ar4euyoax] {
    font-weight: 400;
    border-bottom-color: transparent;
    box-shadow: none;
}

.bg-rail .current .bg-rail-caret:hover[b-6ar4euyoax],
.bg-rail .menu-open.current .bg-rail-caret[b-6ar4euyoax] {
    border-color: var(--bg-line);
}

/* one-click lists inside the step bar dropdowns */
.bg-quick-list[b-6ar4euyoax] {
    display: flex;
    flex-direction: column;
    max-height: 18rem;
    overflow-y: auto;
}

.bg-rail .bg-quick-item[b-6ar4euyoax] {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    width: 100%;
    height: auto;
    padding: .3rem .45rem;
    font-size: .875rem;
    font-weight: 400;
    color: var(--bs-body-color, #212529);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 4px;
}

.bg-rail .bg-quick-item:hover[b-6ar4euyoax] {
    background: var(--bg-tint);
}

.bg-rail .bg-quick-item.selected[b-6ar4euyoax] {
    font-weight: 600;
    color: var(--bg-ink);
}

.bg-quick-check[b-6ar4euyoax] {
    flex: 0 0 1rem;
    color: var(--bg-blue);
}

.bg-rail .current .bg-quick-item[b-6ar4euyoax] {
    font-weight: 400;
    color: var(--bs-body-color, #212529);
}

.bg-rail .current .bg-quick-item.selected[b-6ar4euyoax] {
    font-weight: 600;
    color: var(--bg-ink);
}

.bg-rail .bg-quick-item[b-6ar4euyoax] {
    white-space: normal;
}

.bg-rail-menu[b-6ar4euyoax] {
    max-width: 26rem;
}

/* ---- lists in the dropdowns and the title block editors ---- */
.bg-quick-item[b-6ar4euyoax] {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .3rem .45rem;
    font-size: .875rem;
    color: var(--bs-body-color, #212529);
    text-align: left;
    white-space: normal;
    background: transparent;
    border: 0;
    border-radius: 4px;
}

.bg-quick-item:hover[b-6ar4euyoax] {
    background: var(--bg-tint);
}

.bg-quick-item.selected[b-6ar4euyoax] {
    font-weight: 600;
    color: var(--bg-ink);
}

.bg-quick-chip[b-6ar4euyoax] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 3px;
}

/* ---- the 3D view's footer: the note on the left, the title block on the right ---- */
.bg-3d-foot[b-6ar4euyoax] {
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: .5rem;
    z-index: 17;
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    pointer-events: none;
}

.bg-3d-foot .bg-3d-note[b-6ar4euyoax] {
    position: static;
    flex: 1 1 auto;
}

.bg-tb[b-6ar4euyoax] {
    position: relative;
    z-index: 17;
    flex: 0 0 auto;
    width: min(44rem, 70%);
    font-size: .8rem;
    pointer-events: auto;
    background: var(--bg-surface);
    border: 1.5px solid var(--bg-ink);
}

.bg-tb.collapsed[b-6ar4euyoax] {
    width: auto;
}

.bg-tb-head[b-6ar4euyoax] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .15rem .2rem .15rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #fff;
    background: var(--bg-navy);
}

.bg-tb-toggle[b-6ar4euyoax] {
    padding: .05rem .4rem;
    font-size: .72rem;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 3px;
}

.bg-tb-grid[b-6ar4euyoax] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bg-tb-wrap[b-6ar4euyoax] {
    position: relative;
    min-width: 0;
    border-right: 1px solid var(--bg-line);
    border-bottom: 1px solid var(--bg-line);
}

.bg-tb-wrap:last-child[b-6ar4euyoax] {
    border-right: 0;
    border-bottom: 0;
}

.bg-tb-wrap.wide[b-6ar4euyoax] {
    grid-column: span 3;
    border-right: 0;
}

.bg-tb-cell[b-6ar4euyoax] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: .05rem .4rem .1rem;
    line-height: 1.2;
    text-align: left;
    background: transparent;
    border: 0;
}

.bg-tb-cell:not(:disabled):hover[b-6ar4euyoax],
.bg-tb-cell.open[b-6ar4euyoax] {
    background: var(--bg-tint);
}

.bg-tb-cell .lbl[b-6ar4euyoax] {
    font-size: .66rem;
    color: var(--bg-muted);
}

.bg-tb-cell .val[b-6ar4euyoax] {
    max-width: 100%;
    overflow: hidden;
    font-weight: 600;
    color: var(--bg-ink);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bg-tb-cell .val.wrap[b-6ar4euyoax] {
    max-height: 3.7em;
    overflow: auto;
    font-size: .72rem;
    font-weight: 400;
    white-space: normal;
}

.bg-tb-menu[b-6ar4euyoax] {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: 30;
    width: max-content;
    min-width: 15rem;
    max-width: 24rem;
    padding: .6rem .7rem;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.bg-tb-menu.right[b-6ar4euyoax] {
    right: 0;
    left: auto;
}

.bg-tb-menu .bg-quick-list[b-6ar4euyoax] {
    max-height: 15rem;
}

/* the flow in the title block */
.bg-tb-num[b-6ar4euyoax] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: .95rem;
    height: .95rem;
    margin-right: .25rem;
    font-size: .6rem;
    font-weight: 700;
    color: var(--bg-muted);
    border: 1px solid var(--bg-line);
    border-radius: 50%;
}

.bg-tb-next[b-6ar4euyoax] {
    margin-left: .3rem;
    padding: 0 .3rem;
    font-size: .6rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    background: var(--bg-blue);
    border-radius: 3px;
}

.bg-tb-wrap.next[b-6ar4euyoax] {
    outline: 2px solid var(--bg-blue);
    outline-offset: -2px;
}

.bg-tb-cell .val.wait[b-6ar4euyoax] {
    font-weight: 400;
    font-style: italic;
    color: var(--bg-muted);
}

.bg-tb-cell:disabled[b-6ar4euyoax] {
    opacity: 1;
    cursor: default;
}

/* the logo, faintly, behind the 3D model */
.bg-3d-mark[b-6ar4euyoax] {
    position: absolute;
    inset: 22% 18% 30%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .06;
    pointer-events: none;
}

[data-bs-theme=dark] .bg-3d-mark[b-6ar4euyoax] {
    filter: invert(1);
    opacity: .08;
}
/* /Components/Pages/Camera.razor.rz.scp.css */
.camera-container[b-e7p0j7j570] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    height: 100vh;
}

/* The canvas sits exactly on top of the video, so both get the same box */
.camera-preview[b-e7p0j7j570] {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 80vh;
}

#webcam-preview[b-e7p0j7j570],
#webcam-canvas[b-e7p0j7j570] {
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #ccc;
    border-radius: 8px;
}

#webcam-preview[b-e7p0j7j570] {
    object-fit: cover;
}

/* Cropping to fill (the object-fit: cover equivalent) is done in the JS draw */
#webcam-canvas[b-e7p0j7j570] {
    position: absolute;
    inset: 0;
}

#result[b-e7p0j7j570] {
    margin-top: 15px;
    font-size: 1.2em;
    text-align: center;
}

/* Sit above the preview, centred to match the container */
.camera-cancel[b-e7p0j7j570],
.camera-tap-to-start[b-e7p0j7j570] {
    display: block;
    margin: 10px auto 0 auto;
    min-width: 200px;
    font-weight: bold;
}

/* Without this, display: block above would override the hidden attribute */
.camera-tap-to-start[hidden][b-e7p0j7j570] {
    display: none;
}

.camera-alert[b-e7p0j7j570] {
    max-width: 397px;
    margin: 0.5rem auto 0 auto;
}
/* /Components/Pages/CircleCalculator.razor.rz.scp.css */
.bend-calculator-container[b-tbmypjrx12] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.bend-calculator-container h3[b-tbmypjrx12] {
    margin-bottom: 1rem;
    border-bottom: 0.1875rem solid #3498db;
    padding-bottom: 0.5rem;
}

/* Base layout - mobile first */
.calculator-layout[b-tbmypjrx12] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

/* Common column styles */
.input-column[b-tbmypjrx12],
.results-column[b-tbmypjrx12] {
    padding: 1.25rem;
    border-radius: 0.375rem;
    border: 0.0625rem solid #dee2e6;
}

    .input-column h4[b-tbmypjrx12],
    .results-column h4[b-tbmypjrx12] {
        margin-bottom: 1rem;
        font-size: 1rem;
        border-bottom: 0.125rem solid #3498db;
        padding-bottom: 0.5rem;
    }

.input-group[b-tbmypjrx12] {
    margin-bottom: 1rem;
}

    .input-group label[b-tbmypjrx12] {
        display: block;
        font-weight: 500;
        margin-bottom: 0.4rem;
        font-size: 0.9rem;
    }

.input-with-unit[b-tbmypjrx12] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-control[b-tbmypjrx12] {
    flex: 1;
    padding: 0.5rem;
    border: 0.0625rem solid #ced4da;
    border-radius: 0.25rem;
    font-size: 0.95rem;
}

.input-with-unit .unit[b-tbmypjrx12] {
    font-weight: 500;
    min-width: 1.5rem;
    font-size: 0.9rem;
}

/* SVG column */
.svg-column[b-tbmypjrx12] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.svg-container[b-tbmypjrx12] {
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 0.0625rem solid #dee2e6;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .svg-container svg[b-tbmypjrx12] {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        border: 0.0625rem solid #dee2e6;
        border-radius: 0.25rem;
    }

/* Results column */
.result-item[b-tbmypjrx12] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem;
    margin-bottom: 0.75rem;
    border-radius: 0.25rem;
    border-left: 0.25rem solid #3498db;
}

    .result-item:last-child[b-tbmypjrx12] {
        margin-bottom: 0;
    }

.result-label[b-tbmypjrx12] {
    font-weight: 500;
    font-size: 0.8rem;
}

.result-value[b-tbmypjrx12] {
    font-weight: 600;
    font-size: 1rem;
}

.result-metric[b-tbmypjrx12] {
    font-size: 0.75rem;
}

/* Formulas section */
.formulas-section[b-tbmypjrx12] {
    margin-top: 1.5rem;
    padding: 0.8rem;
    background: #e7f3ff;
    border-radius: 0.375rem;
    border-left: 0.25rem solid #3498db;
}

    .formulas-section h4[b-tbmypjrx12] {
        color: #2c3e50;
        margin-bottom: 0.8rem;
        font-size: 0.95rem;
    }

    .formulas-section ul[b-tbmypjrx12] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .formulas-section li[b-tbmypjrx12] {
        padding: 0.5rem 0;
        margin-bottom: 0.4rem;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .formulas-section .formula-label[b-tbmypjrx12] {
        color: #495057;
        font-weight: 500;
        font-size: 0.8rem;
    }

    .formulas-section .formula-expression[b-tbmypjrx12] {
        color: #2c3e50;
        font-family: 'Courier New', monospace;
        font-size: 0.8rem;
        font-weight: 600;
    }

/* Responsive design */

/* Mobile screens (< 768px) - single column, SVG takes 60% of viewport */
@media (max-width: 47.9375rem) {
    .calculator-layout[b-tbmypjrx12] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .svg-column[b-tbmypjrx12] {
        grid-column: 1;
        max-height: clamp(200px, 60vh, 400px);
    }

    .svg-container[b-tbmypjrx12] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .input-column[b-tbmypjrx12],
    .results-column[b-tbmypjrx12] {
        grid-column: 1;
    }
}

/* Tablet screens (768px to 1199px) - two column */
@media (min-width: 48rem) and (max-width: 74.9375rem) {
    .calculator-layout[b-tbmypjrx12] {
        grid-template-columns: 1fr 1.2fr;
        gap: 1.2rem;
    }

    .svg-column[b-tbmypjrx12] {
        grid-column: 2;
        grid-row: 1 / 3;
        position: sticky;
        top: 1rem;
        max-height: clamp(300px, calc(100vh - 8.5rem), calc(100vh - 6rem));
    }

    .svg-container[b-tbmypjrx12] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .input-column[b-tbmypjrx12] {
        grid-column: 1;
    }

    .results-column[b-tbmypjrx12] {
        grid-column: 1;
    }
}

/* Medium screens (1200px to 1400px) - three column, moderate SVG */
@media (min-width: 75rem) and (max-width: 87.4375rem) {
    .calculator-layout[b-tbmypjrx12] {
        grid-template-columns: 0.9fr 1.5fr 0.9fr;
        gap: 1.5rem;
    }

    .input-column[b-tbmypjrx12] {
        grid-column: 1;
    }

    .svg-column[b-tbmypjrx12] {
        grid-column: 2;
        position: sticky;
        top: 1rem;
        max-height: clamp(350px, calc(100vh - 9rem), calc(100vh - 7rem));
    }

    .svg-container[b-tbmypjrx12] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .results-column[b-tbmypjrx12] {
        grid-column: 3;
    }
}

/* Large screens (1400px to 1799px) - three column, generous SVG */
@media (min-width: 87.5rem) and (max-width: 112.4375rem) {
    .calculator-layout[b-tbmypjrx12] {
        grid-template-columns: 0.9fr 1.5fr 0.9fr;
        gap: 1.5rem;
    }

    .input-column[b-tbmypjrx12] {
        grid-column: 1;
    }

    .svg-column[b-tbmypjrx12] {
        grid-column: 2;
        position: sticky;
        top: 1rem;
        max-height: clamp(400px, calc(100vh - 9.5rem), calc(100vh - 7.5rem));
    }

    .svg-container[b-tbmypjrx12] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .results-column[b-tbmypjrx12] {
        grid-column: 3;
    }
}

/* Ultra-wide screens (1800px+) - your 2K screen */
@media (min-width: 112.5rem) {
    .calculator-layout[b-tbmypjrx12] {
        grid-template-columns: 1fr 2fr 1fr;
        gap: 2rem;
    }

    .input-column[b-tbmypjrx12] {
        grid-column: 1;
    }

    .svg-column[b-tbmypjrx12] {
        grid-column: 2;
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 12.5rem);
    }

    .svg-container[b-tbmypjrx12] {
        width: 100%;
        height: calc(100vh - 12.5rem);
        min-height: 0;
    }

    .results-column[b-tbmypjrx12] {
        grid-column: 3;
    }
}
/* /Components/Pages/ColorReference.razor.rz.scp.css */
input[type="search"]:not(:placeholder-shown)[b-dnpsxyw0be],
select.form-select:has(option[value]:not([value=""]):checked)[b-dnpsxyw0be] {
    background-image: linear-gradient(90deg, #ffc107 50%, transparent 50%), linear-gradient(90deg, #ffc107 50%, transparent 50%), linear-gradient(0deg, #ffc107 50%, transparent 50%), linear-gradient(0deg, #ffc107 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 1rem 0.25rem, 1rem 0.25rem, 0.25rem 1rem, 0.25rem 1rem;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: search-border-dance-b-dnpsxyw0be 8s infinite linear;
    padding: 0.375rem 0.75rem;
}

@keyframes search-border-dance-b-dnpsxyw0be {
    0% {
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }

    100% {
        background-position: 20rem 0, -20rem 100%, 0 -20rem, 100% 20rem;
    }
}
/* /Components/Pages/CoverSheetQuote.razor.rz.scp.css */
thead[b-qa5t85fojw] {
    background-color: white;
    color: black;
}
table[b-qa5t85fojw], th[b-qa5t85fojw], td[b-qa5t85fojw] {
    border: 0;
    text-indent: 0;
    font-weight: 100;
    font-size: 13px;
}
.packlist-border[b-qa5t85fojw] {
    border: 1px solid black;
    border-radius: 5px;
}
/*.company-logo {
    max-height: 100px;
}*/
.company-logo[b-qa5t85fojw] {
    max-height: 65px;
}
.disclaimer[b-qa5t85fojw] {
    font-size: 12px;
}
.lines td[b-qa5t85fojw] {
    border: 1px solid red;
    text-align: center;
}

.signature[b-qa5t85fojw] {
    border: 2px solid black;
    width: 10rem; /* Sets the width of the box */
    height: 1.2rem; /* Sets the height of the box */
}

.signature-anchor[b-qa5t85fojw] {
    position: absolute;
    top: 0;
    left: 1rem;
}

.traveler-foot[b-qa5t85fojw] {
    min-height: 80px;
}

@media print {
    .traveler-printed-by[b-qa5t85fojw] {
        position: fixed;
        bottom: 0;
    }
}
/* /Components/Pages/CurveNotchCalculator.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   NotchCalculator.razor.css
   --------------------------------------------------------------------
   Scoped styles for the flat curve bar notch calculator.

   Theming: a single set of CSS custom properties is declared on .ncalc
   for light mode and re-declared under [data-bs-theme="dark"] .ncalc for
   dark mode (the attribute ColorTheme.js sets on <html>). Every rule
   below reads the tokens, so only the token block changes per theme.
   Palette follows GitHub Primer to match the original inline colors.
   ════════════════════════════════════════════════════════════════════ */

.ncalc[b-3pgnab8p4z] {
    /* ── Light theme tokens ─────────────────────────────────────────── */
    --nc-text: #1f2328;
    --nc-muted: #57606a;
    --nc-label: #424a53;
    --nc-border: #d0d7de;
    --nc-border-subtle: #eaeef2;
    --nc-surface: #ffffff;
    --nc-surface-alt: #f6f8fa;
    --nc-row-alt: #fbfcfd;
    --nc-input-bg: #ffffff;
    --nc-input-text: #1f2328;
    --nc-warn-bg: #fff3cd;
    --nc-warn-border: #f0d58a;
    --nc-warn-text: #6b5300;
    --nc-accent: #1f6feb;
    --nc-accent-hover: #1a5fcf;
    --nc-accent-text: #ffffff;
    --nc-focus-ring: rgba(31, 111, 235, .35);
    color-scheme: light;
    max-width: 1000px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--nc-text);
}

/* ── Dark theme tokens — only the variables change ──────────────────── */
[data-bs-theme="dark"] .ncalc[b-3pgnab8p4z] {
    --nc-text: #e6edf3;
    --nc-muted: #9198a1;
    --nc-label: #b6c0cb;
    --nc-border: #3d444d;
    --nc-border-subtle: #2a2f37;
    --nc-surface: #161b22;
    --nc-surface-alt: #21262d;
    --nc-row-alt: #1a1f27;
    --nc-input-bg: #0d1117;
    --nc-input-text: #e6edf3;
    --nc-warn-bg: rgba(187, 128, 9, .15);
    --nc-warn-border: rgba(187, 128, 9, .4);
    --nc-warn-text: #e3b341;
    --nc-accent: #2f81f7;
    --nc-accent-hover: #4c8ef7;
    --nc-accent-text: #ffffff;
    --nc-focus-ring: rgba(47, 129, 247, .4);
    color-scheme: dark; /* native spinners / select arrow follow the theme */
}

/* ── Headings & intro ───────────────────────────────────────────────── */
.ncalc h1[b-3pgnab8p4z] {
    font-size: 1.4rem;
    margin: 0 0 .25rem;
}

.ncalc .sub[b-3pgnab8p4z] {
    color: var(--nc-muted);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

/* ── Input cards ────────────────────────────────────────────────────── */
.ncalc .grid[b-3pgnab8p4z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.ncalc fieldset[b-3pgnab8p4z] {
    border: 1px solid var(--nc-border);
    border-radius: 8px;
    padding: 1rem 1rem 1.1rem;
    margin: 0;
    background: var(--nc-surface);
}

.ncalc legend[b-3pgnab8p4z] {
    font-weight: 600;
    padding: 0 .4rem;
    color: var(--nc-text);
}

.ncalc label[b-3pgnab8p4z] {
    display: block;
    font-size: .85rem;
    color: var(--nc-label);
    margin-top: .7rem;
}

    .ncalc label.inline[b-3pgnab8p4z] {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin: 0;
        color: var(--nc-text);
    }

.ncalc input[type=number][b-3pgnab8p4z],
.ncalc input[type=text][b-3pgnab8p4z],
.ncalc select[b-3pgnab8p4z] {
    display: block;
    width: 100%;
    margin-top: .25rem;
    padding: .4rem .5rem;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    font-size: .95rem;
    box-sizing: border-box;
    background: var(--nc-input-bg);
    color: var(--nc-input-text);
}

.ncalc input[b-3pgnab8p4z]::placeholder {
    color: var(--nc-muted);
}

.ncalc input:focus[b-3pgnab8p4z],
.ncalc select:focus[b-3pgnab8p4z] {
    outline: none;
    border-color: var(--nc-accent);
    box-shadow: 0 0 0 2px var(--nc-focus-ring);
}

.ncalc input[type=checkbox][b-3pgnab8p4z] {
    margin: 0;
    accent-color: var(--nc-accent);
}

/* ── Options row ────────────────────────────────────────────────────── */
.ncalc .opts[b-3pgnab8p4z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: 1rem 0 .5rem;
}

.ncalc .note[b-3pgnab8p4z] {
    font-size: .8rem;
    color: var(--nc-muted);
}

.ncalc .warn[b-3pgnab8p4z] {
    background: var(--nc-warn-bg);
    border: 1px solid var(--nc-warn-border);
    color: var(--nc-warn-text);
    padding: .6rem .8rem;
    border-radius: 6px;
    font-size: .9rem;
}

/* ── Results table ──────────────────────────────────────────────────── */
.ncalc .tablewrap[b-3pgnab8p4z] {
    overflow-x: auto;
    border: 1px solid var(--nc-border);
    border-radius: 8px;
    margin-top: .5rem;
    background: var(--nc-surface);
}

/* Override the global app.css table rules (black borders + blue/white
   thead) so the calculator keeps its own themed appearance. */
.ncalc table[b-3pgnab8p4z] {
    border-collapse: collapse;
    width: 100%;
    min-width: 0;
    font-variant-numeric: tabular-nums;
    font-size: .9rem;
    background: transparent;
}

.ncalc th[b-3pgnab8p4z],
.ncalc td[b-3pgnab8p4z] {
    padding: .45rem .6rem;
    text-align: right;
    white-space: nowrap;
    border: 0;
    border-bottom: 1px solid var(--nc-border-subtle);
    text-indent: 0;
    color: var(--nc-text);
}

.ncalc thead th[b-3pgnab8p4z] {
    background: var(--nc-surface-alt);
    color: var(--nc-text);
    position: sticky;
    top: 0;
    font-weight: 600;
}

.ncalc th .ang[b-3pgnab8p4z] {
    display: block;
    font-weight: 400;
    font-size: .72rem;
    color: var(--nc-muted);
}

.ncalc td.lbl[b-3pgnab8p4z], .ncalc th:first-child[b-3pgnab8p4z] {
    text-align: left;
}

.ncalc td.len[b-3pgnab8p4z] {
    font-weight: 600;
}

.ncalc tbody tr:nth-child(even)[b-3pgnab8p4z] {
    background: var(--nc-row-alt);
}

/* ── Actions & CSV ──────────────────────────────────────────────────── */
.ncalc .actions[b-3pgnab8p4z] {
    margin-top: 1rem;
}

.ncalc .dl[b-3pgnab8p4z] {
    display: inline-block;
    background: var(--nc-accent);
    color: var(--nc-accent-text);
    text-decoration: none;
    padding: .5rem .9rem;
    border-radius: 6px;
    font-size: .9rem;
}

    .ncalc .dl:hover[b-3pgnab8p4z] {
        background: var(--nc-accent-hover);
    }

.ncalc .csv[b-3pgnab8p4z] {
    margin-top: 1rem;
}

    .ncalc .csv summary[b-3pgnab8p4z] {
        cursor: pointer;
        font-size: .9rem;
        color: var(--nc-muted);
    }

    .ncalc .csv textarea[b-3pgnab8p4z] {
        width: 100%;
        margin-top: .5rem;
        font-family: ui-monospace, monospace;
        font-size: .8rem;
        border: 1px solid var(--nc-border);
        border-radius: 6px;
        padding: .5rem;
        box-sizing: border-box;
        background: var(--nc-input-bg);
        color: var(--nc-input-text);
    }
/* /Components/Pages/DataCollectionAddRemove.razor.rz.scp.css */
.insert-table-wrapper[b-yp8n7czhkt] {
    padding-left: 28px;
}

.insert-gap-td[b-yp8n7czhkt] {
    padding: 0;
    border: none;
}

.insert-preview[b-yp8n7czhkt] {
    background: linear-gradient(90deg, rgba(25, 135, 84, 0.15) 0%, rgba(25, 135, 84, 0.04) 100%);
    border: 2px dashed var(--bs-warning);
    border-radius: 6px;
    margin: 4px 0;
    margin-left: -24px;
}

.insert-search-panel[b-yp8n7czhkt] {
    background: rgba(255, 193, 7, 0.08);
    border: 1px dashed #ffc107;
    border-radius: 6px;
    margin: 4px 0;
    /*margin-left: -24px;*/
}

.insert-search-input[b-yp8n7czhkt] {
    max-width: 300px;
}

.insert-operations-list[b-yp8n7czhkt] {
    max-height: 200px;
    overflow-y: auto;
}

/* Green dashed top border on rows that accept an insert */
.insert-hint-row > td[b-yp8n7czhkt] {
   /* border-top: 2px dashed var(--bs-success) !important;*/
}

.insert-hint-row > td:first-child[b-yp8n7czhkt] {
    position: relative;
    overflow: visible;
}

/* Circular "+" icon sitting on the row border */
.insert-between-btn[b-yp8n7czhkt] {
    position: absolute;
    top: -14px;
    left: -28px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.insert-between-btn:hover[b-yp8n7czhkt] {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 2px 6px rgba(25, 135, 84, 0.45);
}

/* Minimal end-of-list insert indicator */
.insert-gap-end[b-yp8n7czhkt] {
    padding: 0;
    height: 0;
    border-top: 2px dashed var(--bs-success);
    border-bottom: none;
    position: relative;
    overflow: visible;
}
/* /Components/Pages/DataCollectionDaily.razor.rz.scp.css */
table[b-gjwc23dnle], th[b-gjwc23dnle], td[b-gjwc23dnle] {
    text-indent: 0;
}

table[b-gjwc23dnle] {
    table-layout: fixed;
    width: 100%;
    font-variant-numeric: tabular-nums;
}

td[b-gjwc23dnle] {
    padding: 0 0.25rem 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

th[b-gjwc23dnle] {
    white-space: nowrap;
    padding: 0 0.25rem 0 0.25rem;
}

/* Filter row inputs sit inside the header cells */
thead tr:last-child .form-control[b-gjwc23dnle],
thead tr:last-child .form-select[b-gjwc23dnle] {
    padding: 0.1rem 0.25rem;
    font-size: 0.8rem;
    font-weight: 400;
}

.sortable[b-gjwc23dnle] {
    cursor: pointer;
    user-select: none;
}

/* Employee group header */
.employee-row[b-gjwc23dnle] {
    cursor: pointer;
    border-top: 1px solid #dee2e6;
}

/* Cells that filter the table to their exact value on click */
.filter-cell[b-gjwc23dnle] {
    cursor: pointer;
}

.filter-cell:hover[b-gjwc23dnle] {
    text-decoration: underline;
}

.filter-active[b-gjwc23dnle] {
    font-weight: 600;
    text-decoration: underline;
}

tfoot td[b-gjwc23dnle] {
    border-top: 2px solid #dee2e6;
}

/* Date controls container */
.date-controls[b-gjwc23dnle] {
    width: auto;
}

/* Date input fields - using relative width */
.date-input[b-gjwc23dnle] {
    width: 10rem;
}
/* /Components/Pages/DataCollectionFloor.razor.rz.scp.css */
p[b-wmbemje3eg] {
    font-size: 5rem;
    color: red;
}

.form-control[b-wmbemje3eg] {
    border: 2px solid black;
}
input.form-control[b-wmbemje3eg] {
    border-left: none;
}

.job-info-container[b-wmbemje3eg] {
    font-size: 1.25rem;
    font-weight: 600;
    font-family: 'Century Gothic';
    margin: 5px 0;
}

.selection-container[b-wmbemje3eg] {
    display: flex;
}

.check-job[b-wmbemje3eg] {
    display: flex;
    align-items: stretch;
}
    .check-job button[b-wmbemje3eg] {
        margin-left: 5px;
    }

.operations-container[b-wmbemje3eg] {
    display: grid;
    /*grid-template-columns: 1fr auto;*/
}
.operation[b-wmbemje3eg] {
    display: flex;
    justify-content: space-between;
}
.with-button[b-wmbemje3eg] {
    display: gr;
    align-items: center;
    margin-left: 5px;
    border: none;
    padding: 0;
}
.pause[b-wmbemje3eg] {
    display: flex;
    /*flex: 1 1 auto;*/
}
    .pause button[b-wmbemje3eg] {
        width: 50%;
    }

/* Operation with info icon styling */
.operation-with-info[b-wmbemje3eg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-icon[b-wmbemje3eg] {
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.info-icon:hover[b-wmbemje3eg] {
    color: #0b5ed7 !important;
}
.clear-job-btn[b-wmbemje3eg] {
    position: relative;
    z-index: 10000;
}

/* Ensure proper touch targets for accessibility */
@media (pointer: coarse) {
    .info-icon[b-wmbemje3eg] {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* /Components/Pages/DCLeaderboard.razor.rz.scp.css */
/* ==================================================================
   DCLeaderboard.razor.css

   Row colors come from the production board's global classes
   (limegreen / greenyellow / yellow / lightsalmon / tomato) and carry
   black text. They are the only color here; everything else is
   neutral so the ramp stays readable as rank.

   One type scale drives the whole page. Head, body and foot all size
   off the same four steps, and every step is a clamp() so the board
   works on a phone and on the shop display without a pile of
   breakpoints.
   ================================================================== */

.board[b-isf6uqsyzf] {
    /* label: column headers and the footer label, identical by design */
    --step-label: clamp(0.85rem, 2.2vw, 1rem);
    /* metric: jobs / qty / sqft, in body and footer alike */
    --step-metric: clamp(0.9rem, 2.4vw, 1.1rem);
    /* name: employee, one step above the metrics */
    --step-name: clamp(1rem, 3vw, 1.3rem);
    /* hero: hours scanned, the number the board ranks on */
    --step-hero: clamp(1.4rem, 5vw, 2rem);

    --cell-x: clamp(0.3rem, 1.2vw, 0.7rem);
    --ink-dim: rgba(255, 255, 255, 0.62);
    --ink-label: rgba(255, 255, 255, 0.78);
    --rule: rgba(255, 255, 255, 0.16);

    max-width: 68rem;
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */

.board-head[b-isf6uqsyzf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.6rem 1.5rem;
    padding-bottom: 0.65rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--rule);
}

.board-name[b-isf6uqsyzf] {
    margin: 0;
    font-size: var(--step-name);
    font-weight: 700;
    line-height: 1.2;
    color: #f2f5f8;
}

.board-sub[b-isf6uqsyzf] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.2rem 0 0;
    font-size: var(--step-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-dim);
}

.board-dot[b-isf6uqsyzf] {
    opacity: 0.4;
}

.board-live[b-isf6uqsyzf] {
    background: none;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.board-controls[b-isf6uqsyzf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.date-controls[b-isf6uqsyzf] {
    width: auto;
    flex-wrap: wrap;
}

.date-input[b-isf6uqsyzf] {
    width: auto;
    min-width: 8.5rem;
    flex: 1 1 8.5rem;
}

/* ------------------------------------------------------------------
   Table: a stack of colored bands, not a grid. No vertical rules, and
   border-spacing leaves a gap so each row reads as its own block.
   ------------------------------------------------------------------ */

.board-scroll[b-isf6uqsyzf] {
    overflow-x: auto;
}

table[b-isf6uqsyzf] {
    color: black;
    table-layout: fixed;
    width: 100%;
    min-width: 21rem;
    border-collapse: separate;
    border-spacing: 0 4px;
    font-variant-numeric: tabular-nums;
}

.col-rank[b-isf6uqsyzf] { width: 7%; }
.col-name[b-isf6uqsyzf] { width: 29%; }
.col-hrs[b-isf6uqsyzf]  { width: 27%; }
.col-jobs[b-isf6uqsyzf] { width: 11%; }
.col-qty[b-isf6uqsyzf]  { width: 11%; }
.col-sqft[b-isf6uqsyzf] { width: 15%; }

th[b-isf6uqsyzf],
td[b-isf6uqsyzf] {
    padding: 0.4rem var(--cell-x);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

th.rank[b-isf6uqsyzf],
td.rank[b-isf6uqsyzf],
th.name[b-isf6uqsyzf],
td.name[b-isf6uqsyzf] {
    text-align: left;
}

/* Head and foot are the frame around the data, so they match exactly. */
thead th[b-isf6uqsyzf],
tfoot .name[b-isf6uqsyzf] {
    padding-top: 0;
    padding-bottom: 0.35rem;
    white-space: normal;
    font-size: var(--step-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--ink-label);
}

tbody td[b-isf6uqsyzf] {
    vertical-align: middle;
}

tbody td:first-child[b-isf6uqsyzf] {
    border-radius: 3px 0 0 3px;
}

tbody td:last-child[b-isf6uqsyzf] {
    border-radius: 0 3px 3px 0;
}

/* Rank is a quiet gutter figure - the order already says the same thing. */
.rank[b-isf6uqsyzf] {
    font-size: var(--step-metric);
    font-weight: 700;
    line-height: 1;
    color: rgba(0, 0, 0, 0.42);
}

.name[b-isf6uqsyzf] {
    font-size: var(--step-name);
    font-weight: 600;
    line-height: 1.2;
}

/* Hours is what the board ranks on, so it is the only thing set large. */
.hrs[b-isf6uqsyzf] {
    white-space: normal;
}

.hrs-value[b-isf6uqsyzf] {
    font-size: var(--step-hero);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.metric[b-isf6uqsyzf] {
    font-size: var(--step-metric);
    font-weight: 500;
}

/* Still clocked in - the moving digits are the whole signal. */
.live[b-isf6uqsyzf] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    margin-left: 0.3rem;
    white-space: nowrap;
}

.live-plus[b-isf6uqsyzf] {
    font-size: var(--step-label);
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
}

.live-clock[b-isf6uqsyzf] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--step-label);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Footer: a summary strip, so every figure sits on the metric step
   rather than repeating the body's hierarchy.
   ------------------------------------------------------------------ */

tfoot td[b-isf6uqsyzf] {
    padding-top: 0.55rem;
    padding-bottom: 0;
    border-top: 1px solid var(--rule);
    color: var(--ink-dim);
}

tfoot .metric[b-isf6uqsyzf],
tfoot .hrs-value[b-isf6uqsyzf] {
    font-size: var(--step-metric);
    font-weight: 700;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.82);
}

/* Wide screens read the totals in the table footer; this is its stand-in
   below, where six fixed columns cannot hold numbers this long. */
.board-totals[b-isf6uqsyzf] {
    display: none;
}

.board-empty[b-isf6uqsyzf] {
    margin-top: 1rem;
    font-size: var(--step-metric);
    color: var(--ink-dim);
}

/* ------------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------------ */

@media (max-width: 40rem) {
    /* "or" between the range buttons is noise once they wrap */
    .or[b-isf6uqsyzf] {
        display: none;
    }

    .board-controls[b-isf6uqsyzf],
    .date-controls[b-isf6uqsyzf] {
        width: 100%;
    }

    .col-rank[b-isf6uqsyzf] { width: 8%; }
    .col-name[b-isf6uqsyzf] { width: 27%; }
    .col-hrs[b-isf6uqsyzf]  { width: 25%; }
    .col-jobs[b-isf6uqsyzf] { width: 9%; }
    .col-qty[b-isf6uqsyzf]  { width: 11%; }
    .col-sqft[b-isf6uqsyzf] { width: 20%; }

    /* Footer cells truncate at this width - swap them for a line that wraps. */
    tfoot[b-isf6uqsyzf] {
        display: none;
    }

    .board-totals[b-isf6uqsyzf] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.35rem;
        margin: 0.6rem 0 0;
        padding-top: 0.55rem;
        border-top: 1px solid var(--rule);
        font-size: var(--step-metric);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: rgba(255, 255, 255, 0.82);
    }

    /* the clock drops under the hours instead of squeezing beside it */
    .live[b-isf6uqsyzf] {
        margin-left: 0;
    }

    .live-clock[b-isf6uqsyzf] {
        font-size: clamp(0.65rem, 2.8vw, 0.8rem);
    }
}
/* /Components/Pages/GrilleMatch.razor.rz.scp.css */
/* Grille Match — scoped styles.
   Palette: graphite shop floor + machined brass, matching the grille finishes. */

.mg-wrap[b-9pa2wzdwv3] {
    --mg-bg: #24262a; /* graphite */
    --mg-panel: #2e3136;
    --mg-line: #43464c;
    --mg-brass: #c9a24b; /* machined brass accent */
    --mg-brass-soft: #8a7239;
    --mg-text: #e8e6e1;
    --mg-text-dim: #9b9a96;
    max-width: 860px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
    color: var(--mg-text);
    background: var(--mg-bg);
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}

/* ---------- header ---------- */

.mg-header[b-9pa2wzdwv3] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mg-line);
}

.mg-title h1[b-9pa2wzdwv3] {
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mg-brass);
}

.mg-sub[b-9pa2wzdwv3] {
    color: var(--mg-text-dim);
    font-size: .85rem;
}

.mg-stats[b-9pa2wzdwv3] {
    display: flex;
    gap: 1.5rem;
}

.mg-stat[b-9pa2wzdwv3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.mg-stat-label[b-9pa2wzdwv3] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mg-text-dim);
}

.mg-stat-value[b-9pa2wzdwv3] {
    font-size: 1.3rem;
    font-weight: 600;
}

/* ---------- controls ---------- */

.mg-controls[b-9pa2wzdwv3] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0 1.25rem;
}

.mg-difficulty[b-9pa2wzdwv3] {
    display: flex;
    border: 1px solid var(--mg-line);
    border-radius: 6px;
    overflow: hidden;
}

.mg-diff-btn[b-9pa2wzdwv3] {
    background: transparent;
    border: none;
    color: var(--mg-text-dim);
    padding: .45rem .9rem;
    font-size: .85rem;
    cursor: pointer;
}

    .mg-diff-btn + .mg-diff-btn[b-9pa2wzdwv3] {
        border-left: 1px solid var(--mg-line);
    }

    .mg-diff-btn.active[b-9pa2wzdwv3] {
        background: var(--mg-brass);
        color: #1d1e21;
        font-weight: 600;
    }

.mg-new-btn[b-9pa2wzdwv3] {
    background: transparent;
    border: 1px solid var(--mg-brass);
    color: var(--mg-brass);
    border-radius: 6px;
    padding: .45rem 1.1rem;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .mg-new-btn:hover[b-9pa2wzdwv3] {
        background: var(--mg-brass);
        color: #1d1e21;
    }

/* ---------- board ---------- */

.mg-board[b-9pa2wzdwv3] {
    display: grid;
    gap: .6rem;
}

    .mg-board.pairs-6[b-9pa2wzdwv3] {
        grid-template-columns: repeat(4, 1fr);
    }
    /* 12 tiles: 4×3 */
    .mg-board.pairs-8[b-9pa2wzdwv3] {
        grid-template-columns: repeat(4, 1fr);
    }
    /* 16 tiles: 4×4 */
    .mg-board.pairs-10[b-9pa2wzdwv3] {
        grid-template-columns: repeat(5, 1fr);
    }
/* 20 tiles: 5×4 */

@media (max-width: 560px) {
    .mg-board.pairs-10[b-9pa2wzdwv3] {
        grid-template-columns: repeat(4, 1fr);
    }

    .mg-stats[b-9pa2wzdwv3] {
        gap: 1rem;
    }
}

/* ---------- tiles ---------- */

.mg-tile[b-9pa2wzdwv3] {
    aspect-ratio: 1;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    perspective: 700px;
}

    .mg-tile:disabled[b-9pa2wzdwv3] {
        cursor: default;
    }

    .mg-tile:focus-visible[b-9pa2wzdwv3] {
        outline: 2px solid var(--mg-brass);
        outline-offset: 2px;
        border-radius: 8px;
    }

.mg-tile-inner[b-9pa2wzdwv3] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.mg-tile.flipped .mg-tile-inner[b-9pa2wzdwv3] {
    transform: rotateY(180deg);
}

.mg-face[b-9pa2wzdwv3] {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Card back: brushed-steel panel, perforated dot pattern, brass AG mark.
   The mark PNG has the brass tint + 34% opacity baked in. */
.mg-back[b-9pa2wzdwv3] {
    background: url('image/memory-tiles/ag-mark-back.png') center / 56% auto no-repeat, radial-gradient(circle at 50% 50%, #17181b 1.5px, transparent 1.6px) 0 0 / 12px 12px, linear-gradient(115deg, #4a4d53, #33363b 45%, #4a4d53 70%, #2c2f34);
    border: 1px solid var(--mg-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.mg-front[b-9pa2wzdwv3] {
    transform: rotateY(180deg);
    background: #f2f0ec;
    border: 1px solid var(--mg-brass-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mg-front img[b-9pa2wzdwv3] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mg-tile.matched .mg-front[b-9pa2wzdwv3] {
    border-color: var(--mg-brass);
    box-shadow: 0 0 0 2px var(--mg-brass);
}

.mg-tile.matched .mg-tile-inner[b-9pa2wzdwv3] {
    animation: mg-settle-b-9pa2wzdwv3 .4s ease;
}

@keyframes mg-settle-b-9pa2wzdwv3 {
    0% {
        transform: rotateY(180deg) scale(1);
    }

    50% {
        transform: rotateY(180deg) scale(1.06);
    }

    100% {
        transform: rotateY(180deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mg-tile-inner[b-9pa2wzdwv3] {
        transition: none;
    }

    .mg-tile.matched .mg-tile-inner[b-9pa2wzdwv3] {
        animation: none;
    }
}

/* ---------- win overlay ---------- */

.mg-overlay[b-9pa2wzdwv3] {
    position: fixed;
    inset: 0;
    background: rgba(20, 21, 23, .75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.mg-win[b-9pa2wzdwv3] {
    background: var(--mg-panel);
    border: 1px solid var(--mg-brass);
    border-radius: 10px;
    padding: 2rem 2.5rem;
    text-align: center;
    max-width: 420px;
    margin: 1rem;
    color: var(--mg-text);
}

.mg-win-eyebrow[b-9pa2wzdwv3] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--mg-brass);
}

.mg-win h2[b-9pa2wzdwv3] {
    margin: .4rem 0 .6rem;
    font-size: 1.35rem;
}

.mg-win p[b-9pa2wzdwv3] {
    color: var(--mg-text-dim);
    margin-bottom: 1.25rem;
}

    .mg-win p strong[b-9pa2wzdwv3] {
        color: var(--mg-brass);
    }

.mg-win-totals[b-9pa2wzdwv3] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    font-size: .8rem;
    color: var(--mg-text-dim);
}

    .mg-win-totals span[b-9pa2wzdwv3] {
        display: block;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--mg-text);
    }

/* ---------- education: matched-tile captions ---------- */

.mg-tile-name[b-9pa2wzdwv3] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    color: #f2f0ec;
    background: rgba(36, 38, 42, .78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- education: match reveal card ---------- */

.mg-reveal[b-9pa2wzdwv3] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--mg-panel);
    border: 1px solid var(--mg-line);
    border-left: 3px solid var(--mg-brass);
    border-radius: 0 8px 8px 0;
    animation: mg-reveal-in-b-9pa2wzdwv3 .3s ease;
}

@keyframes mg-reveal-in-b-9pa2wzdwv3 {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.mg-reveal img[b-9pa2wzdwv3] {
    width: 76px;
    height: 76px;
    border-radius: 6px;
    border: 1px solid var(--mg-brass-soft);
    flex-shrink: 0;
}

.mg-reveal-body[b-9pa2wzdwv3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mg-reveal-eyebrow[b-9pa2wzdwv3] {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--mg-brass);
}

.mg-reveal-name[b-9pa2wzdwv3] {
    font-size: 1.05rem;
    font-weight: 600;
}

.mg-reveal-num[b-9pa2wzdwv3] {
    font-weight: 400;
    color: var(--mg-text-dim);
}

.mg-reveal-sizes[b-9pa2wzdwv3] {
    font-size: .8rem;
    color: var(--mg-text-dim);
    overflow-wrap: anywhere;
}

/* ---------- education: win recap ---------- */

.mg-win-patterns[b-9pa2wzdwv3] {
    text-align: left;
    margin-bottom: 1.5rem;
    max-height: 40vh;
    overflow-y: auto;
}

.mg-win-patterns-title[b-9pa2wzdwv3] {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--mg-text-dim);
    margin-bottom: .4rem;
}

.mg-win-patterns ul[b-9pa2wzdwv3] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mg-win-patterns li[b-9pa2wzdwv3] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    border-top: 1px solid var(--mg-line);
    font-size: .85rem;
}

.mg-wp-sizes[b-9pa2wzdwv3] {
    color: var(--mg-text-dim);
    text-align: right;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .mg-reveal[b-9pa2wzdwv3] {
        animation: none;
    }
}
/* /Components/Pages/GrilleQuote.razor.rz.scp.css */
.rfq[b-mme1v0gjfp] {
    /* Bootstrap's theme variables where they exist, brand colors with dark-mode values below */
    --rfq-surface: var(--bs-body-bg, #fff);
    --rfq-paper: var(--bs-tertiary-bg, #f4f6f9);
    --rfq-line: var(--bs-border-color, #c9d1dc);
    --rfq-muted: var(--bs-secondary-color, #5b6472);
    --rfq-navy: #0a224d;
    --rfq-ink: #0a224d;
    --rfq-blue: #1785cf;
    --rfq-tint: #e8f2fb;
    scroll-margin-top: 1rem;
}

.rfq-head[b-mme1v0gjfp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .9rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--rfq-navy);
}

.rfq-head h1[b-mme1v0gjfp],
.rfq-step h2[b-mme1v0gjfp],
.rfq-done h2[b-mme1v0gjfp] {
    color: var(--rfq-ink);
}

/* ---- option cards ---- */
.rfq-card[b-mme1v0gjfp] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0 0 .75rem;
    overflow: hidden;
    text-align: left;
    color: inherit;
    background: var(--rfq-surface);
    border: 1px solid var(--rfq-line);
    border-radius: 4px;
    transition: border-color .15s;
}

.rfq-card:hover[b-mme1v0gjfp] {
    border-color: var(--rfq-blue);
}

.rfq-card:focus-visible[b-mme1v0gjfp],
.rfq-swatch:focus-visible[b-mme1v0gjfp],
.rfq-cell:focus-visible[b-mme1v0gjfp],
.rfq-rail button:focus-visible[b-mme1v0gjfp] {
    outline: 3px solid var(--rfq-blue);
    outline-offset: 2px;
}

.rfq-card.selected[b-mme1v0gjfp]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--rfq-navy);
    border-radius: 4px;
    pointer-events: none;
}

.rfq-card.selected[b-mme1v0gjfp]::before {
    content: "✓";
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: var(--rfq-navy);
    border-radius: 50%;
}

.rfq-img[b-mme1v0gjfp] {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--rfq-paper);
    border-bottom: 1px solid var(--rfq-line);
}

.rfq-img img[b-mme1v0gjfp] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* line drawings (frames, fastening): keep the whole drawing */
.rfq-img.wide[b-mme1v0gjfp] {
    aspect-ratio: 16 / 10;
    background: var(--rfq-surface);
}

.rfq-img.wide img[b-mme1v0gjfp] {
    object-fit: contain;
    padding: .25rem;
}

.rfq-name[b-mme1v0gjfp] {
    display: block;
    padding: .6rem .75rem 0;
    font-weight: 600;
    line-height: 1.25;
    color: var(--rfq-ink);
}

.rfq-card-lg .rfq-name[b-mme1v0gjfp] {
    font-size: 1.15rem;
}

.rfq-tip[b-mme1v0gjfp] {
    display: block;
    padding: .2rem .75rem 0;
    font-size: .85rem;
    line-height: 1.35;
    color: var(--rfq-muted);
}

/* ---- step rail ---- */
.rfq-rail[b-mme1v0gjfp] {
    display: flex;
    gap: .15rem;
    margin: 0 0 1.5rem;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    border-bottom: 1px solid var(--rfq-line);
}

.rfq-rail li[b-mme1v0gjfp] {
    flex: 0 0 auto;
}

.rfq-rail button[b-mme1v0gjfp] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .6rem .6rem;
    white-space: nowrap;
    color: var(--rfq-muted);
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
}

.rfq-rail button:disabled[b-mme1v0gjfp] {
    opacity: .5;
}

.rfq-rail button:not(:disabled):hover[b-mme1v0gjfp] {
    color: var(--rfq-blue);
}

.rfq-num[b-mme1v0gjfp] {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    font-size: .8rem;
    font-weight: 600;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.rfq-rail .done button[b-mme1v0gjfp] {
    color: var(--rfq-ink);
}

.rfq-rail .done .rfq-num[b-mme1v0gjfp] {
    color: #fff;
    background: var(--rfq-navy);
    border-color: var(--rfq-ink);
}

.rfq-rail .current button[b-mme1v0gjfp] {
    font-weight: 600;
    color: var(--rfq-ink);
    border-bottom-color: var(--rfq-blue);
}

/* ---- back / next bar: stays reachable under long option grids ---- */
.rfq-nav[b-mme1v0gjfp] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.5rem;
    padding: .9rem 0;
    background: var(--rfq-surface);
    border-top: 1px solid var(--rfq-line);
}

/* ---- title block (summary panel, quote items) ---- */
.rfq-block[b-mme1v0gjfp] {
    display: flex;
    flex-direction: column;
    background: var(--rfq-surface);
    border: 2px solid var(--rfq-navy);
}

.rfq-block table[b-mme1v0gjfp] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.rfq-block thead th[b-mme1v0gjfp] {
    padding: .55rem .75rem;
    font-weight: 600;
    text-align: left;
    color: #fff;
    background: var(--rfq-navy);
}

.rfq-block thead th span[b-mme1v0gjfp] {
    float: right;
    font-weight: 400;
    opacity: .8;
}

.rfq-block tbody th[b-mme1v0gjfp] {
    width: 36%;
    padding: .45rem .75rem;
    font-weight: 500;
    vertical-align: top;
    color: var(--rfq-muted);
    background: var(--rfq-paper);
    border-top: 1px solid var(--rfq-line);
    border-right: 1px solid var(--rfq-line);
}

.rfq-block td[b-mme1v0gjfp] {
    padding: 0;
    vertical-align: top;
    border-top: 1px solid var(--rfq-line);
}

.rfq-block tr.current th[b-mme1v0gjfp],
.rfq-block tr.current td[b-mme1v0gjfp] {
    background: var(--rfq-tint);
}

.rfq-cell[b-mme1v0gjfp] {
    display: block;
    width: 100%;
    padding: .45rem .75rem;
    text-align: left;
    white-space: pre-line;
    color: inherit;
    background: none;
    border: 0;
}

button.rfq-cell:disabled[b-mme1v0gjfp] {
    color: inherit;
    opacity: 1;
}

button.rfq-cell:not(:disabled):hover[b-mme1v0gjfp] {
    background: var(--rfq-tint);
}

.rfq-block-actions[b-mme1v0gjfp] {
    display: flex;
    gap: .5rem;
    margin-top: auto;
    padding: .6rem .75rem;
    border-top: 1px solid var(--rfq-line);
}

.rfq-sticky[b-mme1v0gjfp] {
    position: sticky;
    top: 1rem;
}

/* ---- inputs ---- */
.rfq-extra[b-mme1v0gjfp] {
    margin-top: 1.25rem;
    padding: 1rem;
    background: var(--rfq-paper);
    border-left: 3px solid var(--rfq-blue);
}

.rfq-ral[b-mme1v0gjfp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
    gap: .4rem;
    max-height: 22rem;
    padding: .25rem;
    overflow-y: auto;
}

.rfq-swatch[b-mme1v0gjfp] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .25rem;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    background: var(--rfq-surface);
    border: 1px solid var(--rfq-line);
    border-radius: 3px;
}

.rfq-swatch.selected[b-mme1v0gjfp] {
    border-color: var(--rfq-ink);
    box-shadow: 0 0 0 2px var(--rfq-navy);
}

.rfq-chip[b-mme1v0gjfp] {
    display: block;
    height: 2.2rem;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.rfq-drawing[b-mme1v0gjfp] {
    background: var(--rfq-surface);
    border: 1px solid var(--rfq-line);
}

.rfq-counter[b-mme1v0gjfp] {
    max-width: 12rem;
}

.rfq-counter .form-control[b-mme1v0gjfp] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.rfq-counter input[b-mme1v0gjfp]::-webkit-inner-spin-button,
.rfq-counter input[b-mme1v0gjfp]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rfq-empty[b-mme1v0gjfp],
.rfq-done[b-mme1v0gjfp] {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2.5rem 1rem;
    text-align: center;
}

@media (max-width: 991.98px) {
    .rfq-sticky[b-mme1v0gjfp] {
        position: static;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rfq-card[b-mme1v0gjfp] {
        transition: none;
    }
}

/* landing tiles stay a sensible size on very wide screens */
.rfq-start[b-mme1v0gjfp] {
    max-width: 1100px;
}

[data-bs-theme=dark] .rfq[b-mme1v0gjfp] {
    --rfq-navy: #2f6db5;
    --rfq-ink: #b8d3f2;
    --rfq-blue: #4aa3df;
    --rfq-tint: rgba(74, 163, 223, .16);
}

/* grille types not available yet */
.rfq-soon[b-mme1v0gjfp] {
    position: relative;
    cursor: not-allowed;
    opacity: .55;
    filter: grayscale(.6);
}

.rfq-soon:hover[b-mme1v0gjfp] {
    border-color: var(--rfq-line);
}

.rfq-soon-badge[b-mme1v0gjfp] {
    position: absolute;
    top: .6rem;
    right: .6rem;
    padding: .2rem .55rem;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    background: var(--rfq-navy);
    border-radius: 999px;
}

/* ---- project and contact form: a readable width, compact groups ---- */
.rfq-project[b-mme1v0gjfp] {
    max-width: 1500px;
}

.rfq-project fieldset[b-mme1v0gjfp] {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--rfq-line);
}

.rfq-project legend[b-mme1v0gjfp] {
    float: none;
    width: auto;
    margin-bottom: .35rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--rfq-ink);
}

.rfq-project .form-label[b-mme1v0gjfp] {
    margin-bottom: .2rem;
    font-size: .875rem;
}

.rfq-req[b-mme1v0gjfp] {
    font-weight: 600;
    color: #dc3545;
}

.rfq-bad[b-mme1v0gjfp] {
    border-radius: .25rem;
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

/* ---- drop one of our drawings ---- */
.rfq-drop[b-mme1v0gjfp] {
    margin-bottom: 1rem;
    padding: .9rem 1.1rem;
    background: var(--rfq-paper);
    border: 2px dashed var(--rfq-line);
    border-radius: 6px;
    transition: border-color .15s, background .15s;
}

.rfq-drop.over[b-mme1v0gjfp] {
    background: var(--rfq-tint);
    border-color: var(--rfq-blue);
}

.rfq-drop-label[b-mme1v0gjfp] {
    display: block;
    cursor: pointer;
}

.rfq-link[b-mme1v0gjfp] {
    color: var(--rfq-blue);
    text-decoration: underline;
}

/* ---- Your quote as a list ---- */
.rfq-list[b-mme1v0gjfp] {
    border: 1px solid var(--rfq-line);
    border-radius: 6px;
}

.rfq-list th[b-mme1v0gjfp] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--rfq-muted);
    white-space: nowrap;
}

.rfq-list td[b-mme1v0gjfp] {
    font-size: .9rem;
}

.rfq-list tbody tr:hover[b-mme1v0gjfp] {
    background: var(--rfq-tint);
}

/* ---- the two parts: what a quote needs, and what helps ---- */
.rfq-need[b-mme1v0gjfp],
.rfq-nice[b-mme1v0gjfp] {
    margin-top: 1rem;
    padding: .9rem 1.1rem 1rem;
    border: 1px solid var(--rfq-line);
    border-radius: 6px;
}

.rfq-need[b-mme1v0gjfp] {
    border-left: 4px solid var(--rfq-blue);
}

.rfq-need h3[b-mme1v0gjfp],
.rfq-nice h3[b-mme1v0gjfp] {
    color: var(--rfq-ink);
}

.rfq-nice[b-mme1v0gjfp] {
    background: var(--rfq-paper);
}

.rfq-nice fieldset:first-of-type[b-mme1v0gjfp] {
    margin-top: .25rem;
}

/* needed and helpful side by side on wide screens */
.rfq-form-cols[b-mme1v0gjfp] {
    display: grid;
    gap: 1rem;
}

.rfq-form-cols .rfq-need[b-mme1v0gjfp],
.rfq-form-cols .rfq-nice[b-mme1v0gjfp] {
    margin-top: 0;
}

@media (min-width: 1200px) {
    .rfq-form-cols[b-mme1v0gjfp] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        align-items: start;
    }
}

/* Back / Send: a bar that stays at the bottom of the window while the form scrolls */
.rfq-actions-bar[b-mme1v0gjfp] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--rfq-surface);
    border: 1px solid var(--rfq-line);
    border-radius: 6px;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
}

.rfq-actions-msg[b-mme1v0gjfp] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
}

.rfq-actions-bar .btn-success[b-mme1v0gjfp] {
    padding-inline: 1.75rem;
}
/* /Components/Pages/Grillionaire.razor.rz.scp.css */
/* ------------------------------------------------------------------
   Grille Millionaire — collocated isolated styles
   Palette: midnight navy stage, brass/gold hardware, steel ladder.
   The perforation-dot backdrop and bar-grille prize ladder are the
   Arch Grille nods.
------------------------------------------------------------------- */

.gm-stage[b-cl6k32j9ek] {
    --gm-navy-deep: #04091a;
    --gm-navy: #0a1631;
    --gm-navy-light: #16306b;
    --gm-brass: #c9a227;
    --gm-brass-bright: #e8c55a;
    --gm-steel: #8b95a6;
    --gm-select: #d68a00;
    --gm-correct: #1f9d3a;
    --gm-wrong: #b8352c;
    min-height: 100vh;
    padding: 1.5rem;
    color: #e9edf5;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1.2px, transparent 0) 0 0 / 22px 22px, radial-gradient(ellipse at 50% -20%, var(--gm-navy-light) 0%, var(--gm-navy) 45%, var(--gm-navy-deep) 100%);
}

/* ----------------------------- Header ---------------------------- */

.gm-header[b-cl6k32j9ek] {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.gm-logo-ring[b-cl6k32j9ek] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(from 200deg, var(--gm-brass), var(--gm-brass-bright), #7a5f12, var(--gm-brass));
    box-shadow: 0 0 24px rgba(232, 197, 90, 0.35);
    flex-shrink: 0;
}

.gm-logo-inner[b-cl6k32j9ek] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--gm-navy-deep);
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--gm-brass-bright);
}

.gm-titles h1[b-cl6k32j9ek] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gm-brass-bright);
    text-shadow: 0 2px 12px rgba(232, 197, 90, 0.25);
}

.gm-titles p[b-cl6k32j9ek] {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--gm-steel);
}

/* ----------------------------- Layout ---------------------------- */

.gm-layout[b-cl6k32j9ek] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

.gm-game[b-cl6k32j9ek] {
    position: relative; /* anchors .gm-overlay */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ------------------------------ Intro ---------------------------- */

.gm-intro[b-cl6k32j9ek] {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 10px;
    background: rgba(4, 9, 26, 0.55);
}

    .gm-intro p[b-cl6k32j9ek] {
        max-width: 46ch;
        margin: 0 auto 1.5rem;
        line-height: 1.55;
        color: #c6cede;
    }

    .gm-intro .gm-error[b-cl6k32j9ek] {
        color: #e08a83;
        border: 1px solid rgba(184, 53, 44, 0.5);
        border-radius: 6px;
        background: rgba(184, 53, 44, 0.12);
        padding: 0.6rem 0.9rem;
        font-size: 0.9rem;
    }

/* ---------------------------- Lifelines -------------------------- */

.gm-lifelines[b-cl6k32j9ek] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.gm-lifeline[b-cl6k32j9ek] {
    min-width: 76px;
    height: 44px;
    padding: 0 0.9rem;
    border-radius: 999px;
    border: 2px solid var(--gm-brass);
    background: radial-gradient(ellipse at 50% 0%, #1c3a7e, var(--gm-navy) 75%);
    color: var(--gm-brass-bright);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}

    .gm-lifeline:hover:not(:disabled)[b-cl6k32j9ek] {
        box-shadow: 0 0 16px rgba(232, 197, 90, 0.45);
        transform: translateY(-1px);
    }

    .gm-lifeline:focus-visible[b-cl6k32j9ek] {
        outline: 2px solid var(--gm-brass-bright);
        outline-offset: 2px;
    }

    .gm-lifeline.used[b-cl6k32j9ek] {
        border-color: #3a4258;
        color: #5b6478;
        text-decoration: line-through;
        background: var(--gm-navy-deep);
    }

    .gm-lifeline:disabled[b-cl6k32j9ek] {
        cursor: default;
    }

/* -------------------------- Lifeline panels ---------------------- */

.gm-panel[b-cl6k32j9ek] {
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 10px;
    background: rgba(4, 9, 26, 0.65);
    padding: 0.9rem 1.1rem;
}

.gm-panel-label[b-cl6k32j9ek] {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gm-brass);
    margin-bottom: 0.5rem;
}

.gm-hint[b-cl6k32j9ek] {
    margin: 0;
    font-style: italic;
    color: #dbe2ef;
}

.gm-poll[b-cl6k32j9ek] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.gm-poll-row[b-cl6k32j9ek] {
    display: grid;
    grid-template-columns: 1.4rem 1fr 3rem;
    align-items: center;
    gap: 0.6rem;
}

.gm-poll-letter[b-cl6k32j9ek] {
    font-weight: 700;
    color: var(--gm-brass-bright);
}

.gm-poll-track[b-cl6k32j9ek] {
    height: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.gm-poll-bar[b-cl6k32j9ek] {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--gm-brass), var(--gm-brass-bright));
    transition: width 0.6s ease-out;
}

.gm-poll-pct[b-cl6k32j9ek] {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-size: 0.85rem;
}

/* --------------------------- Question area ----------------------- */

.gm-question-area[b-cl6k32j9ek] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gm-level-tag[b-cl6k32j9ek] {
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gm-steel);
}

/* The classic elongated hexagon, built as a gold shell + inset core */

.gm-lozenge[b-cl6k32j9ek] {
    --hex: polygon(26px 0%, calc(100% - 26px) 0%, 100% 50%, calc(100% - 26px) 100%, 26px 100%, 0% 50%);
    clip-path: var(--hex);
    background: linear-gradient(180deg, var(--gm-brass-bright), var(--gm-brass) 60%, #7a5f12);
    padding: 2px;
    position: relative;
}

.gm-lozenge-inner[b-cl6k32j9ek] {
    clip-path: var(--hex);
    background: radial-gradient(ellipse at 50% 0%, #1c3a7e, var(--gm-navy) 80%);
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 2.4rem;
    text-align: center;
    line-height: 1.4;
}

.gm-question .gm-lozenge-inner[b-cl6k32j9ek] {
    min-height: 84px;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ----------------------------- Answers --------------------------- */

.gm-answers[b-cl6k32j9ek] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.gm-answer[b-cl6k32j9ek] {
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    transition: filter 0.15s;
}

    .gm-answer .gm-lozenge-inner[b-cl6k32j9ek] {
        justify-content: flex-start;
        text-align: left;
    }

    .gm-answer:hover:not(:disabled)[b-cl6k32j9ek] {
        filter: brightness(1.25);
    }

    .gm-answer:focus-visible[b-cl6k32j9ek] {
        outline: 2px solid var(--gm-brass-bright);
        outline-offset: 2px;
    }

    .gm-answer:disabled[b-cl6k32j9ek] {
        cursor: default;
    }

.gm-answer-letter[b-cl6k32j9ek] {
    color: var(--gm-brass-bright);
    font-weight: 800;
    flex-shrink: 0;
}

.gm-answer.removed[b-cl6k32j9ek] {
    visibility: hidden; /* keep the 2x2 layout stable */
}

.gm-answer.selected .gm-lozenge-inner[b-cl6k32j9ek] {
    background: radial-gradient(ellipse at 50% 0%, #f2a83c, var(--gm-select) 80%);
    color: #14100a;
}

.gm-answer.selected .gm-answer-letter[b-cl6k32j9ek] {
    color: #14100a;
}

.gm-answer.suspense .gm-lozenge-inner[b-cl6k32j9ek] {
    animation: gm-suspense-b-cl6k32j9ek 0.9s ease-in-out infinite;
}

.gm-answer.correct .gm-lozenge-inner[b-cl6k32j9ek] {
    background: radial-gradient(ellipse at 50% 0%, #35c957, var(--gm-correct) 80%);
    color: #06210d;
    animation: gm-flash-b-cl6k32j9ek 0.5s ease-in-out 3;
}

.gm-answer.correct .gm-answer-letter[b-cl6k32j9ek] {
    color: #06210d;
}

.gm-answer.wrong[b-cl6k32j9ek] {
    animation: gm-shake-b-cl6k32j9ek 0.5s ease-in-out;
}

    .gm-answer.wrong .gm-lozenge-inner[b-cl6k32j9ek] {
        background: radial-gradient(ellipse at 50% 0%, #e05a4f, var(--gm-wrong) 80%);
        color: #2b0805;
    }

    .gm-answer.wrong .gm-answer-letter[b-cl6k32j9ek] {
        color: #2b0805;
    }

@keyframes gm-suspense-b-cl6k32j9ek {
    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.45);
    }
}

@keyframes gm-flash-b-cl6k32j9ek {
    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.6);
    }
}

/* ----------------------------- Controls -------------------------- */

/* Fixed two-slot grid: buttons never mount/unmount during play, only
   enable/disable, so nothing shifts when state changes. */
.gm-controls[b-cl6k32j9ek] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    justify-content: center;
    gap: 0.75rem;
}

.gm-btn[b-cl6k32j9ek] {
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    border: 2px solid var(--gm-brass);
    background: transparent;
    color: var(--gm-brass-bright);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}

    .gm-btn:hover:not(:disabled)[b-cl6k32j9ek] {
        background: rgba(201, 162, 39, 0.15);
    }

    .gm-btn:focus-visible[b-cl6k32j9ek] {
        outline: 2px solid var(--gm-brass-bright);
        outline-offset: 2px;
    }

    .gm-btn:disabled[b-cl6k32j9ek] {
        opacity: 0.35;
        cursor: default;
    }

.gm-btn-primary[b-cl6k32j9ek] {
    background: linear-gradient(180deg, var(--gm-brass-bright), var(--gm-brass));
    color: #1b1503;
}

    .gm-btn-primary:hover:not(:disabled)[b-cl6k32j9ek] {
        background: linear-gradient(180deg, #f4d878, var(--gm-brass-bright));
    }

/* ---------------------- Overlay banners -------------------------
   Safe-haven crossings and game endings get a full-column overlay:
   the board dims behind (the green/red reveal stays visible), the
   banner pops in with the amount front and center.
------------------------------------------------------------------ */

.gm-overlay[b-cl6k32j9ek] {
    position: absolute;
    inset: -0.75rem;
    z-index: 5;
    display: grid;
    place-items: center;
    background: rgba(4, 9, 26, 0.78);
    border-radius: 12px;
    animation: gm-overlay-fade-b-cl6k32j9ek 0.35s ease-out;
}

.gm-banner[b-cl6k32j9ek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2rem 3.5rem;
    border: 2px solid var(--gm-brass);
    border-radius: 14px;
    background: radial-gradient(ellipse at 50% 0%, rgba(232, 197, 90, 0.12), transparent 65%), linear-gradient(180deg, #101d3d, var(--gm-navy-deep));
    box-shadow: 0 0 40px rgba(232, 197, 90, 0.3), 0 8px 32px rgba(0, 0, 0, 0.55);
    animation: gm-banner-pop-b-cl6k32j9ek 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
}

.gm-banner-label[b-cl6k32j9ek] {
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #c6cede;
}

.gm-banner-amount[b-cl6k32j9ek] {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--gm-brass-bright);
    text-shadow: 0 0 24px rgba(232, 197, 90, 0.55);
    animation: gm-amount-glow-b-cl6k32j9ek 1.6s ease-in-out infinite;
}

.gm-banner-sub[b-cl6k32j9ek] {
    font-size: 0.85rem;
    color: var(--gm-steel);
    margin-bottom: 0.6rem;
}

.gm-banner.lost[b-cl6k32j9ek] {
    border-color: var(--gm-wrong);
    box-shadow: 0 0 40px rgba(184, 53, 44, 0.35), 0 8px 32px rgba(0, 0, 0, 0.55);
}

    .gm-banner.lost .gm-banner-label[b-cl6k32j9ek] {
        color: #e08a83;
    }

@keyframes gm-overlay-fade-b-cl6k32j9ek {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes gm-banner-pop-b-cl6k32j9ek {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes gm-amount-glow-b-cl6k32j9ek {
    0%, 100% {
        text-shadow: 0 0 18px rgba(232, 197, 90, 0.4);
    }

    50% {
        text-shadow: 0 0 34px rgba(232, 197, 90, 0.8);
    }
}

@keyframes gm-shake-b-cl6k32j9ek {
    0%, 100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(7px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(3px);
    }
}

/* --------------------- Prize ladder (bar grille) ------------------
   Rendered as a stack of extruded metal bars — top rung is the
   million. The current question's bar glows brass.
------------------------------------------------------------------- */

.gm-ladder[b-cl6k32j9ek] {
    display: flex;
    flex-direction: column;
    gap: 4px; /* the "gap" between bars */
    padding: 10px;
    border: 3px solid #55607450; /* the frame */
    border-radius: 4px;
    background: rgba(4, 9, 26, 0.6);
}

.gm-rung[b-cl6k32j9ek] {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.32rem 0.7rem;
    border-radius: 2px;
    background: linear-gradient(180deg, #303a4e, #1d2536 45%, #141b2a);
    color: var(--gm-steel);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.gm-rung-num[b-cl6k32j9ek] {
    font-size: 0.72rem;
    opacity: 0.7;
}

.gm-rung-prize[b-cl6k32j9ek] {
    font-weight: 600;
    text-align: right;
}

.gm-rung.safe[b-cl6k32j9ek] {
    color: #eef2f9;
}

    .gm-rung.safe .gm-rung-prize[b-cl6k32j9ek] {
        font-weight: 800;
    }

.gm-rung.cleared[b-cl6k32j9ek] {
    color: var(--gm-brass);
}

.gm-rung.current[b-cl6k32j9ek] {
    background: linear-gradient(180deg, var(--gm-brass-bright), var(--gm-brass) 55%, #8a6d14);
    color: #1b1503;
    box-shadow: 0 0 14px rgba(232, 197, 90, 0.45);
}

    .gm-rung.current .gm-rung-num[b-cl6k32j9ek] {
        opacity: 1;
    }

/* ---------------------------- Responsive ------------------------- */

@media (max-width: 900px) {
    .gm-layout[b-cl6k32j9ek] {
        grid-template-columns: 1fr;
    }

    .gm-ladder[b-cl6k32j9ek] {
        order: -1;
        flex-direction: row-reverse; /* horizontal strip on mobile, low prizes on the left */
        flex-wrap: wrap;
        justify-content: center;
    }

    .gm-rung[b-cl6k32j9ek] {
        grid-template-columns: auto;
        padding: 0.25rem 0.55rem;
    }

    .gm-rung-num[b-cl6k32j9ek] {
        display: none;
    }
}

@media (max-width: 560px) {
    .gm-answers[b-cl6k32j9ek] {
        grid-template-columns: 1fr;
    }

    .gm-lozenge[b-cl6k32j9ek] {
        --hex: polygon(16px 0%, calc(100% - 16px) 0%, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0% 50%);
    }

    .gm-lozenge-inner[b-cl6k32j9ek] {
        padding: 0.75rem 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gm-answer.suspense .gm-lozenge-inner[b-cl6k32j9ek],
    .gm-answer.correct .gm-lozenge-inner[b-cl6k32j9ek],
    .gm-answer.wrong[b-cl6k32j9ek],
    .gm-overlay[b-cl6k32j9ek],
    .gm-banner[b-cl6k32j9ek],
    .gm-banner-amount[b-cl6k32j9ek] {
        animation: none;
    }
}
/* /Components/Pages/GrillionaireQuestions.razor.rz.scp.css */
/* ------------------------------------------------------------------
   Grillionaire question entry — matches the game's navy/brass palette
   but stays a plain working form, not a stage.
------------------------------------------------------------------- */

.qa-page[b-rqk23cunnk] {
    --qa-navy-deep: #04091a;
    --qa-navy: #0a1631;
    --qa-brass: #c9a227;
    --qa-brass-bright: #e8c55a;
    --qa-steel: #8b95a6;
    --qa-line: rgba(201, 162, 39, 0.35);
    --qa-good: #35c957;
    --qa-bad: #e05a4f;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    color: #e9edf5;
    font-family: "Segoe UI", system-ui, sans-serif;
}

.qa-header h1[b-rqk23cunnk] {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qa-brass-bright);
}

.qa-header p[b-rqk23cunnk] {
    margin: 0.25rem 0 1.25rem;
    color: var(--qa-steel);
    font-size: 0.85rem;
}

/* ------------------------------ Form ----------------------------- */

.qa-form[b-rqk23cunnk] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    border: 1px solid var(--qa-line);
    border-radius: 10px;
    background: rgba(4, 9, 26, 0.55);
    padding: 1.1rem 1.25rem 1.25rem;
}

.qa-row[b-rqk23cunnk] {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.qa-field[b-rqk23cunnk] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 260px;
}

.qa-field-small[b-rqk23cunnk] {
    flex: 0 1 160px;
}

.qa-field > span[b-rqk23cunnk] {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qa-steel);
}

.qa-field em[b-rqk23cunnk] {
    text-transform: none;
    letter-spacing: normal;
    font-style: normal;
    opacity: 0.75;
}

.qa-field input[b-rqk23cunnk],
.qa-field textarea[b-rqk23cunnk],
.qa-answer-input[b-rqk23cunnk] {
    background: var(--qa-navy);
    border: 1px solid #2a3550;
    border-radius: 6px;
    color: #e9edf5;
    padding: 0.5rem 0.65rem;
    font: inherit;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

    .qa-field input:focus[b-rqk23cunnk],
    .qa-field textarea:focus[b-rqk23cunnk],
    .qa-answer-input:focus[b-rqk23cunnk] {
        outline: none;
        border-color: var(--qa-brass);
        box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25);
    }

    .qa-field input:disabled[b-rqk23cunnk] {
        opacity: 0.6;
    }

/* ---------------------------- Answers ---------------------------- */

.qa-answers[b-rqk23cunnk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.qa-answer-row[b-rqk23cunnk] {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
}

.qa-correct[b-rqk23cunnk] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    padding: 0.45rem 0.4rem;
    border: 1px solid #2a3550;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    color: var(--qa-steel);
    user-select: none;
}

    .qa-correct:has(input:checked)[b-rqk23cunnk] {
        border-color: var(--qa-good);
        color: var(--qa-good);
        background: rgba(53, 201, 87, 0.08);
    }

    .qa-correct input[b-rqk23cunnk] {
        accent-color: var(--qa-good);
        margin: 0;
    }

.qa-hint[b-rqk23cunnk] {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: var(--qa-steel);
}

/* ---------------------------- Actions ---------------------------- */

.qa-actions[b-rqk23cunnk] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.qa-btn[b-rqk23cunnk] {
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    border: 2px solid var(--qa-brass);
    background: transparent;
    color: var(--qa-brass-bright);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.qa-btn-primary[b-rqk23cunnk] {
    background: linear-gradient(180deg, var(--qa-brass-bright), var(--qa-brass));
    color: #1b1503;
}

.qa-btn:disabled[b-rqk23cunnk] {
    opacity: 0.5;
    cursor: default;
}

.qa-status[b-rqk23cunnk] {
    font-size: 0.85rem;
}

    .qa-status.success[b-rqk23cunnk] {
        color: var(--qa-good);
    }

    .qa-status.error[b-rqk23cunnk] {
        color: var(--qa-bad);
    }

/* --------------------------- Pool table -------------------------- */

.qa-pool[b-rqk23cunnk] {
    margin-top: 1.5rem;
}

.qa-tier-health[b-rqk23cunnk] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.qa-tier[b-rqk23cunnk] {
    font-size: 0.78rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--qa-line);
    color: #c6cede;
}

    .qa-tier.short[b-rqk23cunnk] {
        border-color: var(--qa-bad);
        color: var(--qa-bad);
        font-weight: 700;
    }

.qa-table[b-rqk23cunnk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .qa-table th[b-rqk23cunnk],
    .qa-table td[b-rqk23cunnk] {
        text-align: left;
        padding: 0.45rem 0.6rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .qa-table th[b-rqk23cunnk] {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--qa-steel);
    }

        .qa-table th.num[b-rqk23cunnk],
        .qa-table td.num[b-rqk23cunnk] {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

.qa-qtext[b-rqk23cunnk] {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qa-table-scroll[b-rqk23cunnk] {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 640px) {
    .qa-page[b-rqk23cunnk] {
        padding: 1rem 0.85rem;
    }

    .qa-form[b-rqk23cunnk] {
        padding: 0.9rem 0.9rem 1rem;
    }

    .qa-row[b-rqk23cunnk] {
        gap: 0.6rem;
    }

    /* Let the small fields grow instead of leaving awkward gaps */
    .qa-field-small[b-rqk23cunnk] {
        flex: 1 1 45%;
    }

    .qa-answer-row[b-rqk23cunnk] {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: 0.5rem;
    }

    /* Table keeps its natural width and scrolls inside the wrapper */
    .qa-table[b-rqk23cunnk] {
        min-width: 520px;
    }

    .qa-qtext[b-rqk23cunnk] {
        max-width: 220px;
    }
}
/* /Components/Pages/InventoryAdjustmentsBoard.razor.rz.scp.css */
table[b-frb8xd279g], th[b-frb8xd279g], td[b-frb8xd279g] {
    text-indent: 0;
}

table[b-frb8xd279g] {
    table-layout: fixed;
    width: 100%;
}

/*td {
    padding: 0 0.25rem 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

th {
    white-space: nowrap;
}*/

/* Summary view column widths */
/*table th:nth-child(1) { width: 8rem; }*/ /* Material */
/*table th:nth-child(2) { width: auto; }*/ /* Description - flexible */
/*table th:nth-child(3) { width: 7rem; }*/ /* Location */
/*table th:nth-child(4) { width: 6rem; }*/ /* Total */
/*table th:nth-child(5) { width: 9rem; }*/ /* Last updated by */
/*table th:nth-child(6) { width: 10rem; }*/ /* Date */

/* Regular view column widths (when there are more columns) */
/*table th:nth-child(7) { width: 6rem; }*/ /* Before */
/*table th:nth-child(8) { width: 6rem; }*/ /* Change */
/*table th:nth-child(9) { width: 6rem; }*/ /* After */
/*table th:nth-child(10) { width: 7rem; }*/ /* Action */
/*table th:nth-child(11) { width: 6rem; }*/ /* Status */
/*table th:nth-child(12) { width: 7rem; }*/ /* Job */
/*table th:nth-child(13) { width: 6rem; }*/ /* SO */
/*table th:nth-child(14) { width: 4rem; }*/ /* Line */
/*table th:nth-child(15) { width: auto; }*/ /* Notes - flexible */

.sortable[b-frb8xd279g] {
    cursor: pointer;
    user-select: none;
}

/* Date controls container */
.date-controls[b-frb8xd279g] {
    width: auto;
}

/* Date input fields - using relative width */
.date-input[b-frb8xd279g] {
    width: 10rem;
}

/* Page size selector - using relative width */
.page-size-select[b-frb8xd279g] {
    width: 4.5rem;
}

/* Error status cell */
.error-status[b-frb8xd279g] {
    text-decoration: underline;
    cursor: pointer;
}

/* Summary section styling */
.material-summary[b-frb8xd279g] {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.summary-item[b-frb8xd279g] {
    border-bottom: 1px solid #dee2e6;
}

.summary-item:last-child[b-frb8xd279g] {
    border-bottom: none;
}

.summary-badge[b-frb8xd279g] {
    font-size: 0.875rem;
    min-width: 3rem;
    text-align: center;
}
input[type="search"]:not(:placeholder-shown)[b-frb8xd279g],
select.form-select:has(option[value]:not([value=""]):checked)[b-frb8xd279g] {
    background-image: linear-gradient(90deg, #ffc107 50%, transparent 50%), linear-gradient(90deg, #ffc107 50%, transparent 50%), linear-gradient(0deg, #ffc107 50%, transparent 50%), linear-gradient(0deg, #ffc107 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 1rem 0.25rem, 1rem 0.25rem, 0.25rem 1rem, 0.25rem 1rem;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: search-border-dance-b-frb8xd279g 8s infinite linear;
    padding: 0.375rem 0.75rem;
}

@keyframes search-border-dance-b-frb8xd279g {
    0% {
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }

    100% {
        background-position: 20rem 0, -20rem 100%, 0 -20rem, 100% 20rem;
    }
}
/* /Components/Pages/InvoiceDummy.razor.rz.scp.css */
thead[b-7twjd6fzpw] {
    background-color: white;
    color: black;
}

table[b-7twjd6fzpw], th[b-7twjd6fzpw], td[b-7twjd6fzpw] {
    border: 0;
    text-indent: 0;
    font-weight: 100;
    font-size: 13px;
}

.packlist-border[b-7twjd6fzpw] {
    border: 1px solid black;
    border-radius: 5px;
}

td[b-7twjd6fzpw] {
    padding: 0;
}

.desc[b-7twjd6fzpw] {
    line-height: 1rem;
}

.company-logo[b-7twjd6fzpw] {
    max-height: 130px;
}

.grey-back[b-7twjd6fzpw] {
    background-color: lightgray;
}

.text-justify[b-7twjd6fzpw] {
    text-align: justify;
}

.lines th[b-7twjd6fzpw], .lines td[b-7twjd6fzpw] {
    border: 1px solid black;
    page-break-inside: avoid;
}

.lines .customer-name[b-7twjd6fzpw] {
    border-width: 0;
}

.quote-accepted[b-7twjd6fzpw] {
    page-break-inside: avoid;
    page-break-after: always;
}

.signature-container[b-7twjd6fzpw] {
    position: relative;
    min-width: 350px;
}

.signature-anchor[b-7twjd6fzpw] {
    position: absolute;
    top: 0;
    left: 0;
}

.technical-considerations[b-7twjd6fzpw] {
    font-size: 11px;
    page-break-after: always;
    text-align: justify;
}

.signature-line[b-7twjd6fzpw] {
    border-bottom: 1px solid #000;
    display: inline-block;
    width: 300px;
    margin-left: 10px;
}

.border-fix[b-7twjd6fzpw] {
    padding: 0.5px;
}

.signature-line-block[b-7twjd6fzpw] {
    font-size: 11pt;
    white-space: nowrap;
}

.signature-line[b-7twjd6fzpw] {
    display: inline-block;
    width: 320px; /* adjust desired line length */
    border-bottom: 1px solid #000;
    height: 18px;
    vertical-align: baseline;
    margin-left: 6px;
}

.traveler-foot[b-7twjd6fzpw] {
    min-height: 10px;
}
.terms[b-7twjd6fzpw] {
   /* width: 33%;*/
    border: 1px solid black;
    text-indent: 5px;
}

@media print {
    .traveler-printed-by[b-7twjd6fzpw] {
        position: fixed;
        bottom: 0;
        right: 0;
    }
}
/* /Components/Pages/OrderHistory.razor.rz.scp.css */
/* Order History Page Styles */

td>span[b-b0kidf687n]{
    text-indent: 0;
}



/* Order header styling */
.order-header-container[b-b0kidf687n] {
    margin-left: 0;
    margin-right: 0;
}

/* Orders container styling */
.orders-container[b-b0kidf687n] {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

/* Order accordion styling */
.order-accordion[b-b0kidf687n] {
    margin-top: 0;
}

/* Accordion button styling */
.order-accordion-button[b-b0kidf687n] {
    padding: 1rem;
}

.order-accordion-content[b-b0kidf687n] {
    margin-left: 0;
    margin-right: 0;
}

/* Table styling */
.order-history-table[b-b0kidf687n] {
    max-height: 50vh;
    overflow-y: auto;
}

.job-accordion-container[b-b0kidf687n] {
    max-height: 50vh;
    overflow-y: auto;
}

/* Job progress bar styling */
.job-progress-bar[b-b0kidf687n] {
    height: 20px;
}

/* Operation status badge styling */
.operation-status-badge[b-b0kidf687n] {
    color: white;
}

/* Job info section styling */
.job-info[b-b0kidf687n] {
    margin-bottom: 1rem;
    padding: 1rem;
/*    background-color: var(--bs-light);*/
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

/* Highlighted row styles for special notes */
.table .table-info[b-b0kidf687n] {
    background-color: #d1ecf1;
}

.table .table-warning[b-b0kidf687n] {
    background-color: #fff3cd;
}

.table .table-danger[b-b0kidf687n] {
    background-color: #f8d7da;
}

/* Ensure text readability on colored backgrounds */
.table .table-info td[b-b0kidf687n],
.table .table-warning td[b-b0kidf687n],
.table .table-danger td[b-b0kidf687n] {
    color: #212529;
}

/* Clickable replacement order row styling */
.replacement-order-link[b-b0kidf687n] {
    cursor: pointer;
    /*transition: all 0.2s ease-in-out;*/
}

/*.replacement-order-link:hover {
    opacity: 0.8;
    transform: scale(1.01);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.replacement-order-link:active {
    transform: scale(0.99);
}*/

/* Job Travelers table styling */
.table-travelers[b-b0kidf687n] {
    table-layout: fixed;
    width: 100%;
}

/* No-wrap styling for most columns */
.nowrap[b-b0kidf687n] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description column - allow wrapping and set wider width */
.description-col[b-b0kidf687n] {
    width: 50%;
    word-wrap: break-word;
    white-space: normal;
}

/* Set specific widths for other columns */
.table-travelers th:nth-child(1)[b-b0kidf687n], /* Job Name */
.table-travelers td:nth-child(1)[b-b0kidf687n] {
    width: 15%;
}

.table-travelers th:nth-child(3)[b-b0kidf687n], /* Actions */
.table-travelers td:nth-child(3)[b-b0kidf687n] {
    width: 20%;
}

.table-travelers th:nth-child(4)[b-b0kidf687n], /* Printed By */
.table-travelers td:nth-child(4)[b-b0kidf687n] {
    width: 10%;
}

.table-travelers th:nth-child(5)[b-b0kidf687n], /* Printed On */
.table-travelers td:nth-child(5)[b-b0kidf687n] {
    width: 15%;
}

.text-muted[b-b0kidf687n] {
    opacity: 0.6;
}

.text-decoration-line-through[b-b0kidf687n] {
    text-decoration: line-through;
}

.removed-operation[b-b0kidf687n] {
    background-color: #f8f9fa;
    opacity: 0.7;
}
/* /Components/Pages/OrderPDF.razor.rz.scp.css */
thead[b-2psuu3i3rk] {
    background-color: white;
    color: black;
}

table[b-2psuu3i3rk], th[b-2psuu3i3rk], td[b-2psuu3i3rk] {
    border: 0;
    text-indent: 0;
    font-weight: 100;
    font-size: 13px;
}

.packlist-border[b-2psuu3i3rk] {
    border: 1px solid black;
    border-radius: 5px;
}

td[b-2psuu3i3rk] {
    padding: 0;
}

.desc[b-2psuu3i3rk] {
    line-height: 1rem;
}

.company-logo[b-2psuu3i3rk] {
    max-height: 130px;
}

.grey-back[b-2psuu3i3rk] {
    background-color: lightgray;
}

.text-justify[b-2psuu3i3rk] {
    text-align: justify;
}

.lines th[b-2psuu3i3rk], .lines td[b-2psuu3i3rk] {
    border: 1px solid black;
    page-break-inside: avoid;
}

.lines .customer-name[b-2psuu3i3rk] {
    border-width: 0;
}

.quote-accepted[b-2psuu3i3rk] {
    page-break-inside: avoid;
    page-break-after: always;
}

.pdf-footer[b-2psuu3i3rk] {
    page-break-before: always;
    page-break-inside: avoid;
}

.signature-container[b-2psuu3i3rk] {
    position: relative;
    min-width: 350px;
}

.signature-anchor[b-2psuu3i3rk] {
    position: absolute;
    top: 0;
    left: 0;
}

.technical-considerations[b-2psuu3i3rk] {
    font-size: 11px;
    /*page-break-after: always;*/
    text-align: justify;
}

.signature-line[b-2psuu3i3rk] {
    border-bottom: 1px solid #000;
    display: inline-block;
    width: 300px;
    margin-left: 10px;
}

.border-fix[b-2psuu3i3rk] {
    padding: 0.5px;
}

.signature-line-block[b-2psuu3i3rk] {
    font-size: 11pt;
    white-space: nowrap;
}

.signature-line[b-2psuu3i3rk] {
    display: inline-block;
    width: 320px; /* adjust desired line length */
    border-bottom: 1px solid #000;
    height: 18px;
    vertical-align: baseline;
    margin-left: 6px;
}

.traveler-foot[b-2psuu3i3rk] {
    min-height: 10px;
}

@media print {
    .traveler-printed-by[b-2psuu3i3rk] {
        position: fixed;
        bottom: 0;
        right: 0;
    }
}
/* /Components/Pages/PackageLabelStock.razor.rz.scp.css */
thead[b-nbkun0zpyc] {
    background-color: white;
    color: black;
}
.lines-table[b-nbkun0zpyc] {
    border: 0;
    font-size: 0.7rem;
}

    .lines-table td[b-nbkun0zpyc], th[b-nbkun0zpyc] {
        border: 0;
    }


.label-container[b-nbkun0zpyc] {
    width: 4in;
    height: 8.2in;
    font-family: Arial, sans-serif;
    font-weight: bold;
    /* page-break-after: always; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bottom-section[b-nbkun0zpyc] {
    max-height: 1.75in;
    font-size: 0.7rem;
}

.report-table[b-nbkun0zpyc] {
    width: 100%;
    border-collapse: collapse;
   /* font-size: 0.7rem;*/
}

.package-details-subheader[b-nbkun0zpyc] {
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    text-align: left;
   /* padding: 1px;*/
/*    font-size: 12px;*/
}

.rotated-text[b-nbkun0zpyc] {
    writing-mode: vertical-rl;
    text-align: center;
    font-weight: bold;
/*    font-size: 13px;*/
    border: 2px solid black;
    /*   width: 50px; */
}

.customer-name[b-nbkun0zpyc] {
    font-size: 2rem;
    overflow: hidden;
    max-width: 300px;
}
.customer-name-rotated[b-nbkun0zpyc] {
    max-height: 120px;
    /*max-width: 80px;*/
   /* width: 200px;*/
   
    overflow: hidden;
}
.order-name[b-nbkun0zpyc] {
    font-size: 1.3rem;
}
.cust-name[b-nbkun0zpyc]{
    font-size: 1.2rem;
}
/* /Components/Pages/PackerScreen.razor.rz.scp.css */
/* ── Layout dimensions ──────────────────────────── */
.packer-screen[b-4gs0sriwus] {
    --letter-w: 8.5in;
    --video-w: 560px;
    --body-gap: 1rem;

    box-sizing: border-box;
    padding: 0.5rem 1rem;
}

/* ── Header ─────────────────────────────────────── */
.packer-header[b-4gs0sriwus] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--FRONTENDCOLOR);
    color: white;
    border-radius: 0.375rem;
}

.packer-title[b-4gs0sriwus] {
    margin: 0;
    white-space: nowrap;
}

.pin-input[b-4gs0sriwus] {
    max-width: 72px;
    flex: 0 0 72px;
}

/* ── Camera selection row ──────────────────────── */
.camera-selection-row[b-4gs0sriwus] {
    margin-bottom: 0.75rem;
}

.camera-selection-row select[b-4gs0sriwus] {
    min-width: 200px;
}

/* ── Scan row ───────────────────────────────────── */
.scan-row[b-4gs0sriwus] {
    margin-bottom: 0.75rem;
}

/* ── Two-column body (mobile-first: stacked) ────── */
.packer-body[b-4gs0sriwus] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--body-gap);
    align-items: start;
}

.packlist-column[b-4gs0sriwus] {
    min-width: 0;
}

.packlist-content[b-4gs0sriwus] {
    width: var(--letter-w);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 0.25rem;
}

/* ── Video column (mobile: on top, compact) ─────── */
.video-column[b-4gs0sriwus] {
    order: -1;
    text-align: center;
}

.dual-preview[b-4gs0sriwus] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.preview-slot[b-4gs0sriwus] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-preview[b-4gs0sriwus] {
    width: 100%;
    max-width: 270px;
    border-radius: 0.375rem;
}

.recording-controls[b-4gs0sriwus] {
    margin-top: 0.25rem;
}

/* ── Large screens: side-by-side fixed layout ───── */
@media (min-width: 1440px) {
    .packer-screen[b-4gs0sriwus] {
        width: calc(var(--letter-w) + var(--body-gap) + var(--video-w) + 2rem);
    }

    .scan-row[b-4gs0sriwus] {
        max-width: var(--letter-w);
    }

    .packer-body[b-4gs0sriwus] {
        grid-template-columns: var(--letter-w) var(--video-w);
    }

    .packlist-content[b-4gs0sriwus] {
        max-height: 75vh;
    }

    .video-column[b-4gs0sriwus] {
        order: 0;
        position: sticky;
        top: 0.5rem;
    }
}
/* /Components/Pages/PacklistFinePrint.razor.rz.scp.css */
#packlistFooter[b-i044iaywej] {
    min-height: 500px;
}
/* /Components/Pages/PacklistPDF.razor.rz.scp.css */
thead[b-sjrr6bvf7s] {
    background-color: white;
    color: black;

}
table[b-sjrr6bvf7s], th[b-sjrr6bvf7s], td[b-sjrr6bvf7s] {
    border: 0;
    text-indent: 0;
    font-weight: 100;
    font-size: 13px;
}
.packlist-border[b-sjrr6bvf7s] {
    border: 1px solid black;
    border-radius: 5px;
}
td[b-sjrr6bvf7s] {
    padding: 0;
}

.top-barcode[b-sjrr6bvf7s]{
    width: 255px;
    height: 50px;
}

.desc[b-sjrr6bvf7s] {
    padding-left: 5px;
}
.line-qty[b-sjrr6bvf7s] {
    max-width: 30px;
}

.company-logo[b-sjrr6bvf7s] {
    max-height: 140px;
}

.grey-back[b-sjrr6bvf7s]{
    background-color: darkgray;
}

.fine-print[b-sjrr6bvf7s] {
    page-break-inside: avoid;
    padding: 10px 5px 10px 5px;
    border-width: 0 1px 0 0;
    text-align: justify;
}
    .fine-print ul[b-sjrr6bvf7s], li[b-sjrr6bvf7s] {
        padding: 0;
    }
    ul[b-sjrr6bvf7s]{
        margin: 0;
    }

.terms[b-sjrr6bvf7s] {
    width: 33%;
    border: 1px solid black;
}
    .lines th[b-sjrr6bvf7s], .lines td[b-sjrr6bvf7s] {
        border: 1px solid black;
    }

.lines .customer-name[b-sjrr6bvf7s] {
    border-width: 0;
}
.lines tr[b-sjrr6bvf7s] {
    page-break-inside: avoid;
}

.traveler-foot[b-sjrr6bvf7s] {
    align-self: end;
    min-height: 132px;
    display: flex;
    justify-content: space-between;
}

p[b-sjrr6bvf7s] {
    font-size: 5rem;
    color: red;
}
@media print {

    .traveler-container[b-sjrr6bvf7s] {
        position: relative;
        top: 85px;
    }

    .traveler-printed-by[b-sjrr6bvf7s] {
        position: fixed;
        bottom: 0;
    }

    .thickness[b-sjrr6bvf7s] {
        justify-self: end;
    }

    .barcode417[b-sjrr6bvf7s] {
        position: fixed;
        bottom: 0;
        right: 0;
    }

    @page {
        size: 4in 8in;

        @bottom-center {
            content: "Page " counter(page) " of " counter(pages);
            margin-bottom: 1rem;
        }
    }
}
/* /Components/Pages/PaintWeight.razor.rz.scp.css */
/* ── Copied from AnyProductionBoard.razor.css (scoped there, so not inherited) ──
   Row colours, header look and .table-mask-container come from the global CSS. */
table[b-d4sj7ojg2e] {
    color: black;
    table-layout: fixed;
    width: 100%;
}

thead[b-d4sj7ojg2e] {
    position: sticky;
    top: 0;
    z-index: 1;
}

input[type="search"]:not(:placeholder-shown)[b-d4sj7ojg2e],
select.form-select:has(option[value]:not([value=""]):checked)[b-d4sj7ojg2e] {
    background-image: linear-gradient(90deg, #ffc107 50%, transparent 50%), linear-gradient(90deg, #ffc107 50%, transparent 50%), linear-gradient(0deg, #ffc107 50%, transparent 50%), linear-gradient(0deg, #ffc107 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 1rem 0.25rem, 1rem 0.25rem, 0.25rem 1rem, 0.25rem 1rem;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: search-border-dance-b-d4sj7ojg2e 8s infinite linear;
    padding: 0.375rem 0.75rem;
}

@keyframes search-border-dance-b-d4sj7ojg2e {
    0% {
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }

    100% {
        background-position: 20rem 0, -20rem 100%, 0 -20rem, 100% 20rem;
    }
}

.finish-swatch[b-d4sj7ojg2e] {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.35em;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 2px;
    vertical-align: middle;
}

.finish-swatch--custom[b-d4sj7ojg2e] {
    background: conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red);
}

/* ── Powder cell: spans every row of one colour ── */
/* Its own background, so it reads as one panel rather than taking the
   date colour of whichever job happens to be first in the group. */
.pcb-powder[b-d4sj7ojg2e] {
    background-color: white;
    color: black;
    vertical-align: top;
    padding: 0.35rem 0.5rem;
    border-left: 6px solid var(--bs-secondary);
}

.pcb-powder--weighed[b-d4sj7ojg2e] {
    border-left-color: var(--bs-success);
}

.pcb-powder--sent[b-d4sj7ojg2e] {
    border-left-color: var(--bs-info);
}

.pcb-powder--stale[b-d4sj7ojg2e] {
    border-left-color: var(--bs-warning);
}

.pcb-powder--error[b-d4sj7ojg2e],
.pcb-powder--unmatched[b-d4sj7ojg2e],
.pcb-powder--unresolved[b-d4sj7ojg2e] {
    border-left-color: var(--bs-danger);
}

.pcb-powder--untracked[b-d4sj7ojg2e],
.pcb-powder--notpowder[b-d4sj7ojg2e] {
    border-left-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.pcb-powder-head[b-d4sj7ojg2e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: bold;
}

.pcb-powder-name[b-d4sj7ojg2e] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pcb-message[b-d4sj7ojg2e] {
    padding: 0.75rem;
    text-align: center;
    background-color: white;
}

/* ── Rows take the paint colour; text flips to white on dark paints ──
   Set on the cells, not the row, so the white powder panel isn't painted over. */
tr.paint-row > td:not(.pcb-powder)[b-d4sj7ojg2e] {
    background-color: var(--row-bg, white);
    color: var(--row-fg, black);
}

/* ── While weighing: the colour's rows stay lit and banded, everything else dims ── */
table.pcb-focus > tbody > tr:not(.pcb-editing) > td[b-d4sj7ojg2e] {
    opacity: 0.3;
}

tr.pcb-editing > td[b-d4sj7ojg2e] {
    box-shadow: inset 0 3px 0 var(--bs-warning), inset 0 -3px 0 var(--bs-warning);
}
/* /Components/Pages/Partials.razor.rz.scp.css */
table[b-0ceuqf5iz3], th[b-0ceuqf5iz3], td[b-0ceuqf5iz3] {
    border: 3px solid black;
}

.sortable[b-0ceuqf5iz3] {
    cursor: pointer;
    user-select: none;
}
/* /Components/Pages/PDFpage.razor.rz.scp.css */
.print[b-g7c18bj1jk] {
    justify-self: end;
}    
.pdf[b-g7c18bj1jk] {
    overflow-y: hidden;
    height: 100vh;
}

p[b-g7c18bj1jk] {
    font-size: 5rem;
    color: red;
}
button[b-g7c18bj1jk], a[b-g7c18bj1jk] {
    font-size: 3rem;
}
/* /Components/Pages/PerforatedCalculator.razor.rz.scp.css */
/* Perforated Calculator Styles */

/* Pattern Grid */
.pattern-grid-optimized[b-sjlg5kfr7o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.4rem;
    padding: 0.5rem;
}

/* Pattern Items */
.pattern-item-mini[b-sjlg5kfr7o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.2rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 60px;
}

.pattern-item-mini:hover[b-sjlg5kfr7o] {
    border-color: #0d6efd;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pattern-item-mini.active[b-sjlg5kfr7o] {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
    box-shadow: 0 2px 4px rgba(13,110,253,0.3);
}

.pattern-item-mini i[b-sjlg5kfr7o] {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

.pattern-label-mini[b-sjlg5kfr7o] {
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.1;
    font-weight: 500;
    word-break: break-word;
    hyphens: auto;
}

/* Size Selection Grid */
.size-grid[b-sjlg5kfr7o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
}

.size-tile[b-sjlg5kfr7o] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.4rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    min-height: 50px;
}

.size-tile:hover[b-sjlg5kfr7o] {
    border-color: #0d6efd;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.size-tile.active[b-sjlg5kfr7o] {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
    box-shadow: 0 2px 4px rgba(13,110,253,0.3);
    font-weight: 600;
}

/* Result Display */
.result-display-compact[b-sjlg5kfr7o] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0d6efd;
    text-align: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

/* Pattern Image Container */
.pattern-image-container[b-sjlg5kfr7o] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 8px;
    min-height: 300px;
}

.pattern-diagram-image[b-sjlg5kfr7o] {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (min-width: 1400px) {
    .pattern-grid-optimized[b-sjlg5kfr7o] {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: 0.5rem;
    }
    
    .size-grid[b-sjlg5kfr7o] {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    }
}

@media (max-width: 991px) {
    .pattern-grid-optimized[b-sjlg5kfr7o] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    .size-grid[b-sjlg5kfr7o] {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}
/* /Components/Pages/Picklist.razor.rz.scp.css */
p[b-00bsrajw2l] {
    font-size: 5rem;
    color: red;
}

/* ── Page container (same pattern as PackageLabelStock) ── */
.label-container[b-00bsrajw2l] {
    width: 4in;
    height: 8.2in;
    font-family: Arial, sans-serif;
    /*font-weight: bold;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.label-container:last-child[b-00bsrajw2l] {
    page-break-after: auto;
}

/* ── Top section: flex column so sign-off can push to bottom ── */
/* padding-bottom offsets content ABOVE the pre-printed UPS text at the
   bottom of the top label portion (just above the tear-off perforation) */
.top-section[b-00bsrajw2l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 0.35in;
}

/* ── Header (first page) ── */
.picklist-header[b-00bsrajw2l] {
    font-size: 0.85rem;
    font-weight: bold;
    padding-bottom: 0.05in;
    line-height: 1.4;
    padding-left: 5px;
}

.header-customer[b-00bsrajw2l] {
    font-size: 1rem;
}

.field-label[b-00bsrajw2l] {
    font-weight: bold;
    text-decoration: underline;
    color: black;
}

/* ── Items table ── */
.report-table[b-00bsrajw2l] {
    border-collapse: collapse;
    border: none;
}

    .report-table th[b-00bsrajw2l],
    .report-table td[b-00bsrajw2l] {
        border: none;
        text-indent: 0;
        padding-left: 5px;
        padding-right: 3px;
    }

    .report-table thead[b-00bsrajw2l] {
        background-color: white;
        font-size: 0.75rem;
        color: black;
        text-align: left;
    }

.col-qty[b-00bsrajw2l] {
    width: 14%;
}

.col-line[b-00bsrajw2l] {
    width: 14%;
}

.col-job[b-00bsrajw2l] {
    width: 72%;
}

.item-group[b-00bsrajw2l] {
    page-break-after: avoid;
    font-size: 0.85rem;
}

.descr[b-00bsrajw2l] {
    font-size: 0.85rem;
    padding-bottom: 2px;
    overflow-wrap: break-word;
}

/* ── Sign-off boxes ── */
.signoff-section[b-00bsrajw2l] {
    margin-top: 0.1in;
    display: flex;
    flex-direction: column;
    gap: 0.06in;
    break-inside: avoid;
    page-break-inside: avoid;
}

.signoff-box[b-00bsrajw2l] {
    border: 2px solid black;
    padding: 0.04in 0.1in;
    min-height: 0.35in;
    font-size: 0.65rem;
    font-weight: bold;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}
.ups-text[b-00bsrajw2l] {
    padding-top: 0.5in;
}
/* ── Tear-off ── */
.traveler-foot[b-00bsrajw2l] {
    align-self: end;
    min-height: 1.75in;
    display: flex;
    justify-content: space-between;
}
.tear-off[b-00bsrajw2l] {
    padding-left: 5px;
    padding-top: 0.25in;
    height: 1.5in;
}

.summary-so[b-00bsrajw2l] {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: underline;
}

.summary-customer[b-00bsrajw2l] {
    font-size: 1.3rem;
    font-weight: bold;
}

.report-table tr[b-00bsrajw2l] {
    page-break-inside: avoid;
}

hr[b-00bsrajw2l]{
    margin: 0;
    font-weight: bold;
}

/* ── Striped table rows (every other item) ── */
.report-table tbody tr.stripe[b-00bsrajw2l] {
    background-color: #f0f0f0;
}

@media print {
    .tear-off[b-00bsrajw2l] {
        position: fixed;
        bottom: 0;
    }
}
/* /Components/Pages/PluDrill.razor.rz.scp.css */
/* PLU drill — sized for a phone in one hand at the register.
   Fixed-height column, pad pinned in thumb range, nothing scrolls.
   Webfont-free on purpose: this runs on the floor, not on a CDN. */

.pd-shell[b-kkdodcwfrz] {
    --paper: #f2f1ec;
    --ink: #17150f;
    --marker: #7c4a2a;
    --pencil: #c0301b;
    --hi-green: #b6ee72;
    --hi-yellow: #ffe666;
    --hi-pink: #ff9dbe;
    --tag: var(--hi-yellow);
    /* Height of AGblazor's nav chrome above this page. Leave at 0 if the drill
       gets its own bare layout (recommended — the pad needs the whole screen). */
    --chrome: 0rem;
    --num: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    --txt: system-ui, -apple-system, "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--chrome));
    max-width: 26rem;
    margin: 0 auto;
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    overflow: hidden;
    box-sizing: border-box;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--txt);
    outline: none;
    -webkit-text-size-adjust: 100%;
}

    .pd-shell:focus-visible[b-kkdodcwfrz] {
        box-shadow: inset 0 0 0 3px var(--hi-green);
    }

/* ---------- top bar: one line, never wraps ---------- */

.pd-bar[b-kkdodcwfrz] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    min-width: 0;
}

.pd-score[b-kkdodcwfrz] {
    font-family: var(--num);
    font-size: 1rem;
    font-weight: 700;
}

.pd-slash[b-kkdodcwfrz] {
    opacity: .35;
    padding: 0 .05em;
}

.pd-streak[b-kkdodcwfrz] {
    margin-right: auto;
    font-family: var(--num);
    font-size: .95rem;
    opacity: .45;
}

.pd-chip[b-kkdodcwfrz] {
    flex: 0 0 auto;
    font: inherit;
    font-size: .8rem;
    line-height: 1;
    padding: .45rem .55rem;
    max-width: 7.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: transparent;
    border: 1.5px solid rgba(124, 74, 42, .45);
    color: var(--marker);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.pd-chip-on[b-kkdodcwfrz] {
    background: var(--hi-yellow);
    border-color: var(--marker);
    color: var(--ink);
}

/* ---------- prompt: absorbs all the vertical slack ---------- */

.pd-prompt[b-kkdodcwfrz] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .5rem 0;
    overflow: hidden;
}

.pd-cat[b-kkdodcwfrz] {
    align-self: flex-start;
    font-size: .65rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    background: linear-gradient(var(--tag), var(--tag)) no-repeat;
    background-size: 100% .8em;
    background-position: 0 .5em;
    padding: 0 .2em;
}

.pd-name[b-kkdodcwfrz] {
    /* Two lines reserved so the layout never jumps between "Kale" and
       "Lettuce romaine leaves". */
    margin: .25rem 0 0;
    font-size: clamp(1.35rem, 6.4vw, 1.9rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.015em;
    min-height: 2.24em;
    overflow-wrap: break-word;
}

.pd-hint[b-kkdodcwfrz] {
    display: block;
    font-size: .85rem;
    font-style: italic;
    opacity: .55;
}

/* highlighter tints, matching the runs on the paper sheet */
.pd-tomatoes[b-kkdodcwfrz] {
    --tag: var(--hi-pink);
}

.pd-peppers[b-kkdodcwfrz] {
    --tag: var(--hi-pink);
}

.pd-green-line[b-kkdodcwfrz] {
    --tag: var(--hi-green);
}

.pd-cucumbers[b-kkdodcwfrz] {
    --tag: var(--hi-green);
}

.pd-cabbages[b-kkdodcwfrz] {
    --tag: var(--hi-green);
}

.pd-onions[b-kkdodcwfrz] {
    --tag: var(--hi-green);
}

/* ---------- readout ---------- */

.pd-readout[b-kkdodcwfrz] {
    flex: 0 0 auto;
}

.pd-display[b-kkdodcwfrz] {
    display: flex;
    gap: .35rem;
    align-items: flex-end;
}

.pd-slot[b-kkdodcwfrz] {
    flex: 0 0 1.9rem;
    height: 2.2rem;
    font-family: var(--num);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 2.2rem;
    text-align: center;
    border-bottom: 3px solid rgba(124, 74, 42, .28);
}

.pd-slot-active[b-kkdodcwfrz] {
    border-bottom-color: var(--marker);
}

.pd-slot-nine[b-kkdodcwfrz] {
    color: #46690f;
    background: linear-gradient(var(--hi-green), var(--hi-green)) no-repeat;
    background-size: 100% 1.7rem;
    background-position: 0 .2rem;
    border-bottom-color: transparent;
}

.pd-verdict[b-kkdodcwfrz] {
    /* Height reserved at all times — a verdict appearing must not shove the
       pad down under a thumb that's already moving. */
    margin: .3rem 0 0;
    height: 1.3rem;
    font-family: var(--num);
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
}

.pd-verdict-idle[b-kkdodcwfrz] {
    color: transparent;
}

.pd-verdict-correct[b-kkdodcwfrz] {
    color: #46690f;
}

.pd-verdict-wrong[b-kkdodcwfrz] {
    color: var(--pencil);
}

.pd-verdict-revealed[b-kkdodcwfrz] {
    color: var(--marker);
}

/* ---------- modifiers, directly above the pad ---------- */

.pd-mods[b-kkdodcwfrz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex: 0 0 auto;
    margin: .5rem 0 .45rem;
}

.pd-reveal[b-kkdodcwfrz] {
    font: inherit;
    font-size: .8rem;
    line-height: 1;
    padding: .45rem .7rem;
    background: transparent;
    border: 1.5px solid rgba(23, 21, 15, .28);
    color: var(--ink);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- the pad ---------- */
/* Marker rules, not raised buttons: the grid IS the sketch. Height is a share
   of the viewport, so keys grow on a big phone and hold a 52px floor on an SE. */

.pd-pad[b-kkdodcwfrz] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: min(46dvh, 19rem);
    min-height: 13rem;
    border: 4px solid var(--marker);
}

.pd-key[b-kkdodcwfrz] {
    min-height: 3.25rem; /* 52px — clears the 44px touch target */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--num);
    font-size: clamp(1.5rem, 7vw, 2.1rem);
    font-weight: 700;
    color: var(--marker);
    background: transparent;
    border: 0;
    border-right: 3px solid var(--marker);
    border-bottom: 3px solid var(--marker);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 80ms linear;
}

    .pd-key:nth-child(3n)[b-kkdodcwfrz] {
        border-right: 0;
    }

    .pd-key:nth-last-child(-n + 3)[b-kkdodcwfrz] {
        border-bottom: 0;
    }

    .pd-key:active[b-kkdodcwfrz] {
        background: var(--hi-yellow);
    }

    .pd-key:focus-visible[b-kkdodcwfrz] {
        outline: 3px solid var(--hi-green);
        outline-offset: -6px;
    }

.pd-key-alt[b-kkdodcwfrz] {
    font-size: 1.4rem;
    color: rgba(124, 74, 42, .55);
}

.pd-empty[b-kkdodcwfrz] {
    margin: auto;
    text-align: center;
    opacity: .6;
}

/* ---------- landscape: prompt beside the pad, not above it ---------- */

@media (orientation: landscape) and (max-height: 30rem) {
    .pd-shell[b-kkdodcwfrz] {
        display: grid;
        grid-template-columns: 1fr minmax(11rem, 15rem);
        grid-template-rows: auto 1fr auto auto;
        column-gap: .9rem;
        max-width: 44rem;
    }

    .pd-bar[b-kkdodcwfrz] {
        grid-area: 1 / 1 / 2 / -1;
    }

    .pd-prompt[b-kkdodcwfrz] {
        grid-area: 2 / 1;
        justify-content: flex-start;
    }

    .pd-readout[b-kkdodcwfrz] {
        grid-area: 3 / 1;
    }

    .pd-mods[b-kkdodcwfrz] {
        grid-area: 4 / 1;
        margin: .4rem 0 0;
    }

    .pd-pad[b-kkdodcwfrz] {
        grid-area: 2 / 2 / 5 / 3;
        height: auto;
        min-height: 0;
    }

    .pd-key[b-kkdodcwfrz] {
        min-height: 2.4rem;
        font-size: 1.4rem;
    }

    .pd-name[b-kkdodcwfrz] {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-key[b-kkdodcwfrz] {
        transition: none;
    }
}
/* /Components/Pages/PowdercoatLabel.razor.rz.scp.css */
/* ── Page container: 4in x 2in powdercoat label ── */
.label-container[b-u2tjanutr1] {
    /* The printable window doesn't line up exactly with the 4in label, so the
       side padding is a deliberate quiet zone — it absorbs roughly 1/4in of
       drift either way without clipping. --nudge-x re-centres what's left:
       measure the printed gap on each side and set it to half the difference
       (positive moves right). There's 0.25in of slack, so stay well under that. */
    --nudge-x: 0in;
    --nudge-y: 0in;

    box-sizing: border-box;
    width: 4in;
    height: 2in;
    overflow: hidden;
    padding: 0in 0.05in 0in 0.05in;
    font-family: Arial, sans-serif;
    color: black;
    display: flex;
    flex-direction: column;
    page-break-after: always;
    transform: translate(var(--nudge-x), var(--nudge-y));
}

.label-container:last-child[b-u2tjanutr1] {
    page-break-after: auto;
}

/* ── Barcode: reserved space, takes whatever height the rest doesn't use ── */
.barcode-slot[b-u2tjanutr1] {
    flex: 1 1 auto;
    min-height: 0.55in;
    display: block;
    overflow: hidden;
}

.barcode-img[b-u2tjanutr1] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Keep bar edges hard when the PNG is scaled up to full width */
    image-rendering: pixelated;
}

.barcode-placeholder[b-u2tjanutr1] {
    width: 100%;
    height: 100%;
    border: 1px dashed #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: #999;
}

/* ── SKU in plain text under the barcode ── */
.sku-text[b-u2tjanutr1] {
    text-align: center;
    font-size: 1.05rem;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 0.03in;
}

/* ── Location / weight row ── */
.detail-row[b-u2tjanutr1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.1in;
    border-top: 2px solid black;
    padding-top: 0.03in;
}

.detail-block[b-u2tjanutr1] {
    min-width: 0;
}

.detail-right[b-u2tjanutr1] {
    text-align: right;
}

.field-label[b-u2tjanutr1] {
    font-size: 0.5rem;
    font-weight: bold;
    text-decoration: underline;
    line-height: 1;
}

.detail-value[b-u2tjanutr1] {
    font-weight: bold;
    line-height: 1.05;
    white-space: nowrap;
}

.detail-location[b-u2tjanutr1] {
    font-size: 1.35rem;
}

.detail-weight[b-u2tjanutr1] {
    font-size: 1.6rem;
}

/* ── Description under the SKU (clamped to 2 lines so the barcode keeps its height) ── */
.descr-text[b-u2tjanutr1] {
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.15;
    max-height: 1.43rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-bottom: 0.02in;
}

/* ── Print timestamp ── */
.printed-at[b-u2tjanutr1] {
    font-size: 0.75rem;
    line-height: 1.2;
    padding-top: 0.02in;
}

@media print {
    /* Placeholder is only a spacer — never let it print */
    .barcode-placeholder[b-u2tjanutr1] {
        border: none;
        color: transparent;
    }
}
/* /Components/Pages/PowdercoatPrint.razor.rz.scp.css */
.pc-page[b-trk5lrw6vv] {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1rem 0.75rem 2rem 0.75rem;
}

.pc-title[b-trk5lrw6vv] {
    font-weight: bold;
    margin-bottom: 1rem;
}

.pc-scan[b-trk5lrw6vv] {
    margin-bottom: 1rem;
}

/* Scanned SKUs read better in a fixed pitch */
.pc-scan input[b-trk5lrw6vv] {
    font-family: Consolas, "Courier New", monospace;
    font-weight: bold;
}

.form-label[b-trk5lrw6vv] {
    font-weight: bold;
    margin-bottom: 0.15rem;
}

/* Big enough to hit with gloves on */
.pc-print[b-trk5lrw6vv] {
    margin-top: 0.5rem;
    padding: 0.75rem;
    font-weight: bold;
}

/* ── One block per location, so it's obvious which fields belong together ── */
.pc-form[b-trk5lrw6vv] {
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.pc-form-title[b-trk5lrw6vv] {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* A single form doesn't need to look boxed in */
.pc-form:only-of-type[b-trk5lrw6vv] {
    border: none;
    padding: 0;
}
/* /Components/Pages/PrepareShipment.razor.rz.scp.css */
/*.input-group > .form-control {
    min-width: fit-content;
}*/
.form-floating > input[b-bxlxej35zq] {
    min-width: fit-content;
}
.form-floating > .form-control:focus ~ label[b-bxlxej35zq]::after, .form-floating > .form-control:not(:placeholder-shown) ~ label[b-bxlxej35zq]::after, 
.form-floating > .form-control-plaintext ~ label[b-bxlxej35zq]::after, .form-floating > .form-select ~ label[b-bxlxej35zq]::after {
    background-color: inherit;
}
#ship_via[b-bxlxej35zq], #shipping_action_note[b-bxlxej35zq], #declared_value[b-bxlxej35zq], #shipping_charged[b-bxlxej35zq], #Packlist[b-bxlxej35zq], #total_travelers[b-bxlxej35zq], #total_grilles[b-bxlxej35zq], #chosen_name[b-bxlxej35zq] {
    background-color: aliceblue;
}

/* Dark theme overrides */
[data-bs-theme="dark"] #ship_via[b-bxlxej35zq],
[data-bs-theme="dark"] #shipping_action_note[b-bxlxej35zq],
[data-bs-theme="dark"] #declared_value[b-bxlxej35zq],
[data-bs-theme="dark"] #shipping_charged[b-bxlxej35zq],
[data-bs-theme="dark"] #total_travelers[b-bxlxej35zq],
[data-bs-theme="dark"] #total_grilles[b-bxlxej35zq],
[data-bs-theme="dark"] #chosen_name[b-bxlxej35zq],
[data-bs-theme="dark"] #Packlist[b-bxlxej35zq] {
    background-color: #23272b; /* deep gray-blue */
    color: #e0e0e0;
    border-color: #343a40;
}

[data-bs-theme="dark"] .form-floating > input[b-bxlxej35zq] {
    background-color: #23272b;
    color: #e0e0e0;
    border-color: #343a40;
}

[data-bs-theme="dark"] .modal-content[b-bxlxej35zq] {
    background-color: #181a1b;
    color: #e0e0e0;
    opacity: 98%;
}

/* Example for a warning/error cell */
[data-bs-theme="dark"] .error-status[b-bxlxej35zq],
[data-bs-theme="dark"] .bg-danger[b-bxlxej35zq] {
    background-color: #b23c3c !important; /* muted red */
    color: #fff !important;
}

/* Example for a success cell */
[data-bs-theme="dark"] .bg-success[b-bxlxej35zq] {
    background-color: #388e3c !important; /* softer green */
    color: #fff !important;
}

.tooltip[b-bxlxej35zq] {
    position: relative;
    display: inline-block;
}

    .tooltip .tooltiptext[b-bxlxej35zq] {
        visibility: hidden;
        width: 140px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -75px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .tooltip .tooltiptext[b-bxlxej35zq]::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .tooltip:hover .tooltiptext[b-bxlxej35zq] {
        visibility: visible;
        opacity: 1;
    }
.modal-content[b-bxlxej35zq] {
    opacity: 95%;
}
/* /Components/Pages/PrepareShipmentCopyBox.razor.rz.scp.css */
.form-floating > .form-control:focus ~ label[b-yem0cw81dl]::after, .form-floating > .form-control:not(:placeholder-shown) ~ label[b-yem0cw81dl]::after,
.form-floating > .form-control-plaintext ~ label[b-yem0cw81dl]::after, .form-floating > .form-select ~ label[b-yem0cw81dl]::after {
    background-color: inherit;
}

#Declared_value[b-yem0cw81dl], #Packlist[b-yem0cw81dl], .input-group-text[b-yem0cw81dl] {
    background-color: aliceblue;
}
[data-bs-theme="dark"] #Packlist[b-yem0cw81dl],
[data-bs-theme="dark"] #Declared_value[b-yem0cw81dl],
[data-bs-theme="dark"] .input-group-text[b-yem0cw81dl] {
    background-color: #23272b; /* deep gray-blue */
    color: #e0e0e0;
    border-color: #343a40;
}
/* /Components/Pages/Production_Welding.razor.rz.scp.css */
/* Fix height and enable scrolling */
.grid[b-8wwlk52b1z] {
    height: 95vh;
    overflow-y: auto;
/*    font-size: 0.9rem;*/
}

    .grid[b-8wwlk52b1z]  table {
        min-width: 100%;
    }

/* Sticky header while scrolling */
[b-8wwlk52b1z] thead {
    position: sticky;
    top: 0;
    background-color: var(--FRONTENDCOLOR);
    color: white;
    outline: 1px solid gray;
    z-index: 1;
}

/* For virtualized grids, it's essential that all rows have the same known height */
[b-8wwlk52b1z] tr {
    height: 30px;
    border-bottom: 0.5px solid silver;
}

[b-8wwlk52b1z] tbody td {
    white-space: nowrap;
    overflow: hidden;
/*    max-width: 0;*/
/*    min-width: 100%;*/
    text-overflow: ellipsis;
}
[b-8wwlk52b1z] td:nth-child(4),
[b-8wwlk52b1z] td:nth-child(6) {
/*    min-width: 50px;
    max-width: 0;*/
}
[b-8wwlk52b1z] .col-title {
    justify-content: center;
}
/* /Components/Pages/QuotePDF.razor.rz.scp.css */
thead[b-cgxdx1la2u] {
    background-color: white;
    color: black;
}

table[b-cgxdx1la2u], th[b-cgxdx1la2u], td[b-cgxdx1la2u] {
    border: 0;
    text-indent: 0;
    font-weight: 100;
    font-size: 13px;
}

.packlist-border[b-cgxdx1la2u] {
    border: 1px solid black;
    border-radius: 5px;
}

td[b-cgxdx1la2u] {
    padding: 0;
}

.desc[b-cgxdx1la2u] {
    line-height: 1rem;
}

.company-logo[b-cgxdx1la2u] {
    max-height: 130px;
}

.grey-back[b-cgxdx1la2u] {
    background-color: lightgray;
}

.text-justify[b-cgxdx1la2u] {
    text-align: justify;
}

.lines th[b-cgxdx1la2u], .lines td[b-cgxdx1la2u] {
    border: 1px solid black;
    page-break-inside: avoid;
}

.lines .customer-name[b-cgxdx1la2u] {
    border-width: 0;
}

.quote-accepted[b-cgxdx1la2u] {
    page-break-inside: avoid;
    page-break-after: always;
}

.signature-container[b-cgxdx1la2u] {
    position: relative;
    min-width: 350px;
}
.signature-anchor[b-cgxdx1la2u] {
    position: absolute;
    top: 0;
    left: 0;
}

.technical-considerations[b-cgxdx1la2u] {
    /*font-size: 11px;*/
/*    page-break-after: always;*/
    text-align: justify;
}
.footer-segment[b-cgxdx1la2u] {
    white-space: pre-wrap; /* keep the author's \r\n and \t */
    tab-size: 4;
    overflow-wrap: break-word;
}

.manual-page-break[b-cgxdx1la2u] {
    page-break-before: always; /* legacy engines (wkhtmltopdf) */
    break-before: page; /* modern engines (Chromium/Playwright) */
}

/*.technical-considerations {
    font-size: 11px;
    page-break-after: always;
    white-space: pre-wrap;*/ /* keep newlines, blank lines, and leading spaces */
    /*tab-size: 4;*/ /* render the tab after each • compactly (default is 8) */
    /*overflow-wrap: break-word;*/ /* still wrap long URLs/words inside the box */
/*}*/

.signature-line[b-cgxdx1la2u] {
    border-bottom: 1px solid #000;
    display: inline-block;
    width: 300px;
    margin-left: 10px;
}
.border-fix[b-cgxdx1la2u] {
    padding: 0.5px;
}

.signature-line-block[b-cgxdx1la2u] {
    font-size: 11pt;
    white-space: nowrap;
}

.signature-line[b-cgxdx1la2u] {
    display: inline-block;
    width: 320px; /* adjust desired line length */
    border-bottom: 1px solid #000;
    height: 18px;
    vertical-align: baseline;
    margin-left: 6px;
}

.traveler-foot[b-cgxdx1la2u] {
    min-height: 10px;
}

@media print {
    .traveler-printed-by[b-cgxdx1la2u] {
        position: fixed;
        bottom: 0;
        right: 0;
    }
}
/* /Components/Pages/QuotePDFfooter.razor.rz.scp.css */
.ship-page-break[b-wqvl4thwo6] {
    page-break-before: always;
}
.spacing[b-wqvl4thwo6]{
    text-align: left;
}
/* /Components/Pages/ReprintPacklistModal.razor.rz.scp.css */


.ship-via__icon[b-ejf64ex89y] {
    line-height: 1;
}
/* /Components/Pages/ShippingAuthorizedToShip.razor.rz.scp.css */
.standings-table__item[b-eb4g1cwfob]{
    font-size: 0.8rem;
}
.btn-primary[b-eb4g1cwfob]{
    background-color: var(--FRONTENDCOLOR);
}
.button-row[b-eb4g1cwfob]{
    display: flex;
    justify-content: space-evenly;
}
.panel[b-eb4g1cwfob]{
    margin-bottom: 20px;
    
}
.panel-arch[b-eb4g1cwfob] {
    border-color: var(--FRONTENDCOLOR);
    border: 1px solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.panel-heading[b-eb4g1cwfob]{
    background-color: var(--FRONTENDCOLOR);
    padding: 10px 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.panel-body[b-eb4g1cwfob] {
    padding: 15px;
    

}
.table-responsive[b-eb4g1cwfob]{
    overflow: auto; 
}

.picklist.btn-outline-success:hover[b-eb4g1cwfob] {
    color: blue;
    /*font-weight: bold;*/
    background-color: transparent;
    border-color: blue;
}
/* /Components/Pages/ShippingBundleScreen.razor.rz.scp.css */
h6[b-uj8bl5zjp8] {
    color: white;
}

.standings-table__item[b-uj8bl5zjp8] {
    font-size: 0.8rem;
}

.btn-primary[b-uj8bl5zjp8] {
    background-color: var(--FRONTENDCOLOR);
}

.button-row[b-uj8bl5zjp8] {
    display: flex;
    justify-content: space-evenly;
}

.panel[b-uj8bl5zjp8] {
    margin-bottom: 20px;
}

.panel-arch[b-uj8bl5zjp8] {
    border-color: var(--FRONTENDCOLOR);
    border: 1px solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-heading[b-uj8bl5zjp8] {
    background-color: var(--FRONTENDCOLOR);
    padding: 10px 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-body[b-uj8bl5zjp8] {
    padding: 15px;
}

.table-responsive[b-uj8bl5zjp8] {
    overflow: auto;
}
/* /Components/Pages/StockPickLabel.razor.rz.scp.css */
/* ── Page container: 4in x 8.2in, same as PackageLabelStock ── */
.label-container[b-gvxjflum9i] {
    box-sizing: border-box;
    width: 4in;
    height: 8.2in;
    padding: 0.1in 0.12in;
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: black;
    display: flex;
    flex-direction: column;
}

/* ── Header: heavy outline so it can't be confused with a package label ── */
.pick-header[b-gvxjflum9i] {
    flex: 0 0 auto;
    border: 0.05in solid black;
    font-size: 2.4rem;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.05em;
    padding: 0.05in 0;
}

/* ── Customer + PO ── */
.customer-block[b-gvxjflum9i] {
    flex: 0 0 auto;
    padding: 0.08in 0 0.06in;
    border-bottom: 2px solid black;
}

.customer-name[b-gvxjflum9i] {
    font-size: 1.6rem;
    line-height: 1.1;
    /* Long names wrap to two lines max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.info-row[b-gvxjflum9i] {
    display: flex;
    gap: 0.4rem;
    font-size: 1rem;
    margin-top: 0.04in;
}

.info-value[b-gvxjflum9i] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Order name ── */
.order-name[b-gvxjflum9i] {
    flex: 0 0 auto;
    font-size: 2rem;
    line-height: 1.1;
    padding: 0.04in 0;
    border-bottom: 2px solid black;
}

/* ── Lines: takes the space between order and barcode ── */
.lines-section[b-gvxjflum9i] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-top: 0.04in;
}

.lines-table[b-gvxjflum9i] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

    /* Override app.css table header colors — label is black on white only */
    .lines-table thead[b-gvxjflum9i],
    .lines-table thead tr[b-gvxjflum9i],
    .lines-table th[b-gvxjflum9i] {
        background: none;
        color: black;
    }

    /* Set borders here rather than inheriting them from app.css */
    .lines-table th[b-gvxjflum9i],
    .lines-table td[b-gvxjflum9i] {
        border: 1px solid black;
        /* app.css adds extra space on the left of each cell — force it even */
        padding-left: 0.04in;
        padding-right: 0.04in;
        text-indent: 0;
    }

    .lines-table th[b-gvxjflum9i] {
        text-align: left;
        border-bottom-width: 2px;
        padding-top: 0.02in;
        padding-bottom: 0.02in;
    }

    .lines-table td[b-gvxjflum9i] {
        vertical-align: middle;
        padding-top: 0.03in;
        padding-bottom: 0.03in;
    }

        /* Description lines start at the same x as the header text */
        .lines-table td div[b-gvxjflum9i] {
            margin: 0;
            padding: 0;
        }

/* Same fixed width for all number columns so they line up evenly */
.col-line[b-gvxjflum9i],
.col-qty[b-gvxjflum9i],
.col-picked[b-gvxjflum9i] {
    width: 0.55in;
    white-space: nowrap;
}

.lines-table th.col-line[b-gvxjflum9i],
.lines-table th.col-qty[b-gvxjflum9i],
.lines-table th.col-picked[b-gvxjflum9i] {
    text-align: center;
}

.lines-table td.col-line[b-gvxjflum9i],
.lines-table td.col-qty[b-gvxjflum9i],
.lines-table td.col-picked[b-gvxjflum9i] {
    font-size: 1rem;
    text-align: center;
}

.part-code[b-gvxjflum9i] {
    font-size: 0.85rem;
}

/* ── Barcode: pinned to the bottom so it always prints ── */
.barcode-block[b-gvxjflum9i] {
    flex: 0 0 auto;
    border-top: 2px solid black;
    padding: 0.08in 0.15in 0;
    text-align: center;
}

.barcode-img[b-gvxjflum9i] {
    display: block;
    width: 100%;
    height: 0.9in;
    object-fit: contain;
    image-rendering: pixelated;
}

.barcode-text[b-gvxjflum9i] {
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    margin-top: 0.02in;
}
/* /Components/Pages/TravelerSFpage.razor.rz.scp.css */
.do-not-cover[b-n3tm9dxn5r] {
    font-size: 0.5rem;
    justify-self: center;
}

table[b-n3tm9dxn5r] {
    font-family: 'Century Gothic';
    max-width: 865px;
}

ul[b-n3tm9dxn5r] {
    padding-left: 25px;
    margin-bottom: 0;
}

li[b-n3tm9dxn5r] {
    /*white-space: nowrap;*/
    margin-right: 5px;
}

table[b-n3tm9dxn5r], th[b-n3tm9dxn5r], td[b-n3tm9dxn5r] {
    border: 0;
    text-indent: 0;
}

thead[b-n3tm9dxn5r] {
    text-align: justify;
    background-color: white;
    color: black;
}

tbody > tr:last-child[b-n3tm9dxn5r] {
    border-bottom: 0;
}

.traveler-header[b-n3tm9dxn5r] {
    display: flex;
    /*flex: 2 1 240px;*/
    justify-content: space-between;
    margin-bottom: 1rem;
}

.customer-name[b-n3tm9dxn5r] {
    font-size: 1.5rem;
    padding-right: 10px;
    overflow: hidden;
    max-width: 350px;
}

.job-name[b-n3tm9dxn5r] {
    font-size: 1rem;
    padding-left: 10px;
}
.sleeve[b-n3tm9dxn5r] {
    font-weight: bold;
    opacity: 0.5;
}
.watermark[b-n3tm9dxn5r] {
    position: fixed;
    bottom: 50%;
    /*left: -8%;*/
    font-size: 5rem;
    transform: rotate(328deg);
    text-wrap: nowrap;
    opacity: 0.3;
}

.info-and-image[b-n3tm9dxn5r] {
    display: flex;
    justify-content: space-between;
}

figure img[b-n3tm9dxn5r] {
    vertical-align: top;
}

figure figcaption[b-n3tm9dxn5r] {
    text-align: center;
    font-size: 1.375rem;
}

.order-info[b-n3tm9dxn5r] {
    display: flex;
}

.estimator[b-n3tm9dxn5r] {
    padding-left: 20px;
    max-width: 200px;
}

.job-notes[b-n3tm9dxn5r] {
    border: 2px solid black;
    padding: 5px;
}

.mater[b-n3tm9dxn5r] {
    min-width: 100px;
}

.mid-container[b-n3tm9dxn5r] {
    display: grid;
    margin: 0.5rem 0 0.5rem 0;
    font-size: 1.375rem;
    align-items: center;
}

.mid-row[b-n3tm9dxn5r] {
    display: flex;
    justify-content: space-between;
}

.mid-row-content[b-n3tm9dxn5r] {
    display: flex;
}

.mat-text[b-n3tm9dxn5r], .fin-text[b-n3tm9dxn5r], .mou-text[b-n3tm9dxn5r], .add-text[b-n3tm9dxn5r], .due-date-text[b-n3tm9dxn5r], .thickness-text[b-n3tm9dxn5r] {
    padding-left: 10px;
}
    .mou-text[b-n3tm9dxn5r]{
        padding-right: 5px;
    }

    .thickness[b-n3tm9dxn5r] {
        justify-self: center;
        display: flex;
    }

.due-date[b-n3tm9dxn5r] {
    justify-self: end;
    display: flex;
}

.last-due-date[b-n3tm9dxn5r] {
    justify-self: end;
}

.lines[b-n3tm9dxn5r] {
    border-top: 2px solid black;
    border-left: 0px;
    border-right: 0;
    text-align: center;
}

    .lines thead[b-n3tm9dxn5r] {
        text-align: center;
    }

    .lines th[b-n3tm9dxn5r] {
        min-width: 50px;
    }

    .lines tr[b-n3tm9dxn5r] {
        border-top: 1px solid lightgrey;
        page-break-inside: avoid;
    }

        .lines tr:first-child[b-n3tm9dxn5r] {
            border-top: 2px solid black;
        }
        .lines td:last-child[b-n3tm9dxn5r] {
            max-width: 100px;
        }
        /*.lines td:nth-child(n+2) {
            page-break-after: avoid;
        }*/
.instructions[b-n3tm9dxn5r] {
    page-break-before: avoid;
}

.dimensions[b-n3tm9dxn5r] {
    text-indent: 5px;
    display: flex;
    justify-content: center;
}

/*.dimensions-right {
    max-width: 100px;
    text-align: left;
    width: 100%;
}

.dimensions-left {
    max-width: 100px;
    text-align: right;
    min-width: max-content;
    width: 100%;
}*/

.tags[b-n3tm9dxn5r] {
    max-width: 100px;
    overflow: hidden;
}

.line-instructions[b-n3tm9dxn5r] {
    text-align: left;
    text-indent: -5px;
    margin-left: 10px;
}

.traveler-printed-by[b-n3tm9dxn5r] {
    padding-top: 1.9rem;
    width: 368px;
    height: 132px;
}

.traveler-printed-on[b-n3tm9dxn5r] {
    border-top: 2px solid black;
    text-wrap-mode: nowrap;
}

.traveler-foot[b-n3tm9dxn5r] {
    align-self: end;
    min-height: 132px;
    display: flex;
    justify-content: space-between;
}

.cutsheets[b-n3tm9dxn5r] {
    page-break-before: always;
    margin-bottom: 0;
}
    .cutsheets thead[b-n3tm9dxn5r] {
        font-weight: 600;
        text-align: center;
    }
    .cutsheets thead tr:first-child td[b-n3tm9dxn5r] {
        font-weight: 600;
        font-size: 1.5rem;
    }
    .cutsheets td[b-n3tm9dxn5r] {
        border: 1px solid black;
        padding: 0 0.25rem 0 0.25rem;
    }

.vertical-text[b-n3tm9dxn5r] {
    writing-mode: vertical-lr;
    text-orientation: upright;
}

@media print {

    /*table {
        table-layout: fixed;
    }*/
    /*header {
        position: fixed;
        top: 0;
        white-space: nowrap;
    }*/

    /*.traveler-container {
        position: relative;
        top: 85px;
    }*/

    .traveler-printed-by[b-n3tm9dxn5r] {
        position: fixed;
        bottom: 0;
    }

    .thickness[b-n3tm9dxn5r] {
        justify-self: end;
    }

    .barcode417[b-n3tm9dxn5r] {
        position: fixed;
        bottom: 0;
        right: 0;
    }

    @page {
        size: letter;

        @bottom-center {
            /* margin-top: 132px;*/
            /*font-size: .875rem;*/
            content: "Page " counter(page) " of " counter(pages);
            margin-bottom: 1rem;
            text-wrap: nowrap;
        }
    }
}
/* /Components/Pages/UserPermissions.razor.rz.scp.css */


.permissions-grid th[b-59hl8rg8ch],
.permissions-grid td[b-59hl8rg8ch] {
    white-space: nowrap;
}

.permissions-grid .url-col[b-59hl8rg8ch] {
    min-width: 265px;
}

.permissions-grid .action-col[b-59hl8rg8ch] {
    width: 1%;
    text-align: right;
}

.filter-row th[b-59hl8rg8ch] {
    border-top: 0;
    padding-top: .25rem;
    padding-bottom: .25rem;
}
/* /Components/Pages/WeighInModal.razor.rz.scp.css */
.wim-swatch[b-6ptr9znwj9] {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 3px;
    vertical-align: -0.1em;
}

/* Location and previous weight: the two things to check before entering a number */
.wim-facts[b-6ptr9znwj9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.wim-fact[b-6ptr9znwj9] {
    border: 2px solid var(--bs-warning);
    background-color: var(--bs-warning-bg-subtle);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.wim-fact-label[b-6ptr9znwj9] {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--bs-warning-text-emphasis);
}

.wim-fact-value[b-6ptr9znwj9] {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.wim-sku[b-6ptr9znwj9] {
    font-size: 1.15rem;
}

/* Lighter than Bootstrap's 0.5: the board dims its own other rows, and the
   rows being weighed should stay readable behind the dialog. */
.modal-backdrop[b-6ptr9znwj9] {
    --bs-backdrop-opacity: 0.2;
}

/* ── Progress view ── */
.wim-steps[b-6ptr9znwj9] {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0 0;
    font-size: 1.1rem;
}

.wim-steps li[b-6ptr9znwj9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
}

.wim-steps .bi[b-6ptr9znwj9],
.wim-steps .spinner-border[b-6ptr9znwj9] {
    flex: 0 0 auto;
    width: 1.1rem;
    text-align: center;
}
/* /Components/Shared/DualListModal.razor.rz.scp.css */
.dual-list-modal[b-v5ns0x9knx] {
    min-height: 60vh;
}

.dual-list-modal .row[b-v5ns0x9knx] {
    position: relative;
}

.current-steps-section[b-v5ns0x9knx] {
    margin-bottom: 1.5rem;
}

.steps-container[b-v5ns0x9knx] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 200px;
    padding: 8px 0;
}

/* Show drop zones more prominently when operation is selected */
.steps-container.show-targets .drop-zone-compact[b-v5ns0x9knx] {
    opacity: 0.9;
    border-color: #0d6efd;
    animation: pulse-border-b-v5ns0x9knx 1.5s ease-in-out infinite;
}

@keyframes pulse-border-b-v5ns0x9knx {
    0%, 100% {
        border-color: #0d6efd;
        opacity: 0.7;
    }
    50% {
        border-color: #0a58ca;
        opacity: 1;
    }
}

/* Wrapper for each step + its drop zone */
.step-with-dropzone[b-v5ns0x9knx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
    position: relative;
}

/* Compact drop zones - positioned to the RIGHT of steps - DOUBLED SIZE */
.drop-zone-compact[b-v5ns0x9knx] {
    width: 100px;
    height: auto;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.4;
    cursor: pointer;
    flex-shrink: 0;
    background: transparent;
    border-radius: 8px;
    border: 2px dashed transparent;
    padding: 8px;
    order: 2;
}

.drop-zone-compact.clickable[b-v5ns0x9knx] {
    cursor: pointer;
}

.drop-zone-compact.dragging-active[b-v5ns0x9knx] {
    opacity: 0.8;
    border-color: var(--bs-border-color);
}

.drop-zone-compact.active[b-v5ns0x9knx] {
    opacity: 1;
    background: rgba(40, 167, 69, 0.2);
    border: 3px solid #28a745;
    transform: scale(1.15);
    box-shadow: 0 0 16px rgba(40, 167, 69, 0.6);
}

.drop-indicator[b-v5ns0x9knx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
}

.drop-sequence[b-v5ns0x9knx] {
    font-weight: 700;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.drop-zone-compact.active .drop-sequence[b-v5ns0x9knx] {
    color: #28a745;
    font-size: 1.1rem;
}

.drop-line[b-v5ns0x9knx] {
    width: 60px;
    height: 4px;
    background: var(--bs-border-color);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.drop-zone-compact.active .drop-line[b-v5ns0x9knx] {
    width: 70px;
    height: 5px;
    background: #28a745;
}

.drop-zone-compact:hover:not(.active) .drop-line[b-v5ns0x9knx] {
    background: #0d6efd;
    width: 70px;
    height: 5px;
}

.drop-zone-compact:hover:not(.active) .drop-sequence[b-v5ns0x9knx] {
    color: #0d6efd;
    font-size: 1.05rem;
}

.step-row[b-v5ns0x9knx] {
    transition: transform 0.2s ease;
    flex: 1;
    order: 1;
}

.step-item[b-v5ns0x9knx] {
    padding: 10px 15px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.step-sequence[b-v5ns0x9knx] {
    font-weight: 600;
    color: var(--bs-body-color);
    flex-shrink: 0;
}

.step-name[b-v5ns0x9knx] {
    font-weight: 500;
    color: var(--bs-body-color);
    flex-shrink: 0;
}

.step-operation[b-v5ns0x9knx] {
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

/* Newly added step styling with dark/light mode support */
.step-row.newly-added[b-v5ns0x9knx] {
    animation: slideIn-b-v5ns0x9knx 0.4s ease-out;
}

.step-row.newly-added .step-item[b-v5ns0x9knx] {
    background: rgba(40, 167, 69, 0.15);
    border-left: 4px solid #28a745;
    padding: 12px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
    cursor: move;
}

.step-row.newly-added .step-sequence[b-v5ns0x9knx],
.step-row.newly-added .step-name[b-v5ns0x9knx],
.step-row.newly-added .step-operation[b-v5ns0x9knx] {
    color: var(--bs-success-text-emphasis) !important;
    font-weight: 600;
    pointer-events: none;
}

.step-row.newly-added .drag-handle[b-v5ns0x9knx] {
    color: #28a745;
    cursor: move;
    pointer-events: none;
}

@keyframes slideIn-b-v5ns0x9knx {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.available-operations-section[b-v5ns0x9knx] {
    padding: 0;
    min-height: 120px;
}

.operation-buttons-container[b-v5ns0x9knx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: none;
    overflow-y: visible;
}

.operation-button[b-v5ns0x9knx] {
    cursor: grab;
    font-weight: 500;
    border-width: 2px;
    transition: all 0.2s;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    min-height: 48px;
}

.operation-button:active[b-v5ns0x9knx] {
    cursor: grabbing;
}

.operation-button:hover[b-v5ns0x9knx] {
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Selected state for click-to-select */
.operation-button.selected[b-v5ns0x9knx] {
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.4);
    transform: translateX(4px) scale(1.03);
    background: rgba(13, 110, 253, 0.15);
    border-color: #0d6efd;
    animation: pulse-selected-b-v5ns0x9knx 1.5s ease-in-out infinite;
}

@keyframes pulse-selected-b-v5ns0x9knx {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(13, 110, 253, 0.6);
    }
}

.workcenter-group[b-v5ns0x9knx] {
    margin-bottom: 0.5rem;
}

.workcenter-group-button[b-v5ns0x9knx] {
    width: 100%;
    text-align: left;
    font-weight: 500;
    margin-bottom: 0;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.workcenter-group-button.expanded[b-v5ns0x9knx] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.workcenter-items[b-v5ns0x9knx] {
    border: 2px solid;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.05);
}

.workcenter-items .operation-button[b-v5ns0x9knx] {
    margin-bottom: 0.5rem;
}

.workcenter-items .operation-button:last-child[b-v5ns0x9knx] {
    margin-bottom: 0;
}

.nested-workcenter-group[b-v5ns0x9knx] {
    margin-bottom: 0.5rem;
}

.nested-workcenter-group .workcenter-group-button[b-v5ns0x9knx] {
    font-size: 0.9rem;
}

/* Restore drop zone */
.restore-drop-zone[b-v5ns0x9knx] {
    margin-top: 20px;
    padding: 20px;
    border: 2px dashed #dc3545;
    border-radius: 8px;
    text-align: center;
    color: #dc3545;
    font-weight: 500;
    background: rgba(220, 53, 69, 0.05);
    transition: all 0.3s ease;
    opacity: 0.7;
}

.restore-drop-zone.active[b-v5ns0x9knx] {
    background: rgba(220, 53, 69, 0.15);
    border-color: #c82333;
    border-style: solid;
    opacity: 1;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.restore-drop-zone i[b-v5ns0x9knx] {
    font-size: 1.2em;
    pointer-events: none;
}

/* Operation buttons */
.operation-button[b-v5ns0x9knx] {
    transition: opacity 0.3s ease, transform 0.2s ease;
    cursor: move;
}

.operation-button:active[b-v5ns0x9knx] {
    cursor: grabbing;
}

.operation-button.dragging[b-v5ns0x9knx] {
    opacity: 0.5;
    transform: scale(0.95);
}

.operation-button i[b-v5ns0x9knx] {
    pointer-events: none;
}

/* Critical iOS touch-action rules */
[draggable="true"][b-v5ns0x9knx] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}

.drag-handle[b-v5ns0x9knx] {
    cursor: grab;
    touch-action: none;
}

.dragging .drag-handle[b-v5ns0x9knx] {
    cursor: grabbing;
}

/* Prevent text selection during drag */
.dragging *[b-v5ns0x9knx] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Prevent child elements from capturing touch events */
.step-row.newly-added .step-sequence[b-v5ns0x9knx],
.step-row.newly-added .step-name[b-v5ns0x9knx],
.step-row.newly-added .step-operation[b-v5ns0x9knx],
.step-row.newly-added .drag-handle[b-v5ns0x9knx],
.operation-button i[b-v5ns0x9knx],
.restore-drop-zone i[b-v5ns0x9knx] {
    pointer-events: none;
}
/* /Components/Shared/Halloween.razor.rz.scp.css */
.halloween[b-x78356dt5z] {
    position: fixed;
    bottom: 0;
    right: 0;
    transition: 5s ease-out 1s;
}

    .halloween:hover[b-x78356dt5z] {
        /* animation: dissapear 0.5s 1;*/
        transition: all 1s linear;
        opacity: 0;
    }
img[b-x78356dt5z] {
    max-width: 100%;
    max-height: 20vh;
}
@keyframes dissapear-b-x78356dt5z {
    0% {
        opacity: 1;
    }
   /* 30% {
        opacity: 0.7;
    }*/
    50% {
        opacity: 0.5;
    }
    /*70% {
        opacity: 0.3;
    }*/
    100% {
        opacity: 0;
    }
}


html:hover .spider[b-x78356dt5z] {
    top: -200%;
    transition-delay: 0s;
}

.spider[b-x78356dt5z] {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 30%;
    /* 4. Animatie */
    animation: swing-b-x78356dt5z 2s infinite;
    transform-origin: top;
    /* Bonus */
    transition: 1s ease-in-out 60s;
}

    .spider .spiderweb[b-x78356dt5z] {
        width: 2px;
        height: 200px;
        margin-left: 49px;
        background: rgba(255,255,255, .7);
    }

    .spider .body[b-x78356dt5z] {
        width: 100px;
        height: 80px;
        background: #000;
        position: relative;
        border-radius: 50%;
    }

        .spider .body .eye[b-x78356dt5z] {
            width: 33px;
            height: 33px;
            position: absolute;
            bottom: 20px;
            background: #fff;
            border-radius: 50%;
        }

            .spider .body .eye.left[b-x78356dt5z] {
                left: 15px;
            }

            .spider .body .eye.right[b-x78356dt5z] {
                right: 15px;
            }

            .spider .body .eye[b-x78356dt5z]:after {
                background: #000;
                width: 7px;
                height: 7px;
                content: '';
                display: block;
                margin: 55%;
                border-radius: 50%;
                /* 3. Animatie */
                animation: look-b-x78356dt5z 8s infinite;
            }

    .spider .legs .leg[b-x78356dt5z] {
        width: 80px;
        height: 40px;
        margin-top: -20px;
        border: 5px solid transparent;
        border-top-color: #000;
        border-radius: 40px 40px 0 0;
    }

    .spider .legs[b-x78356dt5z] {
        position: absolute;
        bottom: -10%;
        z-index: -1;
    }

        .spider .legs.left[b-x78356dt5z] {
            left: -70%;
        }

        .spider .legs.right[b-x78356dt5z] {
            right: -60%;
        }
        .spider.active


.legs.left .leg:nth-child(1)[b-x78356dt5z] {
    transform: rotate(10deg);
    margin-left: 10px;
}

.legs.right .leg:nth-child(1)[b-x78356dt5z] {
    transform: rotate(-10deg);
    margin-left: -10px;
}


.legs.left .leg:nth-child(2)[b-x78356dt5z] {
    transform: rotate(-20deg);
    margin-left: 20px;
}

.legs.right .leg:nth-child(2)[b-x78356dt5z] {
    transform: rotate(20deg);
    margin-left: -20px;
}


.legs.left .leg:nth-child(3)[b-x78356dt5z] {
    transform: rotate(-50deg);
    margin-left: 30px;
}

.legs.right .leg:nth-child(3)[b-x78356dt5z] {
    transform: rotate(50deg);
    margin-left: -30px;
}

/* 1. Animatie */
@keyframes look-b-x78356dt5z {
    0%, 40%, 100% {
        transform: translateX(0);
    }

    45%, 95% {
        transform: translateX(-110%);
    }
}


/* 3. Animatie */
@keyframes swing-b-x78356dt5z {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}
/* /Components/Shared/Independence.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   Independence.razor.css
   --------------------------------------------------------------------
   Styling for the Independence Day banner + the fireworks system.
   Animations are driven by CSS variables set inline in the .razor:
     • --tx / --ty    : XY-shape particle destination (px)
     • --angle        : polar angle for spray particles (deg)
     • --distance     : polar distance for spray particles (px)
     • --speed        : per-particle animation duration (ms)
     • --color        : primary color
     • --secondary    : alternate color (for double rings, scatter, spray)
     • --rotation     : burst container rotation (deg)
     • --gx / --gy    : gravity vector derived from --rotation
     • --gf           : per-particle gravity weight [0..1]
     • --target-y / --travel-ms / --trail-color : projectile trail params
   ════════════════════════════════════════════════════════════════════ */

/* ── Banner wrapper ─────────────────────────────────────────────────
   Holds the flag background (::before) and the gold script text.
   `user-select: none` prevents the text from getting selected when
   users rapidly multi-click to spawn many fireworks. */
.flag-banner[b-nt3rotixnn] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 410px;
    max-width: 100%; /* never overflow its container on small screens */
    box-sizing: border-box;
    border-radius: 6px;
    flex-shrink: 0; /* Don't shrink on large screens */
    min-width: 0; /* Allow shrink on small screens */
    overflow: hidden;
    padding: 4px 12px;
    cursor: pointer;
    user-select: none;
}

    /* American flag image rendered as the banner background.
       `mix-blend-mode: screen` lets the dark navbar show through and
       brightens the flag rather than overlaying it as a solid sticker. */
    .flag-banner[b-nt3rotixnn]::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('/image/flag2.png');
        background-size: cover;
        background-position: center;
        /*opacity: 0.95;*/
        mix-blend-mode: screen;
    }

/* ── Banner text ────────────────────────────────────────────────────
   "Great Vibes" cursive in gold, skewed for an italic look (the font
   itself isn't italic). Multiple text-shadows create a glow + drop
   shadow stack so the script stays readable on the busy flag bg. */
.flag-text[b-nt3rotixnn] {
    position: relative;
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    font-size: clamp(1.1rem, 5vw, 1.8rem); /* scales with viewport, full size on desktop */
    color: #FFEF00;
    white-space: nowrap;
    letter-spacing: 0.04em;
    display: inline-block;       /* required for transform to work */
    transform: skewX(39deg);     /* fakes an italic lean */
    text-shadow: 1px 1px 0px rgba(0,0,0,0.95),
                 0 0 10px rgba(0,0,0,0.85),
                 0 0 20px rgba(0,0,0,0.5);
}

    /* Smaller superscript for the "th" in "250th". */
    .flag-text sup[b-nt3rotixnn] {
        font-size: 0.5em;
    }

/* ── (Old experimental flag-clipped text — kept for reference) ──────
.flag-text {
    font-weight: bold;
    font-size: 1.1rem;
    background-image: url('/image/flag.png');
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: brightness(1.4) contrast(1.2);
}
.flag-text sup { font-size: 0.6em; }
*/

/* ── Firework container ─────────────────────────────────────────────
   A zero-size anchor positioned at the burst point. Particles are
   absolutely positioned children, so they explode outward from (0,0).
   `transform: translate(-50%,-50%)` centers the anchor on (left, top).
   --gx / --gy convert the burst rotation into a gravity vector so the
   "droop" always falls in a consistent screen direction regardless of
   how the burst is rotated. */
.firework[b-nt3rotixnn] {
    position: fixed;
    width: 0;
    height: 0;
    pointer-events: none;     /* never block clicks on real UI */
    z-index: 9999;
    transform: translate(-50%, -50%) rotate(var(--rotation, 0deg));
    --gx: calc(sin(var(--rotation, 0deg)) * 55px);
    --gy: calc(cos(var(--rotation, 0deg)) * 55px);
}

/* ── Shared shape-fly animation for ALL parametric XY shapes ────────
   Every shape-based particle uses the same two animations:
     1. shape-fly    — translate from center to (tx, ty), shrink + fade
     2. gravity-droop — small delayed downward drift for natural sag */
.firework-circle .particle[b-nt3rotixnn],
.firework-circle-ring .particle[b-nt3rotixnn],
.firework-circle-double .particle[b-nt3rotixnn],
.firework-star5 .particle[b-nt3rotixnn],
.firework-star6 .particle[b-nt3rotixnn],
.firework-star8 .particle[b-nt3rotixnn],
.firework-star-scatter .particle[b-nt3rotixnn],
.firework-ray-tips-stars .particle[b-nt3rotixnn],
.firework-star-dome .particle[b-nt3rotixnn],
.firework-flag250 .particle[b-nt3rotixnn] {
    position: absolute;
    transform-origin: center;
    animation: shape-fly-b-nt3rotixnn var(--speed, 2200ms) cubic-bezier(0.05, 0.9, 0.15, 1) forwards, gravity-droop-b-nt3rotixnn 900ms ease-in calc(var(--speed, 2200ms) * 0.5) both;
}

/* Particle travels from origin to its precomputed (--tx, --ty), shrinking
   and fading. The 75% keyframe holds opacity high to keep bursts crisp,
   then fades quickly at the end. */
@keyframes shape-fly-b-nt3rotixnn {
    0%   { transform: translate(0, 0)                scale(1.4); opacity: 1; }
    75%  { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.35); opacity: 0; }
}

/* Independent translate (not transform) so it stacks on top of the
   shape-fly transform without overriding it. --gf is per-particle so
   embers droop at slightly different rates → more natural look. */
@keyframes gravity-droop-b-nt3rotixnn {
    0%   { translate: 0px 0px;  }
    100% { translate: calc(var(--gf, 0.5) * var(--gx, 0px))
                      calc(var(--gf, 0.5) * var(--gy, 40px)); }
}
/* ── Circle — solid glowing dots ─────────────────────────────────── */
.firework-circle .particle[b-nt3rotixnn] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 6px 2px var(--color);   /* halo glow */
}

/* ── Circle-ring — hollow border circles ─────────────────────────── */
.firework-circle-ring .particle[b-nt3rotixnn] {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;
    border: 2.5px solid var(--color);
    box-shadow: 0 0 5px 1px var(--color);
    transform-origin: center;
    /* Re-declared without gravity-droop on purpose: rings look better
       holding their shape rather than sagging. */
    animation: shape-fly-b-nt3rotixnn var(--speed, 2200ms) cubic-bezier(0.05, 0.9, 0.15, 1) forwards;
}

/* ── Circle-double — alternating large/small dots ─────────────────
   Two concentric rings are produced by ComputeCircleDouble. We use
   nth-child(odd/even) to give the outer/inner ring different looks. */
.firework-circle-double .particle:nth-child(odd)[b-nt3rotixnn] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 7px 3px var(--color);
}
.firework-circle-double .particle:nth-child(even)[b-nt3rotixnn] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 5px 2px var(--secondary);
}

/* ── Stars — diamond-shaped particles via clip-path ───────────────
   Same diamond clip for all star variants; the C# helpers control
   the geometry by placing particles at outer/inner radii. */
.firework-star5 .particle[b-nt3rotixnn],
.firework-star6 .particle[b-nt3rotixnn],
.firework-star8 .particle[b-nt3rotixnn] {
    width: 6px;
    height: 6px;
    background: var(--color);
    box-shadow: 0 0 5px 2px var(--color);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ── Star-scatter — alternating long/short diamond spokes ────────
   Long spokes (odd) use --color, short spokes (even) use --secondary. */
.firework-star-scatter .particle:nth-child(odd)[b-nt3rotixnn] {
    width: 7px;
    height: 7px;
    background: var(--color);
    box-shadow: 0 0 6px 2px var(--color);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.firework-star-scatter .particle:nth-child(even)[b-nt3rotixnn] {
    width: 5px;
    height: 5px;
    background: var(--secondary);
    box-shadow: 0 0 4px 2px var(--secondary);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ── Spray — angle-based fireworks (the only non-XY shape) ───────
   Particles are positioned by polar coords (--angle, --distance)
   and animated with a custom keyframe that adds a downward arc. */
.firework-spray .particle[b-nt3rotixnn] {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 4px 2px var(--color);
    transform-origin: center;
    animation: spray-b-nt3rotixnn 2400ms cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
@keyframes spray-b-nt3rotixnn {
    /* Each step rotates by --angle then translates outward.
       The translateY(-20px) at 40% gives a slight upward arc
       before gravity pulls it back down to translateY(0). */
    0%   { transform: rotate(var(--angle)) translateX(0px)                           translateY(0px)   scale(1.2); opacity: 1; background: var(--color);     }
    40%  { transform: rotate(var(--angle)) translateX(calc(var(--distance,95px)*.7)) translateY(-20px) scale(0.9); opacity: 1;                               }
    75%  { opacity: 1; }
    100% { transform: rotate(var(--angle)) translateX(var(--distance, 95px))         translateY(0px)   scale(0.1); opacity: 0; background: var(--secondary); }
}

/* ── Spiral — same animation as spray (rotate around center +
   translate outward with a small upward arc and color shift).
   Geometry comes from the polar form of the spiral's (tx, ty)
   points, emitted as --angle / --distance in the .razor.        */
.firework-spiral .particle[b-nt3rotixnn] {
    position: absolute;
    transform-origin: center;
    animation: spray-b-nt3rotixnn var(--speed, 2400ms) cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

    .firework-spiral .particle:nth-child(odd)[b-nt3rotixnn] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--color);
        box-shadow: 0 0 6px 2px var(--color);
    }

    .firework-spiral .particle:nth-child(even)[b-nt3rotixnn] {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--secondary);
        box-shadow: 0 0 5px 2px var(--secondary);
    }
/* ── R1-T2: spokes ending in mini-stars + center dot ────────────── */
.firework-ray-tips-stars .particle.kind-ray[b-nt3rotixnn] {
    width: 3px;
    height: 12px;
    background: var(--color);
    box-shadow: 0 0 4px 1px var(--color);
    border-radius: 50%;
    rotate: var(--rot, 0deg);
}

.firework-ray-tips-stars .particle.kind-ministar[b-nt3rotixnn] {
    width: 14px;
    height: 14px;
    background: var(--secondary);
    clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
    /* drop-shadow respects the clip-path; box-shadow doesn't. */
    filter: drop-shadow(0 0 2px var(--secondary)) drop-shadow(0 0 5px rgba(255,255,255,0.5));
}

.firework-ray-tips-stars .particle.kind-core[b-nt3rotixnn] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 8px 3px var(--color), 0 0 18px 6px rgba(255, 255, 255, 0.6);
}
/* ── Star-dome: upward fan of twinkling mini-stars ────────────────
   Reuses the same shape-fly + gravity-droop animation chain via the
   shared selector list at the top of this file (we add the parent
   class there too). Two ministar sizes (odd/even) give the “big +
   small twinkle” density seen in the reference image. */
.firework-star-dome .particle.kind-ministar[b-nt3rotixnn] {
    background: var(--color);
    clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
    filter: drop-shadow(0 0 2px var(--color)) drop-shadow(0 0 5px rgba(255,255,255,0.55));
}

    .firework-star-dome .particle.kind-ministar:nth-child(odd)[b-nt3rotixnn] {
        width: 14px;
        height: 14px;
    }

    .firework-star-dome .particle.kind-ministar:nth-child(even)[b-nt3rotixnn] {
        width: 9px;
        height: 9px;
        filter: drop-shadow(0 0 1.5px var(--color)) drop-shadow(0 0 3px rgba(255,255,255,0.45));
    }

.firework-star-dome .particle.kind-core[b-nt3rotixnn] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 10px 4px var(--color), 0 0 22px 8px rgba(255, 255, 255, 0.65);
}
/* All flag particles drift with the wind. We use the CSS `translate:`
   property (independent from `transform:` used by shape-fly) so the
   two animations compose without overriding each other — same trick
   `gravity-droop` uses for the other firework shapes.

   Wind magnitude:
     • base 40px rightward for every particle (steady gust)
     • + 0..55px extra scaled by --gf  (per-particle gustiness)
     • + −10..+10px vertical jitter from (--gf − 0.5) (cloth ripple)

   Delay 1500ms ≈ when shape-fly has finished forming the flag, so the
   wind starts blowing only once the flag is fully visible. Same delay
   for every particle → no row-by-row staggering. */
.firework-flag250 .particle[b-nt3rotixnn] {
    animation: shape-fly-b-nt3rotixnn var(--speed, 4200ms) cubic-bezier(0.05, 0.9, 0.15, 1) forwards, wind-drift-b-nt3rotixnn 2600ms ease-out 1500ms forwards;
}

@keyframes wind-drift-b-nt3rotixnn {
    0% {
        translate: 0px 0px;
    }

    100% {
        translate: calc(40px + var(--gf, 0.5) * 55px) calc((var(--gf, 0.5) - 0.5) * 20px);
    }
}

/* Background stripe pixel. */
.firework-flag250 .particle.kind-stripe[b-nt3rotixnn] {
    width: 15px;
    height: 15px;
    background: var(--color);
    box-shadow: 0 0 4px 1px var(--color);
    opacity: 0.9;
}

/* Canton (blue field) pixel. */
.firework-flag250 .particle.kind-canton[b-nt3rotixnn] {
    width: 17px;
    height: 17px;
    background: var(--color);
    box-shadow: 0 0 6px 1px var(--color);
    opacity: 0.95;
}

/* Star — white 5-point on the canton. */
.firework-flag250 .particle.kind-star[b-nt3rotixnn] {
    width: 13px;
    height: 13px;
    background: var(--color);
    clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
    filter: drop-shadow(0 0 3px #FFFFFF);
    z-index: 1;
}

/* Digit pixel — starts as bright glowing gold-white "250", morphs
   mid-burst into the underlying flag color (var(--secondary), set
   by C# to the stripe/canton color at that cell), then fades with
   the rest of the flag particles. The morph runs alongside shape-fly:
     0–40%  : full bright gold glow
     40–65% : transition glow → flat flag color
     65–100%: holds at flag color until shape-fly fades opacity */
.firework-flag250 .particle.kind-digit[b-nt3rotixnn] {
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    z-index: 2;
    animation: shape-fly-b-nt3rotixnn var(--speed, 4200ms) cubic-bezier(0.05, 0.9, 0.15, 1) forwards, 
            digit-morph-b-nt3rotixnn var(--speed, 4200ms) ease-in-out forwards, 
            wind-drift-b-nt3rotixnn 2600ms ease-out 1500ms forwards;
}

@keyframes digit-morph-b-nt3rotixnn {
    0%, 40% {
        background: #FFFFFF;
        box-shadow: 0 0 7px 2px #FFD700, 0 0 16px 5px rgba(255, 215, 0, 0.55);
    }

    65%, 100% {
        background: var(--secondary);
        /* Match the neighbor (.kind-stripe / .kind-canton) shadow profile
           so the digit becomes visually indistinguishable from the flag. */
        box-shadow: 0 0 4px 1px var(--secondary), 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* ── Projectile trail ──────────────────────────────────────────────
   Thin glowing dot that rises from the bottom of the viewport up to
   the burst position. The tail effect is faked by animating `height`
   (taller in the middle of the flight, shrinking at the ends). */
.projectile[b-nt3rotixnn] {
    position: fixed;
    bottom: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--trail-color);
    pointer-events: none;
    z-index: 9998;                /* sits just below the burst */
    transform: translateX(-50%);
    box-shadow: 0 0 3px 1px var(--trail-color),
                0 0 6px 2px rgba(255,255,255,0.5);
    animation: launch-b-nt3rotixnn var(--travel-ms) cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
}

/* `bottom` rises from 0 to (100vh − target-y), placing the trail
   tip exactly at the burst origin when the C# code flips Arrived. */
@keyframes launch-b-nt3rotixnn {
    0%   { bottom: 0vh;  opacity: 1;   height: 2px;  }
    20%  { height: 12px; opacity: 1;   }   /* tail at full length */
    80%  { height: 7px;  opacity: 0.9; }   /* shortening as it slows */
    100% { bottom: calc(100vh - var(--target-y)); opacity: 0; height: 2px; }
}
/* ── "250" projectile — heavier, fatter, stronger glow ────────────
   Visually telegraphs that something big is incoming. The C# also
   slows the flight (TravelMs × 1.7) for added anticipation. */
.projectile.projectile-flag250[b-nt3rotixnn] {
    width: 6px;
    height: 6px;
    background: #FFD700;
    box-shadow: 0 0 6px 2px #FFD700, 0 0 14px 4px #FF6347, 0 0 24px 8px rgba(255, 255, 255, 0.45);
    animation: launch-heavy-b-nt3rotixnn var(--travel-ms) cubic-bezier(0.25, 0.55, 0.45, 1) forwards;
}

/* Same trajectory as `launch`, but with a longer, fatter tail and a
   smoother ease (no late acceleration) so it reads as "heavy". */
@keyframes launch-heavy-b-nt3rotixnn {
    0% {
        bottom: 0vh;
        opacity: 1;
        height: 6px;
        width: 6px;
    }

    25% {
        height: 22px;
        width: 6px;
        opacity: 1;
    }

    80% {
        height: 16px;
        width: 5px;
        opacity: 0.95;
    }

    100% {
        bottom: calc(100vh - var(--target-y));
        opacity: 0;
        height: 6px;
        width: 5px;
    }
}

@media (max-width: 819.98px) {
    .flag-banner[b-nt3rotixnn] {
        width: min(410px, calc(100vw - 96px)); /* keep room for burger */
        height: 50px;                           /* keep logo-like visual height */
        min-height: 50px;
        max-width: none;
        padding: 0 6px 0 0; /* less left inset, keeps slight right breathing room */
        flex: 0 1 auto;
        overflow: hidden;
    }

    .flag-banner[b-nt3rotixnn]::before {
        background-size: cover;                 /* fill full banner box */
        background-position: center;
        background-repeat: no-repeat;
    }

   /* .flag-text {
        font-size: clamp(1.05rem, 3.6vw, 1.25rem);
        transform: skewX(22deg);
        line-height: 1;
        letter-spacing: 0.015em;
    }*/
}
/* /Components/Shared/LoadingBall.razor.rz.scp.css */
/* loading-ball.css — styles for the LoadingBall overlay */

.loading-ball-overlay[b-ui25kr5y30] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    /* frosted dim of whatever is underneath */
    background: rgba(15, 17, 21, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.loading-ball-viewer[b-ui25kr5y30] {
    width: 240px;
    height: 240px;
    background: transparent;
    --poster-color: transparent;
    pointer-events: none; /* it's decoration, not a control */
}

.loading-ball-message[b-ui25kr5y30] {
    color: #e8e8ea;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    margin: 0;
    animation: loading-ball-pulse-b-ui25kr5y30 1.6s ease-in-out infinite;
}

@keyframes loading-ball-pulse-b-ui25kr5y30 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* hidden state: element stays mounted (model-viewer keeps its WebGL context
   and internal state alive), overlay just becomes invisible and untouchable */
.loading-ball-hidden[b-ui25kr5y30] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* /Components/Shared/LoadingMessage.razor.rz.scp.css */
/* LoadingMessage.razor.css — the "breathing" text, extracted from the
   ball overlay so it works under any loading visual. Color and font are
   inherited from the surrounding context, so it adapts to whatever
   container (dark overlay, light page, bb8 corner) it lands in. */

.loading-message[b-igp8hcw341] {
    color: inherit;
    font: inherit;
    font-size: 1.95rem;
    letter-spacing: 0.02em;
    margin: 0;
    text-align: center;
    animation: loading-message-breathe-b-igp8hcw341 2s ease-in-out infinite;
}

@keyframes loading-message-breathe-b-igp8hcw341 {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
/* /Components/Shared/LoadingScreen.razor.rz.scp.css */
.wasting-time-container[b-aw62w383cd] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wasting-time[b-aw62w383cd] {
    font-size: 4rem;
    font-weight: bold;
    color: red;
    letter-spacing: 0.1em;
}

.spinner[b-aw62w383cd] {
    display: inline-block;
    animation: slide-b-aw62w383cd 1.5s infinite;
}

.spinner:nth-child(2)[b-aw62w383cd] {
    animation-delay: 0.2s;
}

.spinner:nth-child(3)[b-aw62w383cd] {
    animation-delay: 0.4s;
}

.spinner:nth-child(4)[b-aw62w383cd] {
    animation-delay: 0.6s;
}

/* Frosted full-screen overlay so ANY loading visual (not just the ball)
   blurs the page behind it — same look LoadingBall already uses. */
.loading-overlay[b-aw62w383cd] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #e8e8ea; /* inherited by LoadingMessage so text stays readable on the dim */
    background: rgba(15, 17, 21, 0.55);
    backdrop-filter: blur(3px);
}

@keyframes slide-b-aw62w383cd {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(1.5rem);
        opacity: 0;
    }
}
/* /Components/Shared/ModalDialog.razor.rz.scp.css */
.modal-content[b-wj36y7nfcg] {
    opacity: 95%;
}
/* /Components/Shared/Snow.razor.rz.scp.css */
snowfall-container[b-c7afe13bjy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

@keyframes fall-b-c7afe13bjy {
    0% {
        transform: translateY(-10px) translateX(0) rotate(0deg);
    }

    100% {
        transform: translateY(100vh) translateX(100px) rotate(360deg);
    }
}

.snow[b-c7afe13bjy] {
    position: absolute;
    top: 0;
    background: white;
    border-radius: 50%;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

/* Make snow slightly more visible in dark mode */
[data-bs-theme="dark"] .snow[b-c7afe13bjy] {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95));
}
/* /Components/Shared/SoapBubbles.razor.rz.scp.css */
/* SoapBubbles.razor.css — collocated styles for SoapBubbles.razor
   Note: pointer-events is none so the layer never blocks your UI;
   pops are handled by a global hit-tested listener in the JS module. */

.soap-bubbles-canvas[b-1q434o9fwn] {
    pointer-events: none;
    display: block;
}

.soap-bubbles-absolute[b-1q434o9fwn] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.soap-bubbles-fixed[b-1q434o9fwn] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
}
/* /Components/Shared/Thanksgiving.razor.rz.scp.css */
.running-turkey[b-7ybkanz54x] {
    position: fixed;
    bottom: 0;
    /*right: -250px;*/
    right: 0;
    animation: run-b-7ybkanz54x 2s forwards;
    /*transition: transform 0.5s;*/
}

@keyframes run-b-7ybkanz54x {
    0% {
        transform: translateX(20vw);
    }

/*    50% {
        transform: translateX(-50vw);
    }*/
    100% {
        transform: translateX(-120vw);
    }
}
/* /Components/Shared/WinterVeil.razor.rz.scp.css */
.winter-veil-page[b-tzbxu2jkz0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at bottom, #C9EEF7 0%, #C9EEF7 100%);
    overflow: hidden;
    z-index: -1;
}

/* Dark mode variant - darker winter night sky */
[data-bs-theme="dark"] .winter-veil-page[b-tzbxu2jkz0] {
    background: radial-gradient(ellipse at bottom, #1a2332 0%, #0d1117 100%);
}